CSS Tutorial (6) / CSS 시작하기 (6) 선택자, 의사클래스와 의사요소

 

 

 

 

 

마지막 5챕터의 내용들이다.

분량이 많아 2편으로 나누지 않을까 싶다.

 

강의는 클래스101, 유노코딩 강사님의 프로그래밍 입문자를 위한 CSS 기초이다.

https://class101.net/ko

CLASS101+ | 세상의 모든 클래스를 하나의 구독으로

 

 

 

 

 

 

 

 

 

 

 

5챕터. 한 걸음 더 나아가기 - 상호작용, 세부 위치 등 세세한 부분까지 생각하기

 

 

 

 

 

 

 

1강. 선택자 2편, 특성 선택자와 결합자

 

 

 

(1) 선택자

선택자란 어떤 요소에 스타일을 적용할 것인지에 대한 정보.

 

 

 

 

(2) 선택자의 종류

기본 선택자 => (1)편에서 다룬 내용 

그룹 선택자 => (2)편에서 다룬 내용

특성 선택자 => 이번에 다룰 내용

결합 선택자 => 이번에 다룰 내용

의사 클래스

의사 요소

 

 

 

 

(3) 특성 선택자 1. 컨셉

특성 선택자(속성 선택자라고도 부른다.)는 주어진 속성의 존재여부나

그 값에 따라  요소를 선택한다.

 

*예시코드

[class]{

        background-color: tomato;

}

=> 클래스라는 속성을 가지고 있는 요소의 색을 모두 토마토로.

 

 

[class = "item"]{

        background-color: tomato;

}

=> 클래스가 "item"인 요소를 선택해 색을 모두 토마토로.

 

 

 

 

(4) 특성 선택자 2. 값 확인

기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.

 

*예시코드

[class*= "it"] {color: white;}

=> 클래스 이름에 "it"이 포함되는 요소를 선택해 색상 변경.

 

[class^= "it"] {color:white;}

=> 클래스 이름이 "it"으로 시작되는 요소를 선택해 색상 변경.

 

[class$= "it"] {color:white;]

=> 클래스 이름이 "it"으로 끝나는 요소를 선택해 색상 변경.

 

 

 

 

 

위에서 살펴본 여러 특성 선택자를 활용해보았다.

신기한 것은 스판태그는 인식이 안되는 것인지 색이 바뀌지 않는다.

왜일까? 이유를 잘모르겠다. 아이디로 따로 정의해준 다음에 바꿔야하는 모양이다.

(아이디로 인식시켜주니 된다.)

추가로 실수로 id=^uni라고 썼지만 원칙적으로는 ""을 붙이는게 맞는듯 하다.

 

 

 

 

 

 

 

 

 

(5) 결합 선택자 1. 컨셉

결합 선택자(결합자)는 두 개 이상의 선택자들을 결합시켜 그 조건을 만족하는 

요소를 선택하도록 한다.

 

두 가지의 종류가 있다.

- 자손 결합자

- 형제 결합자

 

 

 

 

(6) 결합 선택자 2. 자손 결합자

두 개의 선택자 중 첫번째 선택자 요소의 자손을 선택할 수 있다.

자손이란, 해당 태그 안에 속해 있는 요소들을 이야기한다.

 

*예시코드

div p{ color: white; }

=> div 요소 안에 위치하는 모든 p 요소를 선택하기.

 

div > p{ color: white; }

=> div 요소의 바로 한 단계 아래의 하위요소에 p태그가 존재할 때

그 요소를 선택하기.

 

 

 

 

(7) 결합 선택자 3. 형제 결합자

두 개의 선택자 중 첫번째 선택자 요소의 형제를 선택할 수 있다.

형제란? 하위도 상위도 아닌, 서로 동등한 위치에 있는 태그들.

 

*예시코드

h1 ~ p( color: red; }

=> h1 요소의 뒤에 오는 형제 중 모든 p요소를 선택하기

 

h1 + p{  color: red; }

=> h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기

만약 바로 뒤에 p태그가 없으면 적용되지 않는다.

 

 

 

 

다양한 자식 선택자, 형제 선택자를 사용해보았다.

꼭 태그 이름이 아닌, .text처럼 클래스를 기준으로도 선택할 수 있다.

 

 

 

 

 

 

| 정리 |

* 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택한다.

* 특성 선택자는 값의 포함 여부, 포함 위치 등을 통해서도 선택할 수 있다.

* 결합 선택자는 여러 선택자를 결합하여 요소를 선택한다.

* 자손 또는 형제 중에서 특정 조건을 만족하는 요소를 선택할 수 있다.

 

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

 

 

 

2강. 의사클래스(가상클래스) - 그럴 때는 이렇게 할게요!

 

 

 

(1) 의사클래스(가상클래스)

의사클래스(가상클래스)는 선택자에 추가하는 키워드로,

요소가 다양한 상호작용을 통해 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

(마우스 커서를 가져다 댔다거나 클릭을 했다거나 등등!)

 

 

선택자: 의사클래스{

        속성명: 속성값;

}

 

 

*예시코드

h1:hover{

        color: red;

}

=> h1 요소에 마우스 커서가 올라오면(hover) 글자색을 빨간색으로 바꿔주세요!

 

 

 

 

(2) 대표적인 의사클래스

 

