1일(06.29) 선택자(selector)

FRONT END/CSS

1일(06.29) 선택자(selector)

라미보 2022. 7. 3. 02:31

📁 ' 선택자(selector) '

스타일 속성을 적용하는 요소

태그 하나가 될 수도 있지만 여러 개의 요소를 묶어 별도의 선택자로 지정할 수 있다.

태그 선택자
클래스 선택자
아이디 선택자
속성 선택자
자식/인접 형제 선택자
가상 클래스 선택자

💾 태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기

전체 선택자 다음으로 많은 요소에 적용

특정 태그가 쓰인 모든 요소에 스타일을 적용 합니다.

스타일을 적용하고 싶은 태그에 선택자를 정의하면 웹 문서의 모든 요소들, 모든 문단에 스타일이 적용된다.

<!DOCTYPE HTML>
<html>
	<head>
		<title>태그 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		h3{
		background-color: #000;
		color :#fff;
		width: 50%
		}		
		</style>
		<!-- h3 테그를 선택해서 사용하였음 (테그선택자) -->
	</head>

	<body>
		<h1>태그 선택자 사용하기</h1>
		<hr />
		<h2>두부감자조림</h2> 
		<h3>재료</h3>
		<ul>
			<li>감자 1개</li>
			<li>두부 1/2모</li>
			<li>꽈리고추 10개</li>
			<li>홍고추 1개</li>
		</ul>
		<h3>조리법</h3>
		<ol>
			<li>감자는 껍질을 벗기고 돌려가면서 어슷하게 썰어 찬물에 담가놓고 두부는 도톰하게 한입크기로 썰며 꽈리고추, 홍고추는 어슷썬다.	</li>
			<li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다. </li>
			<li>냄비에 감자와 홍고추를 담고 조림장을 반분량만 넣는다. </li>
			<li>3번째를 끓이다가 감자가 반정도 익으면, 두부와 남은 양념장을 넣는다. </li>
			<li>윤기나게 졸여지면 꽈리고추를 마지막에 넣어 다시한번 살짝 졸여 조린다.</li>
		</ol>
	</body>
</html>

<h3> 태그를 선택해서 스타일을 적용 시켰다.

태그 선택자는 별도의 태그 안에 다른 속성을 입력하지 않아도

태그 선택자로 정의한 h3 요소 부분에 자동으로 적용이 된다.

<h3> 태그에 배경은 검은색, 글씨색은 흰색, 너비는 50% 지정

width는 css 속성중 h1~h6,div,p,ul 같은 블록으로 구성되는 요소의 가로 크기를 지정하는 속성 px,% 같은 단위 사용

태그 { 적용시킬 스타일 }

💾 클래스 선택자 - 특정 부분에 스타일 적용하기

태그 대신 클래스 이름을 사용하는데 클래스 이름은 기억하기 쉬운 이름으로 지정(태그 이름과 겹치지 않게)

클래스 이름 앞에는 반드시 마침표 ( . )를 붙여야 한다.

사용자 정의 선택자/도트(dot) 선택자라고 불리운다.

문서 내에서 여러번 박복하여 재사용 할 수 있다.

특정한 부분만 선택하여 스타일을 적용하고자 하는 경우에 사용된다.

.clasName { 속성 : 값; }

