Notice
Recent Comments
Recent Posts
«   2025/02   »
일 월 화 수 목 금 토
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
Today
Total
관리 메뉴

기록 ＞ 기억

[CSS] 작성법 및 선택자 본문

IT국비지원

[CSS] 작성법 및 선택자

BY SON 2021. 8. 30. 16:08

CSS 작성법

 

● CSS 작성법 :  선택자 { 스타일 } 

/* 선택자 { 속성 : 속성값; } */
p { text-align: center;}

/* 속성과 속성값은 ';'으로 구분 */
p { 
	color: blue; 
	font-size: 10px;
}

 

● CSS 작성 위치

① 태그에 직접 작성 (style 속성) - 인라인 스타일

<!-- 태그의 style 속성을 통해 CSS 적용 -->
<p style="color: red;">
	HELLO CSS3
</p>

 

② 파일 내부에서 작성 (style 태그) - 내부 스타일시트

<!-- <head> 태그 안에 <style> 태그 작성 -->
<head>
	<style>
		p {
			color: blue;
			background-color: orange;
		}
	</style>
</head>

 

③ 외부 파일에서 작성 (외부 css 파일) - 외부 스타일시트

  • 중복코드를 최소화 함
  • HTML 태그와 분리시켜 이해하기 쉬움 
  • 디자인의 일관성을 유지하기 쉬움
@charset "UTF-8";

div {
	width: 500px;
	color: red;
}

/* /css/test.css */
<head>
	<link rel="stylesheet" href="../css/test.css">
</head>
<body>
	<div>Hello</div>
</body>

<!-- /html/test.html -->

 

주요 선택자

 

● 전체 선택자 :  * { 스타일 } 

<head>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	...
</body>

 

● 태그 선택자 :  태그 { 스타일 } 

<head>
	<style>
		div {
			background-color: gray;
		}
	</style>
</head>
<body>
	<div>안녕하세요</div>
</body>

 

● 클래스 선택자 :  .클래스명 { 스타일 } 

<head>
	<style>
		/* <h2> 태그 중에서 클래스 속성값이 accent인 애들 */
		h2.accent {
			background-color: black;
			color: white;
			padding: 5px;
		}
	</style>
</head>
<body>
	<h2 class="accent">안녕하세요</h2>	<!-- CSS 적용 -->
	<h2>반갑습니다</h2>			<!-- CSS 적용안됨 -->
</body>

 

● 아이디 선택자 :  #아이디명 { 스타일 } 

<head>
	<style>
		#container {
			width: 500px;
			padding: 15px;
			border: 1px solid gray;
		}
	</style>
</head>
<body>
	<div id="container">
		...
	</div>
</body>

 

● 그룹 선택자 :  선택자, 선택자, ...  (콤마로 구분)

<head>
	<style>
		h1, h2 {
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>안녕하세요</h1>
	<h2>반갑습니다</h2>
</body>

 

다양한 선택자

 

● 하위 선택자 →  상위요소 하위요소 

● 자식 선택자 →  부모요소>자식요소 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selector</title>
<style type="text/css">
	.parent {
		width: 300px;
	}
	.parent ul {
		border : 1px solid darkblue;	/* 자식 ul, 손자 ul 모두 적용 */
	}
	.parent>ul {
		border : 1px solid red;		/* 자식 ul 에만 적용 */
	}
</style>
</head>
<body>
<div class="parent">
	<ul>					<!-- 자식 ul -->
		<li>한식
			<ul>			<!-- 손자 ul -->
				<li>김치찌개</li>
				<li>된장찌개</li>
			</ul>
		</li>
		<li>중식
			<ul>			<!-- 손자 ul -->
				<li>짜장면</li>
				<li>짬뽕</li>
			</ul>
		</li>
	</ul>
</div>	
</body>
</html>

● 인접 형제 선택자 →  요소1 + 요소2 

● 형제 선택자 →  요소1 ~ 요소1 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>selector</title>
<style type="text/css">
	.parent {
		width: 300px;
	}
	.parent h3+div {
		color: red;	/* h3 다음에 오는 형제 div 요소 중 가장 가까운 div 요소에만 적용 */
	}
	.parent h3~div {
		color: blue;	/* h3 다음에 오는 형제 div 요소 모두 적용 */
	}
</style>
</head>
<body>
<div class="parent">
	<h3>첫째</h3>
	<div>둘째</div>	
	<div>셋째</div>	
</div>	
</body>
</html>

 

가상 클래스와 가상 요소

 

● 가상 클래스 (콜론 한개를 붙여 표시)

가상 클래스 선택자 설 명
:link  방문하지 않은 링크
:visited  방문한 링크
:hover  요소에 마우스 커서를 올렸을 때
:active  요소를 누르고 있을 때
:focus  요소에 포커스가 갔을 때
:enabled / :disabled  요소를 사용할 수 있을 때 / 없을 때
:checked  라디오 박스나 체크 박스 항목을 선택 했을 때
 :nth-child(n)  / :nth-last-child(n)  같은 레벨의 요소들 중 특정 요소 (앞에서부터 / 뒤에서부터)
:first-child / last-child  첫번째 요소, 마지막 요소
:target  앵커 목적지
:not(요소)  괄호안의 요소를 제외하고 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>virtual selector</title>
<style type="text/css">
	nav li {
		width: 100px; 
		height: 30px;
		line-height: 30px;
		list-style: none;
		text-align: center;
	}
	/* 홀수 번째 요소 → nav li:nth-child(odd) */ 
	nav li:nth-child(2n+1) {
		background-color: teal;
	}
	/* 짝수 번째 요소 → nav li:nth-child(even) */
	nav li:nth-child(2n) {
		background-color: orange;
 	}
</style>
</head>
<body>
	<nav>
		<ul>
			<li>MENU A</li>	<!-- 청록색 -->
			<li>MENU B</li>	<!-- 주황색 -->
			<li>MENU C</li>	<!-- 청록색 -->
			<li>MENU D</li>	<!-- 주황색 -->
		</ul>
	</nav>
</body>
</html>

 

● 가상 요소 (콜론 두개를 붙여 표시)

가상 요소 설 명
::first-line / ::first-letter  첫번째 줄 / 첫번째 글자
 ::before  /  ::after   내용의 앞 / 뒤 에 콘텐츠 추가 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>before, after</title>
<style type="text/css">	
	ul .new::after {
		content: "new";
		font-size: x-small;
		background-color: orange;
		border-radius: 1px;
		padding: 2px;		
		margin-left: 5px;
	}
</style>
</head>
<body>
	<ul>
		<li class="new">HTML</li>	<!-- 요소 뒤에 'new' 텍스트 추가 -->
		<li class="new">CSS</li>	<!-- 요소 뒤에 'new' 텍스트 추가 -->
		<li>JAVA</li>
		<li>SPRING</li>
	</ul>
</body>
</html>

 

저작자표시 비영리

'IT국비지원' 카테고리의 다른 글

[CSS] position 속성 / z-index 속성  (0) 2021.09.02
[CSS] display 속성 (block / inline / inline-block)  (0) 2021.09.01
[CSS] float 속성  (0) 2021.08.31
[HTML] <select> 태그 (드롭다운 목록)  (0) 2021.08.27
[HTML] <form> 태그, <input> 태그  (0) 2021.08.26
[HTML] <a> 태그, <map> 태그  (0) 2021.08.25
[HTML] 텍스트 관련 태그  (0) 2021.08.23
'IT국비지원' Related Articles more
Comments