티스토리 뷰

Frontend

CSS의 선택자와 Specificity

구티맨 2021. 3. 17. 14:42

웹 개발을 하게 되면서, 로직을 구현하는 것도 어렵지만 이전에 웹 개발을 많이 해보지 않았다면

 

갑자기 bootstrap, material-ui 를 쓰다보면 그냥 거기서 제공해주는 기본 디자인으로 개발을 한다면야 크게 어렵지 않지만

 

실상은 항상 디자인을 변경해줘야 합니다. 그러다보니 CSS에 대한 기본 개념이 충실하게 잡혀있지 않으면

 

스타일을 override 하는 가이드라인이 잘 되어 있다한들 이해하는데 어려움을 많이 겪게 됩니다.

 

그래서 기본적인 CSS 문법과 선택자, 그리고 Specificity 를 다뤄보고자 합니다.

( 가이드에 따라 스타일을 override 했지만, material-ui의 CSS에 override 되어버리거나 하는 경우가 있어 알아보다 보니 Specificity를 알아야 하네요. )

 

CSS( Cascading Style Sheets )

css는 아시다시피 웹 페이지에 어떻게 보일지 스타일을 정의하는 스타일 시트 입니다.

 

문법은 선택자( h2 ), 선언 시작과 끝( { } ), 속성명: 속성값 으로 구성되며, ; 를 사용하여 속성 선언을 구분합니다.

<head>
    ...
	<style>
		h2 {
			color: teal;
			text-decoration: underline;
		}
	</style>
</head>

선택자

스타일을 적용할 HTML 요소를 가리키는데 사용되는 선택자는 HTML요소, 아이디, 클래스, 그룹( 여러 선택자를 쉼표로 구분하여 연결 )을 선택할 수 있습니다.

<head>
	<style>
    		/* HTML요소 선택자 */
		h2 { color: teal; text-decoration: underline; }
        
         	/* ID 선택자 */
          	#head2 { color: teal; text-decoration: line-through; }

          	/* Class 선택자 */
          	.head3 { color: lime; text-decoration: overline; }
            	div.cls{ color: blue; }

          	/* Group 선택자 */
          	h1, h2, p { background-color: red; }
	</style>
</head>
...
<h2>HTML 요소 선택>/h2>
<h2 id="head2">ID 선택자</h2>
<h2 class="head3">Class 선택자1</h2>
<h3 class="head3">Class 선택자2</h2>
<div class="cls">Div cls Class선택자</div>

자손 선택자( descendant selector ) : <div>태그 하위 요소 중 모든 <p>태그를 선택

 

자식 선택자( child selector ) : <div>태그 바로 밑에 있는 <p>태그를 선택

 

일반 동위 선택자( general sibling selector ) : <div>태그와 동위 관계( 같은 레벨 )에 있는 요소 중에 <div>태그보다 뒤에(아래에) 존재하는 <p>태그를 모두 선택( 샘플 )

 

인접 동위 선택자( adjacent sibling selector ) : <div>태그와 동위 관계에 있는 요소 중 <div>태그 바로 뒤에 존재하는 <p>태그를 선택( 샘플 )

 

속성 선택자( attribute selector ) : 특정 속성이나 특정 속상값을 가지고 있는 HTML 요소를 선택

<style>
	/* 자손 선택자 */
    div p { background-color: #FFEFD5; }
    
    /* 자식 선택자 */
    div > p { background-color: #FFEFD5; }
    
    /* 일반 동위 선택자 */
    div ~ p { background-color: #FFE4E1; }
    
    /* 인접 동위 선택자 */
    div + p { background-color: #FFE4E1; }
    
    /* 속성이름 선택자 */
    [title] { background: black; color: yellow; }
    
    /* 속성이름, 값 선택자 */
    [title="first h2"] { background: black; color: yellow; }
    
    /* input element의 type 속성의 값이 password 인 것을 선택 */
    input[type="password"] { width: 130px; display: block; background-color: #90EE90; border: solid 2px red; }
</style>

의사 클래스( pseudo-class )

선택하고자 하는 HTML 요소의 특별한 상태를 명시할 때 사용합니다.

선택자:의사클래스이름 {속성: 속성값;} 
선택자.클래스이름:의사클래스이름 {속성: 속성값;} 
선택자#아이디이름:의사클래스이름 {속성: 속성값;}

의사 클래스는 :visited( 연결된 페이지를 방문한 상태를 모두 선택 ), :hover( 커서가 링크 위에 올라가 있는 상태를 모두 선택 ) 등이 있으며, 특정 선택자의 또는 특정 선택자의 클래스/아이디이름에 의사 클래스를 정의하여 스타일을 정의할 수 있습니다.

<style>
    a:link {color: orange;}
    a:visited {color: gray;}
    a:hover {color: blue;}
    a:active {color: red;}
    div:hover { background-color: blue; color: white; }
</style>

:root selector

:root 선택자는 문서의 root 요소를 선택합니다. HTML에서는 html 요소가 항상 root 요소가 됩니다.

:root {
  background: #ff0000;
}

아래 코드를 실행해보면, hello에는 흰색 바탕색이 나머진 붉은색 바탕색 인 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<style> 
:root {
  background: #ff0000;
  font-size: 10px;
}
p { background: white; font-size: 20px; }
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>Hello</p>

</body>
</html>

디버깅 해보면, html 요소에 :root style이 적용 되어 있는 것을 볼 수있고,

그리고, p 요소를 선택해보면 html 요소로 부터 상속받은 :root 스타일이 적용되고 p 선택자가 이를 override하여 override된 :root 의 style 속성은 취소선이 되어있는 것을 확인할 수 있습니다.

Specificity

specificity는 브라우저가 html 요소에 가장 관계가 있는 CSS 속성값을 결정하는 것을 뜻합니다.

즉, 한 요소에 여러 CSS 속성 값이 정의되었을 때 어떤 css 속성값을 적용을 할지 결정하는 것인데, 

이러한 중첩된 스타일의 우선순위는 아래와 같습니다.

style attribute > id selector > class selector > tag selector(html 요소)

제너럴한 것이 우선순위가 낮고, 더 구체적인 것이 우선순위가 더 높다라고 생각하시면 됩니다.

!important

스타일에 important 규칙이 사용되면, 해당 정의 값이 최상위 우선순위로 다른 값을 override합니다.

!important는 CSS의 cascading 규칙을 깨기 때문에 사용하는 것을 추천하진 않습니다.

td { height: 50px !important; }

 

'Frontend' 카테고리의 다른 글

CSS 와 SASS, SCSS  (0) 2021.03.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함