[CSS] Chapter 12. 배경 꾸미기

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="bg.css">
        <title></title>
    </head>
    <body>
        <div id="wrap">
        </div>
        <div id="wrap2">
        </div>
    </body>
</html>

*{}
#wrap{
    width:600px;
    height: 600px;
    padding: 10px;
    border: 10px dotted black;
    margin: 0 auto;
    background-image: url("p2.jpg");
      /*반복 여부는 기본 값이 모두 반복이다.
      no-repeat: 반복 안함
      repeat-x: 가로로만 반복
      repeat-y: 세로로만 반복
      repeat: 가로세로 꽉차게 반복
      */
    background-repeat: repeat;
    background-position: center top;
      /*
      background-position: 가로 세로;
      배경 위치 지정은 키워드로 가능하다. 
      가로: left right center;
      세로: top bottom center;
      */
    
    /*background-origin: content-box;*/
}
#wrap2{
    width:600px;
    height: 600px;
    padding: 20px;
    border: 10px dotted black;
    margin: 0 auto;
    background-image:url("p1.png");
    background-origin: content-box;
}

body{
    padding: 20px;
    background-color: antiquewhite;
    background-clip: padding-box;
}

1. 배경 색상: background-color: ;

html은 다양한 영역을 기준으로 다수의 배경 색상을 지정할 수 있다.

배경색상은 border까지의 영역에 개발자가 지정한 색상이 입힌다.

배경색을 지정하는 기본 형태는 CSS 안에 background-color: 색상지정; 이다.

개발 과정에서 사용자가 원하는 영역이나 디자인이 있다면 이를 수용하고 적용할 수 있어야 한다.

때문에 배경 색상의 영역을 세부적으로 지정하는 것은 웹 개발자의 기본적인 소양이다.

2. 백그라운드 보이는 영역 지정: background-clip: ;

background-clip은 background의 영역을 지정하는 명령어로 BOX 모델을 기준으로 하여 보이는 영역을 지정할 수 있다.

기본값은 border-box; 이지만 지정하고자하는 범위를 설정하면 padding 이나 content 로 다양하게 범위를 설정할 수 있다.

보이는 영역을 지정한다는 것은 image가 침범하는 영역을 화면에 구현하지 않는다는 것이다.

이는 배경에 삽입한 이미지가 잘려서 임의 수정된다는 것이다.

다만 해당 영역 지정의 로직은 body에 직접 삽입하는 image 적용시에 명확하게 해당 BOX 모델 위치에만 구현하기 어렵다. 왜냐하면 body 영역에서 규정된 백그라운드 컬러와 이미지는 margin, padding에 관계없이 화면 전체에 적용되기 때문이다.

이를 background-clip으로 조정을 시도하여도 실제 데이터가 적용되는 범위는 항상 웹페이지 내용 전체로 적용된다. 때문에 div로 내용을 구분하여 배경을 지정하여야 하며, body에 적용하고 싶은 경우, 해당 페이지의 기본 바탕색 정도만 지정하는 것이 바람직하다.

3. 백그라운드에 배경 이미지 삽입: background-image: ;

백그라운드에 배경 이미지 파일을 삽입하여 사용자 혹은 디자인 심미 요소를 추가할 수 있다. 경로는 url() 으로 지정하며, 해당 url에는 저장소의 파일 경로 혹은 서버의 파일 경로를 지정할 수 있다. url 형식이기 때문에 다른 웹사이트에 부여된 ‘이미지의 사이트 주소’를 삽입하는 것 또한 가능하다.

해당 이미지의 시작점은 padding 영역을 기준으로한다. 반복되는 경우 반복 이미지에 따라 border 항목까지 채워진다. 다르게 말하자면, 반복효과가 없다면 padding이 끝나는 시작하는 부분부터 시작하여 이미지의 크기만큼 화면에 표시된다.

4. 백그라운드에 배경 이미지 위치 조정: background-position: ;

포지션을 통해 이미지가 시작하는 방향을 지정할 수 있다. px 혹은 %로 부여할 수 있으며, %라면 상위 요소의 % 비율로 계산된다.

뿐만아니라 left, right, center, top, bottom 으로 위치 지정이 가능한데, x(가로)와 y(세로)값으로 지정한다.

5. 백그라운드 이미지 크기 조정: background-size: ;

삽입된 이미지 파일을 확대하거나 축소할 수 있다. px, % 단위로 지정이 가능하며 특정 명령어를 입력하여 확대할 수 있다.

contain은 비율을 유지하면서 padding 영역의 한도치까지 확대를 시켜준다. 크기가 더 큰 쪽이 padding영역에 닿을 때까지 확대를 진행한다.

cover은 이미지에서 작은 쪽을 기준으로 x와 y축 어느 한쪽의 padding에 닿을때까지 확대된다. 이에 따라 원본이미지가 작은 쪽(x혹은 y)은 border을 침범하지 않지만, 이외에는 border을 침범한다. 즉, 배경이 들어가는 padding 영역을 덮는다는 의미이다.

padding을 기준으로 각기 다른 모양을 보여주기 때문에 모양의 조정이 어려운 경우가 있다.

6. 백그라운드 배경 이미지 패턴의 시작 영역: background-origin: ;

백그라운드에 삽입되는 이미지가 백그라운드 전체영역보다 작은 경우, repeat에 따라 반복된다.

background-origin을 사용하면 해당 패턴의 시작 영역을 지정할 수 있다.

시작 영역이라는 것은 해당 이미지의 left-top (왼쪽 위 꼭지점)이 0.0를 기준으로 잡는 위치를 말한다.