hover: 마우스 포인터가 요소에 올라가 있다.

active: 사용자가 요소를 활성화했다. (예를 들면, 마우스로 누르기와 같은)

focus: 요소가 포커스를 받고 있다.

disabled: 비활성 상태의 요소이다.

nth-child(): 형제 사이에서의 순서에 따라 요소를 선택한다.

 

=> 의사클래스가 정말 많다. 모든 의사클래스가 궁금하다면 다음 링크를!

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 

 

 

 

 

 

[type="button"]:hover

버튼에 갖다대면 갈색이였던 버튼이 빨갛게 변한다.

 

 

 

 

 

[type="button"]:active

클릭한 상태가 되면 (active) 오렌지 색으로 변한다.

 

 

 

 

 

input:focus

focus란 텍스트 입력란을 눌렀을 때를 의미한다.

그러면 배경색과 글자색이 바뀌도록 설정했다.

 

 

 

 

 

input:disabled

텍스트 입력란에는 disabled 속성을 추가할 수 있다.

disabled는 텍스트 입력이 불가하게 만드는 상태이다.

그때의 색상을 회색으로 바꿔주었다.

 

 

 

 

 

.box: nth-child(3)

nth-child는 특정 번째의 오브젝트만 따로 스타일을 바꿔줄 수 있다.

괄호 안에 숫자를 넣을 수도 있고, n, 2n, 2n-1등의 수식을 넣을 수도 있다.

n을 쓰면, 1부터 쭉 모든 자연수를 차례로 대입하는 것이다.

즉 n만 입력하면 모든 오브젝트가 다 스타일이 적용되고,

2n은 짝수 번째만 (2*1, 2*2, 2*3...)

2n-1은 홀수 번째만 스타일이 바뀐다.

 

 

 

 

 

 

 

 

 

| 정리 |

* 의사클래스는 선택자에 추가하는 키워드이다.

* 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

* 콘텐츠 자체적인 내용 뿐 아니라 사용자와의 상호작용과 관련된 경우에도

스타일을 적용할 수 있어 유용하다. (hover, active 등)

 

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

3강. 의사요소

 

 

(1) 의사요소

의사요소 (peseudo=elements)는 선택자에 추가하는 키워드로,

이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

 

의사클래스가 특정 상태에 대한 스타일을 달리 해주는 것이라면

의사요소는 특정 파트에 대해서 스타일을 달리 해주는 것이다.

 

선택자::의사요소 {

        속성명: 속성값;

}

 

*예시코드

선택자::first-letter{

        font-size: 20px;

}

=> li요소의 맨 첫글자만 크기를 20px로 하겠다. (기본값: 16px)

 

 

 

 

(2) 대표적인 의사요소

after: 요소의 앞에 의사 요소를 생성 및 추가한다.

before: 요소의 두에 의사 요소를 생성 및 추가한다.

first-line: 블록 레벨 요소의 첫번째 선에 스타일을 적용한다.

marker: 목록 기호의 스타일을 적용한다.

placeholder: 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용한다.

 

=> 의사클래스와 마찬가지로 엄청나게 많은 종류가 있다. 다른 의사요소들은 여기서..

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

의사 클래스 - CSS: Cascading Style Sheets | MDN

 

 

 

 

 

(2) ::first-line / ::first-letter

 

 

p::first-line

p태그의 첫줄만 (웹사이트 상에서 보이는 첫줄!)

스타일을 적용해준다.

 

p::first-letter

p태그의 내용 중 가장 첫 글자만 스타일을 적용해준다.

 

 

 

 

 

 

 

(3) marker

마커는 목록<li>의 구분점을 의미한다. (불릿이라고 부르는 검정 동그라미)

 

 

구분점의 색상과 크기를 바꿔주었다.

뭔가 이 구분점 말고도 다양한 것들을 바꿀 수 있지 않을까 싶다.

 

 

 

 

 

 

 

 

(4) placeholder

input요소를 만들었을 때, 그 안에 입력하라고 기본 문구를 띄우는 것이

바로 placeholder이다.

 

 

 

placeholder 의사요소를 통해 안내 문구 상태를 크게, 색상도 바꿔보았다.

 

 

 

 

 

 

(5) before / after

선택한 요소의 자식 요소를 추가해주는 의사요소이다.

before - 자식 요소 중에서 맨 앞에다가 요소를 추가.

after - 자식 요소 중에서 맨 뒤에다가 요소를 추가. 

content라는 속성을 이용해 요소값을 추가 가능하다.

 

 

 

 

키워드로 앞 뒤에 글을 추가할 수 있다.

두께도 바꿔보았다.

 

 

 

 

 

 

 

 

| 정리 |

* 의사요소는 선택자에 추가하는 키워드이다.

* 의사요소는 요소의 특정 부분에만 스타일을 적용하고자 할 때 사용한다. 

* HTML 문서가 포함하지 않은 개체 (목록 구분점, 플레이스 홀더 등)를

선택할 수 있어 무척 유용하다.

 

 

(출처: 유노코딩(클래스 101), 프로그래밍 입문자를 위한 CSS 기초)

 

 

 

 

 

 

 

 

 

 

이 글은 클래스 101, "프로그래밍 입문자를 위한 CSS 기초 (유노코딩)" 강의를

기반으로 작성되었음을 알립니다.