semantic markup의 필요성
- 어떤 맥락에서 markup를 할 수 있는지 알 수 있다.
semantic라는 의미자체로 위의 말을 알 수 있을것이다.
- 다른 개발자들의 접근성이 좋아진다 =>javascript로 크롤링이 용이하다??
HTML6에 추가된 태그들
section
콘텐츠의 맥락을 구분하는챕터 =>div와 거의 비슷하다. 하지만 section태그를 쓰면 헤딩태그를 무조건 붙여주어야한다. 주제가되는 그룹별로 섹션을 나눈다
article
독립적인 콘텐츠로서의 완결성을 갖춘 콘텐츠그 안에 내용자체가 하나하나 독립적 ex)뉴스, 블로그글,답글 등등 헤딩태그를 작성해야한다.
nav
주요 네비게이션을 마크업할때! 헤딩태그를 작성해야 한다.
aside
주로 사이드바나 광고배너에 사용한다.
header
페이지 전체에서, 혹은 섹셔닝 요소에서 쓴다. 보통 로고,제목등을 폭함하는 콘텐츠를 묶어줄때 사용한다.
footer
페이지 전체, 혹은 섹셔닝요소에서 보조적인 역할을 하는 아이들을 묶을때 사용한다.
왜 썼는지를 명확하게 설명할 수 있다면 잘한 마크업이다!!
올바른 마크업을 위한 8가지 팁
-
lang에 속성값을 꼭 적어주자!!!
-
img태그에 alt 속성 값을 꼭넣어라~!
-
section태그 등등을 쓰면 꼭!! 헤딩태그를 넣어주자
-
언제 HTML 태그를 쓰고, 언제 CSS background-image속성을 사용하나요?? ->콘텐츠로 가치가 있다면
<img>를 쓰고 그렇지 않으면 background-image를 쓰자! -
<ul>,<ol>안에는<li>외에 다른요소는 절대 넣지 마세요. -
문단을 나누는 목적으로
<br>쓰지말고<p>태그 두개를 쓰자. -
인라인 태그 안에 블록 태그 넣는거 아닙니다.. ex)
<span><p>왜그러는걸까?</p></span>«– 잘못됐어 하지만<a>안에는 block를 넣을수 있다~! -
인라인 스타일은 제발 쓰지 마세요!!!!!!!!! html를 cs코드로 더럽히지 말어라 ex)
<p style="font-size: 16px">안녕?</p>매맞을 코드야
CSS에 들어가보자
-
잘못돼도 에러를 띄우지 않아.
-
변수를 사용할 수 없다.
-
브라우져 호환성…없어…
-
CSS우선선택 순위 꼬이면 답없다.
-
CSS를 만만하게 보면 안된다!!
레이아웃, 기타 기교부리기, 브라우져 호환성
레이아웃만 잘잡아도 CSS절반 이상은 했지~!! 박스가 레이아웃에 기본이니 잘 잡고 갑시다~~~!!
