[CSS3] CSS 선택자

Front/CSS

[CSS3] CSS 선택자

ddo04 2024. 6. 30. 21:04

📱 CSS 선택자

특정한 HTML 태그를 선택할 때 사용하는 기능
선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 원하는 스타일 또는 기능을 적용
HTML 태그를 선택해 스타일을 적용하기 위해 선택자를 사용
style 태그 내부에 입력해 사용
style 태그 내부에 입력되는 코드를 스타일시트라고 부름

h1{color:red;} 
// 선택자를 사용해 h1 태그를 선택하고 color 속성에 red 키워드를 적용하는 예 //

📱 전체 선택자

*	HTML 페이지 내부의 모든 태그 선택

- 모든 웹 페이지에서 빠지지 않고 사용하는 선택자

📱 태그 선택자

태그	특정한 태그를 선택

- h1 태그의 color 속성에 red 키워드를 적용하고 p 태그의 color 속성에 blue 키워드 적용

<style>
/* h1 태그의 color 속성에 red 키워드를 적용 */
h1{color:red;}
/* p 태그의 color 속성에 blue 키워드를 적용 */
p{color:blue;}
</style>

📱 아이디 선택자

#아이디	아이디 속성을 가지고 있는 태그를 선택

- 특정한 하나의 태그를 선택할 때 사용

- 공간 분할 태그에 id 속성을 적용하고 레이아웃을 구성

<style>
#header{
	width: 800px; margin: 0 auto;
    background: red;
}
#wrap{
	width: 800px; margin: 0 auto;
    overflow: hidden;
}
#aside{
	width: 200px; float: left;
    background: blue;
}
#content{
	width: 600px; float: left;
    background: green;
}
<style>
<body>
	<div id="header">
    	<h1>Header</h1>
    </div>
    <div id="wrap">
    	<div id="header">
    		<h1>Header</h1>
        </div>
        <div id="header">
    		<h1>Header</h1>
        </div>
    </div>
</body>

📱 클래스 선택자

클래스	특정한 클래스를 가지고 있는 태그를 선택

- 웹 페이지 개발할 때 많이 사용하는 선택자

<head>	
    <style>
        .select{color:red;}
	</style>
</head>
<body>
	<ul>
    	<li class="select">Lorem ipsum</li>
        <li class="select">Lorem ipsum</li>
    </ul>
</body>

📱 기본 속성 선택자

선택자	특정한 속성이 있는 태그 선택
선택자[속성=값][속성=값]	특정한 속성 안의 값이 특정 값과 같은 문서 객체 선택

- 선택자 뒤에 대괄호([])를 사용해 속성과 값을 입력

- input 태그는 모두 input이지만 type 속성값에 따라 형태가 달라짐

- input 태그를 선택할 때 기본 속성 선택자 많이 사용

<head>	
    <style>
        input[type=text]{background: red;}
        input[type=password]{background: blue;}
	</style>
</head>
<body>
	<form>
    	<input type="text" />
        <input type="password" />
     </form>
</body>

📱 문자열 속성 선택자

선택자[속성~=값]	속성 안의 값이 특정 값을 단어로 포함하는 태그 선택
선택자[속성\|=값]	속성 안의 값이 특정 값을 단어로 포함하는 태그 선택
선택자[속성^=값]	속성 안의 값이 특정 값으로 시작하는 태그 선택
선택자[속성$=값]	속성 안의 값이 특정 값으로 끝나는 태그 선택
선택자[속성*=값]	속성 안의 값이 특정 값을 포함하는 태그 선택

- 태그에 지정한 속성의 특정 문자열을 지정

- 거의 사용하지 않지만 파일 형식에 따라 스타일을 적용할 때 가끔 사용

📱 후손 선택자

선택자A 선택자B

선택자A의 후손에 위치하는 선택자B 선택

- 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자

<!DOCTYPE html>
<html>
<head>
    <title>csse Selector Basic</title>
    <style>
        #header h1 {color: red;}
        #section h1 {color: blue;}
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">대림대학교</h1>
        <div id="nav">
            <h1>대림대학교</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">대림대학교</h1>
        <p>컴퓨터 정보</p>
    </div>
</body>
</html>

📱 자손 선택자

선택자A > 선택자B

선택자A의 자손에 위치하는 선택자B 선택

- 특정 태그 아래에 있는 자손을 선택할 때 사용하는 선택자

<!DOCTYPE html>
<html>
<head>
    <title>csse Selector Basic</title>
    <style>
        #header > h1 {color: red;}
        #section > h1 {color: blue;}
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">대림대학교</h1>
        <div id="nav">
            <h1>대림대학교</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">대림대학교</h1>
        <p>컴퓨터 정보</p>
    </div>
</body>
</html>

📱 동위 선택자

선택자A + 선택자B	선택자A 바로 뒤에 위치한 선택자B 선택
선택자A ~ 선택자B	선택자A 뒤에 위치하는 선택자B 선택

- 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자

- 동위 선택자를 사용하면 동위 상태에 있는 태그의 위치 관계 파악

