반응형
전산학에서의 중복은 불필요한 노동으로 이어진다.
▶ CSS(Cascading Style Sheets)의 정의
- HTML의 디자인(스타일)을 꾸미기 위한 프로그래밍 언어.
- HTML에서 디자인과 Element의 분리하여 독립적인 디자인 요소를 제공하고 정보의 간결성 유지보수성을 극대화한다.
▶ CSS의 적용방법
- 외부 파일로 작성하여 사용한다.
- html 파일 내부에 Style 태그를 넣어서 사용한다.
태그에 넣어서 사용한다.
외부 파일 작성
- CSS파일 작성 (test.css)
h1 {
color: brown;
}- HTML 파일의 <head> 안에 Link 태그 작성
<link rel="stylesheet" href="test.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>Document</title>
</head>
<body>
<h1>TEST</h1>
</body>
</html>
내부 파일 작성
- HTML 파일 내부에 Style 태그를 넣어서 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1{
color: crimson;
}
</style>
<title>Document</title>
</head>
<body>
<h1>TEST</h1>
</body>
</html>
태그에 넣어서 사용
이 방식은 자칫하면 중노동으로 이어질 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 style="color: darkorchid;">TEST</h1>
</body>
</html>
▶ CSS 선택자 (CSS Selector)
- HTML의 Element를 선택하기 위한 CSS의 기법
- 선택자는 다양한 조건을 적용할 수 있다.
선택자의 종류
- 전체선택자
- 태그 선택자
- id선택자
- 클래스 선택자
- 속성 선택자
- 후손 선택자
- 자식(자손) 선택자
- 구조 선택자
전체 선택자
- 모든 웹페이지의 Element를 선택한다.
※ * : 역사를 거슬러 올라가 Linux 때부터 사용해 오던 식.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {color: chartreuse; }
</style>
<title>Document</title>
</head>
<body>
<h1>TEST</h1>
<h2>TEST</h2>
<h3>TEST</h3>
<h4>TEST</h4>
<h5>TEST</h5>
</body>
</html>
태그 선택자
- 특정한 태그를 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1 { color: darkred;}
h2 { color: cornflowerblue;}
h3 { color: indianred;}
</style>
<title>Document</title>
</head>
<body>
<h1>TEST</h1>
<h2>TEST</h2>
<h3>TEST</h3>
<h4>TEST</h4>
<h5>TEST</h5>
</body>
</html>
- 여러 태그를 같이 선택할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1, p {
color: green;
margin: 0;
}
</style>
<title>Document</title>
</head>
<body>
<h1>TEST</h1>
<h2>TEST</h2>
<h3>TEST</h3>
<h4>TEST</h4>
<h5>TEST</h5>
<p>TEST</p>
</body>
</html>
아이디 선택자
특정 id에 해당하는 Element 선택한다.
JS에서 문제가 발생할 수 있기 때문에 가급적 같은 id를 쓰지 않는 것을 권장한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#A{
width: 1000px;
margin: 0 auto;
color: lightsalmon;
}
</style>
<title>Document</title>
</head>
<body>
<h1 id="A">TEST</h1>
</body>
</html>
클래스 선택자
- 특정 클래스에 해당하는 Element 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.a {
background-color: blue;
width: 100px;
}
</style>
<title>Document</title>
</head>
<body>
<h1 class="a" >TEST</h1>
</body>
</html>
속성 선택자
- 특정 속성을 가진 Element 선택한다.
- 일반적으로 다른 선택지와 함께 사용한다.
- 명시적으로 속성을 표시한 경우만 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input[type=text]{
background-color: darkgrey;
color: black;
}
</style>
<title>Document</title>
</head>
<body>
<input type="text"> <br> <br>
<input type="password">
</body>
</html>
문자열 속성 선택자
- 속성 값에 특정한 문자열을 확인하여 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img[src$=png] {
border: 5px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<img src="1.png" width="300" height="300"> <br>
</body>
</html>
후손 선택자
- 해당 선택자 하위의 모든 선택자
- body li {....} → body 하위의 모든 li 적용한다.
- div li {....} → div 하위의 모든 li 적용한다.
자손 선택자
- 해당 선택자 바로 하위의 선택자
- body > p {....} → body 바로 밑의 p 적용한다.
- div > p {....} → div 바로 밑의 p 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div p {
color: rgb(255, 231, 15)
}
body li {
color: mediumseagreen;
}
div > h1 {
color: brown;
background-color: blue;
width: 100px;
}
</style>
<title>Document</title>
</head>
<body>
<h1><li>후손</li></h1>
<div><h1>자손</h1></div>
<div><p>후손</p></div>
</body>
</html>
구조 선택자
- 특정 위치에 있는 태그를 선택한다.
- 일반적으로 자손 선택자와 함께 사용한다.
| 선택자 | 설명 |
| :first-child | 형제 관계 중 첫번째 위치 태그를 선택한다. |
| :last-child | 형제 관계 중 마지막 위치 태그를 선택한다. |
| :nth-child (수열) | 형제 관계 중 앞에서 수열 번째 위치 태그를 선택한다. |
| :nth-last-child (수열 | 형제 관계 중 마지막에서 수열 번째 위치 태그를 선택한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li:last-child {color: red;}
li:first-child {color: blue;}
li:nth-child(2n) {color: rgb(44, 221, 133);}
</style>
<title>Document</title>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
</ul>
</body>
</html>
코딩한 순서대로 적용된다.
반응형