[FrontEnd] 10. Size & Unit, Responsive web, em / rem, Media query, Font Styling

기기 / 브라우저별로 세팅해놓은 값들

 

Size & Unit

엘리먼트에 사용할 수 있는 단위들

 

position에 fixed가 할당되면 부모는 바로 viewport가 된다!!

 

 

min-width | max-width  &  min-height | max-height

- 최대 / 최소 사이즈를 지정할 수 있다

- element에 min/max width/height를 지정하면 -> viewport가 줄어들거나, 부모 element의 크기가 줄어들때 최대/최소 크기는 항상 유지된다

 

 

em / rem

- font-size를 %로 지정하거나 em, rem 등으로 지정할 경우, 브라우저의 기본 텍스트 크기를 기준으로 계산하게 됨 

  (font-size, width, height, padding, margin 등은 브라우저 사용자 설정의 비율로 정의한다.)

• em : 부모 엘리먼트의 폰트 크기를 기준으로 비율 계산 (->계산이 쉽지않아서 잘 사용 안함)
•  rem : 브라우저 사용자 설정 폰트 크기를 기준으로 비율 계산 (-> 이 방법을 훨신 많이 씀!)

 

 

---

 

Responsive web

-반응형 웹 디자인 : 다양한 크기의 Device 에서 하나의 웹 페이지를 표현하는 방법

 

 

Hardware pixels vs. Software pixels

- https://yesviz.com/viewport/

   -> 기기별 물리적 픽셀(Device Resolution), 소프트웨어 픽셀(Viewport Size)을 정리한 사이트

해상도가 매우 높은 반연 화면의 크기는 작은 기기에서 1pixel을 그대로 표기할 경우 매우 작게 찌그러지는 현상을 방지하기 위해 제조사에서 설정해 놓은 기기별 소프트웨어 픽셀 단위.

 

 

---

 

Media query

- veiwport -> 브라우저의 body영역 

- width -> 우리가 원하는 디바이스의 크기를 넣어준다

- width = device-width -> 기기의 길이와 소프트웨어 길이를 맞춰줌

- 초기에 보여질 화면의 배율 (원본사이즈 : 1.0)

 

@media

- 미디어 쿼리

- Viewport의 크기별로 다른 스타일을 지정하고 싶을 때 사용

- 반응형 웹의 가장 핵심적인 기능

- 사용방법

@media (min-width ~~rem){...}

@media (min-width: 40rem) { ... } → viewport width >= 40rem

- 처음에 모바일부터 만들고, 그 다음 데스크탑 용도를 만든다(하지만 대부분 데스크탑용 만들지 않음)

ex) B2C : naver, daum, google ..

@media (max-width ~~rem){...}

@media (max-width: 40rem) { ... } → viewport width <= 40rem

- max-width : 처음에 데스크탑기준으로 만든 후, 모바일전용 스타일을 정해주고 싶을 때 사용

ex) B2B : 데스크탑용으로 먼저 만든다 (망분리가 되어있기 때문에 모바일은 만들 수 없음)

 

style 적용 안되는 3가지

1) (input type) check box

2) radio button

3) select

--> style 적용하기 위해선 : appearance: none; 적용해줘야 됨 

https://developer.mozilla.org/en-US/docs/Web/CSS/appearancehttps://developer.mozilla.org/en-US/docs/Web/CSS/appearance#syntax

 

 

-> 이미지와 관련된 width, height 는 rem을 쓰면 안됨. 

 

 

---

 

Font Styling

- 화면에 있는 글자, 글꼴등을 어떻게 꾸밀것인지 에 대한 것

Google Font 사용해보기

https://fonts.google.com/

1. 사이트에서 마음에드는 글꼴 선택

2. get font -> download all 해서 압축 풀어주기

3. OFL.txt 파일이 있는지 확인하기

4. get embed code클릭 후 해당 부분 전체 복사해서 html파일에 붙여넣기

 

5.그 중 아래와 같이 font-family 부분을 css body블록에 넣어주기 

body {
    background-color: dimgray;
    background-image: url("../assets/bg_tx.svg");
    margin: 0;
    height: 100%;
    /*다운받은 하나의 폰트만 사용하는것은 안전하지 않다. 폰드를 링크로부터 불러오는데 시간이 소요되기 때문*/
    font-family: "Noto Sans KR", sans-serif; /*noto sans kr가 없다면, sans-serif로 설정해라(대안)*/
}