그룹 태그
<ul>/<li>: 순서x
<ol>/<li>: 순서o
시맨틱 태그 (Semantic Tag)
시맨틱 태그 : 의미 있는 태그
장점
- SEO ( Search Engine Optimization ) 최적화
- 높은 웹접근성
- 유지보수의 용이성 ( 가독성 향상 )
많이 사용하는 시맨틱 태그
header, nav, section, article. footer, aside결합자
클래스를 가지고 있는 li 태그에 적용
.outer li outer
바로 밑의 자손만 적용
.outer > li
두번째 밑 자손에 적용
.outer > li li
클래스 뒤에 적용
.starter ~ li starter
클래스 바로 다음 하나만 적용
.starter + li starter
첫번째 마지막 요소 가상 클래스, 정해져 있음 : sudo class
ol li:first-child
ol li:last-child
~가 아닌 요소 가상 클래스
.outer > li:not(:last-child)
ul중에서 outer클래스가 적용되지않은 ul태그 아래의 li태그에 적용
ul:not(.outer) li
~번째 요소 가상 클래스
ol li:nth-child(3)
마우스오버 가상 클래스
li:hover
Inline 태그
content 데이터가 있는 양까지
block 요소가 나오기전까지 한줄에 모든 inline요소 포함될 수 있다
width, height 무시
span은 margin , padding좌우
Block태그
전체 부모 너비 만큼
width, height 설정가능
상하좌우 margin, padding
Inline-Block태그
content만큼
width, heigth 설정가능
block 요소가 나오기전까지 한줄에 모든 inline요소 포함될 수 있다
margin, padding 모두 적용
