flexbox LandingPage

 

 

https://youtu.be/-drcStMYOcM

이 영상을 따라 만들었다.

 

분석

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: poppins;
}

ul,nav{
    list-style: none;
}

a{
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

초기화 css

 

헤더

 <header>
        <h2><a href="#">Saffron</a></h2>
        <nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </nav>
    </header>

header{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 35px 100px 0;   
}

header h2{
    text-transform: uppercase;
}

header nav{
    display: flex;
}

header nav li{
    margin: 0 15px;
}

header nav li:first-child{
    margin-left: 0;
}


header nav li:last-child{
    margin-right: 0;
}

/*미디어 쿼리*/
@media(max-width:1000px){
    header{
        padding: 20px 50px;
    }
}

@media (max-width:700px) {
    header{
        flex-direction: column;
    }

    header h2{
        margin-bottom: 15px;
    }

    header nav li{
        margin: 0 7px;
    }
    
}

header 선택자에 flex 속성을 주고 justify-content : space-between;속성을 줌으로써 h2와 nav사이 간격이 알맞게 벌어진다

position: absolute해서 배경이미지 위에 뜨게 했다.(z-index 속성도 줌)

여기서 배운 것은 @media로 첨에는 padding을 조절하다, 나중에 되서야 flex-direction을 바꿔도 된다는 것이었다.

 

배너

<section class="banner-area">
        <div class="banner-img"></div>
        <h1>Flexbox Website</h1>
        <h3>Responsive Web Design</h3>
        <a href="#" class="banner-btn">Contact us</a>
    </section>

/*banner area*/
section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 110px 100px;
}

section p{
    max-width: 800px;
    text-align: center;
    margin-bottom: 35px;
    padding: 0 20px;
    line-height: 2;
}

.banner-area{
    position: relative;
    justify-content: center;
    min-height: 100vh;
    color: #fff;
    text-align: center;
}

.banner-area .banner-img{
    background-image: url(images/2.jpg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: -1;
}
/*가상선택자로 이미지 채도 조절*/
.banner-area .banner-img:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .8;
}

.banner-area h1{
    margin-bottom: 15px;
    font-size: 65px;
    font-family: merienda;
}

.banner-area h3{
     margin-bottom: 40px;
     font-size: 25px;
}

.banner-area a.banner-btn{
    padding: 15px 35px;
    background: crimson;
    border-radius: 50px;
    text-transform: uppercase;
}

@media (max-width:800px){
    .banner-area{
        min-height: 600px;
    }
    .banner-area h1{
        font-size: 32px;
    }
    .banner-area h3{
        font-size: 20px;
    }
    .banner-area a.banner-btn{
        padding: 15px 40px;
    }
}

@media (max-width:1000px) {
    section{
        padding: 100px 50px;
    }
}

@media (max-width:600) {
    section{
        padding: 125px 30px;
    }
}

주목해야할 점은 .banner-area .banner-img에서 position: absolute를 주고 top과 left를 0으로 줘서 맨 위에 고정시켜둔 것이다.

z-index를 -1로 줘서 모든 요소들이 자기 위로 떠다니도록 만들었다.

또한 나같은 경우 이미지 밝기를 조절할 때 쓸모없는 div를 만들고, 배경 위에 그것을 올림으로써(position: absolute) 밝기를 조절했는데

.banner-img:after 가상 선택자를 이용해서 빈 콘텐츠를 만들고, 밝기를 조절한 기술이 인상적이었다.

 

about-area

<section class="about-area" id="about">
        <h3 class="section-title">About Us</h3>
        <ul class="about-content">
            <li class="about-left"></li>
            <li class="about-right">
                <h2>About our Company</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, sint? Expedita quidem aliquam libero culpa animi, officiis corporis accusamus magni sint rerum exercitationem nesciunt sequi? Dignissimos quo voluptatem eveniet hic!</p>
                <a href="#" class="about-btn">Learn more</a>
            </li>
        </ul>
    </section>

/*about area*/

ul.about-content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
}

.about-content li{
    padding: 20px;
    height: 300px;
    background-clip: content-box;
    background-size: cover;
    background-position: center;
}

.about-left{
    flex-basis: 40%;
    background-image: url(images/1.jpg);
}

.about-right{
    flex-basis: 60%;
}

.about-area p{
    max-width: 800px;
    margin-bottom: 35px;
    line-height: 1.5;
    text-align: left;
    padding-left: 0;
}

