네 번째 과제 카카오톡 프로필 구현 그리고 반응형 웹 ( %, vw, vh, em, rem)

sparta/projects/kakaotalk at master · taehyeki/sparta (github.com)

GitHub - taehyeki/sparta: 스파르타 코딩클럽 웹개발 트랙 1기 !

카카오톡 화면 구현 만들기 과제가 있었고 

old버전 new버전으로 만들어 보았다. 이번에는 instagram 화면을 만드는 것이 과제이다.

근데 화면을 늘렸다 줄였다 할 때 일정 크기가 계속 유지 되어야 한다. 이를 반응형이라고 하는데 이걸 하나도 모른다. 하나씩 차근차근 공부해 나가보자!!!

 

% / em / rem / vw / vh 이렇게 다섯가지 단위가 있다고 한다.. 벌써부터 머리가 아프네

 

%는 부모의 넓이 기준으로 적용된다.

    <div class="center">
        <div class="item-wrap percent-wrap">
            <h1>%</h1>
            <div class="item">item 01</div>
            <div class="item-parent">
                <div class="item">item 02</div>
            </div>
        </div>
    </div>

 

.item-parent{
    width: 50%;
}

.percent-wrap .item{
    width: 50%
}

여기서 max-width, min-width를 줄 수도 있다. min-width로 예를 들면 50%긴 50%를 해주는데..

내가 지정한 값보다 작으면 50% 쓰지말고 내가 지정한 값을 써!!  -----> MIN - WIDTH

반대의 경우라면

만약 150%를 했는데 내가 지정한 값보다 그 값이 크면 내가 지정한 값을 써!! -----> MAX - WIDTH

즉 상한선, 하한선을 지정해 주는 것이다.

 

 

em은 상위 요소의 폰트사이즈의 몇 배인가

<div class="item-wrap em-wrap">
            <h1>em, rem</h1>
            <div class="item-parent">
                <div class="item item-em">
                    item em
                </div>
            </div>
            <div class="item item-rem">
                item rem
            </div>
        </div>

.item-warp(부모)에 폰트사이즈가 24px로 지정되어있다.

.item-em {
    width: 20em;
}

.item-em에는 width를 20em으로 지정해놨다. 따라서 1em이 24px이된다. 1 * 24 * 20 = 480px !

부모의 font-size에 비례해서 늘고 주는 것이 em이다!!

 

rem도 마찬가지다 rem에서 r은 root를 의미한다. 즉  최상위 폰트사이즈가 기준이 된다. 부모든 조상이든 다 무시

 html{ font-szie : 20px} 1rem = 20px이다.

 

 

vw & wh

v는 뷰포트의 약자이다 우리가 보고있는 이 웹페이지의 화면을 뜻한다. vw는 뷰포트의 넓이 vh는 뷰포트의 길이를 말한다. 따라서 우리가 보고있는 이 페이지를 줄였다 늘렸다하면 실시간으로 크기가 변경이 된다.

%와 비슷한데 %는 부모의 크기 기준이고 vw,vh는 부모의 크기 상관없이 오로지 뷰포트 기준이다.