CSS 배경

티스토리 뷰

CSS

CSS 배경

dev23 2022. 2. 2. 22:32

배경 및 테두리

- CSS배경과 테두리로 할 수 있는 창의적인 작업을 살펴보자.

- 그라데이션(gradients? gradation?), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS의 많은

스타일 질문에 대한 답이다.

배경 색상

- background-color 속성은 CSS의 모든 요소에 대한 배경색을 정의한다. 이 속성은 유효한 <color>를 허용한다.

- background-color 는 요소의 내용 및패딩 박스 아래로 확장된다.

<head>
    <title>Background</title>
    <style>
        .box{
            background-color: #567895;
            width:400px;
            height: 100px;
            padding:5px;
        }

        h2{
            background-color: black;
            color: white;
        }

        span{
            background-color: rgba(255,255,255,.5);
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>배경 색</h2>
        <p><span>배경색</span>을 바꿔 보자.</p>
    </div>
</body>

배경 이미지

- background-image 속성을 사용하면 요소의 배경에 이미지를 표시할 수 있다.

- 기본적으로 큰 이미지는 박스에 맞게 축소되지 않으므로 작은 이미지만 표시되는 반면, 작은 이미지는

박스를 채우기 위해 바둑판 식으로 배열된다. 이 경우 실제 이미지는 단일 이미지다.

- 예)

<head>
    <title>BackgroundImage</title>
    <style>
        .a{
            background-image: url(./img/a.png);
            width: 300px;
            height: 150px;
            float: left;
        }

        .b{
            background-image: url(./img/b.png);
            width: 300px;
            height: 150px;
            float: left;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

- 배경 이미지 외에 배경색을 지정하면 이미지가 색상 위에 표시된다. background-color 속성을 추가해

확인해 본다.

배경 이미지 반복 제어

- background-repeat 속성은 이미지의 타일링 동작을 제어하는 데 사용된다. 사용 가능한 값은 다음과 같다.

-> no-repeat : 배경이 반복되지 않도록 한다.

-> repeat-x : 수평으로 반복한다.

-> repeat-y : 수직으로 반복한다.

-> repeat : 기본값, 양방향으로 반복한다.

.b{
    background-image: url(./img/b.png);
    background-repeat: no-repeat;
    width: 300px;
    height: 150px;
    float: left;
    margin-left: 20px;
}

배경 이미지 크기 조정

- 이미지가 배경 요소보다 크면 이미지가 크게 잘린다.

- 이 경우 길이나 백분율 값을 취할 수 있는 background-size 속성을 사용하여 이미지 크기를 배경 안에 맞출 수 있다.

- 키워드를 사용할 수도 있다.

-> cover : 브라우저는 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게

만든다. 이 경우 일부 이미지가 박스 외부에 있을 수 있다.

-> contain : 브라우저는 이미지를 박스 안에 들어가기에 적합한 크기로 만든다. 이 경우 이미지의 종횡비가 박스의

종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있다.

=> 이미지의 크기를 조정할 수 있다.

배경 이미지 배치

- background-position 속성을 사용하면 적용되는 박스에서 배경 이미지가 나타나는 위치를 선택할 수 있다.

- 박스의 왼쪽 상단 모서리가 (0, 0)이고, 박스가 가로(x) 및 세로(y) 축을 따라 위치하는 좌표계를 사용한다.

- background-position의 기본 값은 (0, 0)이다.

- 가장 일반적인 background-position 값은 수평 값과 수직 값의 두 가지 개별 값은 갖는다.

- top 및 right 와 같은 키워드를 사용할 수 있다.

.b{
    background-image: url(./img/b.png);
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
    float: left;
    margin-left: 20px;
    background-size: 50px 20px;
    background-position: center center;
    border: 1px solid black;
}

background-position: center center; -> 별이 움직인다!

- 글꼴에 사용되는 유닛과 백분율도 사용할 수 있다.

.b{
    background-image: url(./img/b.png);
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
    margin-left: 20px;
    background-size: 50px 20px;
    background-position: 20px 10%;
    border: 1px solid black;
}

- 박스의 특정 모서리로부터의 거리를 나타내기 위해 4 값 구문을 사용할 수도 있다.

- background-position: top 20px right 10px; 과 같이 작성하는 경우

-> top에서 20px 만큼 이동. 즉, 위에서 20px 떨어짐.

-> right에서 10px 만큼 이동. 즉, 오른쪽에서 10px 떨어짐.

- 예)

<style>
.b{
    background-image: url(./img/b.png);
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
    margin-left: 20px;
    background-size: 50px 20px;
    background-position: top 20px right 10px;
    border: 1px solid black;
}
</style>

그라데이션(Gradient) 배경

- 배경에 사용될 때 그라데이션은 이미지처럼 작동하며 background-image 속성을 사용하여 설정된다.

- gradient 페이지에서 다양한 작업 방법을 확인할 수 있다.

<gradient> - CSS: Cascading Style Sheets | MDN

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

developer.mozilla.org

- 예)

<style>
.c{
    background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
    width: 200px;
    height: 150px;
}
</style>

여러 배경 이미지

- 여러 개의 배경 이미지를 가질 수도 있다.

- 하나의 속성 값으로 여러 개의 background-image 값을 지정하고, 각 이미지를 쉼표로 구분한다.

- 이렇게 하면 배경 이미지가 서로 겹칠수 있으며, 배경은 stack 맨 아래에 마지막으로 나열된 배경 이미지와 함께

쌓이고, 코드에서 그 뒤에 오는 이미지 위에 각각의 이전 이미지가 쌓인다.

- 그라디언트는 일반 배경 이미지와 혼합될 수 있다.

.b{
    background-image: url(./img/d.png), url(./img/b.png);
    width: 300px;
    height: 150px;
    background-repeat: no-repeat;
    /* background-size: 50px 20px; */
    background-position: top 20px right 10px;
    border: 1px solid black;
}

참고/출처 : https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

배경 및 테두리 - Web 개발 학습하기 | MDN

이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문

developer.mozilla.org

저작자표시

'CSS' 카테고리의 다른 글

CSS 배치 (0)	2022.02.03
글꼴, 문자 (0)	2022.02.02
CSS 박스 모델 (0)	2022.02.02
CSS 속성 (0)	2022.02.02
선택자 우선순위 (0)	2022.02.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

개발 공부

티스토리 뷰

CSS 배경

배경 및 테두리

배경 색상

배경 이미지

배경 이미지 반복 제어

배경 이미지 크기 조정

배경 이미지 배치

그라데이션(Gradient) 배경

여러 배경 이미지

'CSS' 카테고리의 다른 글

티스토리툴바