티스토리 뷰

Programming/HTML&CSS

[HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자

Lkt_Programmer 2019. 3. 26. 13:38
반응형

안녕하세요. 저번 포스팅에서 전체선택자, 태그선택자, id선택자, class 선택자에 대해서 알아 보았는데요. 이어서 다른 선택자들에 대해서도 알아보도록 하겠습니다.


미리보면 좋은 포스팅 !

CSS 스타일시트 작성법과 선택자에 대해 알기

선택자(Selector)를 통해 CSS를 적용해보자 #1

 [HTML5/CSS3] span 태그 & div 태그의 차이

 [HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그



이번 포스팅에서는 혼합선택자와 속성선택자에 대해서 알아보겠습니다.


  1. 혼합 선택자


혼합선택자는 앞서 포스팅에서 배웠던 태그선택자/id선택자/class선택자를 혼합하여 CSS 속성을 변경하는 선택자입니다.


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
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>img 태그</title>
    <style>
        #header p {color : red}
        #footer p {color : blue}
    </style>
</head>
<body>
    <div id = "header">
        <p>Header</p>
    </div>
    <div id = "content">
        <ol>
            <li>Menu1</li>
            <li class = "even">Menu1</li>
            <li>Menu1</li>
            <li class = "even">Menu1</li>
            <ul class ="submenu">
                <li>Menu1</li>
                <li class = "even">Menu2</li>
                <li>Menu3</li>
                <li class = "even">Menu4</li>
            </ul>
        </ol>
    </div>
    <div id = "footer">
        <p>Footer</p>
    </div>
</body>
</html>
cs


CSS 적용이 안된 HTML 문서입니다. <div> 태그를 통해 header/content/footer 3개의 영역으로 나누고 content 영역안에서 List 태그를 통해 메뉴를 구성하고 있습니다. 이제 혼합 선택자를 통해 CSS를 하나씩 적용 해보겠습니다. 


#header p를 해석하자면 다음과 같습니다. 태그 id 속성값이 header인 태그의 하위요소들 중에서 태그 선택자가 p인 태그를 선택하여 color를 red로 표시하라는 의미입니다. 웹 페이지 결과물 상단에 Header의 글자색이 red로 표현 된 것을 확인 할 수 있습니다. #footer p도 마찬가지입니다. 이번엔 id 속성값이 footer인 태그의 하위요소 중 p 태그의 color를 blue로 적용시키라는 의미입니다.


방금 보신 선택자의 경우는 id 선택자와 태그 선택자를 혼합하여 사용하고 있습니다. 이것이 바로 혼합 선택자입니다. 다른 형식도 한번 살펴보겠습니다.



ol .even 선택자를 해석하면 다음과 같습니다. <ol> 태그 선택자의 하위 요소중에서 class 속성값이 even인 태그를 선택하여 color를 blue로 지정하라는 의미입니다. 방금 살펴본 선택자의 경우 태그선택자와 class 선택자와 혼합하여 사용하고 있는 형태입니다.




  2. 속성선택자


속성 선택자는 요소의 속성에따라 선택이 되는 선택자를 의미합니다. 사용형태는 아래를 참고해주시 바랍니다.

  • [attribute] : 'attribute' 속성이 존재하는 경우 값과 상관없이 선택됩니다.
  • [attribute = val] : attribute 속성값이 val인 요소를 선택합니다.
  • [attribute ~= val] : 공백으로 구분한 값들 중에서 val 값이 있어야 선택됩니다.
정규표현식 비슷하게도 사용이 가능합니다.
  • [attribute *= val] : attribute 속성값중에서 val 문자열을 포함하는 경우 선택합니다.
  • [attribute ^= val] : attribute 속성값이 val로 시작하면 선택합니다.
  • [attribute $= val] : attribute 속성값이 val로 끝나면 선택합니다.
아래 샘플 예제를 통해서 사용방식을 익혀봅시다.


<form>태그 내부에 <input>태그 2개를 작성하고 type의 속성값을 각각 text와 password로 지정을 합니다. [type = "text"] 선택자를 해석하면 type 이라는 속성을 가지는 태그들 중에서 해당 속성값이 text인 태그를 선택하여 color 속성을 blue로 지정을 하라는 의미가 됩니다.


다음 포스팅에서 계속 선택자에 대해 알아보도록 할게요 ! 


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

'Programming > HTML&CSS' 카테고리의 다른 글

[HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자  (0) 2019.03.28
[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자  (0) 2019.03.27
[HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1  (0) 2019.03.25
[HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기  (0) 2019.03.24
[HTML5/CSS3] 간단한 웹 페이지 레이아웃 구성 및 시맨틱 태그  (0) 2019.03.23