네트워크와 웹/CSS

[ 생활코딩 CSS ] 2일차 - CSS의 선택자

캡스락 2020. 1. 12. 23:33

 

CSS 로고

 

1일차에선 셀렉터, 프로퍼티, 밸류의 세 가지로 이루어진 CSS 기본 문법까지 설명했는데요

이번 글에선 선택자의 종류에 대해 좀 더 상세하게 설명해 보겠습니다.

 CSS에서는 선택자를 통해 변경하고자 하는 대상을 정확히 선택해 주어야 하기에, 선택자는 CSS에서 가장 중요한 부분이라고 할 수 있겠습니다.

각 선택자의 이름은 한국어로도 있지만, 보통 개발시에는 구글에서 영어로 검색을 하는 경우가 대부분이므로 영어 이름으로 작성해 봤습니다.

1. Tag 선택자

태그 선택자는 한 HTML 문서에서 등장하는 특정 태그를 꾸며주고 싶을 때 사용합니다.

<html>
<body>
	<ul>
    	<li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

위와 같은 HTML 문서 내의 모든 <li> 태그의 색상 속성을 red로 바꿔주고 싶다면 전 글에서 설명한 기본 문법인

Selector { Property: Value; } 를 사용하여 아래와 같이 나타내면 됩니다.

li{
	color: red;
    }

 

 

그럼 실행 결과는 이렇게 나오게 됩니다. 다만 CSS 스크립트는 HTML 문서 내에 <style> 태그를 이용해 집어넣는 방법을 사용하거나, 별도 파일로 분리한 방법을 사용한다면

<link rel="stylesheet" href="css location">

위처럼 분리된 CSS 파일을 브라우저가 참조할 수 있도록 명시해 주어야 합니다.

HTML에 CSS를 적용시키는 두 가지 방법입니다.

2. ID 선택자

다음은 ID 선택자입니다. 여러 번 등장하는 동일한 태그들 중 특정한 1개만 속성을 바꿔주고 싶은 경우에 사용할 수 있는 선택 방법인데요

속성을 변경하길 원하는 특정 태그에 id 속성을 주고 해당 속성의 값으로 임의의 문자열을 지정해 준 다음, CSS에서 선택자로서 '#id 값' 을 사용하면 됩니다.

<html>
<body>
	<ul>
    	<li>HTML</li>
        <li>CSS</li>
        <li id="myid1">JavaScript</li>
    </ul>
</body>
</html>

JavaScript 라는 문자열을 출력하는 <li> 태그에 id 값으로 'myid1' 을 주었습니다.

#myid1{
	color:blue;
    }

이렇게 하면

 

 

위와 같은 결과를 볼 수 있을 것입니다.

참고로 하나 이상의 태그들을 묶어 선택하기 위해 하나 이상의 태그가 같은 id 값을 가지도록 하는 것은 HTML 문법에 어긋나므로 다음으로 소개할 Class 선택자를 사용해야 합니다.

3. Class 선택자

클래스 선택자는 하나 이상의 태그들을 묶어 선택할 수 있습니다. id 태그와 유사하게, 묶고자 하는 HTML 태그마다 class 속성의 값으로 임의의 값을 지정해 주면 됩니다.

차이점은 CSS 에서 지정해준 값 앞에 '#' 대신 '.'을 사용하여 '.className' 과 같이 선택한다는 것입니다.

<html>
<body>
	<ul>
    	<li class="myclass1">HTML</li>
        <li>CSS</li>
        <li class="myclass1">JavaScript</li>
    </ul>
</body>
</html>

'HTML' 과 'JavaScript' 라는 문자열을 출력하는 <li> 태그를 선택하기 위해 class 속성의 값으로 'myclass1' 을 주었습니다.

.myclass1{
	color:blue;
    }

그리고 이것을 CSS 에서 선택하여 글자 색상을 blue 로 바꿔 준 것입니다.

 

 

그럼 위와 같은 결과를 확인할 수 있겠습니다.

4. Parent Descendant 선택자

이제 부모 자손 선택자입니다. 부모 자손 선택자는 서로 상하 관계를 가진 태그의 선택을 위해 사용할 수 있습니다.

<html>
<body>
	<ul>
    	<li>Item0</li>
        <li>Item1</li>
        <li>Item2</li>
    </ul>
    <ol>
    	<li>Apple</li>
        <li>Samsung</li>
        <li>Huawei</li>
    </ol>
</body>
</html>

여기서 리스트를 출력하는 HTML 태그 <ul> 과 <ol> 은 하위 태그로 서로 같은 <li> 태그를 가지고 있습니다.

여기서 <ul> 태그를 상위 태그로 갖는 <li> 태그만 선택해야 할 때, 태그간 상하 관계를 이용하여 이 조건에 맞는 <li> 태그만을 선택해줄 수 있습니다. 

