[CSS] selector

VScode/CSS 2022. 9. 8. 14:43

-특정한 HTML 태그 또는 ID 또는 CLASS를 선택할 때 사용하는 기능

-선택된 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tag_Selector.html</title>

<style type="text/css">
	/* Tag Selector */
	/* 하나의 태그를 선택하면 body 태그 안의 그 이름으로 된 모든 태그를 선택하고 적용함*/
	
    h1{color:#FF0000;}/*모든 h1 태그에 적용함*/
	/* color: 글자색 */
	h3{color:#0000FF;}
	p{background:yellow}
	h1,h3{background:silver;}
	/* 컴마를 사용해 동시 두개의 태그를 선택 가능*/
	img{width:100px; vertical-align:middle; 
        border:1px solid silver;}
	/* vertical-align: 이미지와 글자 간의 수평 맞춤 속성, 
       top: 위쪽 맞춤 bottom: 아래쪽 맞춤 middle: 중간 맞춤*/ 
</style>

</head>
<body>
<h1>CSS Selector Basic</h1>
<h3>간세네 관련 포스팅: 한글 Lorem Ipsum 생성기</h3>
<p>대통령은 국민의 보통·평등·직접·비밀선거에 의하여 선출한다. 
대통령은 조약을 체결·비준하고, 외교사절을 신임·접수 또는 파견하며, 선전포고와 강화를 한다.<p><br/>
<h1>*각 포털 사이트 로그</h1>
다음<img src="images/daumlogo.png">&nbsp;&nbsp;&nbsp;&nbsp; 
네이버<img src="images/naver.png">&nbsp;&nbsp;&nbsp;&nbsp; 
</body>
</html>

1. Universal

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UniversalSelector.html</title>
<style type="text/css">
*{color:magenta; border:1px solid black;}
body{border:3px dashed red;}
</style>
</head>
<body>
	<h2>한글 Lorem Ipsum</h2>
	<p>형사피해자는 법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다.
</body>
</html>

2. ID

-태그에 지정된 아이디에 '#'을 붙여서 CSS를 지정함

-태그의 id는 다른 태그들과 구분하기 위해 사용될 목적으로 만들어진 거라서 각 태그에 유일한 값으로 지정함

-서로 다른 두 태그의 id가 같다고 해서 에러가 발생하지는 않음. 하지만 유일한 값을 목적으로 하는 이상 가능한 중복되지 않은 값으로 id를 지정해주고 CSS에서는 유일한 태그에 지정될 내용을 기술해주는 것이 보통

margin

1) margin-left, margin-right, margin-top, margin-bottom을 이용하여 각 네 곳의 마진을 따로 따로 설정 가능

-margin-left:10px; margin-right:20px; margin-top:30px; margin-bottom:5px;

2) margin이라는 이름 하나만 사용하면 네 곳의 마진을 동일한 값으로 설정됨

-margin:10px;

3) margin:0 auto; 이와 같이 두개의 값만 사용하여 첫번째 값은 위와 아래 마진으로 두번째 값은 좌와 우의 마진으로 사용함. 좌우 값으로 지정한 auto 값은 자신을 감싸고 있는 태그 안에서 균등한 마진을 자동으로 지정하여 가운데 맞춤을 하라는 뜻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IDSelector.html</title>
<style type="text/css">
	#header{width:800px;margin:0 auto;height:150px;color: white; background:red;}
	#wrap{width:800px;height:200px;margin:0 auto;color:white; 
          border:5px solid orange; overflow:hidden;} 
	#aside{width:200px;height:300px; background:blue; float:left;}
	#contents{width:600px; height: 300px; background:green; float:left;}
/* float:left; -> block 형식을 같고 사용되면 바로 줄바꿈이 일어나는 
                  div에 줄바꿈 없이 왼쪽으로 차곡차곡 쌓이는 배치를 하라는 속성 */
/* overflow:hidden; ->안쪽 내용물이 가로: 800px; 세로:200px 경계선을 
                      넘어 갈 정도로 크기가 크다면 바깥쪽으로 빠져나가는 부분을 화면에서 보이지 않게 함*/
/* color 스타일은 현재 태그의 하위태그에도 적용됨*/
/* border:5px solid orange;*/
/* border-width: 5px; border-style: solid; border-color: orange;*/
/* 따로 또는 한번에 표현이 가능함 */
#footer{width:800px; height:100px; background: silver; margin: 0 auto;}
</style>
</head>
<body>
	<div id="header">
		<h1>Header-1</h1>
		<h3>Header-3</h3>
	</div>
	<div id="wrap">
		<div id="aside"><h3>Aside(subMenu)</h3></div>
		<div id="contents"><h3>Contents</h3></div>
	</div>
	<div id="footer">
		<span>footer</span>
	</div>