<!DOCTYPE HTML>
<html>
	<head>
		<title>클래스 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		
		.cook1{
			border:1px solid blue;
			color:pink;
		}
		</style>
	</head>

	<body>
		<h1 class="cook1">클래스 선택자 사용하기</h1>
		<hr />
		<h2>닭칼국수</h2> 
		<h3 class="cook1">재료-4인분 기준</h3>
		<ul>
			<li>밀가루 3컵</li>
			<li>닭 1/2마리 </li>
			<li>호박 1/2개 </li>
			<li>부추 50g</li>
			<li>생강,소금, 후추, 참기름</li>
		</ul>
		<h3 class="cook2">조리법</h3>
		<ol>
			<li>밀가루에 소금과 달걀을 넣고 반죽하여 밀대로 밀어 0.5cm 두께로 썬다.쟁반에 펼쳐 굳지 않게 가제로 덮어놓는다. </li>
			<li>첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다. </li>
			<li>닭은 내장과 필요없는 지방을 제거하고 깨끗이 씻는다.생강을 저며 넣고 찬물을 부어 푹 삶아 닭고기는 살을 곱게 찢어 소금, 후추, 참기름에 양념하여 무쳐 놓고 국물은 가제로 걸러 육수로 사용한다. </li>
			<li class="cook1">호박은 채 썰고 부추도 다듬어 씻어 4cm 길이로 썰고, 홍고추, 파, 마늘은 곱게 다진다.간장, 깨소금, 참기름을 섞어 양념장을 만든다. </li>
			<li>닭국물이 끓으면 썰어 놓은 칼국수를 넣어 서로 붙지 않게 한소끔 끓인 다음 호박과 부추, 양념한 닭고기를 넣고 다시 한소끔 끓여서 양념장과 김치를 곁들여 먹는다.</li>
		</ol>
	</body>
</html>

<!-- 
class="" 클래스를 이용
클래스를 설정해서 클래스를 적용시키면 적용된 부분만 스타일이 변한다. -->

</style>

solid : 실선으로 테두리 설정

클래스 cook1을 적용시키겠다.

<h1>, <h3>, <li> 태그에 클래스 선택자를 적용 시켜 원하는 부분에만 스타일을 적용 시켰다.

💾 ID 선택자 - 특정 부분에 스타일 적용하기

클래스 선택자와 마찬가지로 웹 문서 안에 특정 부분에 스타일을 지정할 때 사용

# 기호를 사용한다.

클래스 선택자와 ID 선택자의 차이점

클래스 선택자는 문서 안에서 여러번 적용 가능, id 선택자는 문서 안에 한번만 적용 할 수 있다는 점이 다르다.

id 선택자는 중복해서 사용할 수 없기 때문에 주로 문서의 레이아웃과 관련된 스타일 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구별하기 위해 사용된다.

<!DOCTYPE HTML>
<html>
	<head>
		<title>아이디 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			#box1{
			font-size:50px;
			width:200px;
			}
		</style>
	</head>

	<body>
		<h1>아이디 선택자 사용하기</h1>
		<hr />
		<h2>도가니탕</h2> 
		<h3 id="box1">재료-4인분 기준</h3>
		<ul>
			<li>도가니 1개</li>
			<li>양지머리 300g</li>
			<li>무 200g</li>
			<li>마늘 5쪽</li>
			<li>대파 3뿌리</li>
			<li>생강 1쪽</li>
		</ul>
		<h3 id="box1">조리법</h3>
		<ol>
			<li>도가니(무릎뼈)는 뼈 부분을 4∼5 등분으로 잘라 깨끗이 씻어 놓는다. </li>
			<li>양지머리는 물에 한번 씻어 놓는다. </li>
			<li>무는 3cm 두께로 둥글게 썰어 놓는다. </li>
			<li>솥에 물을 붓고 도가니와 마늘, 양지머리, 파, 저민 생강을 넣고불에 올려놓아 끓기 시작하면 중간 불에서 2∼3시간 정도 서서히 고면서 중간에 무 토막을 넣어 함께 끊인다. </li>
			<li>양지머리와 무가 푹 익었으면 건져서 먹기 좋게 썰어 다시 솥에 넣고 소금으로 간을 한다. </li>
			<li>도가니를 끊인 국물이 뽀얗게 우러나면 뚝배기나 탕그릇에 고기와 무를 담아 국물을 붓고 대파를 송송 썰어 얹어 낸다.</li>
		</ol>
	</body>
</html>

<!-- 
ID 선택자는 :#이름{}
class 선택자는 :.클래스이름{}

ID와 Class 선택자의 차이점
id는 어느 한군데만 적용 시키고 싶을때 사용한다.
class 두군데 이상을(여러군데) 적용 시키고 싶을때는 사용 -->

idrk "box1" 인 곳에만 적용이 된다

