> CSS
Cascading Style Sheets 의 약자
HTML 의 element 가 화면에 어떻게 표현될지 설정함
웹 페이지 여러 개의 배치를 한번에 설정할 수 있어서 작업량을 줄여줌
HTML 코드와 하나의 파일에 작성되지 않아도 되며, CSS 파일로 따로 저장할 수 있음
→ 즉 HTML 은 페이지의 내용과 구조를 결정, CSS 는 페이지의 스타일을 결정하는 코드
* attribute 가 아닌 element 로서의 <style>
- head element 에 포함됨
- 내부에 css 코드를 작성함
<head>
<style>
h1{
text-align:center;
}
p{
color:brown;
}
h1:last-of-child{
font-size:100px;
}
</style>
</head>위의 예시에서 h1{ }, p{ } 는 해당 문서의 모든 h1, p 요소를 괄호 안{ } 과 같이 설정하겠다는 의미이며,
h1:last-of-child{ } 는 문서의 마지막 h1 요소만 괄호 안{ } 과 같이 설정하겠다는 의미이다.
> syntax 문법
selector (선택자) - 어떤 element 에 적용할지 선택하는 부분
declaration (선언) - property:value 한 쌍
declaration block - declaration 이 모두 포함된 중괄호{} 전체
rule / ruleset (규칙) - selector 와 declaration 을 모두 합친 전체
→ CSS Reference 참고 (property 는 CSS Reference, selector 는 CSS Selector Reference)
* 주석 comment: /* */ , 단축키 ctrl+/ (페이지 소스보기 하면 보이므로 중요한 내용 작성 금지)
> selector 선택자
1. element selector (tag selector)
가장 기본적인 형태
tag 로 element 를 선택
해당 문서에서 같은 tag 를 갖는 모든 element 가 선택됨
→ tagname { }
<head>
<style>
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>this is text.</h1>
<h1>this is second text.</h1>
<p>this is third text.</p>
</body>
2. class selector
class attribute 를 이용
class attribute 의 값으로 element 를 선택
여러 element 가 같은 class 값을 가질 수 있음 (같은 class 값을 가진 element 들이 하나의 그룹으로 묶이는 효과가 있음)
→ <tagname class="classvalue">
→ .classvalue { }
<head>
<style>
.memo{
background-color:green;
}
</style>
</head>
<body>
<h1 class="memo">this is text.</h1>
<h1>this is second text.</h1>
<p class="memo">this is third text.</p>
</body>* 하나의 element 가 여러 개의 class 값을 가질 수 있음
<head>
<style>
.memo{
background-color:pink;
}
.note{
color:blue;
{
</style>
</head>
<body>
<h1 class="memo">this is first text.</h1>
<h1 class="note">this is second text.</h2>
<p class="memo note">this is third text.</p>
</body>
3. id selector
id attribute 를 이용
id attribute 의 값으로 element 를 선택
class 와 달리, 한 페이지 내에서 여러 element 가 같은 id 값을 가질 수 없음
id 값은 영문대소문자, 숫자 조합으로 작성 (숫자가 앞에 위치할 수 없음 / 공백 포함 불가 / -, _, . 등은 호환 문제를 일으킬 수 있음)
→ <tagname id="idvalue">
→ #idvalue { }
<head>
<style>
#myheader{
color:blue;
}
#mypara{
color:red;
}
</style>
</head>
<body>
<h1 id="myheader">this is first text.</h1>
<h1>this is second text.</h1>
<p id="mypara">this is third text.</p>
</body>* 하나의 element 가 class, id 를 동시에 가질 수 있음
<body>
<h1 class="note" id="head1">text</h1>
</body>
4. grouping selector
, 로 여러 선택자를 선택할 수 있음
→ selector1, selector2 { }
<head>
<style>
h1,p{
color:red;
}
</style>
</head>
<body>
<h1>this is text.</h1>
<h1>this is second text.</h1>
<p>this is third text.</p>
</body><head>
<style>
#myheader, #mypara{
color:blue;
}
#mypara{
background:pink;
}
</style>
</head>
<body>
<h1 id="myheader">this is first text.</h1>
<h1>this is second text.</h1>
<p id="mypara">this is third text.</p>
</body>
*{ } : 해당 문서의 모든 element 를 선택
> combinator
띄어쓰기 없이 여러개의 selector 를 붙여쓰면, 해당 selector 들을 모두 만족하는 (and, 교집합) element 가 선택됨
<head>
<style>
h1.error{
text-decoration:line-through;
}
h1.note.error{
font-style:italic;
}
.error.note{
border-style:solid;
}
p#para1{
border-style:dotted;
}
</style>
</head>
<body>
<h1 class="note">text one</h1>
<h1 class="note error">text two</h1>
<h1 class="error">text three</h1>
<p class="note error">first text</p>
<p id="para1">second text</p>
</body
* 중복 시 선택자 우선순위
중복되는 경우 우선순위는,
id 선택자가 많을수록 높음
id 선택자 수가 같으면 class 선택자가 많을수록 높음
id, class 선택자 수가 같으면 element 선택자가 많을수록 높음모두 같다면 가장 마지막 위치한 코드를 따름
→ 비교순서: id > class > element > 위치
(단, style element 가 아닌 style attribute 로 작성된 style 이 있다면, 무조건 적용됨)
예시1
<head>
<style>
.note{
color:red;
}
.error{
color:blue;
}
</style>
</head>
<body>
<h1 class="error">first text</h1>
<h1 class="error note">second text</h1>
<h1 class="note">third text</h1>
</body>
-> second text 색상이 blue 로 표시됨
예시2
<head>
<style>
h1.note{
color:red;
}
.error{
color:blue;
}
</style>
</head>
<body>
<h1 class="error">first text</h1>
<h1 class="error note">second text</h1>
<h1 class="note">third text</h1>
</body>
-> second text 색상이 red 로 표시됨
'course 2021 > HTML\CSS\JS' 카테고리의 다른 글
| day06 - link, pseudo class, combinator (0) | 2021.10.23 |
|---|---|
| day05 - font (0) | 2021.10.22 |
| day04 - box model (0) | 2021.10.20 |
| day02 - attribute, element (0) | 2021.10.12 |
| day01 - HTML, element, vscode (0) | 2021.10.10 |
