[CSS]선택자_기본 선택자, 가상 선택자

티스토리 뷰

수업/└HTML&CSS

[CSS]선택자_기본 선택자, 가상 선택자

onlyun 2022. 1. 2. 17:47

Selector { property : value; }

선택자의 종류, 의미, 사용방법

(*선택자를 통해 스타일 적용하려고)

selector{property:value;}

1. 기본 선택자

-전체 선택자

<head>
    <style>
        *{color:white;
          background-color:purple;
          font-size:14px;
        }
    </style>
</head>

→ 화면 전체 배경 purple, 글자색 white, 글꼴 크기 14px

-타입 선택자 : 태그, Element(요소)

<head>
    <style>
        h1{background-color:skyblue;}
        h2{background-color:pink;}
    </style>
</head>

→ <body> 태그에 있는 <h1>, <h2> 태그의 배경색을 각각 skyblue, pink로 지정

-클래스 선택자

<head>
    <style>
        .a1{
            color:#ffffff;
            background-color:#000000;
        }
    </style>
</head>
<body>
    <h3 class="a1">TITLE</h3>
    <p class="a2">CONTENTS</p>
</body>

→ 클래스명이 a1인 <h3> 태그 배경색 검정, 글자색 흰색으로 표시됨.

-아이디 선택자

<head>
    <style>
        #a1{
            color:pink;
            background-color:black;
        }
        h2#a2{
            color:skyblue;
            background-color:gray;
        }
    </style>
</head>

→ 아이디명이 a1인 태그의 글자색 pinkt, 배경색 black 지정.

<h2> 태그 중 아이디명이 a2인 것의 글자색 skyblue, 배경색 gray로 지정.

-속성 선택자

tag[property=value]
tag[속성]	해당 속성의 정의된 모든 태그 선택
tag[속성=값]	정의된 속성과 속성값이 동일한 태그 선택
tag[속성~=값]	공백으로 구분된 속성값 목록 중 하나가 주어진 값과 동일한 태그 선택
tag[속성\|=값]	속성값이 해당 값과 동일 or 주어진 값으로 시작하고 '-'로 이어지는 값을 가진 태그 선택
tag[속성^=값]	속성값이 주어진 값으로 시작하는 태그 선택
tag[속성$=값]	속성값이 주어진 값으로 끝나는 태그 선택
tag[속성*=값]	속성값이 주어진 값을 부분 문자열로 가지는 태그 선택

2. 가상 선택자

웹 문서에는 보이지 않지만 동작에 영향을 주는 속성을 가상 선택자로 이용

a : link { 속성명:속성값; }

-이벤트 가상 클래스 선택자 ★

사용자의 마우스 이벤트 행위에 따라 스타일 시트 다르게 적용

<a> 전용	:link 선택자	웹 문서에서 사용자가 방문하지 않았던 곳 표시
		ex) a:link{color:red; text-decoration:none;}
	:visited 선택자	웹 문서에서 사용자가 방문한 곳 표시
		ex) a:visited{color:darkgray;}
	:active 선택자	웹 문서에서 사용자가 링크 클릭하는 순간
		ex) a:active{color:skyblue;}
모든 태그	:hover 선택자	웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간
		ex) a:hover{color:white; background-color:black;}
	:focus 선택자	해당 요소에 초점이 맞춰졌을 때. 입력요소기준, 커서가 깜빡일 때
		ex) a:focus{color:purple;}

ex)

<style>
    div{
        width:200px; height:200px; 
        color:black; background-color:skyblue;
        opacity:0.9;
    }
    div:hover{
        width:400px; height:100px;
        color:white; background-color:black;
        transition: all 1.5s linear 0.2s
    }   /* 변하는데 걸리는 시간 반응하는 시간 */
</style>

→ 마우스를 올렸을때 <div>의 크기 변화(width 200px → 400px, height 200px → 100px), 배경색 및 글자색 변경

변하는데 걸리는 총 걸리는 시간이 all 1.5s, 반응 시간이 linear 0.2s

-구조적 가상 클래스 선택자

많지만 대표적인 거 몇 개만

E:first-child	첫 번째 등장하는 태그가 E라면 선택 (같은 레벨에 있는 태그들 중 첫 번째가 E일 경우)
E:last-child	마지막에 등장하는 태그가 E라면 선택
E:nth-child(n)	앞에서부터 지정된 순서와 일치하는 태그가 E라면 선택 *E가 아닌 태그도 순서에 포함!!
E:nth-last-child(n)	뒤에서부터 지정된 순서와 일치하는 태그가 E라면 선택 *E가 아닌 태그도 순서에 포함!!

예시를 보면서 설명해야 이해됨.

<head>
    <meta charset="UTF-8">
    <title>구조적 가상 클래스 선택자 실습</title>
    <style>
        h3:first-child{
            color:white; background-color:black;
        }   <!--같은 레벨에 있는 태그들 중 첫번째가 <h3>면 스타일 적용-->
        h4:first-of-type{
            color:skyblue; background-color: pink;
        }   <!--<h4> 태그 중에서 첫번째 <h3>에 스타일 적용-->
        h4:nth-child(2n+1){
            color:red;
        }   <!--<h4> 태그들 중 (2n+1)인 것들 스타일 적용-->
    </style><!--다만! <h4>태그 들 중 홀수번째가 아니라 전체 태그에서 계산 -->
</head>
<body>
    <section>
        <p><strong>1</strong> presentence 1 </p>
        <p><strong>2</strong> presentence 2 </p>
        <p><strong>3</strong> presentence 3 </p>
        <p><strong>4</strong> presentence 4 </p>
    </section>
    <section>
        <h3><strong>5</strong> this is example 1 </h3>
        <h3><strong>6</strong> this is example 2 </h3>
        <h3><strong>7</strong> this is example 3 </h3>
        <h4><strong>8</strong> this is example 1 </h4>
        <h4><strong>9</strong> this is example 2 </h4>
        <h4><strong>10</strong> this is example 3</h4>
        <h4><strong>11</strong> this is example 4</h4>
        <h4><strong>12</strong> this is example 5</h4>
    </section>
</body>

→ 맨 마지막 스타일 결과는

9와 11의 글자색이 빨간색으로 변경된다. (해당 조건을 찾는게 약간 헷갈림)

-UI 요소 상태 가상 클래스 선택자

입력 폼의 상태를 선택할 때 사용 ch06 : 11_css_state.html 참고

E : enabled	사용 가능한 폼 컨트롤 E를 선택
E : disabled	사용 불가능한 폼 컨트롤 E를 선택
E : checked	선택된 폼 컨트롤 선택
E : focus	초점이 맞춰진 input 태그 선택

ex)

input[type="radio"]:checked{ }
/* <input type="radio" name="~" checked>인 것을 선택한다는 뜻 */

-기타 가상 클래스 선택자

저작자표시

'수업 > └HTML&CSS' 카테고리의 다른 글

[CSS]박스(Box Model) (0)	2022.01.03
[CSS]선택자_조합 선택자 (0)	2022.01.02
[CSS]기본 이론 (0)	2022.01.02
[HTML]공간 분할 태그 <iframe> (0)	2022.01.02
[HTML]공간 분할 태그_<div>, <span> (0)	2022.01.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/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

글 보관함

LOG.info("yun's dev");

티스토리 뷰

[CSS]선택자_기본 선택자, 가상 선택자

'수업 > └HTML&CSS' 카테고리의 다른 글

티스토리툴바