시맨틱(Semantic : 의미) 태그

정의

• 태그 이름만으로 어느정도 어떤 역할을 하는지 알 수 있고 웹 접근성(SEO : Search Engine Optimization)을 향상시키는 태그

종류
header : 문서의 제목, 머리말 영역
footer : 문서의 하단 부분, 꼬리말, 정보 작성 영역
nav : 나침반 역할(다른페이지, 사이트 이동)의 링크 작성 영역
main : 한 페이지에 한 번만 사용해야 하며, 문서의 핵심 콘텐츠를 감싸는 역할
section : 구역 구문을 위한 영역
article : 본문과 독립된 콘텐츠를 작성하는 영역( 블로그 포스트, 뉴스 기사, 사용자 리뷰 등 독립적으로 배포할 수 있는 콘텐츠를 감쌀 때 )
aside : 사이드바(보통 양쪽), 광고 영역

미디어 쿼리(Media Query)

정의

• 화면 크기, 해상도, 기기 종류 등에 따라 다른 스타일을 적용할 수 있게 해주는 기능
• 반응형 웹(responsive web)의 핵심 도구
• @media로 선언

조건

• max-width : 특정 너비 이하일 때 적용
• min-width : 특정 너비 이상일 때 적용
• orientation: portrait : 세로 모드일 때
• orientation: landscape : 가로 모드일 때
• hover: hover : 마우스 올릴 수 있는 장치 (PC 등)
• pointer: coarse : 손가락 기반 터치 (모바일 등)

형태

@media all and (min-width : 768px) and (max-width:1023px) {
	
}