html 시멘틱 태그 설명 및 연습
이영역은 div로 활용
아이디는 header가 있는데. 머릿말에 해당이 되는 상단에 나오는 영역이다.
시멘틱ㅇ태그를 사용하지는 않았지만 div를 구분하는데 이름을 header라는 거로 붙여줌. div의 이름이 헤더가 아니라. 문서상 제일 타이틀 부분에 해당되는 거는 뭐로 붙이겠다?
헤더라는 이름으로 붙이겠다.
의미적으로 그냥 그 태그를 붙여 주겠다고 하는 것들이 시멘틱 태그에 해당이 됨
시멘틱, 메일, 카페, 블로그, 쇼핑 네비게이션 어느 서비스로 이동하라는 알려주는 네비게이션 역할을 함.
쇼트컷에리어라는 이름이 붙어있어요.
<nac> 이렇게 안내들을 나타내주는 네비게이션에 해당하는 영역이다.
본문이 나오는 이영역은 여기에 가장 본문에 해당하는 메인 영역이니까
main으로 붙여준다.
커다란 영역안에서도 배너 광고가 나오는 부분 쇼핑에 관련된 영역 등등 이러한 영역안에 배너가 나오고 ㅈ엔터가 선택이 되어있기 때문에, 추천에 관련된 영역이 나오고 이렇게 구분이 되어있다.
이러 메인 안에서 영역을 나누는 것을 여기서 section으로 나누어준다.
제인 끝나는 영역은 <footer>라고 넣어준다.
이게 시멘틱 태그에 해당이 된다.
이게 좀 더 직관적으로 태그를 표현하는 거라고 생각하면 됨.
div라는 거로도 다 이렇게 구분해서 사용하기 때문에 시멘틱 태그를 사용해야 된다는 건 아니다.
시멘틱 태그를 사용했을 때 장점이 있음.
브라우저가 HTML의 이런 소스만 딱 보더라도 우리 아까 이렇게 해서 diiv로 div id='main'> <div id="header"> 영역이 나누어 쓸거야 라는 것 보다는 header라는 태그만 가지고 아 이게 어느 영역에 속하는구나 이렇게 판단하기 더 수월해짐.
이건 웹 접근성과도 관련이 됨.
이렇게 시멘틱태그를 직관적으로 사용하게 되면 난독기라든가 여러가지 보조도구들이 있음
이런 도구들이 문서의 구조를 빠르게 이해를 함.
그런 장점이 있음 (조금 더 정확한 내용을 전달할 수 있게 됨)
dic의 id header를 넣어주는 거 보단 아이디가 메인이라고 들어간다고 해가지고 브러우저가 이렇게 헤더가 메인이 있고 이렇게 생각을 함
footer가 있다 누구조를 나누는거 아님
헤더 메인 footer다 구조를 파악하는게 굉장히 수월해지고 , 여러가지 보조 기기를 사용했을 때 그 사이트를 제대로 이해하고 정확한 정보를 제공할 수 있다는 것.
우리가 검색을 할 때 웹사이트에서 검색을 할 떄 본문 냉ㅇ을 검색하느냐 본문 내요에서 검색을 하느냐
이러한 지정을 할 수 있음 빠르게검색 할 수 있다는 장점도 가지고 있다.
이런것들이 시멘틱 태그에 속한다고 보면 됨.
메인안에 section이라는 것을 이용할 수 있고
네비게이션을 나타내주는 영역을 구분
section은 contents영역을 담는 거라고 하면 컨텐츠를 담을 대는 아티클 <article>이라는 게 있음
신문이나 잡지의 기사처럼 실제로 웹에서 봉주는 내용, 사전적인 의미는 신문이나 잡지의 기사 이런 거로 생각하면됨
독립된 컨텐츠를 넣을 떄는 아티클 태그를 이용해서 작업을 해주는데 좋다는거
아티클내의 섹션은 들어갈 수 있음. (아티클 : 독립된 콘첸트를 작성할 때는 아티클을 작성)
(섹션 같은 경우에는 컨텐츠 영역 (콘텐츠를 나눠서 앙ㅇ) 섹션 대신에 div라는 거를 사용하면 됨) (섹션 대신 디브를 쓰는 경우도 많음 왜냐면 스타일 때문에)
<header>
<nav> 네비게인션
<main> <ㅇdiv id= "main">
<section> 컨텐츠 영역 div: 스타일
<article> 독립된 컨텐츠
<aside> 오른쪽이나 왼쪽에 사이드바가 나옴 이게 해당 사이드바 영역을 나타내는거
<footer> 맨 밑에 영역
바디 안에 헤더가 있고 네비게이션 영역이 들어가고 메인 , footer가 들어가는 구분을 하고 싶다고 하면 제일 처음에 헤더가 들어가면 됨.
대체로 헤더 영역안에는 예를 들어서 네이버 상단 왼쪽 사이트가 리뉴얼 돼서 대체로 왼쪽 상단에 해당되는 로고가 들어가는 경우가 굉장히 많음
검색창에도 네이버 들어가는 것 처럼 나는 헤더 영역안에 로고가 들어가는 영역을 만들어 주고 싶다고 하면
디브로 나눠 주면 됨
헤더가 들어가는데 디브라는 거로 로고가 들어가는 녕역을 만들어 줄거야 라고 함.
메인에 메뉴가 들어가는거는 <nav>로 하는 거 (네비게이션)
상단에 헤더라는 시멘틱태그를 사용함.
ul , li를 사용하면서 메뉴가 들어가게 함
헤더안에 지금은 하나만 있지만 여러개가 나올 수 있다. 디브는 로고가 들어가는 영역표시 > 이럴 때 붙이는게 id class 두개의 속성을 가지고 지정할 수 있는데 id는 고유한 이름임
질문 아이디랑 클래스 차이가 뭔가요 128페이지 참고 전역 속성을 확인할 수 있음
