[CSS]css 시작 - style 속성,<style> 태그 / 선택자
HTML이 웹페이지를 만들기 위한 가장 기본적 언어라면, CSS는 웹페이지를 시각적으로 아름답게 꾸미는 디자인에 관한 언어라고 볼 수 있다.
HTML 내부에서 CSS효과는
1. style 속성
2. <style> 태그
이 두가지 방법으로 사용된다.
1. style 속성
HTML 태그의 속성 중 style 속성을 이용한 것이다.
<img> 태그의 width 속성과 같이,
<img src="picture1.jpg" width="50px">
css 효과를 주고 싶은 곳에 style="css 효과" 속성을 사용한다.
<img src="picture1.jpg" width="50px">
<h1 style="color:blue">제목입니다</h1>
(style=""부분은 HTML / color:blue 부분은 CSS)
2. <style> 태그
HTML 문서 구조 중 head 부분에 쓰이는 태그이다.
CSS 효과는 <style> 태그 안에 입력하면 되는데, 선택자, 효과(속성:속성 값;)으로 구성된다.
그렇기에 우리는
- 어떤 선택자(selector)가 있는지?
- 어떤 효과(declaration)가 있는지?
이 두가지 질문의 답을 안다면 CSS를 정복했다고.....(하고싶네요....ㅎㅎ)
먼저, 선택자에는 주로 쓰는 세가지 종류가 있다
① 요소(element) 선택자
② class 선택자
③ id 선택자
① 요소(element) 선택자
: HTML 태그를 선택자로 사용
: 가장 낮은 우선 순위
<style>
ol{ color : orange; }
</style>
<ol>
<li>안녕하세요</li>
<li>반갑습니다</li>
</ol>② class 선택자
: HTML class 속성 값을 선택자로 사용
: . class 속성 값으로 표현
: 두번째 우선 순위
<style>
.change{ color : blue; }
</style>
<h1 class="change">안녕하세요</h1>③ id 선택자
: HTML id 속성 값을 선택자로 사용
: # id 속성 값으로 표현
: 가장 높은 우선 순위
<style>
#change{ color : yellow; }
</style>
<h1 id="change">안녕하세요</h1>
※ 선택자 사용 예시
1) class 선택자 사용 예시
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
첫번째, 두번째 요소만 CSS 효과를 주고 싶은 경우엔 요소(element) 선택자 ol을 활용할 수 없다.
이럴 때, 첫번째 방법인 "style 속성"을 사용할 수도 있지만,
<ol>
<li style="color:gray">첫번째</li>
<li style="color:gray">두번째</li>
<li>세번째</li>
</ol>class 선택자를 사용하면 나중에 속성값을 변경할 때 좀 더 효율적으로 변경할 수 있다.
<style>
.check{ color:gray; }
</style>
<ol>
<li class="check">첫번째</li>
<li class="check">두번째</li>
<li>세번째</li>
</ol>2) id 선택자 사용 예시
class 속성에서 여러개의 선택자를 둘 수도 있다.
<style>
.check{ color:gray; }
.saw{ color:yellow; }
</style>
<ol>
<li class="check">첫번째</li>
<li class="check saw">두번째</li>
<li>세번째</li>
</ol>두번째 요소에는 check, saw 두개의 선택자가 사용되었는데, 이렇게 같은 효과(color)에 대한 경우 가장 마지막에 적힌 선택자의 효과(예시-yellow)가 적용된다.
이럴 때 우선순위가 앞선 선택자가 필요한데, 그게 바로 id 선택자이다.
<style>
#saw{ color:yellow; }
.check{ color:gray; }
</style>
<ol>
<li class="check">첫번째</li>
<li class="check" id="saw">두번째</li>
<li>세번째</li>
</ol>id="saw"가 class="check"보다 앞에 사용되었지만, 우선순위가 높은 id 선택자의 효과가 적용된다.
요약
1. style 속성
- 표현 : style="css효과"
- 태그의 속성 중 하나로 사용된다
2. <style> 태그
- 표현 : 선택자 { 속성 : 속성값;}
- <head> 영역의 <style></style> 안에 쓰임
+
선택자
- element(요소) 선택자
- class 선택자 : .class 속성값
- id 선택자 : #id 속성값