💾속성 선택자 - 속성을 세부 선택해서 스타일 적용

속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 HTML요소를 선택할 수 있습니다.

속성 선택자에는 [], ~=, *=, |=, ^=, $= 등의 기호를 사용합니다.

문법	기능	예시
[attribute]	html 요소에서 속성이 있는 요소를 선택자로 지정합니다.	a[target]
[attribute = "value"]	html 요소에서 속성에 특정 값이 지정되어 있는 요소를 선택자로 지정합니다.	a[target = "_blank"]
[attribute ^= "value"]	html 요소에서 속성 값이 지정한 값으로 시작하는 요소를 선택자로 지정	a[target^= "제과"]
[attribute $= "value"]	html 요소에서 속성 값이 지정한 값으로 끝나는 요소를 선택자로 지정	a[title$ = "기사"]
[attribute *= "value"]	html 요소에서 속성 값이 지정한 값을 포함하고 있는 요소를 선택자로 지정	a[title*="요리"]

<!DOCTYPE HTML>
<html>
	<head>
		<title>속성 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* a 요소를 이용하여 선택자를 정의합니다. */
			a[target]{
			color:green;
			font-size:15px;
			text-decoration:none;
			} /*타켓속성이 있는곳에만 적용시키고 싶다*/
			
			a[title]{/* title이 있는 속성에 스타일 설정하기 */
			
			color:white;
			background-color: green;		
			}
		</style>
	</head>

	<body>
		<h1>속성  선택자 사용하기</h1>
		<hr />
		<h2>조리학부 자격증</h2> 
		<ul>
			<li><a href="http://www.q-net.or.kr">복어조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" target="_blank">양식조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" target="_blank">일식조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr">제과기능장</a></li>
			<li><a href="http://www.q-net.or.kr" target="_blank">제과기능사</a></li>
			<li><a href="http://www.q-net.or.kr" target="_blank">제빵기능사</a></li>
			<li><a href="http://www.q-net.or.kr">조리기능장</a></li>
			<li><a href="http://www.q-net.or.kr">조리산업기사(복어조리)</a></li> 
			<li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(양식)">조리산업기사(양식)</a></li> 
			<li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(일식)">조리산업기사(일식)</a></li> 
			<li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(중식)">조리산업기사(중식)</a></li> 
			<li><a href="http://www.q-net.or.kr" target="_blank" title="조리산업기사(한식)">조리산업기사(한식)</a></li> 
			<li><a href="http://www.q-net.or.kr">조주기능사</a></li> 
			<li><a href="http://www.q-net.or.kr" title="중식조리기능사">중식조리기능사</a></li> 
			<li><a href="http://www.q-net.or.kr" title="한식조리기능사">한식조리기능사</a></li> 
		</ul>
	</body>
</html>


 /*css의 주석형태 : /* */
 
 언어별 주석표현 알아두기 */
 
 
 
 <!-- 
css의 주석형태 : /* */
언어별 주석표현 알아두기 
  -->

