배너 유형 페이지 만들기

피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다.

 

기본 CSS 리셋값 설정하기

CSS리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠??

/* reset */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
img {
    vertical-align: top;
    width: 100%;
}
.blind {
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}

.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* common */
.container {
    width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    /* background-color: rgba(0, 0, 0, 0.1); */
}
.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}
.section {
    padding: 120px 0;
    text-align: center;
}
.section.center {
    text-align: center;
}
.section__small {
    font-size: 14px;
    border-radius: 50px;
    background-color: #ff4191;
    color: #fff;
    padding: 1px 23px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
}
.section__h2 {
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1;
}
.section__desc {
    font-size: 22px;
    color: #666;
    margin-bottom: 70px;
    font-weight: 300;
    line-height: 1.5;
}

배너 섹션 구성해주기

<body>
    <section class="banner__wrap">
        <h2 class="blind">배너</h2>
        <div class="banner__inner">
            <div class="banner">
                <div class="banner__info section nexon">
                    <h3>조향에 관한 유튜브</h3>
                    <p>다양한 조향에 관한 지식은<br>유튜브를 통해 더욱 자세히 확인할 수 있습니다.</p>
                    <address class="right"><a href="#">https://youtu.be/TLsRyJuJ04o</a></address>
                </div>
            </div>
        </div>
    </section>
</body>

banner__wrap을 만들어준 후, 웹표준에 맞게 h2 태그를 만들어 이름을 blind라고 지어줍니다.

그리고 banner__inner에 banner, 그 안에 banner__info를 만들어줍니다. 제목과 내용, 그리고 유튜브 주소를 넣어줍니다.

그리고 기본 폰트와 가운데로 와야하기 때문에 section과 nexon을 적어줍니다.

 

배너 구역 CSS 설정해주기

/* banner__wrap */
.banner__inner {
    color: #fff;
}
.banner__inner .banner {
    height: 500px;
    background-image: url(../asset/img/BANNER-TYPE01-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
}
.banner__inner h3 {
    font-size: 45px;
    font-weight: 400;
    padding-bottom: 50px;
}
.banner__inner p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    padding-bottom: 100px;
}
.banner__inner .right {
    text-align: center;
    font-style: normal;
    line-height: 1.6;
    font-size: 14px;
}
.banner__inner .right a{
    color: #fff;
    text-decoration: underline;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 2dppx) {
        .slider__inner .slider {
            background-image: url(../asset/img/BANNER-TYPE01@2x-min.jpg);
        }
    }

banner 부분에 height값을 지정해주고, background-image를 이용해 뒤에 이미지를 넣어줍니다.

backgroundsize를 cover로 해주고, repeat를 no-repeat로 설정해주고 position을 center로 지정해줍니다.

 

그리고 position을 relative로 설정해주고 z-index값을 1로 설정해줍니다.

 각각 banner__info에 있는 정보들의 폰트 사이즈나 컬러들을 설정해줍니다.

 

CSS 사전

text-align 속성은 텍스트 정렬 방식을 설정합니다.
vertical-align
 인라인 요소의 수직 정렬 방법을 설정하는 속성입니다.
justify-content CSS Flexbox 레이아웃에서 주 축(main axis)을 따라 플렉스 아이템(flex item)을 정렬하는 속성입니다.
background-repeat
 배경 이미지의 반복 여부를 지정하는 속성입니다.
background-position 배경 이미지의 위치를 지정하는 속성입니다.
background-image
 요소의 배경 이미지를 설정하는 속성입니다.
display
 요소의 표시 방법(display method)을 설정하는 속성입니다.
line-height
 줄 간격을 지정하는 속성입니다.
z-index
 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다.
position
 요소의 위치를 지정하는 속성입니다.
position: relative
 요소의 위치를 변경할 때 사용되며, 다른 요소와의 상대적인 위치를 정의합니다. position 속성에 relative를 지정하면 해당 요소는 원래 위치를 기준으로 이동하게 되며, 다른 요소와 겹치지 않도록 공간을 확보할 수 있습니다.
position: absolute
 요소를 페이지의 상대적이거나 절대적인 위치로 이동시킬 때 사용됩니다. position 속성에 absolute를 지정하면, 해당 요소는 부모 요소의 위치를 기준으로 이동하며, 다른 요소들과 겹칠 수 있습니다.

완성된 페이지와 코드

 

코드 보기 / 완성 화면

 

다른 유형의 페이지 보러가기

카드 유형 : https://duektmf34.tistory.com/32

이미지 유형 : https://duektmf34.tistory.com/37

이미지텍스트 유형 : https://duektmf34.tistory.com/42

슬라이드 유형 : https://duektmf34.tistory.com/43

텍스트 유형 : https://duektmf34.tistory.com/48

푸터 유형 : https://duektmf34.tistory.com/53

 

728x90
반응형
다쭐◠‿◠
상단으로

티스토리툴바