CSS란?
- HTML document의 스타일을 설명하는 언어
- HTML과 CSS는 각자의 문법을 갖는 별개의 언어이다.(but HTML안에 CSS는 가능하지만 HTML없이 단독으로 존재하는 CSS는 의미가 없음)
선택자 Selector
- 스타일을 적용하고자 하는 html요소를 선택해야 하는데 이 때 css에서 제공하는 수단이 셀렉터
<style>
h1{
color:red;
}
</style>
<body>
<h1>hello</h2>
</body>hello
위 예시처럼 <h1>의 컬러를 빨간색으로 변경해주는 것(선언)이 css의 역할이며 여기서 h1이 셀렉터가 되는 것이다. 다시말해 html안에 있는 특정 element들을 선택하는 것이 셀렉터이며 선택 후 선언 블록의 내용을 적용시켜 주는 것이다. 이런 문장들을 한데 모으면 스타일 시트를 이루게 되고, 여러가지 스타일 규칙들을 관리하기 쉬워진다.
선택자의 종류
- 전체 선택자(Universal Selector)
*: 스타일 속성을 HTML페이지 내부의 모든 태그에 적용할 때 쓰는 선택자
보통 margin, padding값을 초기화 하거나 기본값을 정해둘 때 사용한다.
*{
box-sizing:border-box;
}- 태그 선택자
태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자이다.
p, span, div, header, main ... 직접적으로 태그를 선택하여 스타일을 적용시킬 수 있다.
p{
color:red;
font-size:24px;
}- ID 선택자
예시와 같이 ID 속성값을 지정하여 선택할 수 있다. 다만 ID 속성값은 중복해서 사용할 수 없는 유일한 값임을 명심해야한다.
<style>
#title{
color:purple;
}
</style>
<body>
<div id="title">ID Selector</div>
</body>- 클래스 선택자
예시와 같이 클래스 선택자는 주어진 값을 class 속성값으로 가진 HTML요소를 찾아서 선택한다. 선택하려는 속성 값에 .마침표를 추가해야한다.
만약 같은 스타일을 적용하고 싶다면 여러 클래스를 함께 묶어 스타일을 적용시킬 수 도 있고, 클래스 안에 클래스를 선택할 수도 있다.
<style>
title{
color:blue;
font-size:24px;
}
content{
color:green;
font-size:12px;
}
</style>
<body>
<div class="title">CSS Selector</div>
<div class="content">class selector</div>
</body>- 속성 셀렉터
지정된 속성을 갖는 모든 요소를 선택한다.
<style>
a[href] {
color:red;
}
</style>
<body>
<a href ="http://yoonzyoung.com/"</a>
<a href ="https://www.naver.com/"</a>
<a href="https://www.youtube.com/?gl=KR"</a>
</body>naver.com
youtube.com
- 가상 셀렉터
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 마우스가 올라와 있을 때, 링크를 방문했을 때와 아직 방문하지 않았을 때, 포커스가 들어와 있을 때 등등.. 이러한 특정 상태에 원래 클래스가 존재하지 않았지만 혹은 존재하였더라도 특정 상태가 되었을 때 바뀌는 경우 사용한다. 가상 클래스는 마침표 대신 :콜론을 사용한다.
<style>
a:hover {
color:yellow;
}
<style>
<body>
<a href ="http://yoonzyoung.com/">yoonzyoung.com</a><br>
</body>
- 동적 선택자 종류
:link -> 셀렉터가 방문하지 않은 링크일 경우
:visited -> 셀렉터가 방문한 링크일 때
:hover -> 셀렉터에 마우스가 올라와 있을 때
:active -> 셀렉터가 클릭된 상태일 때
:focus -> 셀렉터에 포커스가 들어와 있을 때
-
셀렉터는 정말 여러 경우로 선택할 수 있다. 구조 가상 클래스 셀렉터라는 것도 있는데..쉽게 말해서 여러 요소들 중 첫번째만 선택하고 싶을 때 혹은 마지막만 선택하고 싶을 때 또는...홀수,짝수만 선택하고 싶을 때 등 여러 방법으로 선택할 수 있다. 자세한건..아래 링크를 통해 공부해보기..!
-
https://poiemaweb.com/css3-selector
여기서 좀 더 다양하고 자세하게 공부할 수 있다.
~CSS란 무엇인가 살펴보면서 셀렉터까지 살펴보았다...!
다른 특성들도 따로 정리해두었으니 함께 살펴서 공부해보기!
무궁무진한 CSS의 세계...공부하면 할 수록 짜릿하고 새롭다😻