</body>
</html>

3. Class

-특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자

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

-여러 개의 클래스 선택자 사용

.class 속성은 공백으로 구분해서 여러 클래스를 하나의 태그에 적용할 수도 있음

-id는 유일한 값으로 태그들을 구분하기 위한 목적으로 사용하지만 class 서로 다른 태그도 하나의 이름을 갖는 class로 그룹화하여 사용하기 위한 목적으로 사용함

-태그 선택자와 클래스 선택자를 함께 사용해 다양한 태그를 그룹짓고 구분하여 선택할 수 있음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ClassSelector.html</title>
<style type="text/css">
	.select{color:red;}
	.item{background:yellow;}
</style>
</head>
<body>
	<h1 class="select">웹프로그래밍</h1>
	<ul class="select">
		<li class="item">HTML</li>
		<li class="item">CSS</li>
		<li>jQuery</li>
	</ul>
	<hr/>
	<!-- 두 개의 클래스이름을 적용하여 두 개의 스타일을 동시 적용하는 예 -->
	<h1 class="item select">화면 구현</h1>
</body>
</html>

4. Attribute

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AttributeSelector.html</title>
<style type="text/css">
	input[type=text]{background:red;}
	input[type=password]{background:blue;}
	#idinput{width:300px;height:50px;}
	.text{width:100px;height:50px;}
	</style>
</head>
<body>
<form action="">
	<input type="text" id="idinput"/><br/>
	<input type="password"id="passinput"/><br/>
	<input class="text"><br/>
	<!-- type이 지정되지 않은 input 태그는 기본값으로 적용된 "text"로 적용이 되지만 
         스타일 시트 적용 및 선택자 적용은 되지 않음 -->
	<input type="text" class="text"/>
</form>
</body>
</html>

5. 후손

-특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자. id의 사용을 남용하지 않고 상대적 위치로 Selector를 사용함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Descendant01.html</title>
<style type="text/css">
	#section h1{color:blue;}
	/* 빈칸(공백)으로 선택자가 이어지면, 
       아래에 포함되어 있는 child 선택자를 모두 지목하게 됨*/
	#header h1{color:red;}
	#header h1, #header h3{background:yellow;}
	/* ','로 구분하면 두개의 후손선택자를 동시 선택 가능함
	#header h1,h3 -> header 내부의 h1,h3가 아니라 header 내부의 h1과 내부 외부 포함 모든 h3라는 뜻임*/
	</style>
</head>
<body>
	<div id="header">
		<h1class="title">회사 이름/로고
		</h1>
		<div id="nav">
			<h1>Navigation</h1>
			<h2>header 2</h2>
			<h3>CSS3</h3>
		</div>
	</div>
	<div id="section">
		<h1 class="title">Aside</h1>
		<p><h1 class="title">Aside</h1>
		국가는 사회보장·사회복지의 증진에 노력할 의무를 진다. 
        모든 국민은 법률이 정하는 바에 의하여 선거권을 가진다. 
        대한민국은 민주공화국이다. </p>
		<h1 class="title">Aside</h1>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07_Descendant02.html</title>
<style type="text/css">
	#header>h1{background:blue; color:white;}
	/* 후손선택자 사용시 공백을 사용하면 지목된 선택자 안의 모든 후손선택자가 선택되지만 '>'를 
       사용하면 바로 아래 후손 선택자만 선택됨*/
	#header>h2{background:orange; color:white;}
	#header>#nav>h1{background:red; color:white;}
	#nav>h2{background:green; color:white;}
</style>
</head>
<body>
	<div id="header">
		<h1 class="title">회사 이름/로고</h1>
		<h2>회사 이름/로고</h2>
		<div id="nav">
			<h1>#header>#nav>h1</h1><h2>header 2</h2><h3>CSS3</h3>
		</div>
		<h1>#header>h1</h1>
		<h2>#header>h2</h2>
	</div>
	<div id="section">
		<h1 class="title">Aside</h1>
		<p>
		국가는 사회보장·사회복지의 증진에 노력할 의무를 진다. 
		모든 국민은 법률이 정하는 바에 의하여 선거권을 가진다. 대한민국은 민주공화국이다.
		</p>
	</div>
</body>
</html>

6. table

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Descendant03.html</title>
<style type="text/css">
	/* table>tr>th{color:red;}
	테이블 태그에는 tr이 나오기 전 부분에 보이지 않는 tbody라는 태그가 하나 숨어 있음. 
    테이블에 descendant를 적용하려면 아래와 같이 tbody를 언급해야 적용이 됨*/
	table>tbody>tr>th{color:red;}