clip과 다르게 padding 영역에도 이미지가 삽입된다.

이는 clip이 이미지를 보이지 않도록 잘라내는 역할이라면 origin은 시작 부분을 지정하는 특징 때문이다.

7. overflow: 속성값;

html은 태그 사이의 데이터들을 입력하고, 이 데이터들이 집합하여 웹 페이지를 만드는 구조이다.

때문에 상위에서 규정된 영역이 있을지라도 하위 영역에서 콘텐츠 범위가 넓어져서 정보가 초과할 수도 있다.

이런 경우, overflow를 지정하여 넘치는 데이터의 모양을 규정해 줄 수 있다.

#visible{
    overflow: visible;
}
#hidden{
    overflow: hidden;
}
#scroll{
    overflow: scroll;
}

◍ visible: 초과하는 데이터의 영역과 정보가 그대로 보여진다.

◍ hidden: 초과하는 데이터는 가려지며, 이 데이터를 추출하거나 드래그할 수 없다.

◍ scroll: 스크롤바가 생성되어 데이터는 일부 가려지고, 드래그 또한 가능하다.

8. background-attachment: 속성값;

attachment는 부착이라는 뜻으로 배경을 어느 영역을 기준으로 부착할 것인지를 결정하는 속성이다.

백그라운드의 사이즈 및 속성에 영향을 받아 화면이 구현될 수 있기 때문에 각 속성의 의미를 인지하는 것이 중요하다.

◍ scroll: 기본값

◍ fixed: 백그라운드 이미지가 해당 태그보다 상위 태그를 기준으로 배경-크기가 적용됨, 상위 항목을 기준으로 배경이 적용되어 스크롤에 따라 지정한 항목이 따라오는 듯한 착시를 준다.

◍ local: 스크롤에 따라 배경이 움직임

9. gradient: 모양(방향, 색 1, 색2, ...)

gradient는 위와 같은 효과를 말하는데, 색1과 색2를 양끝에 두고 사이를 중간색으로 채워 색이 변화하는 과정을 하나의 이미지로 담은 것이다.

gradient 색, 방향, 모양을 통해 설정할 수 있으며, CSS에는 기준선을 통해 각도에 따라 색의 변화과정을 설정하게 된다.

◍ 모양: background: linear-gradient

전체적인 gradient의 모양을 지정한다. linear은 선, radial은 원모양이다.

◍ 방향: background: linear-gradient(to right bottom, blue, white);기준선이 어느 방향으로 효과를 넣을지 정하는 것이다. 처음 시작을 left top으로 하여 to를 통해 방향을 설정할 수 있다.

◍ 각도: background: linear-gradient(45deg, red, white);

기준 방향이 아닌 각도를 지정할수도 있다. top center가 0도이며, 이를 기준으로 각도를 지정해 방향에 비해 세밀한 설정이 가능하다.

◍ 색상 범위: background: linear-gradient(315deg, white, crimson 70%, red);

구성요소의 색상 구현 범위도 지정할 수 있다. 색상 뒤에 %를 붙여 표현할 수 있으며 합 100%가 넘지 않아야 한다. 디폴트값은 100%에서 색상의 수를 나눈 것과 같다.

CSS에서도 그라디언트를 제공하지만, 포토샵으로 해당 효과를 정밀하게 조정하고 image 형태로 삽입하는게 더 쉬워서 사용하지는 않는다.

10. opacity: 0.0~1.0 (투명도 조절)

opacity 값을 지정하면 객체의 백그라운드를 투명하게 만들 수 있다.

배경 위에 오는 요소에 투명도를 두면 색의 혼합 현상이 일어난다.

'CSS > 기본 이론' 카테고리의 다른 글

[CSS] Chapter 14. transform 의 사용 (0)	2021.05.19
[CSS] Chapter 13. HTML에 동적 움직임을 부여하기 (0)	2021.05.18
[CSS] Chapter 11. 레이아웃(Layout) 구성: CSS 위치속성 (0)	2021.05.17
[CSS] Chapter 10. border의 속성과 사용 (0)	2021.05.17
[CSS] Chapter 09. block과 Inline (0)	2021.05.17

Hyun's Developer Note

[CSS] Chapter 12. 배경 꾸미기

1. 배경 색상: background-color: ;

2. 백그라운드 보이는 영역 지정: background-clip: ;

3. 백그라운드에 배경 이미지 삽입: background-image: ;

4. 백그라운드에 배경 이미지 위치 조정: background-position: ;

5. 백그라운드 이미지 크기 조정: background-size: ;

6. 백그라운드 배경 이미지 패턴의 시작 영역: background-origin: ;

7. overflow: 속성값;

8. background-attachment: 속성값;

9. gradient: 모양(방향, 색 1, 색2, ...)

10. opacity: 0.0~1.0 (투명도 조절)

'CSS > 기본 이론' 카테고리의 다른 글

티스토리툴바

[CSS] Chapter 12. 배경 꾸미기

1. 배경 색상: background-color: ;

2. 백그라운드 보이는 영역 지정: background-clip: ;

3. 백그라운드에 배경 이미지 삽입: background-image: ;

4. 백그라운드에 배경 이미지 위치 조정: background-position: ;

5. 백그라운드 이미지 크기 조정: background-size: ;

6. 백그라운드 배경 이미지 패턴의 시작 영역: background-origin: ;

7. overflow: 속성값;

8. background-attachment: 속성값;

9. gradient: 모양(방향, 색 1, 색2, ...)

10. opacity: 0.0~1.0 (투명도 조절)

'CSS > 기본 이론' 카테고리의 다른 글

'CSS/기본 이론' Related Articles

티스토리툴바