1. 연결 선택자
1) 자손 선택자와 후손 선택자
🥑 자손 선택자 = 자식 선택자 child selector
- 부모 선택자 바로 아래 계층에 있는 선택자
- 자손 선택자 표기는 '>'로 표시
- 형태 : 선택자A > 선택자B - 선택자 A의 자손에 위치하는 B를 선택
🥑 후손 선택자 = 하위 선택자 descendant selector
- 부모 선택자 안에 들어있는 모든 자식 선택자( 손자 요소까지 고려함 )
- 후손 선택자의 표기는 공백으로 표현
- 형태 : 선택자A 선택자B - 선택자 A의 후손에 위치하는 B를 선택
<head>
<style>
div > h1 { /* 자손 선택자 */
background-color: blue;
}
div h1 { /* 후손 선택자 */
background-color: blue;
}
div span { /* 후손 개념의 div 아래에 있는 모든 span */
background-color: yellow;
}
div > span { /* 자손 개념의 div 바로 아래에 있는 span */
border: 4px solid blue;
}
.point span {
color: red;
}
</style>
</head>
<body>
<div>
<h1>제목1</h1>
<h2>제목2</h2>
<div>
<ul>
<li>menu1</li>
<li>menu2</li>
<li><span>menu3</span></li>
</ul>
</div>
<h2>제목2</h2>
<span>span</span>
<ul class="point">
<li>menu4</li>
<li>menu5</li>
<li><span>menu6</span></li>
</ul>
</div>
</body>
💡 table 태그와 자손 선택자 주의 사항
▶️ 웹 브라우저가 자동으로 tbody 태그를 추가
▶️ table > tbody > tr > th 처럼 'tbody'를 입력해야 속성 적용이 된다
<head>
<style>
/* table 태그 아래의 tr 태그 아래 th 태그의 color 속성에 red 키워드를 적용 */
table > tr > th {
color: red;
}
table > tbody > tr > th {
color: red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Region</th>
</tr>
<tr>
<td>홍길동</td>
<td>대구광역시 중구</td>
</tr>
</table>
</body>
2) 동위 선택자
🥑 동위 관계자에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자
[인접 형제 선택자 adjacent selector]
형태 : 선택자A + 선택자B - 선택자A 바로 뒤에 위치하는 선택자 B를 선택
[형제 선택자 sibling selector]
형태 : 선택자A ~ 선택자B - 선택자A 뒤에 위치하는 선택자 B를 선택
<head>
<style>
h1 + h2 {
/* h1 바로 뒤에 있는 h2 태그에 글자 색상 지정 */
color: red;
}
h1 ~ h2 {
/* h1 뒤에 있는 모든 h2 태그에 글자 색상 지정 */
background-color: orange;
}
</style>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
</body>
2. 속성 선택자
📌 특정 속성을 가진 html 태그를 선택
📌 선택자 뒤에 대괄호([])를 사용하여 속성과 값을 입력
| 종류 | 선택 요소 | 예시 |
| [속성] | 해당 속성이 있는 요소 | [required] |
| [속성=값] | 지정한 속성값이 있는 요소 | [target = _blank] |
| [속성~=값] | 지정한 속성값이 포함된 요소 (단어별) | [class ~= button] |
| [속성|=값] | 지정한 속성값이 포함된 요소 (하이픈 포함, 단어별) | [title |= us] |
| [속성^=값] | 지정한 속성값으로 시작하는 요소 | [title ^= eng] |
| [속성$=값] | 지정한 속성값으로 끝나는 요소 | [href $= xls] |
| [속성*=값] | 지정한 속성값의 일부가 일치하는 요소 | [href *= w3] |
1) 특정 속성값이 있는 요소를 선택하는 경우
형태 : 선택자[속성=속성값] - 속성 안의 값이 특정값과 조건에 만족하는 문서 객체를 선택
<head>
<style>
input[type=text] {
/* input 태그 중에서 type 속성값을 password로 가지는 태그의 배경 색상을 지정 */
background-color: blue;
}
/* 자바스크립트의 쿼리셀렉터에서 폼 태그를 선택할때 주로 name 속성을 사용 */
input[name=id] {
color: #fff;
}
input[type=text], input[type=password] {
background: none;
border: none;
border-bottom: 1px solid #666666;
padding: 6px;
margin: 0 2px;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<input type="text" name="id" />
<input type="password" name="passwd" />
</form>
</body>
3. 가상 클래스와 가상 요소
1) 반응 선택자
🥑 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자
:active - 사용자가 마우스로 클릭한 태그 설정
:hover - 사용자의 마우스 포인터가 위치한 태그 설정
:link - 방문하지 않은 링크에 스타일을 적용
:visited - 방문했던 링크에 스타일을 적용
<head>
<style>
h1:hover {
/* h1 태그에 마우스를 올렸을 때 글자 색상을 변경 */
color: red;
cursor: pointer;
}
h2:active {
/* h2 태그에서 마우스로 클릭했을 때 글자 색상을 변경하고 배경 색상을 나타냄 */
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h2>제목2</h2>
<h2>제목2</h2>
</body>
<head>
<style>
a {
text-decoration: none;
}
a:visited {
color: red;
}
/* href 속성을 가지고 있는 a 태그 뒤의 공간에 "- (href 속성)"을 추가. */
a:link::after {
content: ' - ' attr(href);
}
</style>
</head>
<body>
<h1><a>Nothing</a></h1>
<h1><a href="http://www.w3.org/">W3C</a></h1>
<h1><a href="https://github.com/">Github</a></h1>
</body>
2) 상태 선택자
🥑 입력 양식(form 태그)의 상태를 선택할 때 사용하는 선택자
:checked - 체크상태의 input 태그에 선택
:focus - 초점이 맞춰진 input 태그를 선택
:enabled - 사용 가능한 input 선택
:disabled - 사용 불가능한 input 선택
:not - 스타일을 적용하려고 하는 필드를 나열하는 것보다 적용하지 않는 필드가 더 적을 때 사용
:anchor - 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다
💫 '앵커'는 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동하도록 도와주는 기능
<head>
<style>
input:enabled { /* 입력을 할 수 있는 상태의 input 태그의 배경 색상과 글자 색상 지정 */
background: blue;
color: white;
}
input:disabled { /* 입력을 할 수 없는 상태의 input 태그의 배경 색상 지정 */
background: black;
}
input:focus { /* input 태그의 입력을 위한 초점이 맞추어진 상태에서의 배경 색상 지정 */
background: orange;
}
</style>
</head>
<body>
<form>
<!-- 입력을 할 수 있는 상태 -->
<h1>enabled</h1>
<p>
<input type="text" name="email"/>
</p>
<!-- 입력을 할 수 없는 상태 -->
<h1>disabled</h1>
<p>입력을 할 수 없는 상태로 만들기
<input disabled="disabled" name="adress"/> <span>클릭</span>
</p>
</body>
<head>
<style>
/*
* 부정 선택자 : 선택자를 반대로 적용.
input 태그 중에서 type 속성값이 password가 아닌 태그의 background 속성에 red 키워드를 적용
*/
input:not([type=password]) {
background: red;
}
</style>
</head>
<body>
<input type="password" />
<input type="text" />
<input type="password" />
<input type="text" />
<input type="date" />
</body>
3) 구조 선택자
🥑 CSS3부터 지원하는 선택자로 특정한 위치에 있는 요소를 찾아 스타일을 적용 할 때 사용
:first-child - 부모박스 안에서 형제 관계 중에서 첫 번째에 위치하는 태그 선택
:last-child - 부모박스 안에서 형제 관계 중에서 마지막에 위치하는 태그 선택
:nth-child(수열) - 부모박스 안에서 형제 관계 중에서 "앞에서" 수열번째의 태그 선택
:nth-last-child(수열) - 부모박스 안에서 형제 관계 중에서 "뒤에서" 수열번째의 태그 선택
📍 자주 사용하는 수열에는 숫자번째(숫자), 짝수열(2n), 홀수열(2n+1)
<head>
<style>
div span:first-child { /* div의 자손 중 첫번째 자식에 해당하는 span 태그 지정 */
background: red;
}
div p:first-child { /* div의 자손 중 첫번째 자식에 해당하는 p 태그 지정. 이 문서에는 없음 */
background: blue;
}
div span:last-child {
background: red;
}
div p:last-child {
background: blue;
}
</style>
</head>
<body>
<div>
<span>text1</span>
<p>text2</p>
<span>text3</span>
<p>text4</p>
</div>
</body>
<head>
<style>
li {
list-style: none;
float: left;
padding: 15px;
}
li:nth-child(2n) { /* li 태그 중에서 짝수 번째에 해당하는 li 태그들의 배경 색상과 글자 색상을 지정 */
background: gray;
color: pink;
}
li:nth-child(2n+1) { /* li 태그 중에서 홀수 번째 해당하는 li 태그들의 배경 색상과 글자 색상을 지정 */
background: black;
color: #ffd800;
}
li:first-child { /* li 태그 중에서 첫 번째에 해당하는 li 태그의 글자 색상을 지정 */
color:white;
}
li:last-child { /* li 태그 중에서 마지막 번째에 해당하는 li 태그의 글자 색상을 지정 */
color: green;
}
li:nth-child(3) { /* 1부터 시작 ~ n */
background: pink;
color: gray;
}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
<li>menu6</li>
</ul>
</body>
4) 형태 구조 선택자
🥑 일반 구조 선택자와 비슷하지만 태그 형태를 구분
:first-of-type - 부모박스 안에서 형제 관계 중에서 첫 번째에 위치하는 특정한 태그 선택
:last-of-type - 부모박스 안에서 형제 관계 중에서 마지막에 위치하는 특정한 태그 선택
:nth-of-type(수열) - 부모박스 안에서 형제 관계 중에서 앞에서 수열번째의 특정한 태그 선택
:nth-last-of-type(수열) - 부모박스 안에서 형제 관계 중에서 뒤에서 수열번째의 특정한 태그 선택
<head>
<style>
h1:first-of-type { /* h1 태그 중에서 첫 번째 h1 태그의 글자 색상 지정 */
color: red;
}
h2:first-of-type { /* h2 태그 중에서 첫 번째 h2 태그의 글자 색상 지정. 구조 선택자라면 문서에 없음. */
color: blue;
}
h2:last-of-type { /* h2 태그 중에서 마지막 번째 h2 태그의 글자 색상과 배경 색상 지정. 구조 선택자라면 문서에 없음. */
color: white;
background: blue;
}
div span:first-of-type {
background: red;
}
div p:first-of-type {
background: blue;
}
div span:last-of-type {
background: red;
}
div p:last-of-type {
background: blue;
}
</style>
</head>
<body>
<h1>header-1</h1>
<h2>header-2</h2>
<h3>header-3</h3>
<h3>header-3</h3>
<h2>header-2</h2>
<h1>header-1</h1>
<div>
<span>text1</span>
<p>text2</p>
<span>text3</span>
<p>text4</p>
</div>
</body>
5) 시작문자 선택자
🥑 태그 내부의 첫 번째 글자와 첫 번째 줄을 선택할 때 사용
🥑 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위해 콜론 2개(::)를 붙여서 표현
::first-letter 첫 번째 글자를 선택
::first-line 첫 번째 줄을 선택
<head>
<style>
p::first-letter { /* 문단의 첫 번째 글자를 선택 */
font-size: 20px;
color: red;
font-weight: 900; /* 글자 굵기 */
}
p::first-line { /* 문단의 첫 번째 줄을 선택 */
background: blue;
color: yellow;
}
</style>
</head>
<body>
<h1>리메이크되는 [달콤한 인생] </h1>
<p>
영화감독을 꿈꾸시는 분이라면 크게 도움이 될 영화 중의 하나인 페데리코 펠리니 감독의 [달콤한 인생]이 리메이크 된다고 합니다.
</p>
<p>
'아니, 왜?'라는 말이 나올 정도로 완성도 높은 영화들을 리메이크하는 것을 좋아하지 않지만, 현재를 배경으로 하거나 현재의 시각으로 본다면 어떻게 변하게 될 것이라고 한다면 리메이크를 반기게 될 것 같습니다. 아무튼 원작을 존경하는 관점에서 리메이크를 하게 된다고 하는데요.
</p>
<p>
그동안 후속편이나 프리퀄 제작을 시도했으나 여의치 않았고 원작에서 큰 영감을 얻어 현대적으로 재해석하게 될 것이라고 합니다.
</p>
</body>
6) 가상 요소 선택자
🥑 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다
➡️ 문서내에서 보이지 않지만, 미리 정의한 위치에 삽입하는 것이 가능
🥑 선택될 요소(element)의 특별한 상태를 지정하는 선택자로 선택될 요소의 앞 혹은 뒤쪽으로 가상의 요소를 넣어 표현
::before 특정요소의 앞에 삽입, 내용이나 필요한 경우 content 속성을 이용
::after 특정요소의 뒤에 삽입, 내용이나 필요한 경우 content 속성을 이용
<head>
<style>
h2::before {
content: '하하';
}
p::after {
content: '호호';
}
</style>
</head>
<body>
<h2>TITLE-1</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
7) 반응 문자 선택자
::selection 사용자가 드래그한 글자를 선택
<head>
<style>
p::selection {
background: black;
color: red;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed nisi velit. Phasellus suscipit
pellentesque leo, vel efficitur mi placerat sed. Fusce vel condimentum leo, at iaculis ante. Suspendisse posuere,
dolor non tempor ullamcorper, nisl elit facilisis erat, nec lacinia augue erat id lacus. Curabitur mollis,
justo nec lobortis hendrerit, libero nunc aliquam lacus, ut tristique sem nunc eu metus. Quisque varius orci eu
felis sollicitudin malesuada. Vivamus pretium ligula velit, eget facilisis enim imperdiet ac.</p>
<p>Nam enim sem, pulvinar sed nibh non, vestibulum suscipit dui. Vestibulum vitae sodales velit.
Nam cursus, velit id semper malesuada, sem mauris iaculis diam, sit amet auctor ligula lectus in eros.
Aliquam tincidunt semper odio, sit amet ornare neque tristique ut. Suspendisse placerat consequat lectus ut varius.
Aliquam in ligula non massa auctor porta. Proin auctor mattis elit sit amet tincidunt. Cras auctor mauris augue,
et volutpat diam iaculis vitae.</p>
</body>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > CSS' 카테고리의 다른 글
| [CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용 (0) | 2024.03.23 |
|---|---|
| [CSS] 배경 이미지 지정과 속성 (0) | 2024.03.22 |
| [CSS] 수직 중앙 정렬 방법, overflow와 scroll (0) | 2024.03.21 |
| [CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding] (0) | 2024.03.20 |
| [CSS] 박스 모델 요소 및 구성, 테두리 스타일 지정 (0) | 2024.03.20 |