<!DOCTYPE HTML>
<html>
	<head>
		<title>속성 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* a 요소를 이용하여 선택자를 정의합니다. */
			a[title="조주기능사"]{
				background-color:#60c; /*=#6600cc*/
				color: #fff; 
 			}
 			
	 		a[title ^= "제과"]{
				background-color: yellow; /* 6600cc */
				color : #f00; 
			}	
			a[title $= "기능장"]{
				background-color: cyan; /* 6600cc */
				color : #f00; 
			}	
			a[title *= "산업"]{
				background-color: gray; /* 6600cc */
				color : #f00; 
			}	
 			
		</style>
	</head>

	<body>
		<h1>속성  선택자 사용하기</h1>
		<hr />
		<h2>조리학부 자격증</h2> 
		<ul>
			<li><a href="http://www.q-net.or.kr" title="복어조리기능사">복어조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="조리기능사">조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="일식조리기능사">일식조리기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="제과기능장">제과기능장</a></li>
			<li><a href="http://www.q-net.or.kr" title="제과기능사">제과기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="제빵기능사">제빵기능사</a></li>
			<li><a href="http://www.q-net.or.kr" title="조리기능장">조리기능장</a></li>
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(복어조리)">조리산업기사(복어조리)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(양식)">조리산업기사(양식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(일식)">조리산업기사(일식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(중식)">조리산업기사(중식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조리산업기사(한식)">조리산업기사(한식)</a></li> 
			<li><a href="http://www.q-net.or.kr" title="조주기능사">조주기능사</a></li> 
			<li><a href="http://www.q-net.or.kr" title="중식조리기능사">중식조리기능사</a></li> 
			<li><a href="http://www.q-net.or.kr" title="한식조리기능사">한식조리기능사</a></li> 
		</ul>
	</body>
</html>

💾 자식 /인접 형제 선택자

선택자 내의 직계 자식 요소만 선택자로 지정한다.

자손 선택자는 선택자 안에 삽입된 모든 요소(직계 여부에 상관 없이)를 지정할 때 사용

선택자1 > 선택자2 { 속성 : 값; }

> 기호를 자식 결합자라고 부른다.

선택자1 내부의 선택자2를 찾아서 해당 스타일을 지정한다.

<!DOCTYPE HTML>
<html>
	<head>
		<title>자식 선택자 사용하기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* h2 요소안에 삽입된 span 요소를 이용하여 선택자를 정의합니다. */
			h2>span{/*h2의 자식 span, 자식에 접근*/
			
				color :#f00;
			}
	 /* body 요소안에 삽입된 span 요소를 이용하여 선택자를 정의합니다. */
			
		</style>
	</head>

	<body>
		<h1>자식 선택자 사용하기</h1>
		<hr />
		<h2>맛난 반찬 만들기 <span>특선</span></h2> 
		<hr />
		<h3>쇠고기완자 <span>튀김</span></h3>
		<dl>
			<dt>재료</dt>
			<dd><span>쇠고기 200g,</span>  <span>다진 파 1큰술,</span>  <span>다진 마늘 1작은술,</span> <span>소금 1/2 작은술,</span> <span>깨소금 1작은술,</span> <span>참기름 1큰술,</span> <span>후춧가루 1/4 작은술,</span> <span>밀가루 1/4 컵,</span> <span>달걀 2개,</span> <span>식빵 2쪽,</span> <span>튀김기름</span></dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
			<li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
			<li>완자를 밀가루에 굴려 얇게 묻히고, 푼 달걀을 씌운다  깍뚝 썬 빵조각을 완자에 골고루 묻힌다</li>
			<li>빵조각에 굴린 완자를 180도로 끓는 기름에 튀겨 내어 튀김망에 건져 기름을 뺀다</li>
		</ol>
		<hr />
	</body>
</html>

h2 > span {

color : #f00;

}

<h2> 태그 안에 있는 <span>에만 적용이 되어 빨간색으로 글씨가 출력된다.

💾 가상 클래스

하이퍼링크와 폼 입력 상자에 마우스 포인터의 접근 상태에 따라 서로 다른 디자인의 변화를 주어 동적인 형태로 반응할 수 있게 만든 클래스

즉, 가상으로 클래스를 설정한 것처럼 작동하는 클래스

종류	설명	문법
:link	이전에 방문한 적이 없는 링크	a:link { 속성 : 값 ; }
:visited	이전에 방문한 적이 있는 링크	a:visited { 속성 : 값 ; }
:hover	마우스 포인터가 해당 항목의 위쪽으로 들어오면 발생	a:hover { 속성 : 값 ; }
:active	마우스 포인터로 클릭한 상태를 식별하는 가상 클래스 사용자가 클릭을 하게 되면 발생 한다.	a:active {속성 : 값 ;}
:focus	현재 포커스를 갖고 있는 요소에 적용. 포커스 태그 ( input, a, area 태그) 등에 적용 된다.	a:focus { 속성 : 값 ;}

<!DOCTYPE HTML>
<html>
	<head>
		<title>링크 관련 가상 클래스 선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* a 요소의 상태에 따른 선택자를 정의합니다. */
		
			a:hover{
				background-color: #cf3;
			}
			
			/*마우스 올렸을때 색이 생긴다.*/	
			
			a:visited{
			background-color: pink;
			}
			/*링크 눌러서 한번 방문하면 지정한 배경색으로 변한다.*/
			
		</style>
	</head>

	<body>
		<h1>링크 관련 가상 클래스 선택자</h1>
		<hr />
		<h2>나라별 요리법 분류 메뉴</h2> 
		<ul>
			<li><a href="#" title="한식 요리법">한식</a></li>
			<li><a href="#" title="중식 요리법">중식</a></li>
			<li><a href="#" title="양식 요리법">양식</a></li>
			<li><a href="#" title="일식 요리법">일식</a></li>
			<li><a href="#" title="베트남식 요리법">베트남식</a></li>
			<li><a href="#" title="이탈리아식 요리법">이탈리아식</a></li>
		</ul>
	</body>
</html>

하이퍼링크가 지정되어 있는 글자 부분에 마우스 포인터를 가져가면

배경색이 표시되고 클릭하면 빨강색으로 배경색이 바뀐다.

💾순서 관련 가상 선택자

첫번째, 마지막만 있고 2번째 3번째...는 nth-child로 사용한다.
first-child

nth-child

last-child

종류	설명	예시
:first-child	첫번째 자식 요소를 찾는다.	p:first-child { color:blue; }
:last-child	마지막 자식 요소를 찾는다.	p:last-child { color:blue; }
:nth-child	맨 앞에서부터 특정 자식 요소를 찾는다.	p:nth-child(even) : 짝수번째 요소만 찾는다. p:nth-child(odd) : 홀수번째 요소만 찾는다. p:nth-child(n) : n번째 요소만 찾는다.
:first-letter	첫번째 글자를 찾는다.
:first-line	첫번째 행을 찾는다.
:before	h1~h6, p 등과 같이 글자의 입력과 관련된 요소의 앞에 문자열이나 특수 기호를 삽입 content 속성 값으로 지정한 글자가 표시된다.
:after	h1~h6, p 등과 같이 글자의 입력과 관련된 요소의 문자열이나 특수 기호를 삽입한다, span 요소들 중에서 클래스 속성이 weight인 요소 다음에 content로 지정한 내용을 덧붙인다.	span.weight:after { content: "lbs"; color:#bbb; }
:nth-of-type	특정 타입의 n번째 요소를 찾는다.	p:nth-of-type(2n+1) { color : red ; }
:nth-last-of-type	마지막부터 특정 타입의 n번째 요소를 찾는다.
:nth-last-child	맨 마지막에서부터 특정 자식 요소를 찾는다.	p:nth-last-child(2) { color:red; }
:first-of-type	타입에 일치하는 첫번째 요소를 찾는다.	p:first-of-type {color : blue;}
:last-of-type	타입에 일치하는 마지막 요소를 찾는다.	p:last-of-type {color : blue;}
:first	첫번째 요소를 찾는다.
:last	마지막 요소를 찾는다.

<!DOCTYPE HTML>
<html>
	<head>
		<title>첫 번째, 짝수 번째, 세 번째 li 요소 꾸미기 </title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* 첫번째 li 태그  */
			li:first-child{
				color:lime;
			}
		/* 짝수번째 li 태그  */
			li:nth-child(even) {
				color:blue;
			}
		/* 세번째 li 태그  */
			li:nth-child(3){
			color:red;
			}
		</style>

	</head>

	<body>
		<h1>순서와 관련있는 가상 선택자</h1>
		<hr />
		<h2>전통 한과 차 만들기</h2> 
		<ul>
			<li>약식</li>
			<li>곶감쌈</li>
			<li>수정과</li>
			<li>오미자차</li>
			<li>수박떡화채</li>
		</ul>
	</body>
</html>

<!--
 첫번째, 마지막만 있고 2번째 3번째...는 nth-child로 사용한다.
first-child

nth-child

last-child
 -->

💾전체 선택자 - 모든 요소에 스타일 적용

전체 선택자는 모든 요소에 적용할때 사용한다.

주로 모든 하위요소에 한꺼번에 스타일을 적용할 때 사용

또한 전체선택자는 문서의 여백이나 글꼴 크기등 기본 스타일을 초기화할 때 사용한다.

*{속성: 속성값; 속성:속성값; ...}

<!DOCTYPE HTML>
<html>
	<head>
		<title>전체 선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* html 전체 요소의 CSS 속성을 정의합니다.  */
		/*  *은 전체 선택자이다.*/		
		/*margin: 바깥여백*/
			
			* {
				background-color: yellow; 
				margin : 20px; 
			}
		
		</style>
	</head>

	<body>
		<h1>전체 선택자 사용하기</h1>
		<hr />
		<h2>맛난 반찬 만들기 특선</h2> 
		<hr />
		<h3>쇠고기완자 튀김</h3>
		<dl>
			<dt>재료</dt>
			<dd>쇠고기 200g,   다진 파 1큰술,  다진 마늘 1작은술, 소금 1/2 작은술, 깨소금 1작은술, 참기름 1큰술, 후춧가루 1/4 작은술, 밀가루 1/4 컵, 달걀 2개, 식빵 2쪽, 튀김기름</dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
			<li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
			<li>완자를 밀가루에 굴려 얇게 묻히고, 푼 달걀을 씌운다  깍뚝 썬 빵조각을 완자에 골고루 묻힌다</li>
			<li>빵조각에 굴린 완자를 180도로 끓는 기름에 튀겨 내어 튀김망에 건져 기름을 뺀다</li>
		</ol>
		<hr />
		<h3>갈치 카레구이</h3>
		<dl>
			<dt>재료</dt>
			<dd>갈치  600g, 카레가루  3큰술, 밀가루  6큰술, 소금  1큰술, 식물성 기름  3큰술</dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>갈치에 칼집을 그물 모양으로 낸 다음 소금을 조금 뿌려 간이 배도록 30분 정도 재워 둔다.  칼집을 크게 넣어야 구울 때 모양이 상하지 않는다</li>
			<li>그릇에 체에 내린 밀가루를 넣고 카레가루를 밀가루의 1/2비율로 섞어 놓는다. 카레가루가 남은 것은 랩이나 쿠킹호일에 싸서 보관한다</li>
			<li>간이 밴 갈치의 양면에 구이옷을 골고루 묻힌다  그래야 갈치의 비린내가 없어지고 카레의 향이 고루 배게 된다</li>
			<li>팬에 기름을 두르고 지글지글 끓을 때 생선을 넣는다  자주 뒤집으면 살이 부스러질 수도 있으므로 갈색이 나게 아랫면이 완전히 익으면 한번만 뒤집는다</li>
		</ol>
		<hr>
	</body>
</html>

* {
background-color: yellow;
margin : 20px;
}

- margin: 바깥여백

전체선택자를 이용하여 배경은 노란색 , 바깥여백은 20px로 설정하였다.

전체 페이지의 배경이 노란색으로 출력된다.

💾그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기

여러 선택자에 같은 스타일을 사용하는 경우가 있다.

쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한번만 정의하면 소스가 간단해진다.

선택자1, 선택자2, 선택자3 ... { 속성 : 값 ; }

<!DOCTYPE HTML>
<html>
	<head>
		<title>그룹 선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
		/* 여러 선택자에 같은 CSS 속성을 정의합니다.  */
			
			h1,h2,h3,h4{
				font-size:20px;
				font-family: "맑은 고딕", 궁서;
			 /*font-family 글꼴설정 , 공백있는 문자열은 ""로 묶어준다. 먼저적힌게 적용되고 해당 글꼴이 없으면 다음에 적은 글꼴이 적용된다.*/
			}
		</style>
	</head>

	<body>
		<h1>그룹 선택자 사용하기</h1>
		<hr />
		<h2>맛난 반찬 만들기 특선</h2> 
		<hr />
		<h3>쇠고기완자 튀김</h3>
		<dl>
			<dt>재료</dt>
			<dd>쇠고기 200g,   다진 파 1큰술,  다진 마늘 1작은술, 소금 1/2 작은술, 깨소금 1작은술, 참기름 1큰술, 후춧가루 1/4 작은술, 밀가루 1/4 컵, 달걀 2개, 식빵 2쪽, 튀김기름</dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
			<li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
			<li>완자를 밀가루에 굴려 얇게 묻히고, 푼 달걀을 씌운다  깍뚝 썬 빵조각을 완자에 골고루 묻힌다</li>
			<li>빵조각에 굴린 완자를 180도로 끓는 기름에 튀겨 내어 튀김망에 건져 기름을 뺀다</li>
		</ol>
		<hr />
		<h3>갈치 카레구이</h3>
		<dl>
			<dt>재료</dt>
			<dd>갈치  600g, 카레가루  3큰술, 밀가루  6큰술, 소금  1큰술, 식물성 기름  3큰술</dd>
		</dl>
		<hr />
		<h4>요리법</h4>
		<ol>
			<li>갈치에 칼집을 그물 모양으로 낸 다음 소금을 조금 뿌려 간이 배도록 30분 정도 재워 둔다.  칼집을 크게 넣어야 구울 때 모양이 상하지 않는다</li>
			<li>그릇에 체에 내린 밀가루를 넣고 카레가루를 밀가루의 1/2비율로 섞어 놓는다. 카레가루가 남은 것은 랩이나 쿠킹호일에 싸서 보관한다</li>
			<li>간이 밴 갈치의 양면에 구이옷을 골고루 묻힌다  그래야 갈치의 비린내가 없어지고 카레의 향이 고루 배게 된다</li>
			<li>팬에 기름을 두르고 지글지글 끓을 때 생선을 넣는다  자주 뒤집으면 살이 부스러질 수도 있으므로 갈색이 나게 아랫면이 완전히 익으면 한번만 뒤집는다</li>
		</ol>
		<hr />
	</body>
</html>

h1,h2,h3,h4{
font-size:20px;
font-family: "맑은 고딕", 궁서;
}

- font-family :글꼴설정 , 공백있는 문자열은 ""로 묶어준다.

먼저적힌게 적용되고 해당 글꼴이 없으면 다음에 적은 글꼴이 적용된다.

💾하위 자손 선택자

하위 자손 선택자 : 공백을 사용하여 종속된 다른 요소를 나열하는 하위 자손 선택자

하위 자손 선택자는 단계와 상관없이 모든 요소를 선택할 수 있다.

> 기호를 자식 선택자라고 부르는데 선택자 내의 직계 자식 요소만 선택자로 지정할 수 있다.

선택자1 선택자2 선택자3 ...{ 속성 : 값 ; }

<!DOCTYPE HTML>
<html>
	<head>
		<title>소속을 정하는 트리 구조의 하위 자손 선택자</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			body h2{ /*div>h2 div h2  body>div>h2  h2*/  
				color:red;
			}
			
			
			/*부모 바로 밑이면 자식
			부모 밑의 자식의 자식이면 자손
			자손은 자식을 포함한다.
			자손은 > 으로 사용*/
			
		</style>
	</head>

	<body>
		<h1>소속을 정하는 트리 구조의 하위 자손 선택자</h1>
		<hr />
		<div>
			<h2>마</h2> 
			<p>
			마는 재배도 하지만 산에서 나는  야생종이 약효가 더 좋은 것으로 알려져 있다.   
			약으로 사용하는 부분은 뿌리지만  잎사귀 옆에 돋아나는 콩알  같은 것을 영여자라고 하여 역시 약이 된다. 
			동의보감에 나와 있는 마의 약효를 읽어보면 &quot;마뿌리는 허하고 지친  데 좋으며 여윈 것을  고치고 오로칠상을 보해주니 뿌리를 채취해 쪄서  먹든지, 또는 죽을 쑤어 먹어도 모두 좋다&quot;고 되어 있다.
			</p>
		</div>
		<div>
			<h2>당근</h2>
			<p>
				당근은 녹황색 야채 중 으뜸가는 것으로 평상시에 애용하면 병에  대한 저향력이 강해져 감기에도 걸리지 않게 되므로 자라나는 어린이들에게도 좋은 식품이다.
				당근은 또한 빈혈, 저혈압, 야맹증  등에 좋다.  당근을 사과, 상추,  레몬 등과 섞어 주스를 만들어 먹으면 좋은데 요새 우리 가정에서도 많이 보급되고 있다. 잎사귀에는 정유성분이 들어 있어  욕조에 넣으면 향기로울 뿐만 아니라 몸을 덥게 하고 혈액순환을  좋게 하며 신경통, 류머티즘, 요통, 어깨  결리는 데 등에 효과가 있다.  
			</p>
		</div>
	</body>
</html>

body h2{
color:red;
}

body 태그의 자식인 <h2> 태그에 빨간색으로 적용시켰다.

" " " " 큰 따옴표

부모 바로 밑이면 자식이고, 부모 밑의 자식의 자식이면 자손이다.

자손은 자식을 포함한다. 자손은 > 으로 사용

💾선택자간의 우선 순위

케스케이딩(Cascading)

css에서 'c'는 케스케이딩(cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'이라는 뜻

선택자에 적용된 만은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다.

1. 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용됩니다.

2. 스타일 상속 - 태그들의 포함관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.

선택자 우선순위
!important > inline 스타일 방식 > class선택자/속성선택자/가상선택자 > ID선택자 > 태그선택자 > 전체선택자

!important : 최우선으로 적용해야 할 스타일에 적용하여 1순위로 올려준다.

<!DOCTYPE HTML>
<html>
	<head>
		<title>선택자간의 우선 순위 알아보기</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			body{
			
			background-color:black;
			color:cyan;
			}
			/*body라는 태그 선택자*/
			
			
			#bgPage1{
				color:white; /*아이디선택자사용*/
			}
			
			.bgPage2{   /*클래스선택자 사용*/
				color:#ccff00; /*연두색*/
			}
			
			.blueText{
			color:blue;
			background-color:white;
			}
			
			span{
				color:red !important;  /*!important 를 써서 1순위로 올려준다. 테그선택자는 우선순위가 낮다.*/
			}
		</style>
	</head>

	<body id="bgPage1" class="bgPage2">
		<h1>선택자간의 우선 순위 알아보기</h1>
		<hr />
		<div>
			<h2>굴 이야기</h2> 
			<p class="bgPage2">
				일명 <span class="blueText">석화</span>라고도 하는데 멀리서 보면 따낸 굴조개 껍질이 바위면에 하얗게 붙어있어서 마치 <span class="blueText">꽃무더기</span>를 연상하게 한다. 굴은 <span class="blueText">3대 영양소</span>는 물론 비타민, 미네랄에 이르기까지 풍부한 영양분을 함유하고 있어서 완전식품인 우유와 별로 다를 바가 없다.
			</p>
		</div>
	</body>
</html>


<!-- 
선택자 우선순위
!important > inline 스타일 방식 > class선택자/속성선택자/가상선택자 > ID선택자 > 태그선택자 >전체선택자(*을 사용함)


[선택자]
태그 선택자
가상(클래스) 선택자
클래스선택자
id 선택자
속성 선택자
자식 선택자
전체 선택자
자손 선택자
그룹 선택자
 -->

'FRONT END > CSS' 카테고리의 다른 글

1일(06.29) 여백 / 크기와 관련된 CSS 속성 -박스모델, display 속성 (0)	2022.07.10
1일(06.29) 텍스트 관련 스타일 -텍스트 스타일 (0)	2022.07.10
1일(06.29) 텍스트 관련 스타일 -글자 관련 스타일 (0)	2022.07.10
1일차(06.30) CSS / inline/ 내장방식 / 외장방식 / <p>태그 /블록요소 (0)	2022.07.02

현재글1일(06.29) 선택자(selector)

보람있는 개발생활

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

보람있는 개발생활