02 기본 문법, 단위em, rem, vw, vh , html 문서에서 원하는 요소(태그)를 선택하여 스타일 변경하기

*단위

웹 작업은 상대값이 효과적.

모니터,스크린용 - 상대값: em, ex, ox, %

작업시 내가 작업하는것과 다른 컴퓨터(해상도가 크거나 작은)

에서 보이는것을 확인해야한다.

 

P는 블록요소라 브라우저 너비 다 사용한다.

px과 %는 사용하기 편하다.

 

ex) px로 작업을 했는데 사이트의 전체 크기를 현재보다 10% 늘려달라고 했을때

다 계산해서 20px 일때 10%줄여서 다시 다 코딩해야한다.

그런데, em으로 작성할 경우는 다르다.

 

*em

!! em 단위가 쓰여진 곳의 폰트 사이즈 배수 !!

<style>
        body {
            font-size: 16px;
        }
        h1 {
            font-size: 1.5em;
        }
        h2 {
            font-size: 1.2em;
        }
        P {
            font-size: 1em;
            width:70%;
        }
    </style>

body의 기본 사이즈가 16px; 일때 em은 기본값에 곱해준다.

1.5em 일경우는 기본사이즈 16px * 1.5em

1.2em 일경우는 기본사이즈 16px * 1.2em

 

*선택한것만 바꾸고 싶을때

<span>선택 문자들</span> 으로 감싸준다음

<style> span {font-size: 0.8em} </style> 해준다.

 

ex) body의 기본사이즈가 16px 이고 p가 1.5em 일경우

    span의 폰트사이즈가 0.8em 이면

    16px * 1.5em = 24

    24 * 0.8em = 19.2 가 된다.

 

 

*rem

rem 문서의 기본값의 배수

기본 문서값에 rem을 곱해준다.

font-size: 1.5rem;

기본 문서 px * 1.5

 

문서의 기본 사이즈를 바꾸고 싶으면

(:root 사이즈 * rem 을 해주게 된다)

:root {
	font-size:12px;
}

:root을 써어 기본 문서 값을 바꿔주면 
:root 사이즈 * rem 을 해주게 된다

 

*vw, vh - 뷰포트 대비 n% 이다.

> width의 경우

- % 부모가 만들어준 공간안에서 너비 비율 (기본 margin이 합쳐져있다)

- vw

뷰포트 대비 n% 이다.

너비를 온전히 사용한다 (만약 공간 너비를 916을 주면 margin을 포함해서 다 쓴다

                                       ex 916 기본 너비에 margin 좌우가 16일 경우 916+16 = 32가 되버림)

 

> height의 경우

 

%는 부모가 만들어준 공간안에서 너비 비율이다.

html {
	height: 100%;
}

body {
	height: 100%;
}

p {
	height: 50%;
}

> %를 사용할 경우

 

p에 50%를 주면 보여지는 화면의 50%가 아닌, body 즉 부모의 크기에서 50%다

 

그러나 body에 100%를 주더라도 보여지는 크기는 같다.

// 왜냐하면 body는 html의 자식이기 때문에, 즉 body의 부모는 html.

html에 100%를 줘야 비로소 크기가 늘어난다

 

* 무조건 화면을 기준으로 하는것이 vh, vw 이다.

 

무조건 화면을 기준으로 하는것이 vh, vw 이다.

p {
	height: 50vh;
}

%에서 줬던 html과 body에 있던 height 값을 지우고

그림과 같은 값을 얻기위해선 vh를 쓴다.

 

vw wh는 뷰포트에 대비해서 1%이다.