-
[CSS]css 시작 - style 속성,<style> 태그 / 선택자프로그래밍/HTML&CSS 2021. 12. 20. 14:59
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 속성값'프로그래밍 > HTML&CSS' 카테고리의 다른 글
[CSS]css display 속성 - block, inline, block-inline (0) 2021.12.22 [CSS]css 박스 모델 (0) 2021.12.21 [HTML]html 태그 - 자주 쓰이는 기본 태그 (0) 2021.12.18 [HTML]html 문서 구조 (0) 2021.12.17 [HTML]html 속성, <img>태그 (0) 2021.12.17