[CSS기초]선택자와 결합자,속성값

 

기본적인 CSS의 조작방법을 다룬다.

CSS는 Properties(속성)와 Values(값)로 이루어진다. 이것을 선택자를 통해서 속성을 변경 할 수 있으며, 

여러개의 선택자를 결합자를 이용하여 더욱 자세히 요소를 선택할 수 있게 할 수 있다.

자주 사용되는 선택자와 결합자 속성의 값에는 어떤 종류가 오는지에 대해정리.

 

선택자

HTML요소를 선택하고 스타일을 적용하는데 사용되는 패턴이다. 클래스,ID,속성 등을 사용하여 요소를 식별하고 선택한다.

 

🔎대표적인 선택자

1️⃣요소 선택자

HTML요소 이름을 사용해서 선택한다. div p h1

2️⃣클래스 선택자

HTML요소의 ‘class’속성 값을 사용하여 선택한다. ‘ . ’으로 시작한다. .container .wrap

3️⃣ID 선택자

HTML요소의 ‘ID’ 속성 값을 사용하여 선택한다. “#”으로 시작한다. #Home #project

4️⃣속성 선택자

HTML요소의 특정 속성 값을 사용하여 선택 할 수 있다. ‘[속성]’ 또는 ‘[속성=값]’ 의 형식으로 사용한다. [type=text]

5️⃣가상 클래스 선택자

특정 상태의 요소를 선택한다. ‘:’로 나타낸다 :hover :active

6️⃣가상 요소 선택자 

요소의 특정 부분을 선택한다. “::”로 시작하며 요소의 특정 부분에 스타일을 적용한다. ::before ::after

 

⚠️:after와 ::after는 기능적으로 동일하다.

가상 요소 선택자는 CSS3부터 도입된 정식 가상 요소를 나타내는 표기법이다. 최신 브라우저에서는 ::after를 사용하는것이 권장된다.

 

 

결합자

결합자는 선택자와 함께 사용되어 자세한 선택 규칙을 생성할 수 있다.

선택자는 HTML요소를 식별하여 선택한다면, 결합자는 선택자 간의 관계를 정의하여 요소를 더 정확하게 선택한다.

 

🔎대표적인 결합자

1️⃣후손 결합자

공백으로 구분된 선택자 간의 관계를 나타낸다. 이 결합자는 조상 요소 내에 있는 모든 후손 요소를 선택한다.

div p <div>안의 모든<p>태그를 선택한다.

.container h1 container클래스에 모든 <h1>요소를 선택한다.

2️⃣자식 결합자

‘>’ 기호로 표시한다. 선택자와 선택자 사이 직접적인 자식 요소만 선택할 수 있다.

ul > li ul요소의 직접적인 자식인 li요소를 선택

.container > .title container클래스의 직속 자식인 title클래스를 선택

3️⃣인접 형제 결합자

‘+’기호로 표시되며 선택자와 선택자 사이에 첫 번째 선택자 바로 다음에 오는 형제 요소를 선택한다.

h1 + p h1태그 다음 형제인 첫 번째 p요소를 선택한다.

4️⃣일반 형제 결합자

‘~’기호로 표시되며, 첫 번째 선택자의 다음에 오는 모든 형제 요소를 선택한다.

h1 ~ p h1요소 다음에 오는 모든 p요소를 선택한다.

 

 

Value Types

속성의 값의 타입은 크게 네 가지로 나눠볼 수 있다.

1️⃣논리 값(특정 속성의 유무, 활성화 여부를 표현하는데 사용)

display : block;

overflow : auto;

 

2️⃣색상을 나타내는 값(색상 키워드,RGB,HEX코드 등)

background : red;

color : #fa023f;

color : #ccc;

 

3️⃣사이즈를 나타내는 값(숫자,px,%,em,rem)

height : 100px;

width : 20%;

z-index : 1 ;

 

4️⃣함수

background : url(...);

transform : scale(...);