1. 기본 셀렉터 종류
-
css에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그 이름, 클래스 속성, ID 속성에 대한 명시가 있음
-
태그 이름
selector{...css 적용} -
특정 태그를 가리킨다. HTML 내에 동일 태그가 존재할 경우 태그 요소를 일괄 처리
-
클래스
seloctor{... css적용///} -
셀렉터 이름 앞에 .을 붙여 표시하고 HTML 태그의 class 속성에 .을 제와한 이름을 명시하여 지정
-
태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능 (재사용 목적), 이 경우 selector의 이름은 자유롭게
-
id
#selector {... css 적용 ...} -
셀렉터의 이름 앞에 #을 붙여 표시하고 HTML 태그의 id 속성에 #을 제외한 이름을 명시하여 지정
-
id속성의 값은 HTML 페이지 내에서 중복 사용될 수 없을 (고유 특성 명시), 이 경우 selector의 이름은 자유롭게 지정
2.조합형 셀렉터
tag.class { 속성1 : 값1, 속성2 : 값2, ... }
tag#id { 속성1 : 값1, 속성2 : 값2, ... }- id값이나 class값을 태그 이름과 함계 명시하여 적용하는 형태
- 셀렉터가 지정하는 대상을 자세하게 명시할 수 있음
- 태그, 클래스, 아이디를 독립적으로 명시할 때 보다 우선적으로 적용
3. AND의 의미를 갖는 , 사용
selector1, selector2, selector3 {
속성1 : 값1, 속성2 : 값2, ... ;
}- 여러 개의 요소에 동일한 css 내용을 적용하기 위해 셀렉터를 ,로 구분하여 일괄처리할 수 있음
- 태그, class, id 등 모든 형태의 css 셀렉터가 가능
4. 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
color: tomato;
text-decoration: underline;
}
#select {
font-size: 50px;
}
.myclass {
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li class="myclass">HTML</li>
<li id="select">css</li>
<li class="myclass">javascript</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 태그 셀렉터*/
h2 {
color: powderblue;
}
.myclass {
color: tomato;
}
#myid {
color: purple;
}
/*조합형 : 두 조건이 모두 충족하는 경우만 적용됨*/
h2.myclass {
color: blue;
}
</style>
</head>
<body>
<div>
<h1>css 셀렉터를 알아보자</h1>
<p>
셀렉터란? : css가 적용될 대상을 지정하는 방법
</p>
<h2>태그 셀럭터</h2>
<h2 class="myclass">클래스 셀렉터</h2>
<P class="myclass">서로 다른 여러 개의 요소에 적용할 수 있다.</P>
<h2 id="myid">아이디 셀렉터</h2>
<P class="myclass">태그 + 아이디, 태그 + 클래스 형식으로 조합 가능</P>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1, h2, .myclass, #myid {
color: tomato;
}
</style>
</head>
<body>
<div>
<h1>복수 지정 셀렉터</h1>
<h2>여러개의 셀렉터를 콤마(,)로 연결한 형태</h2>
<p>
AND의 의미를 갖는다.
</p>
<hr />
<div>
<span class="myclass">CSS</span>는
<span class="myclass">HTML</span>에
<strong id="myid">디자인</strong>을 입혀 줍니다.
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container > #header > h1 {
color: tomato;
}
#container > .sub {
color: greenyellow;
}
#content > header > h1 {
color: blue;
}
#content > header > .sub {
color: purple;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>자식셀렉터</h1>
<p class="sub">
자식셀렉터에 대해서 알아봅시다.
</p>
</div>
<hr />
<div id="content">
<h1>괄호(">")에 의한 HTML 태그의 계층표현</h1>
<p class="sub">
자식셀렉터는 "IN"의 의미가 있습니다.
</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container > #header > h1 {
color: blue;
}
#container .sub {
color: greenyellow;
}
#container > #content > h1 {
color: tomato;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>자손셀렉터</h1>
<p class="sub">
자셀렉터에 대해서 알아봅시다.
</p>
</div>
<hr />
<div id="content">
<h1>공백(" ")에 의한 HTML 태그의 계층표현</h1>
<p class="sub">
자식셀렉터는 반드시 1depth에 대한 요소만을 의미해야 하지만,
자손셀렉터는 태그의 계층을 건너뛸 수 있습니다.
</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
border: 1px solid orange;
}
input[type ='password'] {
border: 3px solid tomato;
}
</style>
</head>
<body>
<form>
<h1>회원가입</h1>
<fieldset>
<legend>기본정보</legend>
<div>
<label class="title" for="user_id">아이디</label>
<input type="text" name="user_id" id="user_id" />
</div>
<div>
<label class="title" for="user_pw">비밀번호</label>
<input type="password" name="user_pw" id="user_pw" />
</div>
</fieldset>
<br/>
<fieldset>
<legend>성별</legend>
<div>
<input type="radio" name="gender" value="M" id="gender_m" />
<label for="gender_m">남자</label>
<input type="radio" name="gender" value="F" id="gender_f" />
<label for="gender_f">남자</label>
</div>
</fieldset>
<br/>
<fieldset>
<legend>취미</legend>
<div>
<input type="checkbox" name="hobby" value="축구" id="hobby1" />
<label for="hobby1">축구</label>
<input type="checkbox" name="hobby" value="농구" id="hobby2" />
<label for="hobby2">농구</label>
<input type="checkbox" name="hobby" value="야구" id="hobby3" />
<label for="hobby3">축구</label>
</div>
</fieldset>
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-child(odd) {
background-color: greenyellow;
}
li:nth-child(2) {
background-color: tomato;
}
li:nth-child(3n) {
background-color: powderblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>