1. Ctrl-N 키로 새파일을 만들고 layout.css 라는 이름으로 저장해.
2. 내용에 다음과 같이 입력하고 저장해.
우선 각 div 블록이 구분될 수 있도록 색상으로 위치를 구분해 보는 간단한 것으로 시작하자구.
#header {
background-color: cyan;
height: 100px;
}
#contents {
background-color: yellow;
width: 600px;
}
#side {
background-color: green;
width: 200px;
}
#footer {
background: pink;
}
3. 이제 다시 웹브라우저에서 전에 작성한 lesson.html 파일을 오픈해.
이전에 실행한 웹브라우저를 아직 닫지 않았으면 다시 오픈할 필요 없이 웹브라우저에서 [F5] 새로고침 키를 치면 새로 화면을 갱신해.4. layout.css에서 본문 부분인 #contents 부분에 아래와 같이 속성을 추가해.
#contents {
background: yellow;
width: 600px;
float: right;
}
5. CSS 파일의 #side를 다음과 같이 수정하고 저장해.
#side {
background: green;
width: 200px;
height: 300px;
}
6. CSS 파일의 footer 부분을 다음과 같이 수정하고 저장한 뒤, 다시 확인해 봐.
#footer {
clear: both;
background: pink;
}
이제 그나마 좀 형태가 비슷해졌지?목차 | 제 목 | 조회 |
---|---|---|
0장 | 수업전 준비사항 - 에디터 ( Editor ) | 559 |
1장 | Html 과 CSS | 448 |
CSS 로 꾸미기 | 406 | |
Html 문서 안에 스타일 삽입하기1.2 | 378 | |
2장 | Div 와 구조설계 | 401 |
스타일시트 작성 ( layout.css ) | 309 | |
레이아웃 다듬기 | 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 |