강의를 참고해 선택자에 대한 예제를 실습해봅니다.
간단한 실습이며, <style> 태그 내에 클래스를 만들어 <body>태그에서 일괄적용 하는 방법과
<style> 태그 내에 특정 구조를 만들어 일괄적용하는 방법을 구현합니다.
Introduction
먼저 클래스 선택자입니다.
클래스 선택자는 '요소의 class 특성에 기반해 요소를 선택하는 선택자' 입니다.
일괄적용하고싶은 부분이나, 중복적용이 필요한 부분들에 사용됩니다.
조건 : 적용하고자 하는 태그를 <style>태그내에 적고 . 뒤에 클래스명을 적어줍니다. { } 태그 내에는 속성을 지정합니다.
Ex)
<style>
h1.test1 { color : blue }
</style>
h1 = 적용하고자 하는 태그
test1 = 임의 클래스명
{ color : blue } = 지정하고자하는 속성
전체 코드 (class_selector.html)
<!DOCTYPE html>
<html>
<head>
<title>Class Seletor</title>
<style>
body{
background-color: yellow;
}
h1 {color:green}
h1.ccoma1 {color:blue}
h1.ccoma2 {color:red}
</style>
</head>
<body>
<h1>가벼운 마음으로 배우는-녹색</h1>
<h1 class="ccoma1"> 가벼운 마음으로 배우는-파란색</h1>
<h1 class="ccoma2"> 가벼운 마음으로 배우는-빨간색</h1>
</body>
</html>Result
다음은 구조 선택자입니다.
구조 선택자는 '일반구조 선택자'와 '형태구조 선택자'로 나뉩니다.
일반구조 선택자에서는 홀수나 짝수번째에 다른 스타일을 적용하고자할때 사용합니다.'요소의 class 특성에 기반해 요소를 선택하는 선택자' 입니다.
형태구조 선택자에서는 일반구조 선택자와는 다르게 태그의 형태를 구분합니다.
특정 태그를 선택하여 스타일을 적용하게됩니다.
선택자 형태 :
1) 일반구조선택자
└ :first-child : 첫번째 위치의 자손 선택
└ :last-child : 마지막 위치의 자손 선택
└ :nth-child(수열) : 앞을 기준으로 (수열)번째의 자손 선택
└ :nth-last-child(수열) : 뒤를 기준으로 (수열)번째의 자손 선택
2) 형태구조선택자
└ :first-of-type : 자손 중 첫번째 위치의 특정 태그
└ :last-of-type : 자손 중 마지막 위치의 특정 태그
└ :nth-of-type(수열) : 자손 중 앞을 기준으로 (수열)번째의 특정 태그
└ :nth-last-of-type(수열) : 자손 중 뒤를 기준으로 (수열)번째의 특정 태그
일반구조선택자
Ex)
<style>
li:nth-child(2n+1) {background-color : green;}
</style>
nth-child(2n+1) = 앞을 기준으로 홀수번째의 자손 선택
{background-color : green;} = 배경 색을 초록색으로 지정
전체 코드 (CSS_Structure.html)
<!DOCTYPE html>
<html>
<head>
<title>CSS structure</title>
<style>
ul{overflow: hidden;}
li{list-style:none; height : 30px; font-weight:bold; margin-bottom:20px}
li:nth-child(2n+1) {background-color : green;}
li:nth-child(2n) {background-color : yellow;}
li:first-child {color:blue;font-size:20px;}
li:last-child {color:red;font-size:20px;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
<li>Gnob</li>
</ul>
</body>
</html>Result
CSS의 선택자에 대해 알아보았습니다. 보여지는 예시화면처럼 수열을 이용해 반복되는 스타일을 적용할 수 있습니다.
'Programming > HTML - CSS' 카테고리의 다른 글
| [CSS 기초] 간단한 홈페이지 디자인 만들기 (Homepage Design) (0) | 2022.04.27 |
|---|---|
| [CSS 기초] 절대 위치 / 상대 위치 (absolute / relative) (0) | 2022.04.26 |
| [CSS 기초] 박스 그림자 / 테두리 지정 (Box Shadow / Outline) (0) | 2022.04.25 |
| [HTML 기초] 간단한 홍보책자 만들기 (0) | 2022.04.10 |
| [HTML 기초] 회원가입 사이트 만들기 (0) | 2022.03.22 |
