CSS (Cascading Style Sheets) : HTML로 작성된 웹 문서를 꾸미기 위한 기법
1. 선택자(Selector) 란?
특정 html요소를 선택하고자 할때 사용하는 기능 , 해당 요소를 선택해서 원하는 "스타일"과 "기능"을 적용시킬 수 있음
1) 모든(전체) 선택자 : *
현재 문서상 모든 요소를 선택하고자 할때 사용
2) 태그 선택자 : 태그명
현재 문서상 해당 태그들을 다 선택하고자 할 때 사용 ( 다중선택가능)
3) 아이디 선택자: #아이디명
현재 문서상 특정 html요소 "하나"만을 선택하고자 할 때 사용
단, 해당 요소에 id속성을 이용해서 고유한 아이디값 부여해야함
<style>
#id1{ color: palevioletred;}
</style>
<ol>
<li id="id1">아이디 선택자1</li>
<li>아이디 선택자2</li>
<li>아이디 선택자3</li>
<li>아이디 선택자4</li>
</ol>- 아이디 선택자1
- 아이디 선택자2
- 아이디 선택자3
- 아이디 선택자4
4) 클래스 선택자 : .클래스명
해당 문서상 내가 원하는요소 "여러개" 를 선택하고자 할 때 사용 ( 여러요소에 공통적인 클래스부여)
<style>
.class1{
color: purple;
}
.class2{
background-color: indianred;
font-size: 2em;
}
p.class1{
color: rgb(250, 77, 14);
}
<ul>
<li class="class1">클래스선택자1</li>
<li class="class2">클래스선택자2</li>
<li class="class1 class2">클래스선택자3</li>
<li>클래스선택자4</li>
<li class="class1">클래스선택자5</li>
<!--emmet 문법 : li{클래스선택자$}*5-->
</ul>- 클래스선택자1
- 클래스선택자2
- 클래스선택자3
- 클래스선택자4
- 클래스선택자5
> 모든 태그 내 공통적으로 쓸 수 있는 속성 : id, class
# id : 현재 문서내 "고유"한 값으로 "하나"만 작성
. class: 현재 문서내 "중복"된 값으로 작성가능, "여러개" 작성 가능
스타일 적용 방식
- 내부 스타일 방식 : <head>영역에 <style>태그 내에 기술하는것
즉, 해당 html문서내에 스타일 정보를 같이 기술하는 방식
<head>
<style>
h3{background-color: rgba(255, 255, 12, 0.459); }
</style>
</head>
<body>
<h3>내부스타일방식</h3>
</body>내부스타일방식
-인라인 스타일 방식: 스타일을 부여하고자 하는 요소 내에 style속성을 이용해서 직접 기입하는 방식
<h1 style="color: cornflowerblue;">인라인스타일방식</h1>인라인스타일방식
-외부 스타일 방식 : 스타일 정보만을 따로 기술하는 .css 외부 문서를 만들고 link 태그를 이용해서 연결시켜주는 방식
'Front > CSS' 카테고리의 다른 글
| CSS 05. 텍스트 관련 스타일 (0) | 2022.12.12 |
|---|---|
| CSS 04. 글꼴관련 스타일 (0) | 2022.12.09 |
| CSS 03. 선택자 우선순위 (0) | 2022.12.09 |
| CSS 02. 기타 선택자 (2) (0) | 2022.12.09 |
| CSS 02. 기타 선택자 (1) (0) | 2022.12.09 |