Cascading이 의미하는 것
- '계단형'의 의미로 스타일 적용시 규칙에 따라 우선 순위가 있고, 우선 순위에 따라 최종 렌더링 될 스타일이 정해짐
CSS가 필요한 이유
- HTML에 직접 스타일을 적용함으로써 생기는 HTML 문서 자체의 무거움을 줄일 수 있다.
- 하나의 스타일 시트로 다수의 페이지에 같은 속성을 적용함으로써 작업 시간을 단축
- 웹 표준의 원칙 : HTML 마크업은 구조를 잡는데 사용, CSS로 디자인을 결정
1. 가장 기본적인 스타일의 적용
- HTML 태그에 style 속성으로 지정
<body>
<!-- 1. Inline Style : 태그에 스타일 부여, 편리하긴 하지만 웹표준 입장에선 좋지 않다.-->
<h1 style="color:yellow; background-color:black">Welcome to the Lounge</h1>
</body>- 가장 쉬운 방법이지만, 웹 표준 준수에는 가장 좋지 않은 방법
2. 내부 스타일 시트
- HTML의 head 영역 안쪽에 <style> 태그를 이용, 스타일을 적용
<!DOCTYPE html>
<html lang="KO">
<head>
<title>Bit Lounge</title>
<meta http-equiv="Content_Type" content="text/html"; charset="UTF-8"/>
<!-- 2. page css: 단일 페이지내의 요소에 공통 적용-->
<style>
h1{
color : yellow;
background-color: black;
}
</style>
</head>
3. 외부 스타일 시트
- 여러 사람이 협업하거나 프로젝트의 규모가 클 때는 스타일시트를 별도 외부 파일로 분리하는 것이 효율적
- 웹 표준의 측면에서 가장 추천하는 방식
<body>
<!-- 3. External CSS-->
<link rel="stylesheet" href="./CSS/style.css">
<h1>Welcome to the Lounge</h1>
<img src="./images/drinks.gif"/>
</body>style.css
@charset "UTF-8 ";
/* 외부 CSS를 불러들인다*/
@import "main.css";
h1{
color : red ;
background-color: greenyellow;
}
CSS3 선택자
CSS 선택자(Selector) : 특정한 HTML 태그를 선택할 때 사용
- 선택자를 사용, 특정 HTML 태그를 선택하면 조건에 맞는 태그에 스타일이나 스크립트를 적용할 수 있음
- 선택자의 활용은 스타일시트 뿐 아니라 JavaScript에서도 사용하므로 웹 프론트엔드 개발시 꼭 이해해야 함
기본 선택자
기본 선택자의 종류
| 종류 | 선택자 | 설명 |
| 전체선택자 | * | HTML문서 내 모든 태그 선택 |
| 태그 선택자 | 태그명 | HTML문서 내 모든 지정 태그 선택 |
| 아이디 선택자 | #아이디 | 지정한 아이디를id속성값으로 가지고 있는 태그 |
| 클래스 선택자 | .클래스 | 지정한 클래스를 class속성에 포함하고 있는 태그 |
* 전체 선택자
- HTML 문서 내 모든 태그를 선택하므로 페이지 전체에 공통적인 특성 값을 부여할 수 있다
<style>
*{
margin: 0;
padding: 0;
color: grey;
}
</style>- 페이지 내 모든 태그를 찾아
- 공백을 모두 제거
- 기본 콘텐츠 색상을 회색으로
* 태그 선택자
- HTML 페이지 내 모든 지정 태그
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
</body>
</html>- 페이지 내 모든 h1 태그를 찾아
- 글꼴을 볼드(bold)체로
- 색상을 빨간색(red)로
참고: 여러 개의 선택자를 동시에 지정할 때는 ,로 연결
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: red;
}
* 아이디 선택자
- 지정한 아이디를 id 속성값으로 가지고 있는 태그
- 선택하고자 하는 아이디는 # 기호를 부여
<style>
#apple { color: red; }
#banana { color: yellow; }
#orange { color: orange; }
.selected {
text-decoration: underline;
}
</style>
...
<ul>
<li id="apple">사과</li>
<li id="banana">바나나</li>
<li id="orange">오렌지</li>
<li id="grape"
class="selected">포도</li>
</ul>
클래스 선택자
- 지정한 클래스를 class 속성에 포함하고 있는 태그
- 선택하고자 하는 클래스는 . 기호를 부여
자식 선택자와 후손 선택자
- DOM Tree의 포함 관계를 이용한 하위 요소의 선택
| 종류 | 선택자 | 설명 |
| 후손 선택자 | 선택자A 선택자D | 선택자A(조상)의 내부에 포함된 선택자D(후손)를 선택 |
| 자식 선택자 | 선택자P > 선택자C | 선택자P(부모)의 바로 아래 노드들 중 선택자C(자식)만 선택 |
...
<style>
#d-sel h1 {
color: red;
}
#c-sel > h1 {
color: red;
}
</style>
...
<div id="d-sel">
<h1>d-sel > h1</h1>
<div id="d-sel-child">
<h1>
d-sel > d-sel-child > h1
</h1>
</div>
</div>
<div id="c-sel">
<h1>c-sel > h1</h1>
<div id="c-sel-child">
<h1>
c-sel > c-sel-child > h1
</h1>
</div>
</div>
...
가상 클래스(Pseudo Class)
구조 선택자 : 특정 위치에 있는 태그를 선택할 때 사용
| 형태 | 설명 |
| :first-child | 형제 관계에서 첫 번째로 등장하는 태그 선택 |
| :last-child | 형제 관계에서 마지막 등장하는 태그 선택 |
| :nth-child(수열) | 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택 |
| :nth-last-child(수열) | 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택 |
...
<style>
li:nth-child(2n) {
color: green;
}
li:nth-child(2n+1) {
color: lightgreen;
}
li:first-child { color: red; }
li:last-child { color: blue; }
</style>
...
<ul>
<li>1번째</li>
<li>2번째</li>
<li>3번째</li>
<li>4번째</li>
<li>5번째</li>
<li>6번째</li>
</ul>
...
'HTML + CSS' 카테고리의 다른 글
| CSS3로 웹 페이지 스타일링하기 - 2 (0) | 2021.08.24 |
|---|---|
| 인터넷과 웹 (0) | 2021.08.20 |
| Visual Studio Code install (0) | 2021.08.20 |
| HTML Basic (0) | 2021.08.12 |