CSS
- Cascading Style Sheet
- HTML 문서의 스타일 지정
- HTML 요소가 표시되는 방식을 설명
- 여러 웹페이지의 레이아웃을 제어할 수 있기 때문에 시간과 노력 절약
CSS의 문법
- 선택자 { 속성: 값; 속성: 값; }
- 선택자(Selector)는 HTML의 요소(Element)
- 속성(Properties)과 값(Value)은 콜론(:)으로 구분
- 속성과 값은 여러 개 사용 가능
- 속성과 값으로 구성되는 선언(declaration)은 중괄호로 묶음
CSS의 필요성 및 장점
- 하나의 웹 문서에서 문서 작성(HTML)과 디자인(CSS)을 분리
- 내용과 디자인 수정이 용이
- 다양한 기능으로 확장 가능
- 통일된 문서 양식 제공
- 전송 및 로딩 시간 단축
선택자
- Selectors
- 스타일을 지정할 HTML 요소를 찾거나 선택
- 선택을 함으로써 특정 요소들의 스타일을 일괄적으로 적용
선택자의 종류
- 태그 선택자: HTML 태그에 적용
- p { text-align: center; color: red; }
- 클래스 선택자: 마침표(.)로 시작
- .mytitle { text-align: center; color: red; }
- 아이디 선택자: #으로 시작
- #mytitle { text-align: center; color: red; }
- 종속(dependant) 선택자: 선택자에 종속된 선택자
- p.center { text-align: center; color: red; }
- 하위(descendant) 선택자: 종속된 후손 선택자
- div span { color: blue; }
- 자식(child) 선택자: 바로 밑의 자식 선택자
- div > span { color: blue; }
- 그룹 선택자: 여러 선택자에 적용
- h1, p, .myText { color: green; }
- 전체(universal) 선택자: 전체 문서에 적용
- * { font-size: 2em; }
태그, 클래스, 아이디 선택자 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태그, 클래스, 아이디 선택자</title>
<style>
p.myClass {
text-align: center;
color: blue;
}
#myID {
text-align: right;
color: gold;
font-size: 2em;
}
p.large {
font-size: 150%;
color: greenyellow;
}
</style>
</head>
<body>
<h1 class="myClass">이 제목은 영향을 받지 않음</h1>
<p class="myClass">이 문단은 가운데 정렬, 파란색</p>
<p ID="myID">이 문단은 오른쪽 정렬, 황금색, 16*2=32px</p>
<p class="myClass large">이 문단은 가운데 정렬, 연초록색, 그리고 1.5배 크기</p>
</body>
</html>종속, 하위, 자식 선택자 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>종속, 하위, 자식 선택자</title>
<style>
ul li {
text-align: center;
font-size: 2em;
}
div h3 {
color: gold;
}
ol>h3 {
text-align: center;
font-size: 2em;
}
li.hi {
color: blueviolet;
}
</style>
</head>
<body>
<div class="first">
<ul>
<h3>Unordered Lists</h3>
<li>순서없는 리스트 1</li>
<li class="hi">순서없는 리스트 2</li>
<li>순서없는 리스트 3</li>
<img src="images/anchor-solid.svg" width="50px" ;>
</ul>
</div>
<div class="second">
<ol>
<h3>Ordered Lists</h3>
<li>순서 1</li>
<li>순서 2</li>
<li>순서 3</li>
</ol>
</div>
</body>
</html>그룹, 전체 선택자 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그룹, 전체 선택자</title>
<style>
* {
text-align:center;
}
h4, .wow{
font-style: italic;
}
</style>
</head>
<body>
<h3>그룹 선택자와 전체 선택자</h3>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>한글입숨</h4>
<p>나는 딴은 애기 벌써 계십니다. 겨울이 너무나 내일 봅니다.<br>
그리워 <span class="wow">어머님</span>, 말 하늘에는 묻힌 위에도 가난한 있습니다. 이름을 가을 나는 이네들은 듯합니다.</p>
</body>
</html>CSS의 표현 방법
- 인라인(inline) CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:blue; text-align:center;">
이 문장은 제목입니다.</h1>
<p style="color:red;">이 문장은 문단입니다.</p>
</body>
</html>- 내부(internal) CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<style>
body{background-color: linen;}
h1{color:maroon; margin-left: 40px;}
</style>
</head>
<body>
<h1>이 문장은 제목입니다.</h1>
<p>이 문장은 문단입니다.</p>
</body>
</html>- 외부(external) CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>이 문장은 제목입니다.</h1>
<p>이 문장은 문단입니다.</p>
</body>
</html>CSS 선택자 우선순위
| 우선순위 | 설명 | 예시 |
| !important | 가장 높은 우선순위 | color: red !important; |
| 인라인 스타일 | HTML 태그 내부의 스타일 | <p style="color:red;"> |
| ID 선택자 | 특정 ID를 지정 | #header {} |
| 클래스/속성/가상 클래스 | 특정 그룹이나 조건을 지정 | .menu {} / [type="text"] {} |
| 태그 선택자 | 특정 HTML 태그를 지정 | div {} |
| 전체 선택자(*) | 모든 요소를 지정 | * {} |
| 상속된 스타일 | 부모 요소로부터 상속된 스타일 |
점수 계산 방식
- W3C의 명세에 따라 점수 체계로 우선순위 계산
- 인라인 스타일: a = 1, b = 0, c = 0, d = 0 (점수: 1000)
- ID 선택자: a = 0, b = 1, c = 0, d = 0 (점수: 100)
- 클래스, 속성, 가상 클래스: a = 0, b = 0, c = 1, d = 0 (점수: 10)
- 태그 및 가상 요소: a = 0, b = 0, c = 0, d = 1 (점수: 1)
- 같은 우선순위의 선언이 충돌하면 나중에 작성된 CSS가 우선 적용
CSS
- Cascading Style Sheet
- HTML 문서의 스타일 지정
- HTML 요소가 표시되는 방식을 설명
- 여러 웹페이지의 레이아웃을 제어할 수 있기 때문에 시간과 노력 절약
CSS의 문법
- 선택자 { 속성: 값; 속성: 값; }
- 선택자(Selector)는 HTML의 요소(Element)
- 속성(Properties)과 값(Value)은 콜론(:)으로 구분
- 속성과 값은 여러 개 사용 가능
- 속성과 값으로 구성되는 선언(declaration)은 중괄호로 묶음
CSS의 필요성 및 장점
- 하나의 웹 문서에서 문서 작성(HTML)과 디자인(CSS)을 분리
- 내용과 디자인 수정이 용이
- 다양한 기능으로 확장 가능
- 통일된 문서 양식 제공
- 전송 및 로딩 시간 단축
선택자
- Selectors
- 스타일을 지정할 HTML 요소를 찾거나 선택
- 선택을 함으로써 특정 요소들의 스타일을 일괄적으로 적용
선택자의 종류
- 태그 선택자: HTML 태그에 적용
- p { text-align: center; color: red; }
- 클래스 선택자: 마침표(.)로 시작
- .mytitle { text-align: center; color: red; }
- 아이디 선택자: #으로 시작
- #mytitle { text-align: center; color: red; }
- 종속(dependant) 선택자: 선택자에 종속된 선택자
- p.center { text-align: center; color: red; }
- 하위(descendant) 선택자: 종속된 후손 선택자
- div span { color: blue; }
- 자식(child) 선택자: 바로 밑의 자식 선택자
- div > span { color: blue; }
- 그룹 선택자: 여러 선택자에 적용
- h1, p, .myText { color: green; }
- 전체(universal) 선택자: 전체 문서에 적용
- * { font-size: 2em; }
태그, 클래스, 아이디 선택자 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태그, 클래스, 아이디 선택자</title>
<style>
p.myClass {
text-align: center;
color: blue;
}
#myID {
text-align: right;
color: gold;
font-size: 2em;
}
p.large {
font-size: 150%;
color: greenyellow;
}
</style>
</head>
<body>
<h1 class="myClass">이 제목은 영향을 받지 않음</h1>
<p class="myClass">이 문단은 가운데 정렬, 파란색</p>
<p ID="myID">이 문단은 오른쪽 정렬, 황금색, 16*2=32px</p>
<p class="myClass large">이 문단은 가운데 정렬, 연초록색, 그리고 1.5배 크기</p>
</body>
</html>종속, 하위, 자식 선택자 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>종속, 하위, 자식 선택자</title>
<style>
ul li {
text-align: center;
font-size: 2em;
}
div h3 {
color: gold;
}
ol>h3 {
text-align: center;
font-size: 2em;
}
li.hi {
color: blueviolet;
}
</style>
</head>
<body>
<div class="first">
<ul>
<h3>Unordered Lists</h3>
<li>순서없는 리스트 1</li>
<li class="hi">순서없는 리스트 2</li>
<li>순서없는 리스트 3</li>
<img src="images/anchor-solid.svg" width="50px" ;>
</ul>
</div>
<div class="second">
<ol>
<h3>Ordered Lists</h3>
<li>순서 1</li>
<li>순서 2</li>
<li>순서 3</li>
</ol>
</div>
</body>
</html>그룹, 전체 선택자 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그룹, 전체 선택자</title>
<style>
* {
text-align:center;
}
h4, .wow{
font-style: italic;
}
</style>
</head>
<body>
<h3>그룹 선택자와 전체 선택자</h3>
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>한글입숨</h4>
<p>나는 딴은 애기 벌써 계십니다. 겨울이 너무나 내일 봅니다.<br>
그리워 <span class="wow">어머님</span>, 말 하늘에는 묻힌 위에도 가난한 있습니다. 이름을 가을 나는 이네들은 듯합니다.</p>
</body>
</html>CSS의 표현 방법
- 인라인(inline) CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:blue; text-align:center;">
이 문장은 제목입니다.</h1>
<p style="color:red;">이 문장은 문단입니다.</p>
</body>
</html>- 내부(internal) CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<style>
body{background-color: linen;}
h1{color:maroon; margin-left: 40px;}
</style>
</head>
<body>
<h1>이 문장은 제목입니다.</h1>
<p>이 문장은 문단입니다.</p>
</body>
</html>- 외부(external) CSS
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Internal CSS</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>이 문장은 제목입니다.</h1>
<p>이 문장은 문단입니다.</p>
</body>
</html>CSS 선택자 우선순위
| 우선순위 | 설명 | 예시 |
| !important | 가장 높은 우선순위 | color: red !important; |
| 인라인 스타일 | HTML 태그 내부의 스타일 | <p style="color:red;"> |
| ID 선택자 | 특정 ID를 지정 | #header {} |
| 클래스/속성/가상 클래스 | 특정 그룹이나 조건을 지정 | .menu {} / [type="text"] {} |
| 태그 선택자 | 특정 HTML 태그를 지정 | div {} |
| 전체 선택자(*) | 모든 요소를 지정 | * {} |
| 상속된 스타일 | 부모 요소로부터 상속된 스타일 |
점수 계산 방식
- W3C의 명세에 따라 점수 체계로 우선순위 계산
- 인라인 스타일: a = 1, b = 0, c = 0, d = 0 (점수: 1000)
- ID 선택자: a = 0, b = 1, c = 0, d = 0 (점수: 100)
- 클래스, 속성, 가상 클래스: a = 0, b = 0, c = 1, d = 0 (점수: 10)
- 태그 및 가상 요소: a = 0, b = 0, c = 0, d = 1 (점수: 1)
- 같은 우선순위의 선언이 충돌하면 나중에 작성된 CSS가 우선 적용
