HTML5 & CSS3 배워보자 (12화 : 색상 및 배경 표현)
웹 디자인에서 가장 먼저 떠오르는 요소 중 하나는 색상입니다. 색상은 시각적 요소 중에서도 자주 변경되는 속성입니다. 웹에서 색상을 적용하는 방법에는 네 가지 대표적인 방식이 있습니다. 각 방법을 자세히 살펴보겠습니다.
- Hex 코드 : 가장 일반적인 방법으로, 16진수 코드를 사용하여 색상을 지정합니다. 예를 들어, #FFFFFF는 흰색을 의미합니다. 이 방식은 6자리 또는 3자리로 축약된 코드를 사용하여 색상을 정의합니다.
- RGB와 RGBA : RGB는 Red, Green, Blue 세 가지 색상의 조합으로 색상을 정의합니다. 예를 들어, rgb(255, 0, 0)은 빨간색을 나타냅니다. RGBA는 여기에 투명도(알파 채널)를 추가한 방식으로, rgba(255, 0, 0, 0.5)는 반투명한 빨간색을 의미합니다.
- HSL과 HSLA : HSL은 Hue, Saturation, Lightness로 색상을 정의하는 방식입니다. 예를 들어, hsl(0, 100%, 50%)는 순수한 빨간색을 나타냅니다. HSLA는 여기에 알파 채널을 추가한 방식으로, hsla(0, 100%, 50%, 0.5)는 반투명한 빨간색을 의미합니다.
- 색상 이름 : HTML과 CSS에서 미리 정의된 색상 이름을 사용하는 방법입니다. 예를 들어, red는 빨간색을 의미합니다. 이 방식은 기억하기 쉽지만, 지원되는 색상 이름의 수가 제한적입니다.
이 네 가지 방법을 활용하면 웹 디자인에서 다양한 색상을 효과적으로 적용할 수 있습니다. 각 방법은 상황에 따라 장단점이 있으므로 적절하게 선택하여 사용해야 합니다.
1. background-color 속성 - 배경 색 지정
background-color 속성은 웹 페이지 요소의 배경 색상을 지정하는 데 사용됩니다. 이 속성은 다양한 색상 지정 방법을 지원하여 디자이너가 원하는 스타일을 쉽게 적용할 수 있도록 합니다. 각 방법을 자세히 살펴보겠습니다.
<기본형>
background-color : <색상> ;
<예시>
/* RGB 사용 */
.div2 {
background-color: rgb(52, 152, 219);
}
/* RGBA 사용 */
.div3 {
background-color: rgba(52, 152, 219, 0.5);
}
/* HSL 사용 */
.div4 {
background-color: hsl(204, 70%, 53%);
}
/* HSLA 사용 */
.div5 {
background-color: hsla(204, 70%, 53%, 0.5);
}
/* 색상 이름 사용 */
.div6 {
background-color: blue;
}
2. background-clip 속성 - 배경 적용 범위 설정
background-clip 속성은 요소의 배경이 어디까지 확장되는지를 정의하는 CSS 속성입니다. 이 속성은 배경의 클리핑(clip) 경계를 설정하여 배경 색상, 이미지 또는 그라데이션이 요소의 내용(content), 패딩(padding), 테두리(border) 또는 전체 영역에 걸쳐 나타나도록 제어합니다. background-clip 속성의 주요 값들은 다음과 같습니다.
- border-box : 배경이 요소의 테두리(border)까지 확장됩니다. 기본값입니다.
- padding-box : 배경이 요소의 패딩(padding)까지 확장됩니다. 테두리 부분은 배경에 포함되지 않습니다.
- content-box : 배경이 요소의 내용(content) 영역까지만 확장됩니다. 패딩과 테두리 부분은 배경에 포함되지 않습니다.
- text : 배경이 요소의 텍스트 영역에만 적용됩니다. 이 값은 주로 텍스트에 그라데이션이나 이미지 배경을 적용할 때 사용됩니다.
<기본형>
background-clip : border-box | padding-box | content-box ;
<예시>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 100px;
border: 10px solid black;
padding: 20px;
background: #3498db; /* 밝은 파란색 배경 */
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
.text {
font-size: 24px;
color: white;
background: linear-gradient(to right, #ff7e5f, #feb47b); /* 그라데이션 배경 */
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="box border-box">border-box</div>
<div class="box padding-box">padding-box</div>
<div class="box content-box">content-box</div>
<div class="text">background-clip: text</div>
</body>
<예시화면>
3. background-image 속성 - 이미지 배경 넣기
background-image 속성은 웹 요소의 배경에 이미지를 설정하는 데 사용됩니다. 이 속성은 CSS에서 다양한 방식으로 이미지를 배경으로 적용할 수 있도록 합니다. background-image 속성은 단순한 이미지뿐만 아니라 그라데이션 등 다양한 형태로 사용할 수 있습니다. 다음은 background-image 속성의 주요 사용 방법과 예제입니다.
<기본형>
background-image : url(파일경로1) ;
<다중 배경이미지>
background-image : url(파일경로1), url(파일경로2) ;
<그라데이션 배경>
background-image: linear-gradient(to right, 색상1, 색상2); /* 선형 */
background-image: radial-gradient(circle, 색상1 , 색상2 ); /* 원형 */
background-image 속성의 주요 값들은 다음과 같습니다.
- background-size : 배경 이미지의 크기를 조정합니다.
- auto : 원래 배경 이미지의 크기로 표시
- contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소
- cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소
- <크기> : 너비와 높이를 지정. 한쪽 값만 넣을 경우 원본 비율로 확대/축소
- <백분율> : 백분율로 값을 지정.
- background-repeat : 배경 이미지의 반복 방식을 설정합니다.
- repeat : 브라우저 화면에 가득 찰 때까지 배경이미지를 가로와 세로로 반복
- repeat-x : 브라우저 창 너비와 같아 질때까지 배경이미지를 가로로 반복
- repeat-y : 브라우저 창 높이와 같아 질때까지 배경 이미지를 세로로 반복
- no-repeat : 배경 이미지를 한번만 표시
- background-position : 배경 이미지의 위치를 설정합니다.
- 키워드: left, right, top, bottom, center를 사용하여 배경 이미지의 위치를 지정
- 백분율(%): 배경 이미지의 위치를 요소의 크기를 기준으로 백분율로 지정
- 길이 단위(px, em, 등): 고정된 길이 단위를 사용하여 위치를 지정
<예시>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.example1 {
width: 300px;
height: 200px;
background-image: url('golfclub.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.example2 {
width: 300px;
height: 200px;
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}
.example3 {
width: 300px;
height: 200px;
background-image: url('golfclub.jpg'), linear-gradient(to right, #ff7e5f, #feb47b);
background-size: cover, contain;
background-repeat: no-repeat, repeat;
background-position: center, top left;
}
</style>
</head>
<body>
<div class="example1">배경 이미지</div>
<div class="example2">선형 그라데이션</div>
<div class="example3">다중 배경 이미지</div>
</body>
이상으로 색상 및 배경에 대해 알아봤습니다.
※ 다음화에서는 "CSS와 박스모델"에 대해서 알아보겠습니다!!
https://zzangdis.tistory.com/45
HTML5 & CSS3 배워보자 (13화 : 레이아웃을 위한 스타일)
1. 블록 레벨 요소와 인라인 레벨 요소HTML 요소는 블록 레벨 요소와 인라인 레벨 요소로 나뉩니다. 이들은 페이지 레이아웃과 콘텐츠 배치에 중요한 역할을 합니다.■ 블록 레벨 요소 (Block-level
zzangdis.com
'HTML5 & CSS3' 카테고리의 다른 글
| HTML5 & CSS3 배워보자 (14화 : Border 관련 속성) (0) | 2024.06.03 |
|---|---|
| HTML5 & CSS3 배워보자 (13화 : 레이아웃을 위한 스타일) (0) | 2024.06.01 |
| HTML5 & CSS3 배워보자 (11화 : 목록 스타일) (0) | 2024.05.19 |
| HTML5 & CSS3 배워보자 (10화 : 문단 스타일) (0) | 2024.05.14 |
| HTML5 & CSS3 배워보자 (9화 : 텍스트 스타일) (0) | 2024.05.10 |
댓글