CSS 활용(1)

으누·2024년 9월 9일
CSSCSS-definitionid class 선택자기본 속성 선택자반응 선택자상태 선택자인접 선택자일반 구조 선택자자식 선택자태그 선택자하위 선택자형태 구조 선택자
0

(1) 태그 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-01_태그 선택자</title>
<!--  
	# CSS ( Cascading Style Sheet )
	- HTML 로 페이지 구성을 하고, CSS 를 사용해서 웹 문서의 색상, 크기 등의 디자인을 합니다
	
	# 선택자
	- HTML 요소를 선택하고 스타일을 적용하는 데 사용됩니다
	  > 선택자 { 속성 : 값 ; }
	    - 각 속성 설정은 ';' 으로 구분합니다
-->
<style type="text/css">
* { color: blue; } /* 페이지 전체 태그에 색상 적용 */

p { color: red; } /* p 태그에 색상 적용 */

h3, h4, h5, span { /* h3, h4, h5, span 태그에 색상 적용 */
	color: orange;
}

h3 {
	color: gray;
}
</style>
</head>
<body>
	<h2>선택자</h2>
	<br/>
	<p>페이지의 태그를 선택할 때 사용합니다</p>
	<br/>
	<h3>여러개의 태그에 하나의 선언 적용</h3>
	<h4>여러개의 태그에 하나의 선언 적용</h4>
	<h5>여러개의 태그에 하나의 선언 적용</h5>
	<span>여러개의 태그에 하나의 선언 적용</span>
</body>

id_class 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-02_id_class 선택자</title>
<!--  
	# id 선택자
	- 같은 요소라도 각기 다른 이름을 지정하여 다른 속성을 부여할 있습니다
	- CSS 에서는 id 선택자 앞에 '#'을 붙여줍니다
	
	# class 선택자
	- 여러 요소 중에서 같은 이름을 갖는 요소들에게 속성을 부여할 수 있습니다
	- 여러개의 요소에 같은 class 명을 부여합니다
	- CSS 에서는 선택자 앞에 '.' 을 붙여줍니다
-->
<style type="text/css">
#select_1 { color: red; }
#select_2 { color: blue; }

.title { color: brown; }
h4.title { color: orange; }

.type {
	color: gray;
	font-weight: bold;
}
</style>
</head>
<body>
	<h2>id 선택자</h2>
	<p id="select_1"># 으로 시작해서 웹 페이지에서 CSS 로 꾸미고자 하는 id 선택</p>
	<p id="select_2"># 으로 시작해서 웹 페이지에서 CSS 로 꾸미고자 하는 id 선택</p>
	<br/>
	
	<h2>class 선택자</h2>
	<h3 class="title">난초</h3>
	<h4 class="title">- 난초의 특성</h4>
	<p>난초는 외떡잎 식물중에서 가장 진화한 식물</p>
	<br/>
	<h4>- 난초의 종류</h4>
	<p><span class="type">동양란</span>과 <span class="type">서양란</span>으로 구별하며...</p>
</body>
</html>

(3) 하위 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-03_하위 선택자</title>
<!--  
	# 하위(자손) 선택자
	- 특정 태그 아래에 있는 모든 하위 태그를 선택할 때 사용합니다
	- 선택자 사이를 공백으로 구분합니다
-->
<style type="text/css">
#header h2 { color: blue; }

#section h2 { color: red; }

#content p { color: olive; }
</style>
</head>
<body>
	<h1>하위 선택자</h1>
	<br/>
	<!-- header -->
	<div id="header">
		<h2>header</h2>
		<div id="nav">
			<h3>navigation</h3>
		</div>
	</div>
	<!-- // header -->
	<br/>
	<div id="section">
		<h2>section</h2>
		<p>section area</p>
	</div>
	<br/>
	<h1>heading</h1>
	<div id="content">
		<p>문단 A</p>
		<p>문단 B</p>
		<div>
			<p>문단 C</p>
		</div>
	</div>
	<p>문단 D</p>
</body>
</html>

(4) 자식 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-04_자식 선택자</title>
<!--  
	# 자식 선택자
	- 특정 태그 아래에 있는 직계 자식 태그만을 선택할 때 사용합니다
	- 선택자_A > 선택자_B
