[CSS] CSS의 기본과 선택자

CSS란?

웹 브라우저가 읽을 수 있는 언어 : HTML, CSS, JS

CSS는 단순한 문서 형태인 HTML을 예쁘게 꾸며주고 구조를 잡아주는 역할

페이지의 요소들이 어디에 위치해야 하는지 레이아웃 구조를 잡아주며, 요소 하나하나를 개성있고 사용이 편리하도록 꾸며주는 역할

CSS 기본 용법

CSS 기본 용법

 

CSS는 선택자(Selector), 선언(Declaration)로 구분되며, 선언은 다시 속성(property), 속성값(property value)의 구조를 가지고 있다.

• 선택자 : 어떤 HTML 요소를 선택해서 스타일을 적용할지 지정
• 선언 : 구체적으로 어떠한 스타일을 선택자에 적용할 것인지 지정
• 속성 : 적용하고자 하는 스타일의 종류
• 속성값 : 해당 속성을 정확하게 어떤 값으로 지정할 것인지를 결정

CSS 적용 방식

1. inline style 작성하기 :
   html 태그에 직접 style 속성을 추가해 주는 것
   장점 : 스타일 적용 태그 즉시 확인 가능
   단점 : 한번에 하나의 태그에만 적용 가능, 전체 코드 가독성 나쁨, 관심사 분리 X, 유지보수가 어려움
2. <style> 태그에 직접 입력 :
   html 파일의 head부분에 style 태그를 추가해 주는 것
   단점 : 적용되는 스타일이 많아지면 유지보수가 어려움
3. CSS 파일 만들어 불러오기(⭐️) :
   파일을 분리하게 되면 HTML 파일과 연결해주는 작업 따로 수행해주어야함.
   <link> 태그를 통해 연결 할 수 있으며, 링크태그는 head 안에 있어야 한다.

<link href=”./index.css“ rel=”stylesheet“ type=”text/style”></link>

• href : 참조할 css 파일의 경로를 적어준다.
• rel : 해당 파일과의 관계이며, “stylesheet”라고 적어준다.
• type : link태그로 연결되는 파일이 무엇인지 알려주며 “text/style” 를 적어준다.

기본 선택자(Selector)

• 태그 선택자

tag { property : value }

•  id 선택자 

#id { property : value }

• class 선택자 

.class { property : value }

• 자손 선택자 

.parent .child { property : value }

자손 선택자

• 다중 선택자 

.class#id { property : value }

다중 선택자

 

전체 선택자

전체 선택자는 HTML의 모든 요소를 선택한다.

* { 
  property : property value 
}

 

그룹 선택자

여러 선택자를 그룹으로 묶는 기능
중복된 속성을 여러번 반복해서 줄 경우, 선택자를 묶어서 한번에 처리함으로써 코드를 줄여주는 역할을 한다.

h2 { 
  color : blue; 
} 
p { 
  color : blue; 
} 
div { 
  color : blue; 
}

h2, p, div { 
  color : blue; 
}

가상 클래스 선택자

• :first-of-type
  형제 요소 중 첫번째 요소를 선택하는 가상 클래스 선택자 first-child와 다르게 :first-of-type이라는 가상클래스가 적용된 선택자에 해당 되는 요소만 카운트함
  
  ①의 경우 박스3 글자 색상에 변화가 없고, ②의 경우에만 글자 색상이 orange로 변하게 된다. ⇢ first-child의 경우 div 하위 element 중에 p가 가장 첫번째에 위치해야 :first-child 가상클래스를 통해 선택할 수 있다. div 하위 요소 중에 가장 첫번째는 span 이기 때문에 선택할 수 없다.
  
  
  

가상 클래스 선택자

• :last-of-type
  형제 요소 중 마지막 요소를 선택하는 가상 클래스 선택자
• :nth-of-type(n)
  n번째 요소를 선택하는 가상 클래스 선택자
• :active
  활성화된 요소를 선택하는 가상 클래스 선택자 버튼 등을 클릭해서 요소의 동작이 활성화되어있는 상태
• :focus
  focus를 받고 있는 입력 창 등의 요소를 선택하는 가상 클래스 선택자 Tab키 등을 이용해서 입력창의 커서가 활성화되어있는 상태
• :visited
  사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택자 링크를 눌러서 해당 경로를 방문한 기록이 브라우저상에 남아 있는 링크 (기본 컬러 - 보라색)

가상 요소 선택자

실제로 html요소를 수정하지 않고, css만으로 가상요소를 추가해 선택할 수 있다.

:before
:after

가상 요소란, 말 그대로 ‘가상으로’ 만들어준 요소이기 때문에 본질적으로 html상에는 존재하지 않는다.

따라서 content 속성을 이용해서 인위적으로 요소 내에 들어갈 내용(content)를 작성해주어야 한다.

content 속성이 없으면 해당 가상요소는 화면에 그려지지 않는다.

❓가상 클래스와 가상 요소의 순서

가상 클래스와 가상 요소를 함께 사용할 경우에는 가상클래스 : 가상 요소 이 순서를 지켜야 한다!

가상 클래스와 가상 요소의 순서

 

형제 요소 선택자

A와 형제인 요소 중에서 B만 선택하는 선택자

A ~ B {
  property : value
}