반응형 웹을 위한 폰트 단위 및 미디어 쿼리

# 폰트단위

px

절대값으로 사용 되는 단위.

고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않음.

 

em

부모태그의 사이즈를 기준으로 정해지는 길이 단위.

 

rem

 root(html 최상위 요소)를 기준으로 정해지는 길이 단위.

 

---

# 미디어 쿼리 

  주의사항 

• 미디어 쿼리의 중괄호 { } 안에 작성되지않은 css 스타일은 공통 css 스타일로 사용된다.
• 사용하기 싫다면 재정의 해줘야한다.

/* Desktop CSS start*/
body{ display: flex; color : white; }

/* .... other css styles */


/* Desktop CSS end*/

/* Mobile CSS start */ 
/* Destop CSS에 작성된 CSS style이 그대로 상속되므로, 상속하기싫다면 미디어쿼리에서 재정의 필요*/
/* 그래서 모바일 CSS 부터 작성하는게 좋다. */
@media screen and (max-width: 768px){
	div{background-color : black}
    /* .... other css styles */
}

/* Mobile CSS end */



/* 나는 태블릿 CSS 얌 */
@media screen and (min-width: 768px) and (max-width:1024px){
	/* .... other css styles */
}