반응형
CSS 속성(Property)은 HTML 요소의 스타일을 정의하는 데 사용됩니다. 각 속성은 특정 스타일을 적용하며, 값(Value)은 그 속성에 대한 구체적인 스타일을 지정합니다. 속성과 값은 함께 사용되어 HTML 요소의 시각적 표현을 제어하게 됩니다.
1. 속성(Property)과 값(Value)의 기본 구조
CSS에서 속성과 값은 쌍으로 사용되며, 속성 뒤에 **콜론(:)**을 붙이고 그 뒤에 값을 지정합니다. 마지막에는 **세미콜론(;)**으로 선언을 종료합니다. 하나의 요소에 여러 스타일을 적용할 경우 각 속성 선언을 세미콜론으로 구분합니다.
예시
p {
color: blue;
font-size: 16px;
}위 예시는 모든 <p> 태그의 글자 색을 파란색으로 설정하고, 글자 크기를 16px로 지정하는 코드입니다.
2. 글자 관련 속성
글자 관련 속성은 텍스트의 스타일을 정의할 때 사용됩니다. 자주 사용되는 속성으로는 color, font-size, font-weight 등이 있습니다.
- color: 텍스트의 색상을 지정합니다.
p {
color: red;
}- font-size: 글자 크기를 지정합니다. 값으로 px, em, rem 등을 사용할 수 있습니다.
p {
font-size: 20px;
}- font-weight: 글자의 굵기를 설정합니다. bold, normal, 숫자값(100~900) 등이 사용됩니다.
h1 {
font-weight: bold;
}3. 배경 관련 속성
배경 관련 속성은 요소의 배경을 설정하는 데 사용됩니다. 주요 속성으로는 background-color, background-image 등이 있습니다.
- background-color: 요소의 배경색을 지정합니다.
div {
background-color: #f0f0f0;
}- background-image: 요소에 배경 이미지를 설정합니다.
div {
background-image: url('image.jpg');
}4. 박스 모델 속성
CSS 박스 모델(Box Model)은 HTML 요소를 감싸는 네 가지 영역을 정의하는 데 사용됩니다: margin, border, padding, width/height. 각 속성은 요소의 크기와 간격을 제어하는 데 중요한 역할을 합니다.
- margin: 요소 외부의 여백을 설정합니다.
div {
margin: 20px;
}- padding: 요소 내부의 여백을 설정합니다.
div {
padding: 10px;
}- border: 요소의 테두리를 설정합니다. border-width, border-style, border-color를 함께 사용합니다.
div {
border: 2px solid black;
}- width 및 height: 요소의 너비와 높이를 지정합니다.
div {
width: 100px;
height: 200px;
}5. 배치와 정렬 속성
배치 및 정렬 속성은 요소를 페이지 내에서 어떻게 배치할지 설정합니다. 자주 사용되는 속성으로는 text-align, position, display 등이 있습니다.
- text-align: 텍스트를 정렬합니다. left, center, **right**를 값으로 사용합니다.
p {
text-align: center;
}- position: 요소의 배치 방식을 정의합니다. static, relative, absolute, fixed 값이 자주 사용됩니다.
div {
position: relative;
top: 20px;
left: 10px;
}- display: 요소가 화면에 어떻게 나타날지를 정의합니다. block, inline, inline-block, none 등의 값이 사용됩니다.
span {
display: block;
}예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 속성 이해하기</title>
<style>
/* 텍스트 스타일 */
p {
color: green;
font-size: 18px;
font-weight: bold;
}
/* 박스 모델 스타일 */
div {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px;
padding: 10px;
border: 2px solid blue;
}
/* 텍스트 정렬 */
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>CSS 속성과 값</h1>
<p>이 문장은 녹색이며 굵게 표시됩니다.</p>
<div>박스 모델 속성이 적용된 div 요소입니다.</div>
</body>
</html>참고 사이트
반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS] 8. Flexbox (0) | 2024.09.18 |
|---|---|
| [CSS] 7. float와 clear (0) | 2024.09.17 |
| [CSS] 6. 박스 모델 (Margin, Padding, Border, Content) (2) | 2024.09.16 |
| [CSS] 5. 우선순위와 상속 (0) | 2024.09.15 |
| [CSS] 3. 선택자(selector) (0) | 2024.09.13 |
| [CSS] 2. 문법과 규칙 (0) | 2024.09.13 |
| [CSS] 1. CSS 소개 (0) | 2024.09.13 |
| #6 HTML 태그 (0) | 2024.08.25 |