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