[CSS] ② CSS 상속 & 선택자

티스토리 뷰

프론트엔드/CSS

[CSS] ② CSS 상속 & 선택자

doeunnkimm 2022. 7. 6. 13:42

▶상속

스타일을 작성하다 보면 요소에 직접 부여하지 않은 스타일이 적용되어 당황스러울 때가 있습니다.

대부분 이런 상황은 상속에 의해 발생합니다.

CSS의 프로퍼티 중에서 상위요소(부모, 조상)에서 적용되었지만, 자식 요소까지 상속되는 프로퍼티들이 있습니다.

대표적으로 font 관련 프로퍼티나 색상, 정렬 방식의 프로퍼티가 상속됩니다.

<div style="font-size: 20px">
    parent
    <!-- child 또한 font-size가 20px로 노출 -->
    <p>child</p>
</div>

이 코드의 실행 결과는 다음과 같습니다.

반대로 width, height, margin, display, border처럼 상속되지 않는 프로퍼티 또한 존재합니다.

<div style="border: 1px solid #ccc">
    parent
    <!-- child에는 border(테두리)가 없습니다. -->
    <p>child</p>
</div>

코드 실행 결과는 다음과 같습니다.

border(테두리)가 상속되는 프로퍼티라면 child가 작성된 p 영역 또한 테두리 선이 나타나야 하지만 아무런 변호가 없습니다.

반면에 상속되는 프로퍼티지만 HTML 요소의 종류에 따라 상속되지 않기도 합니다.

대표적으로 <button> 요소가 이에 해당합니다.

<div style="font-size: 20px">
    parent
    <button>child</button>
</div>

<button>에 있는 텍스트 child의 크기는 font-size를 상속받아 20px을 가져야 하지만 <button> 요소이기 때문에 font-size를 상속받지 않습니다.

만약 프로퍼티와 요소의 종류에 영향받지 않고 부모 요소의 프로퍼티를 상속받고 싶다면 명시적으로 inherit 값을 지정합니다.

<div style="font-size: 20px">
    parent
    <!-- button 내 폰트 또한 20px의 크기를 갖습니다. -->
    <button style="font-size: inherit">child</button>
</div>

실행 결과는 다음과 같습니다.

▶선택자

어느 요소에 스타일을 적용할지 대상을 뜻하는 패턴을 의미합니다. 이전 글에서의 A를 의미합니다.

패턴이라는 말에서 알 수 있듯이 선택자를 작성하는 방법은 여러 가지가 있으며, 지정하는 방식에 따라 명시도나 우선순위가 다릅니다.

▷전체 선택자

'*' 와일드 카드라 불리는 별표 문자를 사용해 스타일을 지정합니다.

전체 선택자를 사용하면 페이지에 해당하는 모든 요소가 영향을 받습니다.

전체 선택자는 브라우저의 기본 스타일을 초기화하는 reset css나 normalize css 등의 스타일에서 주로 사용합니다.

reset css나 normalize css는 브라우저마다 서로 다른 기본 스타일을 가지고 있기 때문에 동일한 스타일로 통일하기 위해 사용하는 기법입니다.

* {
	/* 모든 요소의 padding이 0이 됩니다. */
    padding: 0;
}

참고로, /* ...*/는 CSS 주석 문자입니다.

▷타입 선택자

HTML 요소 이름을 선택자로 사용합니다.

타입 선택자를 사용하면 해당하는 모든 요소가 영향을 받습니다.

요소 이름을 그대로 선택자가 들어가야 하는 자리에 작성합니다.

모든 <div> 요소에 padding을 10px로 설정하고 싶다면 다음처럼 작성합니다.

div {
	padding: 10px;
}

▷id 선택자

id 속성에 지정한 값을 이용해 스타일을 지정합니다.

다른 HTML 속성을 지정하는 방식과 동일하게 open tag에서 id 속성에 값을 넣어 지정합니다.

id는 페이지당 하나만 가지는 단일 값으로 정화하게 일치하는 단일 요소에만 지정하고 싶을 때 사용합니다.

id 선택자는 id 앞에 '#'을 붙여 작성합니다.

id가 id-name인 요소에 padding을 10px로 지정하고 싶다면 다음처럼 작성합니다.

<div id="id-name">id가 id-name인 div 요소</div>
<style>
#id-name {
	padding: 10px;
}
</style>

▷class 선택자

