본문 바로가기

Dev.FrontEnd/HTML_CSS

5. background 속성을 알아보자 / 그럴듯한 웹페이지 만들기

background image와 transparent만 잘 알아도 그럴듯한 웹 페이지를 구성할 수 있다.

#image{
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),
                         url(/img/baby1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

background: linear-gradient 속성과 url 속성을 살펴보자.
url을 통해 원하는 image를 로드한다.
그리고 linear-gradient를 통해서, 그라데이션을 주는데,
여기서 중점을 둬야할 곳은 rgba 중에서 a이다.
transparent 부분을 담당하는 부분이다.
이 부분을 0.5로 설정해주면 50% 로 투명해지게 된다.
나머지 r,g,b를 0,0,0으로 설정했기 때문에,
이미지 위에 투명한 검은색 셀로판지가 덮힌 느낌을 줄 수 있다.
이 위에 밝은 색 계열로 글씨를 써주면 그럴싸하다.
요즘 유행하는 웹사이트 디자인 중 하나를 만들 수 있게 되었다!

background-size 속성을 보자
cover 형태로 하게 되면 사이즈가 너무 작으면 웹 페이지에 맞게 끔 조절된다.

background-repeat 속성을 보자
size가 표시될 웹 페이지보다 작으면 반복되는 것을 설정한다.

background-positon 속성을 보자
웹 페이지가 이미지를 보는 창문이라고 생각하면,
center일 때는 표시한다면 창문이 이미지의 가운데를 바라보고 있게 되는 것이다.

background-attachment 속성을 보자.
attachment 는 붙임이라는 뜻이다.
즉 웹 브라우저 페이지에 이미지크기 그대로를 fixed로 붙일 수 있는 것이다.
background 이므로 content가 사용하는 만큼만 보여줄 수 있게 된다.

이렇게 하면 content 영역을 통해 뒷 편에 있는 이미지를 보는 효과를 줄 수 있다.




드래그를 해보면, 화면 뒷편에 이미지가 고정되있는 효과를 볼 수 있다.



Chapter 5 끝

-..-