web page 영역나누기 (div, float 태그)

 

오늘은 web page의 영역을 나누는 내용을 다룰 것이다.

다른 사람들은 어떠한 단계로 코딩을 하는지 잘 모르겠지만

나는 구역을 나눠놓고 하는 것이 편한 것 같다.

 

html을 가지고 본격적으로 페이지를 만들기 전에 c# form을 이용하여 디자인을 해주었다.

 

디자인 설계

html로 바로 만들기에는 막연할 수 있으므로

포토샵이나 파워포인트 등으로 디자인 설계를 하고 시작하는 것을 추천한다.

 

본격적으로 html 코딩을 시작해 보겠다.

 

영역을 나눌 때 가장 기본적으로 사용하는 태그는 div태그이다.

div태그는 하나 이상의 태그를 묶는 태그로 레이아웃을 만들 때 좋은 태그이다.

사용 방법은 <div class=""></div> 로 집합을 만든다고 생각하면 쉬울 것 같다.

 

layout

레이아웃을 짤 때 큰 집합에서 작은 집합으로 나누어 가며 그리고

열(세로 방향)으로 먼저 나누고 그다음에 행(가로방향)으로 나누는 것이 좋다.

그래서 나는 frame으로 크게 묶어주고 나중에 쓰일지도 모르는 header와 footer도 추가하여

아래와 같이 html 코드를 짜주었다.

 

 

<div class="frame">

        <div class="header">

            <div class="title">Bonnie Project</div>

        </div>

        <div class="menu">

        <ul class="nav">

                <li class="nav-item"><a href="" class="nav-link">Menu-1</a></li>

                <li class="nav-item"><a href="" class="nav-link">Menu-2</a></li>

            </ul>

        </div>

        <div class="search">

            <select id="range" >

                <option value="all_range">전체 검색</option>

                <option value="hanja_range">한자 검색</option>

                <option value="hangeul_range">한글 검색</option>

            </select>

            <div class="col-xs-3" >

              <input type="text" class="form-control" placeholder="입력하세요" >

              </div>

              <button class="input-btn">검색</button>

            </div>

        </div>

        <div class="container">

            <div class="left_content">

                <a>한역 속담집 목록<br></a>

                <a>속담집 정보<br></a>

            </div>

            <div class="center_content">

                <a>속담</a>

                <button class="save_btn">저장</button>

                <button class="add_btn">추가</button>

                <button class="delete_btn">삭제</button>

            </div>

            <div class="right_content">

                <a>속담 사전과의 비교<br></a>

                <a>다른 한역 속담집과의 비교<br></a>

                <a>사용 사례<br></a>

            </div>

        </div>

        <div class="footer">

            

        </div>

    </div>

 

레이아웃 짜는 거에서 조금 더 진행된 코드이기는 하지만 div태그를 이용해 영역을 나누었다는 것이 보일 것이다.

하지만 div태그로 묶어 주었다고 기획 화면처럼 나타나지는 않는다.

css를 추가해주지 않으면 일자로 주욱 나열된 화면을 볼 수 있을 것이다.

 

이제 style을 추가해줘야 하는데 기본적으로

width, height, float, background-color

을 통해 디자인을 해준다.

 

여기서 float는 객체를 어떻게 배치할지 정해주는 속성이다.

float속성에 크게 left, right, none이 있는데

left는 왼쪽부터 순서대로 배치하게 되고

right는 오른쪽부터 순서대로 배치하고

none은 float 속성이 해제된다.

 

<style>

    .frame {

        width: 100%;

    }

    .menu{

        width: 100%;

        height: 36px;

    }

    .nav{

        width: 100%;

    } 

    .container{

        overflow: hidden;   /*float*/

    }

    .left_content{

        width: 30%;

        float: left;

    }

    .center_content{

        width: 40%;

        float: left;

    }

    .right_content{

        width: 30%;

        float: left;

    }

</style>

 

content 객체들에 준 속성을 보면 각각 width를 지정해주고 float를 left로 지정해 주었다.

이렇게 하면 디자인한 화면처럼 레이아웃이 배치되는 것을 확인할 수 있다.

여기서 width를 px단위가 아닌 %로 지정한 것은 화면을 반응형으로 만들기 위해서 이다.

 

추가적으로 디자인을 할 때 영역 사이에 빈 공간을 두고 싶을 수도 있다.

혹은 영역과 내용 사이에 빈 공간을 두고 싶을수도 있다.

 

이럴 때 style에 margin, padding 속성을 추가하면 된다.

magin은 영역의 바깥쪽 여백으로

margin: 20px, margin: 30px 20px, margin-top: 10px

와 같이 사용하고

padding은 영역의 안쪽 여백으로 margin과 같은 방법으로 사용하면 된다.

(네 가지 방향을 모두 지정할 때, 위부터 시계방향으로 위 오른쪽 아래 왼쪽 순서로 설정한다.)

 

 

이렇게 객체를 묶고 너비, 높이, 배치 방법, 여백 속성을 지정하면서 영역 나누기가 끝이 났고

다음 시간에는 구체척인 내용들을 추가해줄 것이다.