-->
<style type="text/css">
#section > h3 { color: red; }
#section > ul > li { color: blue; }

#content > p { color: gold; } 

</style>
</head>
<body>
	<h1>자식 선택자</h1>
	<br/>
	<div id="section">
		<h3>음료</h3>
		<ul>
			<li>커피</li>
			<li>주스</li>
			<li>콜라</li>
		</ul>
	</div>
	<br/>
	<h1>heading</h1>
	<div id="content">
		<p>문단 A</p>
		<p>문단 B</p>
		<div>
			<p>문단 C</p>
		</div>
	</div>
	<p>문단 D</p>
</body>
</html>

(5) 기본 속성 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-05_기본 속성 선택자</title>
<!--  
	# 기본 속성 선택자
	- 선택자[속성] : 특정한 속성이 있는 태그를 선택합니다
	  선택자[속성=값] : 특정한 속성의 값이 같고, 특정값과 같은 문서 객체를 선택합니다
-->
<style type="text/css">
input[type] { color: gray; }

input[type=password] { background-color: yellow; }

</style>
</head>
<body>
	<h1>기본 속성 선택자</h1>
	<br/>
	<form action="#">
		<p>text : <input type="text" id="data" name="data"/></p>
		<br/>
		<p>password : <input type="password" id="pwd" name="pwd"/></p>
	</form>
</body>
</html>

(6) 인접 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-06_인접 선택자</title>
<!--  
	# 인접 선택자
	- 현재 요소에서 뒤에 위치한 요소를 선택합니다
	- 같은 부모를 가져야 합니다
	- 인접 형태 선택자
	  > 선택자_A + 선택자_B
	    : 선택자_A 의 요소 바로 뒤에 위치하는 선택자_B 요소를 선택
	   
	  일반 형제 선택자
	  > 선택자_A ~ 선택자_B
	    : 선택자_A 의 형제 요소중에서 선택자_A 뒤에 위치하는 선택자_B 요소를 모두 선택
-->
<style type="text/css">
h2 + h3 { color: red; }

h2 ~ h3 { background-color: orange; }
</style>
</head>
<body>
	<h1>인접 선택자</h1>
	<h3>제목 - 3</h3>
	<h2>제목 - 2</h2>
	
	<h3>제목 - 3</h3>
	<h3>제목 - 3</h3>
	<h3>제목 - 3</h3>
	<div id="content">
		<h3>content - h3</h3>
	</div>
	<h3>제목 - 3</h3>
</body>
</html>

(7) 반응 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-07_반응 선택자</title>
<!--  
	# 반응 선택자
	- 링크가 걸린 문제에 스타일을 적용합니다
	- :link    -> 선택자가 방문자하지 않은 링크
	  :visited -> 선택자가 방문한 링크
	  :hover   -> 선택자에 마우스가 올라갔을 때
	  :active  -> 선택자가 클릭된 상태일 때
-->
<style type="text/css">
a:link { color: orange; }
a:visited { color: green; }
a:hover {
	color: red;
	background-color: yellow;
}

#test-1 a:active { color: blue; }
</style>
</head>
<body>
	<h1>반응 선택자</h1>
	<h2 id="test-1"><a href="https://www.naver.com" target="_blank">NAVER</a></h2>
	<h2 id="test-2"><a href="https://www.daum.net" target="_blank">DAUM</a></h2>
	
</body>
</html>

(8)상태 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-08_상태 선택자</title>
<!--  
	# 상태 선택자
	- HTML 요소의 특정 상태를 선택해서 스타일을 적용합니다
	  주로 form 요소에 사용합니다
	- :checked  -> 체크 상태의 input 태그를 선택
	  :focus    -> 초점이 맞추어진 input 태그를 선택
	  :enabled  -> 사용 가능한 input 태그를 선택
	  :disabled -> 사용 불가능한 input 태그를 선택   
-->
<style type="text/css">
input:checked + span { color: red; }

input:enabled + span { background-color: yellow; }

input:disabled + span { text-decoration: line-through; }

