친절한효자손 취미생활

반응형 웹을 배우고 있습니다. 오늘은 궁금했던 한 부분이 해결되었습니다. 백그라운드에 이미지를 넣는데, 이것을 브라우저의 크기에 따라 자연스럽게 변하는 것을 표현해보고 싶었습니다. 해결 방법은 생각보다 간단했습니다. 먼저 아래의 코딩 상태를 봐주시기 바랍니다.


<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>백그라운드 반응형</title>

<style>

    body {

        height: 100vh;

        /*background-image: url("02.jpg");

            background-repeat: no-repeat;

            background-position: center;

            background-size: cover;*/

        background: url("01.jpg") no-repeat center/cover;

    }

</style>


본문의 body 안에는 아무것도 없는 상태 입니다. 스타일에서 body 영역에 백그라운드를 넣었습니다. 백그라운드 스타일의 마크업 상태를 봐주세요.


height: 100vh;

background-image: url("이미지경로");

background-repeat: no-repeat;

background-position: center;

background-size: cover;

background: url("이미지경로") no-repeat center/cover;


이렇게 되어 있습니다. height 부분에 100vh 라고 되어 있는데, vh 라는 단위는 Viewport Height의 약자 입니다. 즉 유동성 있는 단위로 보통 지정한 영역의 세로 사이즈에 알맞게 이미지를 꽉차게 하려면 100vh를 입력하시면 됩니다. vh 말고도 가로로 표현하려면 vw (Viewport Width) 를 사용하시면 됩니다.


그리고 background 요소 속성은 빨간색처럼 세분화하여 나눠서 마크업 하셔도 되고, 그냥 간단히 한줄로 표현하고 싶으시면 파란색으로 진행하시면 됩니다. 두가지 표현 중 가장 마음에 드는 방법으로 선택하시면 됩니다. 이렇게 하면 실시간 반응형 백그라운드 이미지가 완성 됩니다. 아래의 첨부파일을 직접 다운로드 하셔서 한번 테스트해 보세요. 아니면 위에 나온 예제대로 직접 하나하나 마크업 하셔서 테스트해 보셔도 됩니다. 끝.


백그라운드 반응형.zip





공유하기

facebook twitter kakaoTalk kakaostory naver band