위 예시에서 <ul> 을 부모 태그로 갖는 자손 태그 <li> 만을 선택해 주고 싶은 것이므로 상하 관계에 따라, 'ul li' 라고 하면 됩니다.

ul li{
	color:red;
    }

이를 실행하면 아래와 같은 결과를 볼 수 있습니다.

 

 

다음은 부모와 자식, 그리고 자식 또한 그 자식을 갖고 있는 경우입니다.

<html>
<body>
	<ul>
    	<li>HTML</li>
        <li>CSS</li>
        	<ul>
        		<li>Server-side script</li>
        		<li>PHP</li>
        		<li>JSP</li>
       			<li>ASP</li>
    		</ul>
    </ul>
</body>
</html>

이런 형태에서는 위처럼 선택자를 'ul li' 로 지정할 경우 부모와 자식, 그리고 자식과 그 후손 태그 또한 부모 ul 자식 li의 관계를 갖기 때문에 결과적으로 모든 요소가 선택되어 버립니다.

그래서 선택될 수 있는 두 가지의 경우 중 한 가지를 명확하게 선택하기 위해서 선택하고자 하는 ul li 관계의 부모인 ul 태그에 임의의 id 값 'myid2' 를 주도록 하겠습니다.

<html>
<body>
	<ul>
    	<li>HTML</li>
        <li>CSS</li>
        	<ul id="myid2">
        		<li>Server-side script</li>
        		<li>PHP</li>
        		<li>JSP</li>
       			<li>ASP</li>
    		</ul>
    </ul>
</body>
</html>

그럼 이렇게 됩니다.

이제 ul li 의 관계는 두 번 나타나지만 하나는 ul li, 하나는 #myid2 li 의 두 가지로 중의성 없이 명확하게 구분 및 선택해줄 수 있게 되었습니다.

또한, 부모-자손 선택자는 부모 태그 밑에 지정하기를 원하는 태그가 해당 태그의 하위로 다른 태그가 여러번 나타난 후에 나타나는 상황이어도 이를 선택해줄 수 있습니다.

즉, 직계 자손이 아닌 요소도 선택 가능하다는 것입니다. 다만 위에서 설명했듯이 중의성이 없도록 겹치는 태그가 있는 경우 아이디를 지정하여 명확하게 지정해 주기만 하면 됩니다.

해당 상황의 예를 HTML 코드로 나타내어 보면 다음과 같습니다.

<html>
<body>
	<ul id="ul1">
    	<li>HTML</li>
        <li>CSS</li>
        	<ul>
        		<li>Server-side script</li>
        		<li>PHP</li>
        		<li id="jsp">JSP</li>
       			<li>ASP</li>
    		</ul>
    </ul>
</body>
</html>

이런 코드가 있을 때 부모 ul1의 자식 태그 jsp를 선택해 주고 싶다면 ul1 jsp 라고 선택하면 JSP를 출력하는 li 태그만을 선택해 줄 수 있습니다.

5. Parent Child 선택자

부모-자식 선택자는 부모-자손 선택자와 비슷하지만 부모-자식 선택자는 부모의 직계 자손, 즉 부모와 자손 태그 사이에 다른 태그가 없는 부모-자식인 관계에서만 사용할 수 있습니다.

CSS 에서 선택 방법은 '부모 > 자식'으로 지정해주면 됩니다.

<html>
        <body>
                <ul id="myid2">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <ul>
                                <li id="a">A</li>
                                <li id="b">B</li>
                                <li id="c">C</li>
                        </ul>
                </ul>
        </body>
</html>

이런 코드가 있다고 할 때, 여기서 ul을 부모로 가지는 아이디가 b인 li 태그를 가리키고 싶으면 'ul > #b' 라고 표현하면 됩니다.

 

 

역시 잘 작동하는 모습을 볼 수 있습니다.

 

마지막으로, 같은 속성을 갖게 할 여러 태그를 선택할 때는 ',' (콤마)를 사용하여 선택할 수 있습니다.

#a, #c{
        color:red;
}

 

 

여기까지 CSS의 선택자를 정리해 봤습니다.

끝난 줄 알았는데 아직 몇 편 정도는 더 선택자에 대해 다루게 될 것 같습니다.

읽어주셔서 감사합니다.

저작자표시 비영리 변경금지

'네트워크와 웹 > CSS' 카테고리의 다른 글

[ 생활코딩 CSS ] 4일차 선택자 게임  (0) 2020.01.14
[ 생활코딩 CSS ] 3일차 - pseudo(가상) 선택자  (0) 2020.01.13
[ 생활코딩 CSS ] 1일차 - HTML과 CSS  (0) 2020.01.11

'네트워크와 웹/CSS'의 다른글

  • 현재글[ 생활코딩 CSS ] 2일차 - CSS의 선택자

관련글

댓글

티스토리툴바