---
title: "190410-TIL"
date: 2019-04-10
tags: ["HTML, CSS", "TIL"]
url: https://sub2n.github.io/2019/04/10/190410-TIL/
---

# 190410-TIL

## Today I Learned

#### 오늘 한 일 🌷

-   LINEpluscorp 마크업을 다시 한 html에 header CSS 를 입혔다.
    
-   언어선택창에 Tab, Click event를 적용했다.
    
    ![190410](https://user-images.githubusercontent.com/48080762/55868868-4a4e3a80-5bc0-11e9-93e5-8714a20f3f49.png)
    
    ```html
    <div class="language">
      <button class="btn-language">한국어</button>
      <ul class="language-list">
          <li class="language-item" tabindex="0"><a href="#" tabindex="-1">English</a></li>
          <li class="language-item" tabindex="0"><a href="#" tabindex="-1">日本語</a></li>
          <li class="language-item" tabindex="0"><a href="#" tabindex="-1">한국어</a></li>
          <li class="language-item" tabindex="0"><a href="#" tabindex="-1">中文(繁體)</a></li>
          <li class="language-item" tabindex="0"><a href="#" tabindex="-1">中文(简体)</a></li>
          <li class="language-item" tabindex="0"><a href="#" tabindex="-1">ภาษาไทย</a></li>
      </ul>
    </div>
    ```
    
    ```java
    var buttonLang = $('.btn-language');
    var listLang = $('.language-list');
       
    // language button click event
    buttonLang.on('click keyup', function(e){
        if(e.keyCode === 9){
            listLang.parent().addClass('language-act');
        }
        else{
            // tab 아니고 click 됐을 떄
            listLang.parent().toggleClass('language-act');
        }
    });
    
    // event capturing & bubbling
    // div.language 외의 영역 click시 닫기
    document.addEventListener("click", function(e) {
        console.log(e);
        if (!e.path.includes(document.querySelector(".language"))) {
            listLang.parent().removeClass('language-act');
        }
    });
    
    // div.language 외의 영역에 tab key 눌리면 닫기
    document.addEventListener("keyup", function(e){
        if(e.keyCode === 9){
            if (!e.path.includes(document.querySelector(".language"))) {
                listLang.parent().removeClass('language-act');
            }
        }
    });
    ```
    
-   Header에 mouseenter, mouseleave event를 적용했다.
    
    flex를 쓰지 않고 해보고 싶었는데 결국 flex를 적용한 채 오늘은 마무리했다.
    
    ![190410_](https://user-images.githubusercontent.com/48080762/55868869-4a4e3a80-5bc0-11e9-9171-7e6bb4ef9529.png)
    

```html
<nav class="navigation">
  <ul class="menu">
      <li class="menu-item menu-item1 menu-act">
          <a href="#">회사소개</a>
          <ul class="sub-menu submenu1">
              <li class="sub-menu-item"><a href="#">회사소개</a></li>
              <li class="sub-menu-item">
                  <a href="#">LINE's Mission</a>
                  <ul class="mission-menu">
                      <li class="mission-menu-item"><a href="#">MISSION</a></li>
                      <li class="mission-menu-item"><a href="#">LINE STYLE</a></li>
                      <li class="mission-menu-item"><a href="#">LINE CODE</a></li>
                  </ul>
              </li>
              <li class="sub-menu-item"><a href="#">LINE그룹 행동 규범</a></li>
              <li class="sub-menu-item"><a href="#">Contact</a></li>
              <li class="sub-menu-item"><a href="#">LINE 로고 사용 가이드</a></li>
          </ul>
      </li>
      <li class="menu-item">
          <a href="#">사업</a>
          <ul class="sub-menu submenu2">
              <li class="sub-menu-item"><a href="#">서비스</a></li>
              <li class="sub-menu-item"><a href="#">서비스사업</a></li>
          </ul>
      </li>
      <li class="menu-item">
          <a href="#">홍보</a>
          <ul class="sub-menu submenu3">
              <li class="sub-menu-item"><a href="#">Global News</a></li>
              <li class="sub-menu-item"><a href="#">기사 및 보도자료</a></li>
              <li class="sub-menu-item"><a href="#">Blog & SNS</a></li>
          </ul>
      </li>
      <li class="menu-item">
          <a href="#">채용</a>
          <ul class="sub-menu submenu4">
              <li class="sub-menu-item"><a href="#">일과 사람</a></li>
              <li class="sub-menu-item"><a href="#">채용공고</a></li>
          </ul>
      </li>
      <li class="sitemap">
          <a href="#">SITEMAP</a>
      </li>
  </ul>
</nav>
```

```java
var menuItem = $('.menu-item');

menuItem.on('mouseenter', function(){
    menuItem.removeClass('menu-act');
    $(this).addClass('menu-act');
});

menuItem.on('mouseleave', function(){
    $(this).removeClass('menu-act');
});
```

#### 새로 배운 것

-   Event Capturing과 Bubbling으로 문제를 해결했다. 원리는 꼭 정리해놔야겠다!
    
-   한 기능을 구현하면 다른 기능이 문제가 생긴다. 아직 HTML과 CSS에 대한 이해가 부족한 것 같다.
    

---

[🌷 More semantic LINE git](https://github.com/Sub2n/homework/tree/master/line_semantic)