2018년 11월 05일 박성진 parks@kangwon.ac.kr Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진 parks@kangwon.ac.kr
전형적인 웹 페이지 현대의 모든 웹 페이지는 고정적인 영역으로 분리 국내 포털의 메인 사이트도 다음 그림 처럼 영역이 구분 DBLab Template by Suan
HTML5 Semantics Semantics = “의미론적인” 의미있는 요소들 <header> 헤더를 의미 <nav> 내비게이션을 의미 <aside> 사이드에 위치하는 공간을 의미 <section> 여러 중심 내용을 감싸는 공간을 의미 <article> 글자가 많이 들어가는 부분을 의미 <footer> 푸터를 의미 DBLab Template by Suan
초기화 코드 모든 HTML 페이지의 첫번째 스타일시트는 초기화코드로 시작 초기화 코드는 모든 웹 브라우저에서 동일한 출력을 만드는 데 사용 DBLab Template by Suan
예제 1. 헤더 구조 작성 헤더 구조 #main_header는 다음과 같이 구성 <body> 에 다음과 같이 <header> 생성 #main_header는 다음과 같이 구성 DBLab Template by Suan
예제 1. 헤더 구조 작성 스타일을 적용 현재 코드는 다음 화면을 출력 DBLab Template by Suan
DBLab Template by Suan
웹 폰트 웹 폰트는 사용자가 웹 페이지에 접속하는 순간 폰트를 자동으로 내려 받고 해당 웹 페이지에서 사용할 수 있게 만들어주는 기능 https://fonts.google.com/ 접속 DBLab Template by Suan
웹 폰트 한글폰트 DBLab Template by Suan
DBLab Template by Suan
DBLab Template by Suan
DBLab Template by Suan
DBLab Template by Suan
예제 2. 수평 메뉴 헤더 내부의 수평 메뉴에는 다음과 같은 스타일로 수평 정렬 DBLab Template by Suan
예제 2. 수평 메뉴 DBLab Template by Suan
DBLab Template by Suan
예제 3. 콘텐츠 구성 <body> 에 다음과 같이 #content 태 그를 추가 #content 태그 내부에 section 태그 와 aside 태그를 추가 DBLab Template by Suan
예제 3. 콘텐츠 구성 DBLab Template by Suan
예제 4. 본문 구성 #main_section 태그 내부에 다음과 같이 입력 다음 스타일을 적용 DBLab Template by Suan
예제 4. 본문 구성 #main_section 태그 내부에 다음과 같이 입력 다음 스타일을 적용 DBLab Template by Suan
DBLab Template by Suan