web/html css

[css] 배경과 색상

xudegloss 2023. 3. 10. 00:30

1. 배경

background-color 배경색을 지정한다.
background-image 배경에 이미지 넣어주기.
linear-gradient(방향, 시작 색상, 종료 색상)
background-position 배경 이미지의 위치 조정하기.
background-repeat 배경 이지미의 반복 여부와 방향 지정하기.
background-size 배경 크기 지정하기.
background-attachment 배경 이미지의 스크롤 여부 지정하기.
background
단축 속성		 순서에 유의해야 한다.
object-fit 대체 요소의 규격 맞추기.
object-position 대체 요소의 위치 맞추기. (콘텐츠 정렬하기.)

 

background-image와 linear-gradient를 이용하여 배경 색상을 지정할 수 있다. 

 

background-position을 이용하여 개구리의 위치를 조정할 수 있다.

 

이 그림은 background-repeat을 이용하여 x축 기준 반복하거나 y축 기준 반복을 설정하였다.

  • repeat-x : x축 방향으로 반복한다. 이 때 y 길이는 영향을 받지 않는다.
  • repear-y : y축 방향으로 반복한다. 이 때 x 길이는 영향을 받지 않는다.

background-size를 이용하여 개구리의 사이즈를 조절할 수 있다.

  • cover : 빈틈없이 꽉 채우는 것이 목표이다.
  • contain : 빈틈없이 꽉 채우는 것이 목적이 아니라, 그림은 모두 보여주는 것이 목표이다.

background-attachment를 이용하여 스크롤 여부를 조정할 수 있다.

  • scroll : 왼쪽이 기본값이다. 그 화면 내에서 배경이 고정됨을 알 수 있다.
  • fixed : 중간이고, 전체 화면 내에서 배경이 고정됨을 알 수 있다.
  • local : 오른쪽이고, 스크롤을 내릴 때 배경이 고정되지 않고 같이 내려간다.

background-attachment를 사용하기 전에, 너비와 높이 길이를 조정하고, overflow를 auto로 지정하여 스크롤이 보이도록 만들어야 한다.

object-fit을 이용하여 콘텐츠 사이즈를 지정한 것이다. 왼쪽은 기본값인 fill, 가운데는 cover, 오른쪽은 contain이다. 그리고 object-position을 이용하여 오른쪽 그림의 위치를 변경하였다. 차례대로 왼쪽 기준, 위쪽 기준으로 정렬하는 것이다.

2. html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Background Color</title>
    <link rel="stylesheet" href="./background__color.css" />
  </head>
  <body>
    <div class="container">
      <p class="background__image">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p class="linear__grad">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <div class="background__position">
        <div class="box pos__top">Box 1</div>
        <div class="box pos__center">Box 2</div>
        <div class="box pos__bottom">Box3</div>
        <div class="box pos__left">Box 4</div>
        <div class="box pos__right">Box 5</div>
      </div>
      <p class="repeat">
        <div class="repeat__x"></div>
        <div class="repeat__y"></div>
      </p>
      <div class="background__size">
        <div class="cover">Cover : Fill Up</div>
        <div class="contain">Contain : 100% Picture</div>
      </div>
      <div class="background__attachment">
        <p class="scroll"> 
            There were doors all round the hall, but they were all locked; and when Alice
            had been all the way down one side and up the other, trying every door, she
            walked sadly down the middle, wondering how she was ever to get out again.
            Suddenly she came upon a little three-legged table, all made of solid glass;
            there was nothing on it except a tiny golden key, and Alice's first thought
            was that it might belong to one of the doors of the hall; but, alas! either
            the locks were too large, or the key was too small, but at any rate it would
            not open any of them. However, on the second time round, she came upon a low
            curtain she had not noticed before, and behind it was a little door about
            fifteen inches high: she tried the little golden key in the lock, and to her
            great delight it fitted!
        </p>
        <p class="fixed"> 
            There were doors all round the hall, but they were all locked; and when Alice
            had been all the way down one side and up the other, trying every door, she
            walked sadly down the middle, wondering how she was ever to get out again.
            Suddenly she came upon a little three-legged table, all made of solid glass;
            there was nothing on it except a tiny golden key, and Alice's first thought
            was that it might belong to one of the doors of the hall; but, alas! either
            the locks were too large, or the key was too small, but at any rate it would
            not open any of them. However, on the second time round, she came upon a low
            curtain she had not noticed before, and behind it was a little door about
            fifteen inches high: she tried the little golden key in the lock, and to her
            great delight it fitted!
        </p>
        <p class="local"> 
            There were doors all round the hall, but they were all locked; and when Alice
            had been all the way down one side and up the other, trying every door, she
            walked sadly down the middle, wondering how she was ever to get out again.
            Suddenly she came upon a little three-legged table, all made of solid glass;
            there was nothing on it except a tiny golden key, and Alice's first thought
            was that it might belong to one of the doors of the hall; but, alas! either
            the locks were too large, or the key was too small, but at any rate it would
            not open any of them. However, on the second time round, she came upon a low
            curtain she had not noticed before, and behind it was a little door about
            fifteen inches high: she tried the little golden key in the lock, and to her
            great delight it fitted!
        </p>
      </div>
      <div class="object__fit">
        <img src="./apple.jpg" alt="apple" class="object__fill">
        <img src="./apple.jpg" alt="apple" class="object__cover">
        <img src="./apple.jpg" alt="apple" class="object__contain">
      </div>
    </div>
  </body>
