초보자도 쉽게 따라 하는 HTML 배경색 학습 안내.
웹 페이지의 시각적 매력을 높이는 색상 지정 기법과 활용 팁을 확인하세요.
HTML에서 요소의 배경색을 지정하는 방법은 크게 세 가지가 있습니다.
1. 배경색 인라인 스타일 (Inline Style)
가장 직접적인 방법으로, HTML 태그 안에 style 속성을 사용하여 CSS 속성을
직접 작성합니다. 위에 제공해주신 코드 스니펫이 바로 이 인라인 스타일의 예시입니다.
예시:
<div style="background-color: #e0f3ff;">
이 div 요소는 하늘색 배경을 가집니다.
</div>
- 장점: 특정 요소에만 스타일을 적용할 때 편리합니다.
- 단점: 코드가 길어지고, 여러 요소에 동일한 스타일을 적용할 경우 비효율적이며 유지보수가 어렵습니다.
2. 배경색 내부 스타일 시트 (Internal Style Sheet)
HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 CSS 규칙을 정의합니다.
예시:
<!DOCTYPE html>
<html>
<head>
<title>내부 스타일 시트 예시</title>
<style>
div {
background-color: #e0f3ff; /* 모든 div 요소에 적용 */
border: 1px solid #90c7ff;
padding: 16px;
border-radius: 8px;
margin: 20px 0;
}
.highlight {
background-color: #ffe0e0; /* highlight 클래스를 가진 요소에 적용 */
}
</style>
</head>
<body>
<div>
이 div는 내부 스타일 시트의 영향을 받습니다.
</div>
<p class="highlight">
이 문단은 다른 배경색을 가집니다.
</p>
</body>
</html>
- 장점: 한 페이지 내의 여러 요소에 스타일을 일관되게 적용할 수 있습니다.
- 단점: 여러 HTML 페이지에 걸쳐 동일한 스타일을 적용하기 어렵습니다.
3. 배경색 외부 스타일 시트 (External Style Sheet)
가장 권장되는 방법으로, 별도의 .css 파일을 생성하여 HTML 문서와 연결합니다.
예시:
styles.css 파일:
.mobile-address-box {
background-color: #e0f3ff;
border: 1px solid #90c7ff;
padding: 16px;
border-radius: 8px;
margin: 20px 0;
}
.mobile-address-box p {
margin-top: 8px;
line-height: 1.6;
color: #333;
}
index.html 파일:
<!DOCTYPE html>
<html>
<head>
<title>외부 스타일 시트 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="mobile-address-box">
<b>📵 모바일 주소</b>
<p data-ke-size="size16">모바일 웹 전용 주소</p>
</div>
</body>
</html>
- 장점: 웹사이트 전체에 일관된 스타일을 적용하기 용이하며, 유지보수 및 재사용성이 뛰어납니다. HTML과 CSS 코드가 분리되어 있어 가독성도 좋습니다.
- 단점: 작은 웹사이트에서는 별도의 파일을 만드는 것이 번거롭게 느껴질 수 있습니다.
배경색상 지정 방식
background-color 속성은 다양한 방식으로 색상을 지정할 수 있습니다.
1. 16진수 코드 (Hexadecimal Code)
#RRGGBB 형식으로, 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색상 값을 00부터 FF까지의 16진수로 표현합니다.
예시:
- #e0f3ff: 밝은 하늘색 (귀하의 코드에 사용된 색상)
- #FF0000: 빨강
- #00FF00: 초록
- #0000FF: 파랑
- #FFFFFF: 흰색
- #000000: 검정
2. RGB 값 (Red, Green, Blue)
rgb(R, G, B) 형식으로, 각 색상 값을 0부터 255까지의 정수로 표현합니다.
예시:
- rgb(224, 243, 255): 위 #e0f3ff와 동일한 밝은 하늘색
- rgb(255, 0, 0): 빨강
3. RGBA 값 (Red, Green, Blue, Alpha)
rgba(R, G, B, A) 형식으로, RGB 값에 투명도(Alpha)를 0(완전 투명)부터 1(완전 불투명)까지의 소수점으로 추가합니다.
예시:
- rgba(224, 243, 255, 0.7): 70% 투명도의 밝은 하늘색
4. HSL 값 (Hue, Saturation, Lightness)
hsl(H, S, L) 형식으로, 색상(Hue), 채도(Saturation), 명도(Lightness)를 사용하여 색상을 표현합니다.
예시:
- hsl(200, 100%, 94%): 밝은 하늘색 계열
5. HSL(A) 값 (Hue, Saturation, Lightness, Alpha)
hsla(H, S, L, A) 형식으로, HSL 값에 투명도(Alpha)를 추가합니다.
예시:
- hsla(200, 100%, 94%, 0.5): 50% 투명도의 밝은 하늘색 계열
6. 색상 이름 (Color Names)
미리 정의된 색상 이름을 사용할 수 있습니다.
예시:
- red, blue, green, white, black, lightblue 등
제공해주신 코드 스니펫은 인라인 스타일과 16진수 코드를 사용하여
div 요소의 배경색을 밝은 하늘색으로 지정한 좋은 예시입니다.
HTML과 CSS를 분리하여 외부 스타일 시트를 사용하는 것이
일반적으로 가장 효율적이고 유지보수가 편리한 방법임을 기억하시면 좋습니다.
