css를 활용하여 레이아웃을 만들어보자!

목표

로고	사이트이름
네비게이션	메뉴	바
그림	내용	로그인창
	카피라이트

이런 구성에 레이아웃을 설정한다.

html

<div>
<div id="header">
    <div id="h-1">
        <img src="./img/logo.jpg" alt="">
    </div>
    <div id="h-2">
        <img src="./img/mainlogo.jpg" alt="">
    </div>
    <div id="h-3">
        
    </div>
</div>
<div id="navigator">
    <div id="nav1">Home</div>
    <div id="nav1">Profile</div>
    <div id="nav1">Board</div>
    <div id="nav1">Contact</div>

</div>
<div id="contents">
    <div id="c1">
       <center> <img src="./img/left_img.jpg"></center>

    </div>
    <div id="c2">
        <table>
            <tr>
                <td align="center">
                    <img src="./img/main_img1.jpg" alt="">
                    <br>
                    나무를 심는 사람들

                </td>
                <td align="center">
                    <img src="./img/main_img2.jpg" alt="">
                    <br>
                    아이들에게 녹색 미래를
                </td>
            </tr>
            <tr>
                <td align="center">
                    <img src="./img/main_img3.jpg" alt="">
                    <br>
                    설악산을 살리는 길
                </td>
                <td align="center">
                    <img src="./img/main_img4.jpg" alt="">
                    <br>
                    사라지는 북금곰들 
                </td>
            </tr>
        </table>
        
    </div>
    <div id="c3">

        <div>
            <div id="log-header">
            <div id="idpw">
                <div id="id">
                   <input type="text" class="login" name="user-id" placeholder="아이디를 입력하세요">
                    
                    
                </div>
                <div id="pw">
                    <input type="password" class="login" name="user-pw" placeholder="비밀번호를 입력하세요">
                    

                </div>
            </div>
            <div id="buttom">
                <input type="submit" value="로그인">

            </div>
        </div>
            <div id="log-footer" >
                
                    회원가입 
                    ID/PW찾기
                
            </div>
        </div>

        

       <img src="./img/right_img.jpg" alt="" width="100%"> <br>
       <img src="./img/me_chat.jpg" width="100%">
    </div>
</div>
<div id="footer">
    <img src="./img/footer.JPG"alt="">
</div>

</div>

</body>

• div를 기반으로 안에 div를 쪼개 넣는 방식으로 구성하였다
• div안에 첫줄을 구성할 header, 내용을 구성할 contents 카피라이터를 넣을 footer 3가지의 div를 넣었다.
  • header안에 로고, 제목, 빈칸 이렇게 3가지를 구성할 div를 다시 3개로 나눈다.
  • contents는 각각 왼쪽, 중간, 오른쪽을 구성할 3개의 div를 넣어주었다.
  • footer는 하나의div만을 사용하였다.

CSS

div {
    margin: 0 auto;/*가운데 정렬을 해준다*/
width: 1000px;}
#header{height: 100px;}
#footer{height: 100px;}
#contents{
    height :500px;
    background-color: white;
}
/*여기까지는 각각의 부모 태그의 크기 지정이다 */

#h-1{
    height: 100%;
    width: 20%;
    float: left;
}

#h-2{
    height: 100%;
    width: 60%;
    float: left;
}

#h-3{
    height: 100%;
    width: 20%;
    float: left;
}
/*header의 자식태그에 대략적인 크기 지정과
 block태그라서 다음줄로 내려가지 않도록 float속성을 지정하였다*/

#c1{
    padding-top: 5px;
    height: 100%;
    width: 15%;
    float: left;

}

#c2{
    height: 100%;
    width: 60%;
    float: left;
   
}

#c3{
    height: 100%;
    width: 25%;
    float: left;
   
}

/*contents의 자식태그에 대략적인 크기 지정과
 block태그라서 다음줄로 내려가지 않도록 float속성을 지정하였다*/

#navigator{
    height: 30px;
    width: 100%;   
}
/*네비게이션바를 4개로 정확하게 나누어 메뉴를 입력하기 위해 크기를 지정했다*/
/*4개의 네비게이션바의 자식 태그의 id를 동일하게 하여 가운데 정렬로 메뉴를 보이도록 했따*/
#nav1{
    width:25%;
    float: left;
    text-align: center;
    color: white;
    padding-top: 4px;
}
#header img{
    width: 100%;
    height: 100%;
 
}
/*헤더에 있는 이미지들은의 크기*/

#c1 img{

   width: 100%;

}
/*c1에 있는 이미지들의 크기*/

#c2 img{
    width: 100%;
    height: 100%;
 
}
/*c2에 있는 이미지들의 크기*/

#c3>div{
 margin-top: 10px;
 margin-bottom: 10px;
height: 80px;
width: 100%;}

#log-header{
    height: 60px;
    width: 250px;
    
}

#idpw{
    height: 100%;
    width: 70%;
    float: left;
  
}
#buttom{
    height: 100%;
    width: 30%;
    float:left;
  
}

#id{
    width:100%;
    height: 50%;

}
#pw{
    width:100%;
    height: 50%;
   
}

.login{
    width:95%;
    height: 75%;
}

[type=submit]
{   width: 100%;
    height: 100%;
}
/*버튼이 꽉차게 만들었다*/

#log-footer{
    width: 100%;
    height: 100%;
    text-align : center;
}

#footer>img{
    width: 100%;
    height: 100%;
}

레이아웃 결과물

:첫번째 레이아웃 (hana78786.github.io)

오류회고

• 가장 많이 나왔던 오류는 div닫는 태그를 여는 태그 바로 옆에 붙여써서 div안에 들어가야할 내용들이 div태그 밖에 선언된것이었다.
• 부모태그와 자식태그는 부모태그 바로 밑에 있어야만 인식이 되는게 그것에 대한 이해가 부족해 >를 사용해 자식태그에게 스타일을 적용하고자 할때 실수가 많았다.
  띄어쓰기로 후손태그로 선언하니 적용되는 경우가 훨씬 많았다.