Responsive Web (1)
190411-TIL
Today I Learned
오늘 한 일
- Web Cafe의 새소식 영역을
<section>과<article>을 이용해 Markup 했다.
1 | <!-- news section HTML Code --> |
: 처음으로 <article>과 <figure> tag를 써봤다.
<section> 내에 <article>을 nesting하는 것은 신문의 스포츠 섹션에 단일 기사를 싣는 것과 같다는 글을 읽어 이해가 쉬웠다.
Semantic HTML을 접하고 처음 <div> 범벅이던 코드를 만났을 때보다 훨씬 이해가 쉽고 직관적으로 구조를 짤 수 있게 된 기분이 든다.
HTML5부터 inline인
<a>안에 block 요소등을 넣을 수 있게 됐다. 그러나 focus를 받을 때 다음과 같은 문제가 생길 수 있다.
이는 <a>의 display를 block으로 바꿔주면 해결할 수 있다.
- Image Replacing and Sprite
웹 기초 수업 때 instagram 등 Social Media의 로고로 실습을 했던 Image Sprite 기법을 다시 한 번 적용해 Web Cafe 예제를 진행했다.
Image Replacement
: image가 들어갈 영역의 크기를 지정해놓고, 해당 높이나 너비만큼 padding을 주고 overflow: hidden 처리를 한 후 image를 sprite로 처리한다.
Image Sprite
: server가 제공하는 image 최소화하기위해 한 image만 준비하고 background 위치 조정해서 보여주는 것
: 단점으로 <button>에 focus시 outline이 안 보이는 문제가 있었는데, ARIA를 사용해 role을 주고 button의 textnode를 삭제해 해결했다.
1 | .btn-event{ |
하루를 마무리 하며
오늘 Semantic HTML과 tag의 효율성 등을 알아보다가 좋은 사이트를 알게 되었다. 많은 도움이 될 것으로 보여 기분이 좋다. 밑에 첨부한다.
HEXO 테마를 바꾸고 싶은데 마땅히 마음에 드는 게 없어 만들어볼까 생각중이다. 이번 주말을 활용해 알아봐야겠다.
190410-TIL
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
31var 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 | <nav class="navigation"> |
1 | var menuItem = $('.menu-item'); |
새로 배운 것
Event Capturing과 Bubbling으로 문제를 해결했다. 원리는 꼭 정리해놔야겠다!
한 기능을 구현하면 다른 기능이 문제가 생긴다. 아직 HTML과 CSS에 대한 이해가 부족한 것 같다.
190402-TIL
Today I Learned
CSS의 기초 문법, 상속과 겹침 그리고 우선순위에 대해 배웠다.
- 상속(Inheritance)
: 부모에게 적용한 style이 자식에게 적용되는 것 - 영역에 관한 속성이 아닌 꾸미기 속성 등이 상속된다.
- 상속(Inheritance)
- 겹침(Cascading)
: 하나의 element에 여러 style이 겹쳐질 수 있다. - 우선순위가 같을 경우 가장 밑의 style이 적용된다.
- 겹침(Cascading)
- 우선순위
- 각각 selector마다 가진 우선순위가 다름
- 정적블로그 특강 : jekyll을 이용해 블로그 만들기
- 나는 지금 hexo를 이용해서 블로깅을 하고 있는데 jekyll에 대해서도 배웠다.
의미있는 태그. Semantic Markup이 중요함을 점점 더 느낀다.
Web Accessibility를 고려하면 간단한 화면 배치도 간단하지 않다. Markup은 공부할수록 깊이있는 언어같다. 객체지향언어에서 class를 의미있고 효율적으로 짜는 데에도 관심이 많았기 때문에 이 부분을 잘 살려서 코딩을 하고 싶다.
hexo를 계속 이용하기로 했다. 익숙하기도 하고, 나중에 내가 테마를 조금씩 수정하거나 만들고 싶다.
