자주 쓰이는 CSS 연습해보기(2)

로그인 페이지 좌우 여백을 설정하여 중앙으로 이동시켜보기!

로그인 페이지 예제

페이지 가운데로 모아주기 위해서는 아래 코드를 하나의 div로 묶어 주어야 한다.

<div class="mytitle">
    <h1>로그인 페이지</h1>
    <h5>아이디, 비밀번호를 입력해주세요</h5>
</div>

<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>

wrap 이름표를 만들어 아래 코드처럼 <div class="wrap">으로 묶어 준다.

<div class="wrap">
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</div>

 그리고 head의 style 아래처럼 입력한다.

.wrap {
    background-color: green;
}

초록색을 넣어 영역을 확인하기

위 스샷을 보면 양쪽 여백이 없이 꽉 차있다는 것을 확인하였다.

영역의 가로 사이즈를 수정하자.

.wrap {
    background-color: green;
    width: 300px;
}

가로 사이즈를 300px로 수정한 모습

이제 저 박스 밖의 여백을 밀어주기 위해서 margin을 이용해보자.

.wrap {
    background-color: green;
    width: 300px;
    margin: auto;
}

중앙으로 이동한 모습

background-color: green; 내용을 삭제하기!