190411-TIL

Today I Learned

오늘 한 일

  • Web Cafe의 새소식 영역을 <section><article>을 이용해 Markup 했다.
새소식
[Web Cafe 새소식 영역]
디자인
[Markup Design]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- news section HTML Code -->
<section class="news">
<h2 class="news-heading">새소식</h2>
<article class="news-item">
<a href="#">
<h3 class="news-item-subject">W3C 사이트가 리뉴얼 되었습니다.</h3>
<time class="news-item-date" datetime="2019-04-11T11:19:37">2019.04.11</time>
<p class="news-item-brief">
디자인 및 다양한 view 환경을 고려하여 구성되어 있으며, 기존보다 최신 정보 및 개발자를 위한 기술 가이드도 찾기 쉽도록 구성되어 있습니다.
</p>
<figure class="news-item-thumbnail">
<img src="images/news.gif" alt="">
<figcaption>W3C 리뉴얼</figcaption>
</figure>
</a>
</article>
<a href="#" class="news-more icon-plus" target="_blank">더보기</a>
</section>

: 처음으로 <article><figure> tag를 써봤다.

<section> 내에 <article>을 nesting하는 것은 신문의 스포츠 섹션에 단일 기사를 싣는 것과 같다는 글을 읽어 이해가 쉬웠다.

Semantic HTML을 접하고 처음 <div> 범벅이던 코드를 만났을 때보다 훨씬 이해가 쉽고 직관적으로 구조를 짤 수 있게 된 기분이 든다.

HTML5부터 inline인 <a> 안에 block 요소등을 넣을 수 있게 됐다. 그러나 focus를 받을 때 다음과 같은 문제가 생길 수 있다.

'2019.04.11'이 inline인 time tag라서 그 부분이 들어간 모습

이는 <a>의 display를 block으로 바꿔주면 해결할 수 있다.

  • Image Replacing and Sprite

웹 기초 수업 때 instagram 등 Social Media의 로고로 실습을 했던 Image Sprite 기법을 다시 한 번 적용해 Web Cafe 예제를 진행했다.

Markup Design
[신규 이벤트 & 관련 사이트 영역]
Markup Design
[신규 이벤트 & 관련 사이트 Design]

Image Replacement

: image가 들어갈 영역의 크기를 지정해놓고, 해당 높이나 너비만큼 padding을 주고 overflow: hidden 처리를 한 후 image를 sprite로 처리한다.

Image Sprite

: server가 제공하는 image 최소화하기위해 한 image만 준비하고 background 위치 조정해서 보여주는 것

: 단점으로 <button>에 focus시 outline이 안 보이는 문제가 있었는데, ARIA를 사용해 role을 주고 button의 textnode를 삭제해 해결했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.btn-event{
position: absolute;
top: 0;
right: 0;
height: 18px;
padding: 2px;
}
.btn-event-prev, .btn-event-next {
width: 19px;
height: 18px;
padding: 0;
border: none;
background-image: url(images/back_forward.png);
background-position: 0 0;
}
.btn-event-next{
background-position: 100% 0;
}

하루를 마무리 하며

오늘 Semantic HTML과 tag의 효율성 등을 알아보다가 좋은 사이트를 알게 되었다. 많은 도움이 될 것으로 보여 기분이 좋다. 밑에 첨부한다.

HEXO 테마를 바꾸고 싶은데 마땅히 마음에 드는 게 없어 만들어볼까 생각중이다. 이번 주말을 활용해 알아봐야겠다.


😊 INTERNETING IS HARD 😊

190410-TIL

Today I Learned

오늘 한 일 🌷

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

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

    190410

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

    190410_

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

190409-TIL

Today I Learned

  • 오늘 배운 것

  • tab menu 마크업 했다.

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

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

190408-TIL

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

    Design practice(1)
    Design practice(2)
    Design practice(3)

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

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

  • 느낀 점

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

👼 More Semantic LINEpluscorp

190406~07-TIL

Today I Learned

  • 오늘 한 일

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

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

190405-TIL

Today I Learned

  • 오늘 한 일

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

  • fieldset에 대해 처음 알았다.

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

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

  • 느낀 점

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

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

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×