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 ) | 520 |
1장 | Html 과 CSS | 415 |
CSS 로 꾸미기 | 386 | |
Html 문서 안에 스타일 삽입하기1.2 | 361 | |
2장 | Div 와 구조설계 | 379 |
스타일시트 작성 ( layout.css ) | 289 | |
레이아웃 다듬기 | 270 | |
3장 | 인라인(InLine) 태그 -strong, em | 316 |
리스트 태그 - ul, ol, li | 301 | |
4장 | 스팬(Span)과 클래스(Class) | 309 |
5장 | 링크와 이미지 | 252 |
이미지 | 327 | |
6장 | 테이블 ( Table ) | 389 |
테이블로 레이아웃 만들기 | 265 | |
7장. | 폼 (Form) | 298 |
8장. | 웹표준 이야기 | 272 |
웹표준이 중요한 이유 | 248 | |
9장 | Html5 로 가기 | 259 |
문자 인코딩 | 336 |