Building value

CSS[선택자와 속성] 본문

CSS

CSS[선택자와 속성]

developer_Michael 2023. 3. 31. 18:40
반응형

CSS 선택자는 웹 페이지에서 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다. 

 

선택자는 요소의 태그 이름, 클래스, ID, 속성 등을 기반으로 선택됩니다.

가장 간단한 선택자는 태그 선택자입니다. 태그 이름을 기반으로 웹 페이지의 모든 해당 요소에 스타일을 적용합니다.

클래스 선택자는 요소에 대한 특정 클래스를 가진 HTML 요소에 스타일을 적용합니다. 

 

클래스 선택자는 마침표(.)와 클래스 이름으로 지정됩니다. 

ID 선택자는 특정 ID를 가진 요소에 스타일을 적용합니다. ID 선택자는 해시 기호(#)와 ID 이름으로 지정됩니다.

속성 선택자는 특정 HTML 속성을 가진 요소에 스타일을 적용합니다. 

 

대괄호([]) 내에 속성 이름과 속성 값이 지정됩니다.

 

선택자는 CSS에서 스타일을 적용할 HTML 요소를 선택하는 방법을 지정합니다.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		/* 요소 선택자 */
		p {
			color: red;
		}

		/* 클래스 선택자 */
		.my-class {
			font-weight: bold;
		}

		/* ID 선택자 */
		#my-id {
			font-style: italic;
		}

		/* 자식 선택자 */
		div p {
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<!-- 요소 선택자 -->
	<p>이것은 요소 선택자입니다.</p>

	<!-- 클래스 선택자 -->
	<p class="my-class">이것은 클래스 선택자입니다.</p>

	<!-- ID 선택자 -->
	<p id="my-id">이것은 ID 선택자입니다.</p>

	<!-- 자식 선택자 -->
	<div>
		<p>이것은 자식 선택자입니다.</p>
	</div>
</body>
</html>

위 코드에서는 다음과 같은 선택자를 사용하였습니다.

요소 선택자: HTML 요소 이름으로 선택 (예: p)
클래스 선택자: .으로 시작하며, HTML 요소의 class 속성 값으로 선택 (예: .my-class)
ID 선택자: #으로 시작하며, HTML 요소의 id 속성 값으로 선택 (예: #my-id)
자식 선택자: 부모요소 자식요소 형태로 선택 (예: div p)

 

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		/* color */
		h1 {
			color: blue;
		}

		/* font-size */
		p {
			font-size: 16px;
		}

		/* background-color */
		.my-class {
			background-color: yellow;
		}

		/* height */
		img {
			height: 200px;
		}

		/* margin */
		div {
			margin: 20px;
		}

		/* padding */
		div {
			padding: 10px;
		}

		/* border */
		div {
			border: 1px solid black;
		}

		/* display */
		span {
			display: inline-block;
		}
	</style>
</head>
<body>
	<h1>이것은 제목입니다.</h1>

	<p>이것은 본문입니다.</p>

	<p class="my-class">이것은 클래스 선택자를 사용한 요소입니다.</p>

	<img src="example.jpg" alt="예시 이미지">

	<div>이것은 여백과 테두리가 있는 요소입니다.</div>

	<span>이것은 inline-block으로 표시된 요소입니다.</span>
</body>
</html>

위 코드에서는 다음과 같은 속성을 사용하였습니다.

color: 글자 색상 지정 (예: color: blue;)
font-size: 글자 크기 지정 (예: font-size: 16px;)
background-color: 배경 색상 지정 (예: background-color: yellow;)
height: 요소의 높이 지정 (예: height: 200px;)
margin: 요소의 외부 여백 지정 (예: margin: 20px;)
padding: 요소의 내부 여백 지정 (예: padding: 10px;)
border: 요소의 테두리 지정 (예: border: 1px solid black;)
display: 요소의 표시 방법 지정 (예: display: inline-block;)

이처럼 선택자와 속성을 적절히 활용하여 웹 페이지를 디자인할 수 있습니다. 

 

또한 CSS의 다양한 기능을 익혀서 더욱 효과적인 스타일링을 할 수 있습니다.

반응형

'CSS' 카테고리의 다른 글

CSS[Float&Clear]  (0) 2023.04.03
CSS[색상]  (0) 2023.03.31
CSS[단위]  (0) 2023.03.31
CSS[박스 모델]  (0) 2023.03.31
CSS  (0) 2023.03.31
'CSS' Related Articles more