</style>
</head>
<body>
<table border="1"width="300">
	<tr>
		<th>이름</th> 
	<!-- 열들의 맨 위줄에 제목 등을 넣을 때 td 대신 사용하는 태그 -->
		<th>주소</th>
		</tr>
	<tr>
		<td>홍길동</td>
		<td>서울시 종로구</td>
		</tr>
	<tr>
		<td>이순신</td>
		<td>서울시 강남구</td>
		</tr>
</table>
</body>
</html>

7. adjacent

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Adjacent.html</title>
<!-- 같은 레벨(수준)에 있는 형제들 중 일부를 선택할 때 사용함 -->
<style type="text/css">

/*인접(adjacent)선택자 
-여러 h2 태그 중에서 h1 태그의 바로 뒤에 위치하는 h2 태그의 color 속성에 red 글자색을 적용함*/
h1+h2{color:red;}

/* 형제(sibling)선택자 
-h1 태그 뒤에 위치하는 h3 태그의 color 속성에 green 키워드 적용*/
h1~h3{color:green;}

</style>
</head>
<body>
<h1>Header-1</h1>
<h2>Header-1</h2>
<h2>Header-1</h2>
<h3>Header-1</h3>
<h2>Header-1</h2>
<h3>Header-1</h3>
</body>
</html>

8. hover

-하나의 반응 선택자가 변경하는 사항을 다른 선택자에 적용하려면 자신의 형제나 후손 선택자에게만 적용이 가능함.

-자신의 부모나 부모의 형제 또는 부모의 형제의 자손 등은 적용할 수 없음

-그들에게 적용하려면 자바스크립트 또는 제이쿼리를 사용해야 함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hover.html</title>
<style type="text/css">
	#box1{background:yellow; height:50px; width:800px; transition-duration:1s;}
	#box2{background:yellow; height:50px; width:800px; transition-duration:1s;}
	#box1:hover{background:red;color:white;}
	#box2:hover{background:blue;color:white;}
	#box1:active{background:blue; height:150px;}
	#box2:active{background:red; height:150px;}
	#box1:active+ #bow2{ background: green; color:white;}
</style>
</head>
<body>
	<div id="box1"> 
		<h1>User Action Selector</h1>
	</div>
	<div id="box2">
		<h1>User Action Selector</h1>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HoverEx.html</title>
<style type="text/css">
#base{width:250px; height:1000px; background:#595959;}
#top{width:100%; height: 30px; border: 1px dashed white;}
.menuall { width:100%; height: 40px; border: 1px dashed yellow; 
		   background: #232323; color: white; line-height: 0px; text-align:center;}
.submenuall {width: 100%; height: 0px;  background:#989898;
			 border: 1px solid red; transition-duration: 1s;}
#menu1:hover{color:orange;}
#menu1:hover+#submenu1{height:100px;}
#menu2:hover{color:orange;}
#menu2:hover+#submenu2{height:100px;}
#menu3:hover{color:orange;}
#menu3:hover+#submenu3{height:100px;}
#menu4:hover{color:orange;}
#menu4:hover+#submenu4{height:100px;}
#menu5:hover{color:orange;}
#menu5:hover+#submenu5{height:100px;}
</style>
</head>
<body>
<div id="base">
	<div id="top"></div>	
		<div id="menu1" class="menuall"><h2>NEWS</h2></div>
		<div id="submenu1" class="submenuall"></div>
		<div id="menu2" class="menuall"><h2>PORTPOLIO</h2></div>
		<div id="submenu2" class="submenuall"></div>
		<div id="menu3" class="menuall"><h2>BOARD</h2></div>
		<div id="submenu3" class="submenuall"></div>
		<div id="menu4" class="menuall"><h2>ALBUM</h2></div>
		<div id="submenu4" class="submenuall"></div>
		<div id="menu5" class="menuall"><h2>CONTACT</h2></div>
		<div id="submenu5" class="submenuall"></div>
</div>
</body>
</html>

9. state

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

-종류: :enabled, :disabled, :focus, :checked

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StateSelector.html</title>
<style type="text/css">
	input:enabled{background: yellow;}
	input:disabled{background: green; }
	input:focus{background: pink;}
</style>
</head>
<body>
<h2>Enabled</h2>
<input type="text"/>
<h2>Disabled</h2>
<input type="text" disabled/>
</body>
</html>

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

[CSS] position, display, visibilty, shadow (0)	2022.09.08
[CSS] background, font, button, gradiant (0)	2022.09.08
[CSS] pseudoclass (0)	2022.09.08
[CSS] border, checked, box model, list (0)	2022.09.08
[CSS] Cascading Style Sheets (0)	2022.09.08

ABOUT ME

im hippo im hippo

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

티스토리툴바

ABOUT ME

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

관련글 관련글 더보기

티스토리툴바