[개인프로젝트] 메인화면 레이아웃 잡기(6)

어제 대충 로그인과 회원가입 부분을 완료하였고, 오늘은 메인화면 레이아웃을 잡아 볼까 계획을 잡았습니다. 사실 책상에 앉는 거까지는 많이 힘들지만, 막상 작업을 진행하니 역시 재미있네요.

전체적인 레이아웃은 티스토리 클론 코딩을 하면서 진행을 하려고 합니다. 위에 헤더, 그 아래 왼쪽에는 섹션, 오른쪽에는 네비바를 집어넣고 진행을 했습니다. 간단한 html 코드를 살펴보면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header>
        <h1>welcome</h1>
    </header>

    <nav>
        <p>전체 메뉴</p>
        <ul class="menu">
            <li>test</li>
            <li>test</li>
            <li>test </li>
        </ul>
    </nav>

    <section>
        <div>
            <div>이미지</div>
            <div>설명</div>
        </div>
        <div>
            <div>이미지</div>
            <div>설명</div>
        </div>

    </section>


</body>

일단 디자인은 이런식으로 집어넣고, 네이바의 메뉴에 따라 세션의 내용이 달라지도록 구현할 예정입니다. 다음은 CSS입니다.

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: white;
    padding: 1em 1em 1em 7em;
    
}

nav {
    float: right;
    width: 20%;
    background-color: #f2f2f2;
    padding: 1em;
    height: 100vh;
}

.menu {
    list-style: none;
    padding-left: 20px;
}

.menu > li {
    margin-top: 15px;
}

section {
    float: left;
    width: 72%;
    padding-left: 2em;
    padding-right: 2em;
    box-sizing: border-box;
    text-align: center;
}

section > div{
    display: inline-block;
    margin: 2em;
    border: 1px solid black;
    width: 15vw;
    height: 25vh;
    border-radius: 20px;
}

section > div > div:nth-child(1){
    border-bottom: 1px solid black;
    height: 75%;
}

section > div > div:nth-child(2){
    height: 25%;
    display : flex;
    justify-content : center;
    align-items : center;
}

사실 레이아웃을 어떻게 잡을까 고민을 많이 하다가, position 이 아닌, float로 잡았습니다. 이외에 속성들의 크기들을 최대한 빅셀을 안 쓰려고 했습니다. 그 이유는 바로 반응형으로 하려고 했지만... 쉽지 않네요ㅠ

오늘은 여기까지 하겠습니다. 내일 이미지를 넣고, 자바스크립트 부분을 추가하면 어느정도 끝날 거 같습니다! 감사합니다!

저작자표시 비영리 변경금지

'프론트엔드 > 개인프로젝트' 카테고리의 다른 글

[개인프로젝트] 회원가입 자바스크립트 작성하기(5) (2)	2023.12.07
[개인프로젝트] 회원가입 html 디자인 하기(3) (0)	2023.12.06
[개인프로젝트] html에서 자바스크립트로 데이터 가져오기 (2) (1)	2023.12.01
[개인프로젝트] 로그인 박스만들기(html, css) (0)	2023.11.30