today i learned 8/25 flex display를 이용한 grid 만들기

오늘은 .. 동아리원들과 진행하고 있는 프로젝트의 login, singnup 페이지를 만들었다. JS의 요소가 하나도 안들어간, HTML/CSS만 이용한 페이지이다.

로그인 페이지

로그인 페이지를 만드는 과정에서, 초급 수준의 HTML/CSS는 어렵지 않게 다루고 있기 때문에 그렇게 오래 걸리지 않을 것이라고 생각했고, 역시 대부분은 금방 만들었으나 문제는 우측 하단의 grid 부분이었다. flex display를 이용해서 병렬로 나열하는 것은 어렵지 않았으나, 오히려 문제는 각 row 및 column의 width와 height를 통일시키는 것 및 각 facebook 마크의 아랫부분을 잘리게 만드는 것이었다. 전자는 flex display를 준 후 width에 동일한 %를 주어서 해결하였고, 후자는 max-height를 현재 높이로 설정을 한 후 overflow에 hidden을 주어서 해결했다. 디자인을 맡은 동아리원이 반투명한 로고도 보내주었고, 심플하게 잘 만들어준 것 같아서 덕분에 작업하는 동안 재밌었다.

 

HTML

        <div id='grid1'>
            <a href='#' id='facebook'>
                <div id='images'><img src='images/facebook.png' width='15px'></div>
                Facebook</a>
            <a href='#' id='twitter'>
                <div id='images'><img src='images/twitter.png' width='15px'></div>
                Twitter</a>
        </div>
        <div id='grid2'>
            <a href='#' id='google'>
                <div id='images'><img src='images/google.png' width='15px'></div>
                Google</a>
            <a href='#' id='kakao'>
                <div id='images'><img src='images/kakao.png' width='20px'></div>
                Kakao</a>
        </div>

 

CSS

#grid1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin: 0px 0px 20px 0px;
}
#grid2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}
#grid1 > a, #grid2 > a {
    color: white;
    text-decoration: none;    
}

#facebook {
    display: flex;
    width: 20%;
    max-height: 32px;
    overflow: hidden;
    margin-right: 10px;
    background-color: #3b5998;
    padding: 8px 10px;
    border: none;
    border-radius: 5px;
}
#twitter {
    display: flex;
    width: 20%;
    max-height: 32px;
    padding: 8px 10px;
    background-color: #00acee;
    border: none;
    border-radius: 5px;
}
#google {
    display: flex;
    width: 20%;
    max-height: 32px;
    margin: 0px 10px 20px 0px;
    padding: 8px 10px;
    background-color: green;
    border: none;
    border-radius: 5px;
}
#kakao {
    display: flex;
    width: 20%;
    max-height: 32px;
    padding: 8px 10px;
    background-color: #f7e600;
    border: none;
    border-radius: 5px;
}
#kakao > #images {
    margin-left: -4px;
}
#images {
    padding-right: 7px;
}