</html>

3. css 코드

@import url("https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Tilt Warp", cursive;
}

.background__image {
  background-image: url("./apple.jpg");
  font-size: 20px;
  color: #eeeeee;
  margin-bottom: 50px;
  padding: 20px;
}

.linear__grad {
  background-image: linear-gradient(to left top, lime, yellow);
  /* 왼쪽 위로 갈수록 라임색에서 노랑색으로 변경된다. */
  margin-bottom: 50px;
  padding: 20px;
}

.background__position {
  margin-bottom: 50px;
}

.box {
  background-color: #ffee99;
  border: 1px solid #c4c4c4;
  padding: 20px;
  background-image: url("./flog.png");
  background-size: 80px;
  /* background-image의 사이즈 조정 가능하다. */
  width: 100%;
  height: 150px;
  background-repeat: no-repeat;
}

.pos__top {
  background-position: top;
}

.pos__center {
  background-position: center;
}

.pos__bottom {
  background-position: bottom;
}

.pos__left {
  background-position: left;
}

.pos__right {
  background-position: right;
}

/* y축을 고려하지 않는다. */
.repeat__x {
  background-image: url("./apple.jpg");
  width: 550px;
  height: 550px;
  background-repeat: repeat-x;
}

/* x축을 고려하지 않는다. */
.repeat__y {
  background-image: url("./apple.jpg");
  width: 100%;
  height: 250px;
  background-repeat: repeat-y;
  margin-bottom: 50px;
}

.background__size {
  background-image: linear-gradient(to right bottom, yellow, tomato);
  width: 100%;
  height: 300px;
}

.background__size {
  background-image: linear-gradient(to right top, yellowgreen, pink);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 50px;
}

.background__size div {
  background-image: url("./flog.png");
  background-repeat: no-repeat;
  padding: 20px;
}

.cover {
  background-size: cover;
}

.contain {
  background-size: contain;
}

.background__attachment {
  display: flex;
  flex-direction: row;
  margin-bottom: 50px;
}

.background__attachment p {
  background-image: url("./flower.jpg");
  height: 500px;
  width: 200px;
  overflow: auto;
  /* 스크롤 내릴 수 있게 만들어 준다. */
}

.scroll {
  background-attachment: scroll;
}

.fixed {
  background-attachment: fixed;
}

.local {
  background-attachment: local;
}

.object__fit {
  display: flex;
  flex-direction: row;
}

/* 기본값 */
.object__fill {
  width: 300px;
  height: 300px;
  object-fit: fill;
  border: 3px solid black;
}

.object__cover {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border: 3px solid black;
}

.object__contain {
  width: 300px;
  height: 300px;
  object-fit: contain;
  border: 3px solid black;
  object-position: 5px 20px;
  /* 왼쪽, 위쪽 기준 */
}

4. 색상

  • 색상 이름 : 26개의 색상, 웹 안전 색상이라고 불린다. 어디든지 그려질 수 있는 색상이다.
  • 헥스 색상 코드 : # 뒤에 6자리 숫자를 의미한다.
  • rgb() : red, green, blue : 0 ~ 255 사이의 숫자
  • rgba() : red, green, blue + 투명도 (0 ~ 1 사이의 숫자) : 0 ~ 255 사이의 숫자

opacity를 지정하면 투명도를 넣을 수 있다. 0 ~ 1 사이의 숫자이다.

저작자표시

'web > html css' 카테고리의 다른 글

[css] html 요소에 애니메이션 주기  (0) 2023.03.19
[css] position  (0) 2023.03.19
[css] 캐스케이딩  (0) 2023.03.09
[css] 단위  (0) 2023.03.09
[css] 폰트 속성  (0) 2023.03.09

'web/html css'의 다른글

  • 현재글[css] 배경과 색상

관련글

티스토리툴바