Hiio.com

  Main 컨텐츠  

- 이번 포스팅에서는 index 페이지에 있는 텍스트와 이미지 컨텐츠들을 수정하여 반응형 웹에 적용되도록 해보겠습니다.

  Index 페이지 태그 추가   

- index 페이지에 있는 컨텐츠들을 감싸주는 index 클래스 태그를 추가 시켜 줍니다.

<div id='index' class="move">

    <div id='maintext'>Welcome to My PortFolio</div>
    <div id="mainsubtext">
        <p>Breath</p>
        <p>- Everything will be made by me.</p>
    </div>
    <div id='mainimg'>
        <img src="../static/img/main/main_img.jpg" alt="MainImage">
    </div>
</div>

  Index 페이지 - CSS 수정  

- 기존에 있는 index 페이지의 css를 수정해 주겠습니다.

#main {
    float: left;
    width: 100%;
    position: relative;
}

#index {
    height: calc(100vh - 100px);
    float: left;
    position: relative;
    width: 80vw;
    left: 20vw;
}

#index {
    height: calc(100vh - 100px);
    float: left;
    position: relative;
    width: 80vw;
    left: 20vw;
}

#maintext {
    position: absolute;
    top: 50%;
    left: 10vw;
    transform: translate(0, -50%);
    font-size: 8vw;
    color: #f41f56;
    font-weight: 700;
    z-index: 2;
}

#mainsubtext {
    position: absolute;
    top: calc(50% + 13vw);
    left: calc(10vw);
    transform: translate(0, -50%);
    z-index: 2;
}

#mainsubtext > p:nth-child(1) {
    font-size: 3vw;
}

#mainsubtext > p:nth-child(2) {
    font-size: 1.5vw;
    margin-top: 1vw;
}

#mainimg {
    position: absolute;
    float: left;
    top: 50vh;
    left: 60vw;
    transform: translate(-50%, -50%);
    width: 45vw;
    z-index: 1;
}

#mainimg > img {
    max-width: 100%;
}

- 잘 적용 되었습니다.!!!

- 다음 포스팅에서는 about 페이지를 수정해 보겠습니다.