7. 선택자 Selector

공부/HTML5 + CSS 2018. 6. 6. 21:56

선택자

먼저 선택자의 이름 지정. HTML태그 중 하나가 될 수도 있고, 직접 이름을 지어서 입력할 경우도 있음
{ 로 시작하여 } 로 선언 구간을 만듦
선언 구간 안에 속성 이름(property) 선언, :(콜론), 값(Value), ;(세미콜론) 순으로 작성
:(콜론)은 속성 이름(property)과 값(Value)를 구분하기 위한 것
;(세미콜론)은 마침표 역할
;(세미콜론) 뒤에 다시 속성 이름(property)을 추가하고 동일한 방식으로 계속 작성

태그 선택자(Tag Selector)는 가장 기본적으로 CSS를 작성할 때 사용하는 방식

HTML 태그에 직접 스타일을 지정하는 방식

h1 {

color: red;

text-align: center;

}

[…]

<h1>안녕하세요</h1>

HTML 엘리먼트에 직접 스타일을 지정하여 표시
페이지 안에 있는 모든 엘리먼트에 영향을 주어 스타일이 적용되어 표시

tag.html

<!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>Document</title>
    <style type="text/css">
    p{
        color: red;
        text-align: center;
    }
    </style>
</head>
<body>
    <p>안녕하세요!!</p>
    <p>이 문장은 p태그 선택자로 스타일이 입혀졌습니다.</p>
</body>
</html>

클래스 선택자는 정의한 스타일을 여러 엘리먼트에 적용하여 사용하기 위해 만들어짐

스타일을 사용하고자 하는 엘리먼트에 클래스 이름을 지정

클래스 선택자는 맨 앞에 마침표(.)를 붙이고 영문으로 클래스 이름 작성

.my class {font-size:10px; color:red;}

.align_center{text-align: center;}

[…]

클래스를 만들어 서로 다른 엘리먼트에 여러 번 적용해서 사용 가능
클래스 이름은 반드시 영문자로 시작, 숫자로 시작하면 안됨
원하는 엘리먼트를 정밀하게 제어할 수 있으므로 많이 사용

class.html

<!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>Document</title>
    <style type="text/css">
    .blue_center{
        color:blue;
        text-align: center;
    }
    </style>
</head>

<body>
    <h1 class="blue_center">h1 엘리먼트에 적용된 가운데 정렬</h1>
    <p>p 엘리먼트에 적용된 가운데 정렬</p>
</body>

</html>

아이디 선택자(ID Selector)는 페이지 안에서 하나밖에 없는 고유한 엘리먼트를 나타내기 위해 사용

ID(Identification)는 고유번호라는 의미를 지님

HTML 엘리먼트에도 고유한 이름을 지어서 사용

ID 선택자는 #기호 다음에 영어로 시작하는 선택자 이름을 지어줌

적용할 엘리먼트에는 #을 생략하고 'id=선택자 이름'을 적용

#myid {font-size:10px; color:red;}

#style_para{text-align: center;}

[…]

앞에 #을 붙이고 영문으로 시작하는 이름을 부여
같은 페이지 내에 한 번만 적용하는 것이 원칙
자바 스크립트 프로그램에서 값을 얻거나 수정할 때 사용
다른 페이지와 중복해서 사용할 수 있음

id_selector.html

<!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>Document</title>
    <style type="text/css">
    #style_para{
        text-align: center;
    }</style>
</head>
<body>
    <p id="style_para">안녕하세요!</p>
    <p>같은 p엘리먼트이지만 스타일이 적용되지 않았습니다.</p>
</body>
</html>

하위 선택자(Descendant Selector)는 선택자들 간의 관계를 동시에 고려한 선택자

선택자의 영향력 안에 들어있는 특정 선택자를 가리킴

<p>p 태그로 파랑색, 가운데 정렬되었습니다.</p>

</div>

위는 <p> 태그 하나는 맨처음 사용되고 두번째<p>태그는 <div>태그 안에 들어있음

그리고 <div>태그는 style_div라는 클래스 선택자로 지정되어있음.

그 후에 다음과 같이 태그 선택자와 클래스 선택자가 선언되어 있다고 가정

color: blue;

text-align: center;

}

.style_div{

background-color: green;

}

하위 선택자 사용

color: blue;

text-align: center;

}

.style_div{

background-color: green;

}

.style_div p{

color: white;

}

위 내용은 .style_div 클래스 선택자의 영향을 받고 있는 태그 중에서 p태그에만 스타일을 선언

하위 선택자의 특징

선택자의 자식 선택자에 스타일 적용
ID나 클래스 선택자를 통해 직접 특정 태그 하나만 스타일을 주지 않고 기준 태그를 정한 뒤 자동으로 그 안에 있는 태그에 적용시키고자 할 때 많이 이용

nested.html

<!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>Document</title>
    <style type="text/css">
    p{
    color: blue;
    text-align: center;
}
.style_div{
    background-color: green;
}
.style_div p{
    color: white;
}
</style>
</head>
<body>
    <p>이 p엘리먼트는 파란색에 가운데 정렬되었습니다.</p>
    <div class="style_div">
        <h1>이 h1 엘리먼트는 하위선택자의 영향을 받지 않습니다.</h1>
        <p>이 p엘리먼트는 하위선택자에 의해 흰색으로 스타일됩니다.</p>
    </div>
