CSS의 개요와 4가지 기본 선택자에 대해 공부해 보자
CSS = STYLE
✔️ 한 페이지 내에 뼈대와 꾸미기가 같이 있으면 복잡하고 가독성 떨어지므로 따로 처리하는 게 더 좋음
👉🏻 뼈대는 HTML, 꾸미기는 CSS
스타일 기본 형식
CSS 영역
👉🏻 스타일을 기술할 수 있는 영역
✔️ 내부 스타일 방식
현재 이 문서에 적용시키고자 하는 스타일 정보들을 <style>이라는 태그 내에 기입하는 방식
이 html 문서 내부에 스타일 정보를 저장하는 방법(학원에서 자주 쓸 예정)
내부 스타일 방식으로 기술한 코드의 위치 확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본선택자</title>
<style>
/* CSS 영역: 스타일을 기술할 수 있는 영역 */
/*
내부 스타일 방식: 현재 이 문서에 적용시키고자 하는 스타일 정보들을
<style>이라는 태그 내에 기입하는 방식
이 html 문서 내부에 스타일 정보를 저장하는 방법
(수업 시간에는 내부 스타일 방식을 자주 쓸 예정!)
*/
/* 모든(전체) 선택자 */
* {
/* color : red; */
}
/* 태그 선택자 */
p {
color: red;
}
pre {
color: green;
}
p, pre {
background-color : lightcyan;
}
/* 아이디 선택자 */
#id1 {
color: pink;
background-color: teal;
}
#id3 {
color: moccasin;
background-color: thistle;
}
/* 클래스 선택자 */
.class1 {
color: yellowgreen;
}
.test {
font-size: 30px;
}
</style>
</head>
✔️ 인라인 스타일 방식
스타일을 부여하고자 하는 요소 내에 style 속성을 직접적으로 기술해서 바로 기입하는 방식
코드가 길어질수록 가독성 낮아지므로 꾸밀 내용이 소량일 때만 사용하는 것을 권장
인라인 스타일 방식으로 기술한 코드의 위치 확인
<body>
<h1 style="color: teal;">CSS 기본선택자</h1>
<!--
인라인 스타일 방식: 스타일을 부여하고자 하는 요소 내에
style 속성을 직접적으로 기술해서 바로 기입하는 방식
(코드가 길어질수록 가독성이 낮아지므로 꾸밀 내용이 소량일 때 사용하는 것을 권장)
-->
선택자란?
👉🏻 특정 html 요소를 선택하고자 할 때 사용하는 기능
👉🏻 해당 요소를 선택해서 원하는 "스타일"과 기능을 적용시킬 수 있음
1. 모든(전체) 선택자
👉🏻 모든 요소들을 다 선택하고자 할 때 사용
✔️ [ 표현법 ]
* {
스타일속성 : 값;
스타일속성 : 값;
}
/* 모든(전체) 선택자, head 영역의 <style>에 기술 */
* {
/* color : red; */
}
2. 태그 선택자 (태그명)
👉🏻 해당 이 문서 내에 같은 태그들을 모두 선택할 때 사용
✔️ [ 표현법 ]
태그명 {
스타일속성 : 값;
스타일속성 : 값;
}
/* 태그 선택자, head 영역의 <style>에 기술 */
p {
color: red;
}
pre {
color: green;
}
p, pre {
background-color : lightcyan;
}
3. 아이디 선택자 (#아이디명)
👉🏻 해당 이 문서 내에 특정 html 요소 단 하나만을 선택하고자 할 때 사용
👉🏻 단! 해당 그 요소 id 속성으로 불러오려면 고유한 아이디값을 부여해야만 함
👉🏻 html 파일 하나당 고유한 값 하나!
✔️ [ 표현법 ]
#아이디명 {
스타일속성 : 값;
스타일속성 : 값;
}
/* 아이디 선택자, head 영역의 <style>에 기술 */
#id1 {
color: pink;
background-color: teal;
}
#id3 {
color: moccasin;
background-color: thistle;
}
/* body 영역에 기술한 내용 */
<ol>
<li id="id1">아이디선택자</li>
<li id="id2">아이디선택자</li>
<li id="id3">아이디선택자</li>
<li id="id4" class="test">아이디선택자</li>
</ol>
<hr>
4. 클래스 선택자 (.클래스명)
👉🏻 해당 이 문서 내에 내가 원하는 여러 개의 요소들을 선택하고자 할 때 사용
👉🏻 즉, 중복 부여 가능함
✔️ [ 표현법 ]
.클래스명 {
스타일속성 : 값;
스타일속성 : 값;
}
/* 클래스 선택자,head 영역의 <style>에 기술 */
.class1 {
color: yellowgreen;
}
.test {
font-size: 30px;
}
/* body 영역에 기술한 내용 */
<ol>
<li id="id1">아이디선택자</li>
<li id="id2">아이디선택자</li>
<li id="id3">아이디선택자</li>
<li id="id4" class="test">아이디선택자</li>
</ol>
<hr>
<p class="class1">
해당 이 문서 내에 내가 원하는 여러 개의 요소들을 선택하고자 할 때 사용
(즉, 중복 부여 가능함)
</p>
<pre>
[ 표현법 ]
.클래스명 {
스타일속성 : 값;
스타일속성 : 값;
}
</pre>
<!-- 1, 3, 5번째 li 태그만 선택해서 효과를 주고 싶다. -->
<!-- 2, 3번째 li 태그만 선택해서 효과를 주고 싶다. -->
<ul>
<li class="class1">클래스선택자1</li>
<li class="test">클래스선택자2</li>
<li class="class1 test">클래스선택자3</li> <!-- 클래스 여러 개 작성 시 띄어쓰기로 구분 -->
<li>클래스선택자4</li>
<li class="class1">클래스선택자5</li>
</ul>
<!--
모든 태그 내에 공통적으로 쓸 수 있는 속성: id, class
(input, a, form, div, span, ...)
id: 이 해당 문서 내에 고유한 값으로 "하나만"을 작성해야 함
class: 이 해당 문서 내에 중복된 값 작성 가능,
한 요소에 여러 개도 작성 가능
-->