CSS 속성 및 스타일링 기초
CSS(Cascading Style Sheets)는 HTML 요소의 스타일과 레이아웃을 정의하는 데 사용됩니다. 이번 글에서는 CSS의 기본 속성과 스타일링 방법에 대해 알아보겠습니다.
1. 배경색 설정
CSS를 사용하여 HTML 요소의 배경색을 설정할 수 있습니다. background-color 속성을 사용하면 됩니다.
예제:
<div style="background-color: #666666">배경색이 회색인 div</div>위 코드에서는 배경색이 회색(#666666)인 <div> 요소가 생성됩니다.
2. 글자색 설정
HTML 요소의 글자색을 설정하려면 color 속성을 사용합니다.
예제:
<h1 style="color: #666666">글자색이 회색인 제목</h1>위 코드에서는 글자색이 회색(#666666)인 <h1> 요소가 생성됩니다.
3. a 태그 상속 문제
기본적으로 <a> 태그는 부모 요소의 color 값을 상속받지 않습니다. 이를 해결하려면 color: inherit을 사용합니다.
예제:
<a href="#" style="color: inherit">상속된 색상을 가진 링크</a>위 코드에서는 링크가 부모 요소의 색상을 상속받아 표시됩니다.
4. 글꼴 설정
HTML 요소의 글꼴을 설정하려면 font-family 속성을 사용합니다.
예제:
body {
font-family: Arial, sans-serif;
}위 코드에서는 웹 페이지 전체에 Arial 글꼴이 적용됩니다.
5. 글자 크기 설정
font-size 속성은 텍스트의 크기를 설정합니다.
예제:
p {
font-size: 16px;
}위 코드에서는 모든 <p> 요소의 텍스트 크기가 16픽셀로 설정됩니다.
6. 글자 두께 설정
font-weight 속성은 텍스트의 두께를 설정합니다.
예제:
h1 {
font-weight: bold;
}위 코드에서는 모든 <h1> 요소의 텍스트가 굵게 표시됩니다.
7. 텍스트 정렬
text-align 속성은 텍스트를 정렬합니다.
예제:
h1 {
text-align: center;
}위 코드에서는 모든 <h1> 요소의 텍스트가 가운데로 정렬됩니다.
8. 요소 크기 설정
width와 height 속성은 요소의 너비와 높이를 설정합니다.
예제:
div {
width: 300px;
height: 200px;
}위 코드에서는 모든 <div> 요소의 너비가 300픽셀, 높이가 200픽셀로 설정됩니다.
9. 내부 여백 설정
padding 속성은 요소의 내부 여백을 설정합니다.
예제:
div {
padding: 20px;
}위 코드에서는 모든 <div> 요소의 내부 여백이 20픽셀로 설정됩니다.
10. 외부 여백 설정
margin 속성은 요소의 외부 여백을 설정합니다. 가로 방향 가운데 정렬을 위해 margin: 0 auto를 사용할 수 있습니다.
예제:
div {
margin: 0 auto;
}위 코드에서는 모든 <div> 요소가 가로 방향으로 가운데 정렬됩니다.
결론
CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 강력한 도구입니다. 배경색과 글자색 설정, a 태그의 색상 상속, 글꼴과 글자 크기, 두께, 정렬, 요소 크기, 내부 여백과 외부 여백 설정 등 기본적인 CSS 속성을 이해하고 활용하면, 더 나은 웹 페이지를 만들 수 있습니다. 이러한 기본 속성들을 잘 활용하여 웹 페이지의 시각적 효과와 사용자 경험을 향상시켜 보세요.