</body>
</html>

그룹 선택자

스타일 작업을 할때 선택자 이름만 다르고 스타일 내용을 똑같이 반복하는 경우 계속 나열해서 스타일을 지정하는 것보다 그룹 선택자를 이용하면 스타일 코드를 단축시킬 수 있음.

h1 { font-family: sans-serif}

h2 { font-family: sans-serif}

h3 { font-family: sans-serif}

동일한 값을 사용하는 엘리먼트나 ID, 클래스 선택자를 그룹으로 묶어서 적용

이때 선택자의 구분은 콤마(,)를 사용

h1, h2, h3 { font-family: sans-serif}

group.html

<!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>Document</title>
    <style type="text/css">
    h1, h2, p{
        color:blue;
    }
    </style>
</head>
<body>
    <h1>h1 엘리먼트입니다.</h1>
    <h2>h2 엘리먼트입니다.</h2>
    <p>p 엘리먼트입니다.</p>
</body>
</html>

전체 선택자(universal selector)

모든 엘리먼트를 선택할 때 사용 애스터리스크(*)를 선택자 이름으로 대신 이용

웹 문서에 있는 모든 엘리먼트를 선택하여 간략히 표현하고 싶을 때 즐겨 사용

* {font-size:12px;}

위는 현재 웹 문서에 있는 모든 엘리먼트를 선택해서 글자 크기를 12픽셀로 지정.

전체 선택자는 하위 선택자의 역할로도 사용가능

#content * {background: blue;}

위는 #content라는 이름의 id선택자가 지정된 엘리먼트 안에 포함된 모든 엘리먼트의 배경 색상을 파란색으로 지정

universal.html

<!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>Document</title>
    <style type="text/css">
    .style_div{
        background-color: dodgerblue;
    }
    .style_div * {
        color: white;
    }</style>
</head>
<body>
    <div class="style_div">
        <h1>h1 엘리먼트는 *의 영향으로 글자색이 흰색입니다.</h1>
        <h2>h2 엘리먼트도 *의 영향으로 글자색이 흰색입니다.</h2>
    </div>
    <p>p 엘리먼트는 *의 영향을 받지 않습니다.</p>
</body>
</html>

유사클래스

마침표를 찍고 선택자 이름을 적은 것을 '클래스 선택자'

콜론을 찍고 선택자 이름을 적은 것을 '유사 클래스'

:유사 클래스 {속성 이름 : 값;}

예를 들어 :empty 선택자는 엘리먼트 안에 아무 것도 없는 공백 상태일 때 선택됨

다음처럼 p 선택자와 결합하면 p 엘리먼트 안에 아무 것도 없을 때 배경색을 빨간색으로 변경

p:empty {background:red;}

하이퍼링크에 스타일을 주기 위해서는 :link, :visited, :hover, :active의 네 가지 유사 클래스 선택자

하이퍼링크는 일반적인 글자의 색상, 글꼴의 종류 등에 전혀 영향을 받지 않음

:link 선택자 : 한번도 방문하지 않은 a 엘리먼트의 링크 선택

:visited 선택자 : 한 번 이상 방문한 a 엘리먼트의 링크 선택

:hover 선택자 : 마우스 커서가 a 엘리먼트의 링크 위에 올려졌을 때 선택

:active 선택자 : 마우스 버튼을 a 엘리먼트의 링크 위에서 클릭했을 때의 순간을 선택

위의 유사 클래스 선택자는 단독으로 사용되지 않고 앞에 a 엘리먼트를 붙여서 사용

이를 앵커(anchor)유사 클래스라고 함

a:link, a:visited, a:hover, a:active

위 작성 순서를 지켜야 결과나옴

<p><a href='http://www.google.com'>링크</a>를 눌러주세요!</p>

a:link {color:gray;} /*평소에는 회색*/

a:visited {color:black;} /*한번 방문하면 검정*/

a:hover {color:red;} /*마우스커서가 올라가면 빨강*/

a:active {color:yellow;} /*마우스 버튼 클릭하면 노랑*/

</style>

link.html

<!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>Document</title>
    <style type="text/css">
    a:link, a:visited {
        color: #808080;
        text-decoration: none;
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: #808080;
    }
    a:hover, a:active{
        border-bottom-style: solid;
    }
    </style>
</head>
<body>
    <p><a href='http://www.google.com'>구글</a>에 접속하기</p>
</body>
</html>

'공부 > HTML5 + CSS' 카테고리의 다른 글

8. 자주 쓰는 태그 (0)	2018.06.06
6. 외부 스타일 시트 external style sheet (0)	2018.06.06
5. 내부 스타일 시트 internal style sheet (0)	2018.06.06
4.인라인 스타일 inline style (0)	2018.06.06
3. Hello World! (0)	2018.06.06

ABOUT ME

AEL AEL

'공부 > HTML5 + CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'공부 > HTML5 + CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바