1. Ctrl-N 키로 새문서를 만들어 lesson.html 이름으로 저장한 후 아래 내용을 입력해.
모든 웹문서의 기본 형태이므로 항상 여기서 시작해.
<html>
<head>
</head>
<body>
</body>
</html>
2. 위의 기본구조에 우리 웹페이지의 구조를 넣는 거야. 다음과 같이 수정해.
<html>
<head>
</head>
<body>
<div id="header">
여기는 헤더 입니다.
</div>
<div id="contents">
여기는 본문 입니다.
보통 본문에는 웹페이지의 주된 내용들이 들어가는 곳이므로
내용을 좀 길게 쓰세요. 그래야 공부할 때 이해하기 편하거든요.
</div>
<div id="side">
여기는 사이드 입니다.
</div>
<div id="footer">
여기는 풋터 입니다.
</div>
</body>
</html>
4. 탐색기에서 lesson.html 파일을 크롬의 브라우저 화면으로 끌어다 갖다 놔.
아래 그림처럼 입력한 내용이 브라우저에 표시될 거야.5. 소스의 <head>~</head> 사이에 다음과 같은 내용을 삽입하고 저장해.
<head>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
목차 | 제 목 | 조회 |
---|---|---|
0장 | 수업전 준비사항 - 에디터 ( Editor ) | 559 |
1장 | Html 과 CSS | 448 |
CSS 로 꾸미기 | 406 | |
Html 문서 안에 스타일 삽입하기1.2 | 378 | |
2장 | Div 와 구조설계 | 401 |
스타일시트 작성 ( layout.css ) | 308 | |
레이아웃 다듬기 | 290 | |
3장 | 인라인(InLine) 태그 -strong, em | 337 |
리스트 태그 - ul, ol, li | 317 | |
4장 | 스팬(Span)과 클래스(Class) | 327 |
5장 | 링크와 이미지 | 275 |
이미지 | 344 | |
6장 | 테이블 ( Table ) | 418 |
테이블로 레이아웃 만들기 | 279 | |
7장. | 폼 (Form) | 313 |
8장. | 웹표준 이야기 | 293 |
웹표준이 중요한 이유 | 267 | |
9장 | Html5 로 가기 | 280 |
문자 인코딩 | 354 |