class 속성은 요소에 스타일을 지정하는 가장 일반적인 방법입니다.

id 속성과 동일한 방식으로 open tag에 class 속성을 지정합니다.

class 속성은 id와 다르게 여러 요소에 같은 class 값을 지정해 동일한 스타일을 지정할 수 있습니다.

class 선택자는 class명 앞에 '.'을 붙여 작성합니다.

클래스명이 class-name인 요소들에 padding을 10px로 지정하고 싶다면 다음 코드처럼 작성합니다.

<div class="class-name">class가 class-name인 div 요소</div>
<p class="class-name">class가 class-name인 p 요소</p>
<style>
.class-name {
	padding: 10px;
}
</style>

▷속성 선택자

html 속성의 값들을 비교한 결과로 스타일을 지정합니다.

선택자는 "요소 이름[속성명(연산자)값]"의 형태를 갖습니다.

연산자에 따라 요소를 선택하는 기준을 다르게 적용합니다.

연산자	설명
속성명	속성명을 작성할 때 해당 속성을 갖는 요소를 모두 선택합니다.
=	값이 정확하게 일치할 때 선택합니다.
~=	값이 정확하게 일치할 때 선택합니다. =와 다르게 띄어쓰기로 여러 값이 지정된 요소일 때도 찾아서 선택합니다.
\|=	값이 일치하거나 값 뒤 -(하이픈)을 작성할 때 또한 선택합니다.
^=	접두사로 값을 가질 때 선택합니다.
$=	점미사로 값을 가질 때 선택합니다.
*=	값이 포함된 모든 요소를 선택합니다.

사용 방법은 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자에 대한 코드</title>
        <style>
            /*태그[속성명(연산자)값] {스타일 옵션} 형태로 입력해줍니다. */

            /* id 속성을 갖는 span 요소에 스타일 지정 */
            span[id] {
                color: skyblue;
            }
            
            /* href 속성이 http://example.com인 a 요소에 스타일 지정 */
            a[href="http://example.com"] {
                color: red;
            }

            /* 클래스로 class1을 갖는 span 요소 선택 */
            span[class~="class1"] {
                color: blue;
            }

            /* id 중 hi 또는 hi- 형태를 갖는 span 요소 선택 */
            span[id|="hi"] {
                color: darkblue;
            }

            /* id의 접두사가 test인 span 요소 선택 */
            span[id^="test"] {
                color: cadetblue;
            }

            /* id의 접미사가 test인 span 요소 선택 */
            span[id$="test"] {
                color: rebeccapurple;
            }

            /* id에 javascript가 포함된 span 요소 선택 */
            span[id*="javascript"] {
                color: teal;
            }
        </style>
    </head>
    <body>
        <span id="id1">span[id]</span>
        <a href="http://example.com">a[href="http://example.com"]</a>
        <span class="class1 class2">span[class~="class1"]</span>
        <span id="hi-1">span[id|="hi"]</span>
        <span id="test-1">span[id^="test"]</span>
        <span id="id-test">span[id$="test"]</span>
        <span id="id-javascript">span[id*="javascript"]</span>
    </body>
</html>

실행 결과는 다음과 같습니다.

▷여러 선택자를 이용해 동시에 스타일 지정하기

여러 선택자를 동일한 스타일을 지정하고 싶을 때 ','를 이용해 해당 선택자를 연결하면 동시에 스타일을 지정할 수 있습니다.

#id-name,
.class-name,
button {
	color: red;
}

위의 코드처럼 id가 id-name인 요소, class가 class-name인 요소, <button> 요소에 모두 스타일을 지정하고 싶으면 ','로 각 선택자를 이은 뒤 블록({})으로 할당해 지정하면 한 번에 스타일이 지정됩니다.

여기까지 CSS 상속과 선택자에 대해 알아보았습니다 :)

728x90

LIST

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] ⑥ 반응형 웹을 위한 미디어 쿼리 (0)	2022.07.13
[CSS] ⑤ flex를 이용한 레이아웃 만들어 보기 (0)	2022.07.13
[CSS] ④ 박스 모델과 여백 상쇄 (0)	2022.07.13
[CSS] ③ CSS 우선순위와 명시도(Specificity) (0)	2022.07.06
[CSS] ① CSS 작성방법 (0)	2022.07.06

250x250

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/09 »
일	월	화	수	목	금	토
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

글 보관함

doeunn.log

티스토리 뷰