- h1 태그의 바로 뒤에 위치하는 h2 태그 하나를 선택할 때 + 선택자 사용

- h1 태그 뒤에 위치하는 모든 h2 태그를 선택할 때 ~ 선택자 사용

- css3 애니메이션 사용하여 동적으로 움지이는 레이아웃 구성 시 동위 선택자 사용

📱 반응 선택자

:active	사용자가 마우스로 클릭한 태그 선택
:hover	사용자가 마우스를 올린 태그 선택

- 사용자들의 반응으로 생성되는 특정한 상태를 선택하는 선택자

- 사용자가 마우스를 특정한 태그 위에 올리면 hover 상태가 적용되고 클릭하면 active 상태가 적용

<!DOCTYPE html>
<html>
<head>
    <title>csse Selector Basic</title>
    <style>
        h1:hover {color: red;}
        h1:active {color: blue;}
    </style>
</head>
<body>
    <h1>대림대학교</h1>
</body>
</html>

📱 상태 선택자

:checked	체크 상태의 input 태그 선택
:focus	초점이 맞추어진 input 태그 선택
:enabled	사용 가능한 input 태그 선택
:disabled	사용 불가능한 input 태그 선택

- 입력 양식의 상태를 선택할 때 사용하는 선택자

- 어떤 상태인지 알아야 상태 선택자를 쉽게 사용가능

- checked 상태는 type 속성값이 checkbox 또는 radio인 input 태그가 선택된 상태

- focus 상태는 사용자가 초점을 맞추고 있는 입력 양식에 적용되는 상태

- enabled 상태는 input 태그가 사용 가능한 상태를 나타냄

- disabled 상태는 input 태그가 사용 불가능한 상태를 나타냄

📱 일반 구조 선택자

:first-child	형제 관계 중에서 첫 번쨰에 위치하는 태그 선택
:last-child	형재 관계 중에서 마지막에 위치하는 태그 선택
:nth-child(수열)	형제 관계 중에서 앞에서 수열 번쨰에 태그 선택
:nth-last-child(수열)	형제 관계 중에서 뒤에서 수열 번째에 태그 선택

- 특정한 위치에 있는 태그를 선택하는 선택자

<!DOCTYPE html>
<html>
<head>
    <title>csse Selector Basic</title>
    <style>
        ul{overflow: hidden;}
        li{
            list-style: none;
            float: left; padding: 15px;
        }

        li:first-child{border-radius: 10px 0 0 10px;}
        li:last-child{border-radius: 0 10px 10px 0;}

        li:nth-child(2n){background-color: red;}
        li:nth-child(2n+1){background-color: blue;}
    </style>
</head>
<body>
    <ul>
        <li>F</li>
        <li>S</li>
        <li>T</li>
        <li>F</li>
        <li>F</li>
        <li>S</li>
        <li>S</li>
    </ul>
</body>
</html>

📱 형태 구조 선택자

:first-of-type	형제 관계 중에서 첫 번째로 등장하는 특정 태그 선택
:last-of-type	형제 관계 중에서 마지막으로 등장하는 특정 태그 선택
:nth-of-type(수열)	형제 관계 중에서 앞에서 수열 번쨰로 등장하는 특정 태그 선택
:nth-last-of-type(수열)	형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그를 선택

- 일반 구조 선택자와 비슷하지만 태그 형태를 구분

📱 시작 문자 선택자

::first-letter	첫 번쨰 글자 선택
::first-line	첫 번째 줄 선택

- 태그 내부의 첫 번째 글자와 첫 번쨰 줄을 선택할 때 사용하는 선택자

📱 전후 문자 선택자

::after	태그 뒤에 위치하는 공간 선택
::before	태그 앞에 위치하는 공간 선택

- content 속성 사용

📱 반응 문자 선택자

::selection

사용자가 드래그한 글자 선택

- 사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자

📱 링크 선택자

::link	href 속성을 가지고 있는 a태그 선택
::visited	방문했던 링크를 가지고 있는 a태그 선택

- 한 번 이상 다녀온 링크를 선택할 수 있는 선택자

📱 부정 선택자

:not(선택자)

선택자를 반대로 적용

- 선택자를 모두 반대로 적용할 수 있게 만드는 선택자

'Front > CSS' 카테고리의 다른 글

[CSS3] 추가 규칙 (0)	2024.07.07
[CSS3] CSS 변환 (0)	2024.07.03
[CSS3] CSS3 변형과 애니메이션 (0)	2024.07.02
[CSS3] CSS 스타일 속성 (0)	2024.07.02

현재글[CSS3] CSS 선택자

DDOstory

https://github.com/dohee12

리액트, 배열, state, javascript, Java, DBMS, HTML, 데이터베이스, 프론트엔드, DB, 객체, 자바스크립트, React Hooks, css, js, 컴포넌트, 속성, 웹 개발, React, 인스턴스,

Today :
Yesterday :

일	월	화	수	목	금	토
		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

DDOstory