.section-title{
    text-transform: uppercase;
    font-size: 50px;
    margin-bottom: 5%;
}

.about-right h2{
    margin-bottom: 8%;
}

.about-btn{
    padding: 15px 35px;
    background: crimson;
    border-radius: 50px;
    text-transform: uppercase;
    color: #fff;
}

@media (max-width: 1000px){
  	.about-area p{
        padding: 0;
    }
    .about-left,
    .about-right{
        flex-basis: 100%;
    }
    .about-content li{
        padding: 8px;
    }
}

flex-wrap: wrap 속성을 준건 브라우저 크기가 줄어들면 자동으로 사진 밑으로 글이 이동하게 할려고 만든 것이다.

 

services-area

 <section class="services-area" id="services">
        <h3 class="section-title">Services</h3>
        <ul class="services-content">
            <li>
                <i class="fa fa-laptop"></i>
                <h4>Web Design</h4>
                <p>olestiae. Ex veniam nobis molestiae minima mollitia laborum! Laboriosam?</p>
            </li>
            <li>
                <i class="fa fa-signal"></i>
                <h4>Marketing</h4>
                <p> Ex veniam nobis molestiae minima mollitia laborum! Laboriosam?</p>
            </li>
            <li>
                <i class="fa fa-picture-o"></i>
                <h4>Graphics</h4>
                <p>  Ex veniam nobis molestiae minima mollitia laborum! Laboriosam?</p>
            </li>
        </ul>
    </section>

/*service area*/

#services{
    background: #ddd;
}

ul.services-content{
    width: 100%;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
}

.services-content li{
    padding: 0 30px;
    flex-basis: 33%;
    text-align: center;
}

.services-content li i{
    font-size: 50px;
    color: crimson;
    margin-bottom: 25px;
}

.services-content li h4{
    font-size: 20px;
    margin-bottom: 25px;
}

.services-content li p {
    margin: 0;
}

@media (max-width:1000px){
    .services-content li {
        flex-basis: 100%;
        margin-bottom: 65px;
    }

    .services-content li:last-child{
        margin-bottom: 0;
    }

    .services-content li p{
        padding: 0;
    }

}

flex-wrap: wrap을 줘서 어중간한 크기(테블릿)이 자동으로 column으로 정렬되도록 하고 있다.

뷰포트 크기가 1000px보다 적으면 flex-basis: 100%를 줘서  direction이 column일 경우 글자가 중구난방이 되지 않도록 함.

 

contact

<section class="contact-area" id="contact">
        <h3 class="section-title">Contact</h3>
        <ul class="contact-content">
            <li>
                <i class="fa fa-map-marker"></i>
                <p>247 Westwood Lane <br> Blackfen, UK</p>
            </li>
            <li>
                <i class="fa fa-phone"></i>
                <p>+123 456 780  <br> +123 456 780 </p>
            </li>
            <li>
                <i class="fa fa-envelope"></i>
                <p>info@Saffron.com <br>yourdomain@website.com</p>
            </li>
        </ul>
    </section>

/*contact area*/

#contact{
    background: #fff;
}

.contact-content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-content li{
    padding: 0 30px;
    flex-basis: 33%;
    text-align: center;
}

.contact-content li i{
    font-size: 50px;
    color:crimson;
    margin-bottom: 25px;
}

.contact-content li p{
    margin: 0;
}

@media (max-width: 1000px){
    .contact-content li{
        flex-basis: 100%;
        margin-bottom: 65px;
    }
    .contact-content li:last-child{
        margin-bottom: 0;

    }
    .contact-content li p{
        padding: 0;
    }
}

footer

    <footer>
        <p>All Right Reserved by your site</p>
    </footer>

footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    background-color: #000;
    padding: 60px 0;
}

 

 

 

 

 

느낀점 

참 어렵다. 태그들이 어떤 기능을 하는지는 잘 알겠는데, 디자인 하는 것이 제일 어렵다. 많이 만들어 볼 수 밖에 없다.

이번 landing page에서 핵심적인 코드는 

section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 110px 100px;
}

이 코드다. section을 가지고 구역을 나눴기에 기본적인 padding과 속성을 모든 section에 똑같이 나눠줌으로써 

디자인이 정렬된다. 이런식으로 section을 가지고 코드를 짤 때는 기본 베이스를 잘 정하고 가는 것이 중요하다.