#test-a:focus { background-color: pink; }
#test-b:focus { background-color: skyblue; }

</style>
</head>
<body>
	<h1>상태 선택자</h1>
	<br/>
	<div>
		<p><input type="checkbox" value="bicycle" checked/><span>bicycle</span></p>
		<p><input type="checkbox" value="car"/><span>car</span></p>
		<p><input type="checkbox" value="motocycle" disabled/><span>motorcycle</span></p>
	</div>
	<br/>
	<p>focus 테스트 a : <input type="text" id="test-a"/></p>
	<p>focus 테스트 b : <input type="text" id="test-b"/></p>
</body>
</html>

(9) 구조 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-09_구조 선택자</title>
<!--  
	# 일반 구조 선택자
	- 특정한 위치에 있는 태그를 선택합니다
	- :first-child       -> 형제 관계 중에서 첫번째 요소를 선택
	  :last-child        -> 형제 관계 중에서 마지막 요소를 선택
	  :nth-child(n)      -> 형제 관계 중에서 앞에서 n번째 요소를 선택
	  :nth-last-child(n) -> 형제 관계 중에서 뒤에서 n번째 요소를 선택
	  
	# 형태 구조 선택자
	- 일반 구조 선택자와 비슷하지만 태그 형태를 구분합니다
	- :first-of-type       -> 형제 관계 중에서 첫번째로 나오는 태그를 선택
	  :last-of-type        -> 형제 관계 중에서 마지막으로 나오는 태그를 선택
	  :nth-of-type(n)      -> 형제 관계 중에서 앞에서 n번째로 나오는 태그를 선택
	  :nth-last-of-type(n) -> 형제 관계 중에서 뒤에서 n번째로 나오는 태그를 선택
-->
<style type="text/css">
ul > li {
	font-size: 30px;
	font-weight: bold;
}
ul > li:nth-child(2n) { color: lightgreen; }
ul > li:nth-child(2n+1) { color: brown; }
ul > li:first-child { color: blue; }
ul > li:last-child { color: red; }

p { font-size: 24px; }
p:first-of-type { color: orange; }
p:last-of-type { color: green; }
p:nth-of-type(2) { background-color: pink; }

</style>
</head>
<body>
	<h1>일반 구조 선택자</h1>
	<ul>
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>four</li>
		<li>five</li>
		<li>six</li>
		<li>seven</li>
	</ul>
	<br/>
	
	<h1>형제 구조 선택자</h1>
	<p>h1 - p1</p>
	<p>h1 - p2</p>
	<p>h1 - p3</p>
	<p>h1 - p4</p>
	<br/>
	<div>
		<h2>제목 - h2</h2>
		<p>h2 - p1</p>
		<p>h2 - p2</p>
		<p>h2 - p3</p>
		<p>h2 - p4</p>
	</div>
</body>
</html>

(10) CSS-definition

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-10_CSS-definition</title>
<!--  
	# 외부 스타일 시트
	- 스타일 속성을 '.css' 로 저장하여 HTML 문서에 파일명으로 연결합니다
	- <link> 태그를 사용해서 적용합니다
	
	# 선택자 우선 순위
	- CSS 속성을 우선적으로 적용할 것인지를 결정합니다
	  > 1. 점수가 높은 선언이 우선 적용
	    2. 점수가 같으면 가장 마지막에 선언된 것이 적용
	- 선택자 우선 순위
	  > 인라인 선택자                     1000
	    id 선택자( #xxx )                  100
	    class 선택자( .xxx )                10
	    가상 선택자( :first-child )         10
	    태그 선택자 ( p, h1, ... )           1
	    전체 선택자 ( * )                    0
	    Ex) #title li:hover => 100 + 1 + 10 : 111    
-->
<link rel="stylesheet" type="text/css" href="external-style.css"/>
</head>
<body>
	<h1>외부 스타일 시트</h1>
	<div id="external">
		<p>외부 스타일 시트</p>
	</div>
</body>
</html>

STYLE.css

profile
으누
코딩 일기장
이전 포스트

eclipse HTML 활용03-2

다음 포스트

CSS 활용(2)

0개의 댓글