K_blueprint
CSS3으로 웹 페이지 꾸미기 본문
목 차
1. CSS3 스타일 시트 개요
2. CSS3 스타일 시트 만들기
1. CSS3 스타일 시트 개요
- CSS3(Cascading Style Sheet)란, HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이며, CSS로 작성된 코드를 "스타일 시트(style sheet)"라고 한다.
그럼 간단한 스타일 HTML 코드에 <style> 시트를 활용한 꾸미기를 해보자
<!DOCTYPE html>
<html lang="en">
<head>
<title>스타일을 가진 웹 페이지</title>
<style>
body {background-color: mistyrose;}
h3 {color: purple;}
hr {border : 5px solid yellowgreen;}
span {color : blue; font-size: 20px;}
</style>
</head>
<body>
<h3>h3 스타일의 영향을 받습니다!</h3>
<hr>
<p>저는 <span>웹 프로그래밍</span>에 관심이 많습니다.</p>
</body>
</html>
위의 코드를 실행하게 되면 아래와 같은 브라우저가 출력되게 된다.
- 위의 소스코드의 <style> 시트 내용을 살펴보자
- body {background-color: mistyrose;} : <body> 태그의 배경색을 'mistyrose'로 지정
- h3 {color: purple;} : <h3> 태그의 내용 색을 'purple'로 지정
- hr {border : 5px solid yellowgreen;} : <hr> 라인의 색을 'yellowgreen'으로, 두께를 5px로 지정
- span {color : blue; font-size : 20px;} : <span> 태그 내용의 색을 'blue'로, 글자 크기를 '20px'로 지정
이렇게 HTML소스코드 내에서 <head> 내에 <style> 태그를 지정해 줌으로써
보다 간결하게 코드를 작성하고 꾸밀 수 있다.
(+Plus)
+ <style> 시트 내에서 '주석문'은 "/* */"로 묶는다.
+ <style> 시트에 있는 값들은 모두 '대소문자 구분을 하지 않는다.'
2. CSS3 스타일 시트 만들기
- CSS3의 스타일 시트를 작성하는 방법에는 3가지 방법이 있다.
- <style></style> 태그 안에 스타일 시트를 작성
- style 속성에 개별로 스타일 시트를 작성
- 스타일 시트를 별도 파일(.CSS)로 작성하고 '<link>' 혹은 '@import'로 불러와 사용
- 여기서 3번의 '별도 파일을 통해 스타일 시트를 불러오는 방법'을 직접 실습해보려 한다.
- 해당 방법은 동일한 CSS스타일을 웹 페이지마다 증복하여 작성하는 불필요한 작업을 방지하고, 웹 사이트 전체에 일관성을 줄 수 있다는 장점이 있다.
(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<title>link 태그로 스타일 파일 불러오기</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<h3>h3태그의 부분입니다.</h3>
<hr>
<p>이곳은 p태그의 영역입니다.</p>
</body>
</html>
(CSS)
body {background-color: linen; color : blueviolet; margin-left: 30px; margin-right: 30px;}
h3 {text-align: center; color: darkred;}
(출력결과)
- 위의 방법처럼 직접 정의한 'style.css'파일을 <link> 태그를 통해 불러온 후 HTML코드에 적용시키는 방법이 있다.
- 반면 @import문을 이용하여 .css 스타일 시트 파일을 HTML 페이지에 불러오는 방법도 있는데 이는 아래와 같은 코드로 불러올 수 있다.
(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<title>link 태그로 스타일 파일 불러오기</title>
<style>
@import url(style.css);
</style>
</head>
<body>
<h3>h3태그의 부분입니다.</h3>
<hr>
<p>이곳은 p태그의 영역입니다.</p>
</body>
</html>
- 이렇게 <head> 태그 내에서 <style> 태그의 '@import'를 통해 파일을 불러올 수도 있으며, 결과는 바로 위의 출력 결과와 동일하다.
(+Plus)
+ <style> 시트는 반드시 <head> 태그 내에서만 작성이 가능하다.
+ <style> 태그는 여러 번 작성이 가능하며, 스타일 시트들이 합쳐서 적용된다.
+ <style> 태그에 작성된 스타일 시트는 웹 페이지 전체에 적용된다.
+ @import문은 <style> 시트 안에서만 사용되며 여러 번 사용할 수 있다.
★ 해당 게시글은 "HTML5+CSS3+Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다. ★
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML5로 색 꾸미기 (0) | 2024.11.18 |
|---|---|
| CSS3 규칙과 셀렉터 (0) | 2024.11.15 |
| HTML5로 여러가지 입력 만들기 (3) | 2024.11.11 |
| 버튼, 체크박스, 콤보박스 만들기 (3) | 2024.11.10 |
| HTML5로 웹 폼 만들기 (7) | 2024.11.09 |
