조회 수 53274 추천 수 0 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

DIV를 통해 전체화면(이미지)을 구성해 보자.

 

대부분 아래와 같이 HTML구조를 만들 것이다.

 

<html>
<head>
<style>
* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-color: yellow;
}
</style>
</head>

<body>
    <div class="back">
    </div>
</body>
</html>

 

위의 코드에서 눈 여겨 봐야 할 것은 9번째 줄이다. html과 body의 속성을 왜? 100%를 주는 것일까? 이유는 간단하다.

 

일반적으로 DIV의 크기는 화면 가득 채울 수 없다.  위의 예제의 실행 결과를 보자.

 

6-1.png

 

이번엔 처음 나온 DIV에 높이값을 100%로 세팅해보자.

 

<html>
<head>
<style>
* {
    margin: 0px;
    padding: 0px;
}
html, body {
}
.back {
    height: 100%;
    background-color: yellow;
}
</style>
</head>

<body>
    <div class="back">SCREEN 100% TEST</div>
</body>
</html>

 

6-2.png

 

DIV에 높이값을 100%를 주었지만 전체 화면을 사용하지 못한다. 이런 첫번째 예제처럼 화면을 100% 사용하기 위해 html과 body에 100%를 주는 것이다.

 

이제 화면 전체(아래 예제에서는 높이값을 98%로 설정)를 DIV로 처리해 보자.

 

<html>
<head>
<style>
* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-color: yellow;
}
.back {
    height: 98%; 
    border: 3px solid blue;}
}
</style>
</head>

<body>
    <div class="back">SCREEN 100% TEST</div>
</body>
</html>

 

6-3.png

 

위의 그림처럼 화면에 가득찬 DIV를 만들어 낼 수 있다.

 

그럼, 바탕화면에 멋진 이미지를 깔아보자. background-size: cover;를 이용해 화면에 균형적으로 이미지를 표시하였다.

 

<html>
<head>
<style>
* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-image: url("http://fact119.com/zard/images3.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    background-size: cover;
}
.back {
    height: 98%; 
    border: 3px solid blue;}
}
</style>
</head>

<body>
    <div class="back"></div>
</body>
</html>

 

6-4.png

 

화면 가운데 안내 멘트를 띄워보자.

 

<html>
<head>
<style>
* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-image: url("http://fact119.com/zard/images3.jpg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    background-size: cover;
}
.back {
    height: 98%; 
    border: 3px solid blue;
}
.ment {
    display: inline-table;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    width: 200px;
    height: 100px;
    background-color: gray;
    border: 4px solid black;
    font-size: 20px;
}
.arrange {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>
</head>

<body>
    <div class="back">
      <div class="ment">
        <p class="arrange">HI! ZARD THE LOVE.</p>
      </div>
    </div>
</body>
</html>

 

6-5.png

 

DIV를 통해 100% 화면을 사용하는 방법을 알아보았다.

 

?
  • ?
    KKMS 2016.06.07 12:29

    <html>
    <head>
    <style>
    * {
        margin: 0px;
        padding: 0px;
    }
    html, body {
        height: 100%;
        background-image: url("http://fact119.com/zard/images3.jpg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-attachment: fixed;
        background-size: cover;
    }
    .back {
        height: 100%; 
    }
    .ment {
        display: inline-table;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -100px;
        width: 200px;
        height: 100px;
        background-color: rgba(255,255,255,0.5);
        border: 4px solid black;
        font-size: 20px;
    }
    .arrange {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box { position: absolute;
        height: 30px; width: 100%;
        border: 1px solid red;
        background-color: white;
        line-height: 30px; text-align: center; }
    .top { top: 0px; }
    .bottom { top: 100%; margin-top: -32px; }
    </style>
    </head>
     <body>
        <div class="back">
          <div class="box top">방문을 환영합니다.
          </div>
          <div class="ment">
            <p class="arrange">HI! ZARD</p></div>
          <div class="box bottom">2016 Fact119.com
          </div>
        </div>
    </body>
    </html>

  • ?
    kkms4001 2018.02.05 11:49

    <style>

    div,

    aside span {

      background-image: url(http://fact119.com/zard/images3.jpg);

    }

    div {

      width: 310px;

      height: 150px;

    }

    aside {

      background: rgba(255, 255, 255, 1);

      width: 310px;

      height: 150px;

    }

    aside span {

      display: block;

      font-size: 7em;

      font-family: arial;

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

    }

    </style>

    <div>

      <aside>

        <span>ZARD</span>

      </aside>

    </div>


List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 128222
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 71080
» HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53274
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 23752
37 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19387
36 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19014
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16318
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15230
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13531
32 HTML Form 요소 설명 4 2016.06.01 11643
31 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10311
30 HTML li 에 대해 알아보자. 2 file 2016.02.15 10200
29 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10172
28 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 9945
27 SASS Sass 소개 2019.09.19 9643
26 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8405
25 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 8199
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7086
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6605
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6016
Board Pagination Prev 1 2 3 Next
/ 3