190410-TIL

2019년에 Hexo 블로그에 쓴 글을 옮겨 왔습니다. 당시 이해를 그대로 두었습니다.

Today I Learned

오늘 한 일 🌷

LINEpluscorp 마크업을 다시 한 html에 header CSS 를 입혔다.

언어선택창에 Tab, Click event를 적용했다.

190410

<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>

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를 적용한 채 오늘은 마무리했다.

<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>

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