사자자리
[웹기초] 생활코딩 CSS 1 ~ CSS 9 본문
웹페이지를 아름답게 만드는 방법에는 크게 2가지가 있다.
1. 쉽지만 한계가 있는 방법: HTML에 디자인을 담당하는 새 태그를 만드는 것
- <font color="green"> </<font>: 현재는 잘 사용하지 않는다. 보고 잊어버려도 된다.
<!doctype html>
<html>
<head>
<title>Regulus Black</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="black.html"><font color="green">The Noble and Most Ancient House of BLACK</font></a></h1>
<ol>
<li><a href="walburga.html"><font color="green">Walburga Black</font></a></li>
<li><a href="orion.html"><font color="green">Orion Black</font></a></li>
<li><a href="sirius.html"><font color="green">Sirius Black</font></a></li>
<li><a href="regulus.html"><font color="green">Regulus Arcturus Black</font></a></li>
</ol>
<body>
</html>
그러나 <font>는 정보로서의 가치를 담고 있지 않다.
2. 어렵지만 근본적인 방법: CSS라는 새로운 언어를 만드는 것
- HTML과 CSS는 완전히 다른 언어이기 때문에 웹페이지로 하여금 어느 부분이 CSS인지를 알려주어야 한다. 이때 사용되는 것이 <style> </style> 태그다.
- a { property: value; } : 모든 a 태그에 대하여(선택자) property를 value로 한다(선언).
<!doctype html>
<html>
<head>
<title>Regulus Black</title>
<meta charset="utf-8">
<style>
a {color: darkblue;}
</style>
</head>
<body>
<h1><a href="black.html">The Noble and Most Ancient House of BLACK</a></h1>
<ol>
<li><a href="walburga.html">Walburga Black</a></li>
<li><a href="orion.html">Orion Black</a></li>
<li><a href="sirius.html">Sirius Black</a></li>
<li><a href="regulus.html">Regulus Arcturus Black</a></li>
</ol>
</body>
</html>
이렇게 CSS를 이용하여 중복된 코드를 제거할 수 있다. 이로써 HTML은 정보에 더 집중할 수 있게 되고, 우리는 CSS를 이용해서 효율적으로 웹페이지를 디자인 할 수 있다.
* HTML 주석 처리
<!--
Regulus Black
-->
style 속성
- style = " color:darkgreen " : CSS의 효과를 값으로 받는 HTML의 속성
- <style>태그처럼 선택자를 사용할 필요가 없다.
<li><a href="regulus.html" style="color:darkgreen">Regulus Arcturus Black</a></li>
밑줄 없애기 & 밑줄 만들기
- 밑줄 없애기: text-decoration: none
- 밑줄 만들기: text-decoration: underline
<style>
a {
color: darkblue;
text-decoration: none;
}
</style>
<li><a href="regulus.html" style="color:darkgreen; text-decoration: underline">Regulus Arcturus Black</a></li>
폰트 크기 & 텍스트 정렬
- 폰트 크기: font-size: ~px / ~% ;
- 텍스트 정렬: text-align: center / left / right / justify ;
<style>
h1 {
font-size: 40px;
text-align: center;
}
</style>
CSS 선택자
| 우선 순위 | ③ (포괄적) | ② (중간) | ① (구체적) |
| 태그 선택자 | 클래스 선택자 | ID 선택자 | |
| <style> </style> 내에서 | tag {} | .class {} | #id {} |
* class 속성의 값은 여러 개가 될 수 있고 띄어쓰기로 구분한다. 이 경우 가장 마지막에 등장하는 선택자가 우선 순위가 높다.
* id 속성의 값은 중복될 수 없으며 단 한 번만 등장해야 한다.
<!doctype html>
<html>
<head>
<title>Regulus Black</title>
<meta charset="utf-8">
<style>
a {color: black; text-decoration: none;}
h1 {font-size: 40px; text-align: center;}
.parents {color: blue;}
</style>
</head>
<body>
<h1><a href="black.html">The Noble and Most Ancient House of BLACK</a></h1>
<ol>
<li><a href="walburga.html" class="parents">Walburga Black</a></li>
<li><a href="orion.html" class="parents">Orion Black</a></li>
<li><a href="sirius.html">Sirius Black</a></li>
<li><a href="regulus.html">Regulus Arcturus Black</a></li>
</ol>
</body>
</html>
발부르가와 오리온을 parents라는 클래스로 그룹핑했다.
<!doctype html>
<html>
<head>
<title>Regulus Black</title>
<meta charset="utf-8">
<style>
a {color: black; text-decoration: none;}
h1 {font-size: 40px; text-align: center;}
.parents {color: blue;}
.mother {color: green;}
</style>
</head>
<body>
<h1><a href="black.html">The Noble and Most Ancient House of BLACK</a></h1>
<ol>
<li><a href="walburga.html" class="parents mother">Walburga Black</a></li>
<li><a href="orion.html" class="parents">Orion Black</a></li>
<li><a href="sirius.html">Sirius Black</a></li>
<li><a href="regulus.html">Regulus Arcturus Black</a></li>
</ol>
</body>
</html>
발부르가에게 mother라는 클래스를 더하고, .parents보다 나중에 .mother를 입력했더니 .mother가 우위를 가졌다.
<style>
.mother {color: green;}
.parents {color: blue;}
</style>
.parents를 나중에 썼더니 다시 .parents가 우위를 가졌다.
<!doctype html>
<html>
<head>
<title>Regulus Black</title>
<meta charset="utf-8">
<style>
a {color: black; text-decoration: none;}
h1 {font-size: 40px; text-align: center;}
#father {color: green;}
.mother {color: green;}
.parents {color: blue;}
</style>
</head>
<body>
<h1><a href="black.html">The Noble and Most Ancient House of BLACK</a></h1>
<ol>
<li><a href="walburga.html" class="parents mother">Walburga Black</a></li>
<li><a href="orion.html" class="parents" id="father">Orion Black</a></li>
<li><a href="sirius.html">Sirius Black</a></li>
<li><a href="regulus.html">Regulus Arcturus Black</a></li>
</ol>
</body>
</html>
오리온에게 father라는 id를 부여했다. #father와 .mother 모두 .parents보다 위에 위치해 있지만, 우선순위가 밀린 .mother와 달리 #father는 id 선택자이므로 클래스 선택자인 .parents보다 우위를 갖는다.
CSS 박스 모델
- HTML의 태그는 기본적인 성격에 따라서 화면 전체를 쓰기도 하고(예: <h1>) 자기 크기만큼 쓰기도 한다(예: <a>).
- block level element: 화면 전체를 쓰는 태그
- inline element: 자기 크기만큼 쓰는 태그
- 위는 기본값일 뿐, display라는 속성을 통해 편집할 수 있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box model</title>
<style>
h1 {
border: 5px green solid; /* 순서는 상관이 없다. */
padding: 30px;
margin: 30px;
width: 200px;
display: block; /* inline으로 하면 자기만큼 쓴다.*/
}
</style>
</head>
<body>
<h1>Regulus Black</h1>
</body>
</html>
* 응용하기
<!doctype html>
<html>
<head>
<title>Regulus Black</title>
<meta charset="utf-8">
<style>
a {color: black; text-decoration: none;}
h1 {font-size: 40px; text-align: center;
border-bottom: 1px solid black;
padding: 50px;
margin: 0;
}
ol {
border-right: 1px solid black;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
margin: 0px;
width:200px;
}
</style>
</head>
<body>
<h1><a href="black.html">The Noble and Most Ancient House of BLACK</a></h1>
<ol>
<li><a href="walburga.html">Walburga Black</a></li>
<li><a href="orion.html">Orion Black</a></li>
<li><a href="sirius.html">Sirius Black</a></li>
<li><a href="regulus.html">Regulus Arcturus Black</a></li>
</ol>
</body>
</html>