Today I Learned

오늘 한 일 🌷

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

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

  

  1 2 3 4 5 6 7 8 9 10 11

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

1
2
3
4
5
6
7
8
9
10

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

Today I Learned

• 오늘 배운 것

• tab menu 마크업 했다.

• float, absolute, flex를 이용해서 여러가지로 마크업할 수 있다는 것을 알았다.

• jQuery로 메뉴의 mouseover, focusin 등 event를 입혔다.

Today I Learned

• 오늘 한 일

• ⭐️ <dl> tag에 대해서 배웠다.

  • <dl> : Defines a definition list.

  • <dt> : Defines a term/name in a description list.

  • <dd> : Is used to describe a term/name in a description list.

    Ø 원래 <dt>와<dd> 를 <div>로 묶으면 안 됐었는데 허용됨

    : 다만 맞는 <dt>를 설명하는 모든 <dd> 함께 묶어야 함.

• ⭐️ Web Cafe 예제 중 배너와 검색영역을 Markup, 디자인 설계 했다.

  > 웹 관련 용어 배너 디자인 : float 사용
  

  > Logical order and Markup design

  
  
  

• ⭐️ LINEcorp 페이지 Markup을 처음부터 다시 했다.

  디자인 관점이 아닌 컨텐츠 관점으로 논리적인 Markup 순서를 정하고 html과 CSS를 작성했다.

• 느낀 점

• 경험이 부족해서인지 아직 content에 맞게 semantic한 tag를 생각해내는 게 어렵다.

👼 More Semantic LINEpluscorp

Today I Learned

• 오늘 한 일

• 음수마진에 대해서 배웠다.

• CSS grid framework에 대해서 배웠다.

Today I Learned

• 오늘 한 일

• 로그인 메뉴를 구성하는 form tag와 input의 여러 속성에 대해서 배웠다.

• fieldset에 대해 처음 알았다.

• 접근성을 위해 label 과 input 을 bind 해야한다는 것을 알았다.

• box-shadow, section에 heading하는 법을 알았다.

• 느낀 점

• 오늘은 실습 위주의 수업이라 재미있었다.

• 하루종일 너무 많은 정보를 들어서 어지러운데 다 내 걸로 만들어야겠다!

• Today I Learned

• 오늘 한 일

• 주요 메뉴인 <nav>요소의 main menu를 마크업하고 CSS 디자인을 했다.

• 웹 접근성을 고려해서 submenu를 따로 ul로 분리하지 않고 menu-item인 li 안에 넣는 게 어려웠는데, 해결을 했다.

• HTML5의 flex model을 공부했다. container와 item에 따로 주던 flex 속성 값들이 이해되지 않았는데 flex-direction과 justify-content, align-item과 align-content가 어떻게 다른지 정리했다.

• 어제 만들었던 LINEplus 홈페이지를 조금 수정했다. 접근성을 높이기 위해서 몇 몇 요소의 위치를 바꾸고, CSS로 배치를 했다.

▶ <option> 안에는 <a>가 올 수 없다! Interactive요소 안에는 interactive 요소가 올 수 없다. a 안에 button 등

▶ W3 문서를 확인해보니 <h>안에 <a>가 오는 게 아니고 그 반대가 맞는 것 같다.

• CSS Animation에 대해서 배웠다. timing-function을 이용한 animation이 흥미로웠다. 이번 주말에 나도 한 번 만들어보고 싶다.

▶ 참고 링크 : steps를 이용한 애니메이션

• 느낀 점

• HTML/CSS 수업을 3일 들었는데 지난 한 달간 궁금하던 점이 많이 해결되었다.

• 웹 표준을 준수하고 접근성을 높이기 위해서 고려해야할 게 한두가지가 아니다. 처음 배우는 HTML을 기초부터 제대로 하는 것 같아 좋다.

• 시간이 빠르게 가는 것 같아 아깝다. 요즘은 하루하루가 바쁜만큼 더 많이 알고 싶다는 욕심이 생긴다.

🐸 Modified Lineplus site 🐸