🔵 CSS - main page

jea_i·2022년 2월 7일

목록 보기

13/19

<body>
    <div class="hdrWrap">
        <div class="header"></div>
    </div>
    <div class="mnWrap">
        <div class="main">
            <div class="texts">
                <h4>Lorem ipsum dolor sit amet.</h4>
                <h2><span>the</span><br>stylish<br>design</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis eos numquam rem assumenda ullam sint, natus ut excepturi obcaecati commodi doloribus! Alias autem nobis ut nemo, illo voluptatem labore reiciendis!  commodi doloribus! Alias autem nobis ut nemo, illo voluptatem labore reiciendis
                </p>
                <div class="btn">
                    <!-- 버튼태그는 인라인레벨이므로 블럭레벨안에서 작동하도록 합니다. -->
                    <button>button</button>
                </div>
            </div>
            <div class="image">
                <!-- 그리드영역의 밖으로 나갈 경우 사용 -->
                <div class="ovgrid"></div>
            </div>
        </div>
    </div>
    <div class="content"></div>
</body>

<style>
/* 헤더와 메인을 중첩시키려면 pos을 이용해야함 */
div.hdrWrap{
    background-color: rgba(0, 0, 0, 0.5);
    /* main위로 충첩시키는 방법 */
    position: absolute;
    /* pasa가 너비값을 최소값으로 만들기 때문에 100%를 넣음 */
    width: 100%;
    /* pos로 부유된 요소간 어레인지, px 사용X */
    z-index: 9999;


    /* 뷰포트 상단 0 에 고정하기 ;;; fixed로도 가운데 정렬가능 대신, 너비높이줘야함 */
    position: fixed;
    top: 0;
}
div.hdrWrap>.header{
    height: 80px;
}


div.mnWrap{}
div.mnWrap>.main{
    /* 모바일 영역떄문에 임의로 90% 적용 */
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    /* outline: 2px solid red; */
}
div.mnWrap>.main::after{
    display: block; content: ''; clear: both;
}
div.mnWrap>.main>div{
    width: 50%;
    float: left;
}
div.mnWrap>.main>.texts{
    text-align: right;
    /* 다른요소 위로 중첩되어야 할 때 rel를 적용합니다. ; 이미지 위로 텍스트 정렬 */
    position: relative;
    /* f12 눌러서 높이 대충 측정 */
    height: 520px;
    padding-top: 160px;
}
div.mnWrap>.main>.texts>h4{
    font-weight: 400;
    font-size: 16px;
    line-height: 40px;
    color: #333;
}
div.mnWrap>.main>.texts>h2{
    font-weight: 700;
    font-size: 72px;
    line-height: 80px;
    color: #000;
    text-transform: uppercase;
    margin-top: 40px;
}
div.mnWrap>.main>.texts>h2>span{
    font-weight: 100;
}
div.mnWrap>.main>.texts>p{
    margin-top: 40px;
    height: 80px;
    overflow: hidden;
}
div.mnWrap>.main>.texts>.btn{
    margin-top: 40px;
}
div.mnWrap>.main>.texts>.btn>button{
    width: 160px; height: 40px; background-color: #f90;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    border: 0;
    border-radius: 5px;
}

div.mnWrap>.main>.image{
    /* 밑 컨텐츠를 확인하기 위해 보통 80vh를 사용함 */
    height: 80vh;
    /* ml를 -70px 줬기 때문에 다시 넣기 */
    width: calc( 50% + 70px );
    background-color: #999;
    margin-left: -70px;
}
div.mnWrap>.main>.image>.ovgrid{
    /* %보다 고정된 값을 적용하기 부모에서 높이를 줬기때문에 안줘도 됨*/
    height: 840px;
    background-color: #f60;
    /* 옆으로 빠져나가는 그리드 적용!!!!!! */
    /* 100vw - 1080px) / 2 + 100%(부모의크기) */
    width: calc((100vw - 1080px) / 2 + 100%);
    /* 부모 크기에 딱 맞게 */
    min-width: 100%;
}

div.content{
    height: 3000px;
}
</style>

jea_i

열정열정열정🔥

이전 포스트

🔵 CSS - position

다음 포스트

🔵 CSS - main page

CSS

🔵 CSS - position

🔵 CSS - input

0개의 댓글

관련 채용 정보