오프라인 교육/포스코 X 코딩온

[포스코x코딩온] 웹 개발자 입문 과정 1주차 회고 | CSS 선택자

newbeverse 2023. 3. 5. 20:05
css 선택자를 배운 느낌

css 선택자는 고구마 줄기처럼 줄줄이 매달린 수 많은 태그들을 몇줄의 코드만으로 스타일링 할 수 있는 유용한 기능이였습다. css 선택자를 잘 사용한다면 유지 보수성과 유연성, 가독성, 성능 등에서 이득을 볼 수 있음이 분명했습니다.. 웹 개발자로서 정리해두고 익숙해질때까지 반복학습 할 가치가 있으므로 눈에 익도록 노력할 예정입니다.

 

CSS 선택자

class와 id 선택자는 CSS에서 요소를 스타일링하는 데 사용됩니다. class 선택자는 특정한 클래스 이름을 가진 모든 요소를 선택하며, id 선택자는 특정한 요소를 선택합니다. class 선택자는 한 요소에 여러 개의 클래스를 지정할 수 있으며, id 선택자는 페이지에서 유일한 요소를 식별할 때 사용됩니다.

 

선택자 우선순위

CSS 스타일 우선순위는 다음과 같은 순서로 결정됩니다.

  1. !important가 선언된 속성
  2. 인라인 스타일(요소 내에 직접 스타일을 지정한 경우)
  3. id 선택자
  4. class 선택자, 속성 선택자, 가상 클래스 선택자
  5. 요소 선택자, 가상 요소 선택자

따라서, id 선택자로 지정된 요소는 class 선택자로 지정된 요소보다 우선순위가 높으며, 같은 스타일 속성을 가지고 있다면 id 선택자가 적용됩니다.

 

사용법

id 선택자 사용법

id 선택자는 특정 요소를 식별하여 스타일을 적용하는 데 사용됩니다. id 선택자는 # 기호를 사용하여 지정할 수 있습니다. 예를 들어, id가 "header"인 요소를 선택하고 싶으면 다음과 같이 작성합니다.

#header {
  /* 스타일 속성 */
}

 

class 선택자 사용법

class 선택자는 특정한 클래스 이름을 가진 모든 요소를 선택하여 스타일을 적용하는 데 사용됩니다. class 선택자는 . 기호를 사용하여 지정할 수 있습니다. 예를 들어, class가 "button"인 요소를 선택하고 싶으면 다음과 같이 작성합니다.

.button {
  /* 스타일 속성 */
}

 

한 요소에 여러 개의 클래스를 지정할 수 있으며, 이 경우 각 클래스는 공백으로 구분하여 작성합니다. 예를 들어, class가 "button"과 "large"인 요소를 선택하고 싶으면 다음과 같이 작성합니다.

.button.large {
  /* 스타일 속성 */
}

 

전체 선택자 사용법

모든 요소를 선택하고 싶을땐 *기호를 사용합니다. 모든 태그가 선택됩니다. 예를 들어, <ul>, <div>, <p> 등의 모든 태그는 선택됩니다.

* {
	color: red;
}

 

태그 선택자 사용법

태그 이름으로 요소를 선택할 때 [태그 이름] 기호를 사용합니다. 예를 들어 <li> 태그를 선택하고 싶다면, li를 입력합니다.

li {
/* 스타일 지정 */
}

 

복합 선택자

복합 선택자는 CSS에서 여러 가지 선택자를 조합하여 사용하는 방법입니다. 복합 선택자는 여러 선택자가 조합된 형태로 표현되며, 이를 통해 더욱 정확한 요소를 선택하여 스타일을 적용할 수 있습니다.

자손 선택자

자손 선택자는 하위 요소를 선택하는 선택자입니다. 자손 선택자는 공백으로 표시됩니다. 예를 들어, ul 요소 내부에 있는 li 요소를 선택하고 싶으면 다음과 같이 작성합니다.

ul li {
  /* 스타일 속성 */
}

 

자식 선택자

자식 선택자는 바로 아래의 하위 요소를 선택하는 선택자입니다. 자식 선택자는 > 기호로 표시됩니다. 예를 들어, ul 요소 바로 아래의 li 요소를 선택하고 싶으면 다음과 같이 작성합니다.

ul > li {
  /* 스타일 속성 */
}

 

인접 형제 선택자

인접 형제 선택자는 같은 부모 요소를 가진 형제 요소 중 바로 뒤에 있는 요소를 선택하는 선택자입니다. 인접 형제 선택자는 + 기호로 표시됩니다. 예를 들어, p 요소 바로 뒤에 있는 img 요소를 선택하고 싶으면 다음과 같이 작성합니다.

p + img {
  /* 스타일 속성 */
}

 

일반 형제 선택자

일반 형제 선택자는 같은 부모 요소를 가진 모든 형제 요소 중 뒤에 있는 모든 요소를 선택하는 선택자입니다. 일반 형제 선택자는 ~ 기호로 표시됩니다. 예를 들어, h2 요소 뒤에 있는 모든 p 요소를 선택하고 싶으면 다음과 같이 작성합니다.

h2 ~ p {
  /* 스타일 속성 */
}

 

https://inseq.co.kr/ko/bbs/i-24/show.do?seq=19&searchCl1=&searchMulti=&searchKeyword= 나중에 읽기

 

 

반응형