CSS디자인 실습

위 이미지를 그대로 디자인 해보는 과제이다.

 

 

1. 개발자도구(F12)를 이용해서 어떤 구조로 되어 있는지 분석한다.

container 클래스 내부에 row 클래스가 선언되어 있다면

부트스트랩이 적용되어 있다.

맨위 '로그인' 문구와 이미지, 입력창, 버튼을 한데 묶어 정렬하고,

그 안에서 화면 크기에 따른 각각의 크기를 지정해준다.

 

 

 

 

2. 상단 문구

어떤 스타일이 적용되었는지 알고 있다면, 폭이나 여백같은 요소는 얼마든지 마음대로 정할 수 있다.

 

1) 텍스트박스 가운데 정렬 - margin 상하값 0, 좌우값 auto

2) 텍스트 박스 상, 하 색깔선 - border-top, border-bottom (예시의 색은 #E1E1E1)

3) 텍스트 가운데 정렬(가로) - text-align : center

4) 텍스트 가운데 정렬(세로) - 문구의 height값 = line-height값

 

 

3. 본문

col-md-6

col-xs-12

 

 

 

이미지 영역과 로그인 영역으로 나뉜다.

화면 폭에 따라 두 형태를 갖는다.

두 영역을 각각의 블록으로 만들어준 다음, 부트스트랩을 이용해 크기를 지정해준다.

 

1) 이미지 영역

1-1) col-xs-12 : 항상 가로로 배치(12칸을 차지)

class="col-xs-12"

 

1-2) col-md-6 : md사이즈(992px 이상에서 6칸 차지)

class="col-md-6"

992px이상에서 이미지영역과 로그인영역이 6칸씩 차지하게 된다.

 

2) 로그인 영역

2-1) form : 입력받은 정보를 전달해줘야 하기 때문에 form태그로 감싸준다.

 

2-2) input : 아이디와 비밀번호 입력받는 영역

<input type="id" name="id" placeholder="아이디">

name = form태그로 값이 넘어갔을 때, 다음 페이지에서 그 값을 인식할 수 있게 해주는 이름(변수명)

placeholder = 값을 입력하지 않았을 때 창 뒤로 보이는 문구 지정

 

2-3) button : 로그인, 회원가입으로 넘어가는 버튼

<button type="button" class="btn btn-info">로그인</button>

btn btn-info : 부트스트랩 버튼 디자인 종류

btn btn-primary : 위와 같음

 

    <section>
        <div class="container">
            <div class="row">
                <div class="title">
                    <p>로그인</p>
                </div>
                <div class="col-xs-12 login-form">
                    <div class="col-md-6 img">
                        <img src="img/login_background.png">
                    </div>
                    <div class="col-md-6 input-form">
                        <form class="join-form">
                            <div class="form-group">
                                <p>아이디</p>
                                <input type="id" name="id" placeholder="아이디">
                            </div>
                            <div class="form-group">
                                <p>비밀번호</p>
                                <input type="password" name="pw" placeholder="비밀번호">
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-info">로그인</button>
                                <button type="button" class="btn btn-primary">회원가입</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

 

=======================

 

구색은 갖추었지만 여백이나 크기 등을 다듬어줘야한다.

 

1. 메인 영역을 감싼 흰색 상자

.login-form {
    margin: 0 auto;
    border-radius: 8px;
    padding: 70px 50px;
    box-shadow: 0px 8px 16px rgb(0 0 0 / 15%);
    margin-bottom: 174px;
}

2. 이미지 영역

.img > img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

3. form 영역

3-1)미디어 쿼리를 이용해 화면 크기 변화에 맞춰 패딩 값에 변화를 준다.

@media (min-width: 992px) and (max-width: 1199px){
    .join-form {
        padding: 14px 30px;
    }
}
@media (max-width: 768px) {
    .join-form {
        padding: 14px 0px;
    }
}
@media (min-width: 1200px) {
	.join-form {
    	padding: 41px 0px;
    }
}

3-2)입력칸은 부트스트랩 이용. class="form-control" 적용해준다.

<div class="form-group">
    <p>아이디</p>
    <input type="id" class="form-control" name="id" placeholder="아이디">
</div>
<div class="form-group">
    <p>비밀번호</p>
    <input type="password" class="form-control" name="pw" placeholder="비밀번호">
</div>

3-3)버튼도 마찬가지. btn-block을 적용하면 예시와 같이 바뀐다.

<div class="form-group">
    <button type="button" class="btn btn-info btn-block">로그인</button>
    <button type="button" class="btn btn-primary btn-block">회원가입</button>
</div>

 

=========================

 

 

완성