0711 7회차

💡 클론코딩 ALL복습

 

• [ ] 섹션요소
• [x] 시멘틱태그
  • https://sangyeon96.gitbooks.io/do-it-html5-css3/content/Chapter10-2.html
• [ ] 더깊이
• 을 버리고 HTML5의 을 써야 하는 이유

---

HTML 레이아웃(Layout)

div

span

• 인라인 요소 그룹화

semantic

• 의미론적(sementic) 태그→ 스크린리더 네비게이션
  • header
    • 글로벌링크
    • 사이트 이름, 로고, 헤드라인, 검색, 목차
    • h 요소
  • nav
    • 메뉴(카테고리) 성격의 링크 모음
    • ul, li, a 요소
  • section
    • 같은 내용 모음
    • 독립적인 영역(헤더,푸터 o)
  • article
    • 독립적으로 구성된 글
    • 게시물, 포스트, 댓글, 위젯 contents
  • aside
    • 광고배너, 용어설명, 관련 상품, 보조메뉴, 사이드바
  • (main)
    • 단일 요소
    • 섹션콘텐츠 X
    • [ ] Flow content?
  • footer
    • 꼬리말 - 저작권, 연락처 정보
      • address
      • 맨위로가기 링크, 메인nav O
  • [ ] template 태그
• → 검색엔진이 섹션 중심으로 색인 활동 (효율성)

---

 

Google clone coding

클론 대상

Layout 설정

1. 영역 예측

nav

main - header

main - article1

main - article2

footer

 

2. 영역 확인

다 div였다..

 

 

Clone coding 착수 (2 version)

1. sementic

2. div

 

---

추가

CSS 가상선택자, 반응선택자, 링크 효과, 의사클래스

• a:link - 방문전
• a:visited - 방문후
• a:hover - 마우스 올려놨을 때
• a:active - 마우스 클릭</aside>