-
[Web Building] 3. Web CSS - 웹 페이지 제작 강좌Web/Web Building 2015. 6. 12. 14:35
Web Building - Adding Style (CSS)
1. What We Will Do
이번 장에서는:- 사이트를 위한 CSS 스타일 시트를 생성합니다.- 페이지의 스타일 시트 링크를 추가합니다.2. Create a CSS Style Sheet
demoweb 폴더에, site.css라는 이름의 파일을 생성합니다.CSS 파일에 아래 코드를 입력하세요:12345678910111213141516171819202122body {font-family: "Trebuchet MS", Verdana, sans-serif;font-size: 16px;background-color: dimgrey;color: #696969;padding: 3px;}#main {padding: 5px;padding-left: 15px;padding-right: 15px;background-color: #ffffff;border-radius: 0 0 5px 5px;}h1 {font-family: Georgia, serif;border-bottom: 3px solid #cc9900;color: #996600;font-size: 30px;}cs 3. Edit the Home Page
demoweb 폴더에서, index.html을 수정합니다.아래 내용처럼 수정해주세요.12345678910111213141516171819202122<!DOCTYPE html><html><head><title>Our Company</title><link href="site.css" rel="stylesheet"></head><body><div id="main"><h1>Welcome to Our Company</h1><h2>Web Site Main Ingredients</h2><p>Pages (HTML)</p><p>Style Sheets (CSS)</p><p>Computer Code (JavaScript)</p><p>Live Data (Files and Databases)</p></div></body></html>cs 위 홈 페이지는 이전 장의 홈 페이지에서의 복사 본입니다.스타일 시트를 링크 태그로 추가했고, <div id="main"> 요소를 통해 내용의 "섹션"을 정의 했습니다.4. Edit the About Page
작업을 완료하기 위해, about.html에도 똑같은 변화를 줍니다.1. 스타일 시트 link를 추가2. <div id="main"> 요소를 추가12345678910111213141516<!DOCTYPE html><html><head><title>About</title><link href="site.css" rel="stylesheet"></head><body><div id="main"><h1>About Us</h1><p>Lorem Ipsum Porem Lorem Ipsum Porem</p></div></body></html>cs * W3School을 통해 제작된 강좌입니다.
'Web > Web Building' 카테고리의 다른 글
[Web Building] 7. Web Http - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 6. Web Navigation - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 5. Web Data Page - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 4. Web JavaScript - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 2. Web HTML - 웹 페이지 제작 강좌 (0) 2015.06.12 [Web Building] 1. Web Building Tutorial - 웹 페이지 제작 강좌 (0) 2015.06.12
