시멘틱 마크업
**이제는 태그자체에 의미가있는 시멘틱태그로 마크업구성
-
SEO 최적화에 유리.
-
웹 접근성에 효율적
-
유지보수의 용이성
클래스명 주는방법
의미없는 영역 구성
- group-flex
- column-left, column-right
- col-left ,col-right
- row-top , row-bottom
[그림1]
[그림2]
연관성없는 단순 디자인 묶음일 때
이름이 같고 위 아래 여백을 다르게 줘야한다면
-
group-flex1, group-flex2
-
inner1, inner2
-
group-row
등등으로 숫자를 증가시켜서 구성
단순 위아래 여백을위해서 만든 태그니까!
의미있는 영역 구성할 때
section-event [sc-event] — 섹션
group
event-area — 영역잡아줄때 [**섹션급이아니라면 area부터 시작]**
event-wrap — 작은단위
event-box — 더작은단위
리스트 클래스 작성
ul → event-list
li → event-item
a태그에 클래스 줄땐 목적에 맞게
link-목적 → 링크이동
btn-더보기 →링크이동(x) 스크립트작동
클래스 css 쓸때
4단계이상의 상속은 사실상 의미도없고 [예제1처럼 쓰게되면 추후자식요소 겹침이 일어날수있으니
클래스를 다주는 습관을 가지면 좋습니다!😆
[예제1]
.section-event ul{} [x]
.section-event ul li{} [x]
.section-event ul li a{} [x]
.section-event ul li a img{} [x]
[예제2]
.section-event .event-list{} [0]
.section-event .event-item{}[0]
.section-event .link-item{}[0]
.section-event .link-item img{}[0]
/*선택자를 보다 정확하고 간결하게 끝낼수있습니다!*/strong : 문장강조 게시글에서 제목급
em: 단어강조 게시글이라고하면 카테고리,분류급
p : 문장,단락,내용 유의미한 텍스트
span : 의미가 많이떨어지는 쩌리텍스트
*단독span → 쩌리텍스트
*a태그나 다른태그에 소속된 span → 디자인
- b태그와 strong 태그, em태그의 차이
<b>, <strong> 태그는 화면에서는 차이가 없어 보이지만 <strong> 태그는 중요한 텍스트라는 의미를 가지고 있습니다.
예를 들어 시각장애인을 위해 웹 문서를 소리 내 읽어주는 프로그램을 만든다고 해 봅시다.
<b> 태그 부분은 태그가 없는 부분과 똑같은 강세와 억양으로 읽지만, <strong> 태그에는 좀 더 강세를 두고 읽어야 하지요.
따라서 단순히 화면에 굵은 글씨로 표시하고 싶을 때는 <b> 태그를, 중요한 텍스트를 (굵은 글씨로) 표시하고 싶을 때는 <strong> 태그를 씁니다.