[정보처리기사] HTML5의 시멘틱 구조 / CSS 란?

✨ HTML5의 시멘틱 구조

 

1) Header : 헤더 영역을 지정하고 주로 로고나 회사명, 사이트 맵 위치

2) Navigation : 본문의 주요 네비게이션(메인 메뉴) 영역을 지정

3) Section : 해당 페이지의 콘텐츠 영역을 지정할 때 사용

4) Article : 독립적인 콘텐츠 항목에 대한 영역을 지정할 때 사용

5) Aside : 본문 내용 이외에 표현하고자 하는 기타 내용이 있을 경우에 영역을 지정할 때 or 서브 메뉴

6) Footer : 본문 내용의 아래에 위치하며 주로 개인정보 보호 정책, 회사 주소 등을 작성

 

✨ CSS

DFDSFDDFDFFDF

1) 정의 : 웹 페이지 전체의 일관성을 유지할 수 있도록 스타일(색상, 글꼴, 크기 등)을 미리 저장해 둔 시트를 의미

2) 특징

- 브라우저와 관계없이 적용이 가능

- 자바 스크립트를 사용하지 않고도 동적인 페이지 제작 가능

- 다양한 서식(글자크기, 줄 간격, 여백 등)을 쉽게 설정할 수 있다.

3) CSS 적용 방법

- 범용 선택자 : 서식을 웹 페이지의 일부분만 적용되는 것이 아니라 전체를 대상으로 적용

- 태그 선택자 : 특정한 태그에 서식 적용

- 아이디 선택자 : ID로 여려개의 태그를 그룹화하여 서식 적용

( 현재 페이지에서 간단하게 서식 적용할 때 사용)

- 클래스 선택자 : 클래스로 여러 개의 태그를 그룹화하여 서식 적용

(여러 페이지에서 자주 사용하는 서식을 미리 만들어줌)