‘1분코딩’ 강의 기반 개념 정리
Abstract
데스크탑, 태블릿, 모바일 등 다양한 기기에 유동적으로 최적화 된 화면을 보여주기 위해 유체 그리드에 대한 개념을 학습한다.
주요개념
- Font-size 단위: em, rem , vw, vh
- @media(breakpoint){} in CSS
em, rem, vw, vh
왜 px 아닌 em, rem, vw, vh 단위를 써야하는가? (필요한 경우)
유지, 보수 측면에서 유리하다. 예를 들어 모든 사이즈 단위를 px로 설정하면 클라이언트의 요구 혹은 디자이너, 개발자의 필요에 의해 전체 사이즈를 일일이 수정해야하는 경우가 생길 수 있는데, rem 같은 상대단위를 쓰게 되면 html {} (= :root {})의 사이즈만 변경해주면 전체 사이즈가 수정되기 때문에 효율적이다.
em vs rem
그렇다면 em과 rem의 차이는 무엇일까? em은 부모 요소의 사이즈를 100%로 하는 상대단위이다. rem은 root em의 약어로 html{}의 사이즈를 100%로 하는 상대단위이다. 아래는 em과 rem의 차이를 단적으로 잘 보여주는 예시이다.
- HTML: header 태그 안에 각각 클래스가 em, rem인 h1태그를 생성했다.
- CSS: html, .header 에 각각 폰트 사이즈를 다르게 설정해두었고, .em에는 em단위를, .rem에는 rem단위를 사용해서 폰트 사이즈를 설정해두었다.
⇒
em은 바로 직계 부모인 .header의 폰트 사이즈를 기준으로 한다는 것을, rem은 무조건 html의 폰트 사이즈를 기준으로 한다는 것을 확인할 수 있다.
em과 rem의 활용
얼핏 em은 매번 부모의 사이즈를 확인해주어야만 하기에, html의 사이즈만 생각하면 되는 rem이 편리하고 유용보인다. 그렇다면 em은 언제 사용할 수 있을까?
primary-content의 p태그는 html의 폰트 사이즈인 36px을 사용하고 있고 secondary-content는 별도의 폰트사이즈로 20px을 가진 상태이다. 각각의 content내에 p태그가 여러개 일 때, 문단(p) 태그 사이에 간격을 주려고 한다. 이럴 때 p.para {}에 margin-bottom을 em단위로 주는 것이 좋을까, rem 단위로 주는 것이 좋을까.
만약 1rem 으로 간격을 준다면, html의 폰트 사이즈를 기준으로 문단 사이 간격이 벌어지기 때문에 primary, secondary의 문단 사이 간격은 모두 36px이 될 것이다. secondary의 폰트 사이즈는 상대적으로 작기때문에 간격이 필요 이상으로 커져 부자연스럽다. 이럴때는 rem이 아닌 em으로 단위를 부여한다면 부모의 폰트사이즈를 기준으로 사이즈가 결정되기 때문에 각각 36px, 20px의 간격을 가질 것이다.
정답은 없다. 디자인적으로 rem과 같은 디자인이 필요한 경우도 있을 수 있다. 하지만 이 경우엔 em을 사용하는 쪽이 더 자연스러워 보일 수 있다.
@media(breakpoint){}
일반적으로 많이 사용하는 화면사이즈는 데스크탑 사이즈, 태블릿 사이즈, 모바일 사이즈가 있다. 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 조건에서만, 다른 말로 각각의 기기 사이즈에 대해 CSS 블록을 적용할 수 있다.
모바일 우선 vs 데스크탑 우선
미디어 쿼리를 적용해 반응형 페이지를 만들 때는 크게 두가지 방법을 고려해볼 수 있는데, 모바일 사이즈에서의 레이아웃을 기본으로 하고 점차 확장해가는 형태와 태블릿 사이즈를 기본으로 하고 점차 축소해가는 형태가 있다.
아래는 각각의 경우에서 미디어 쿼리를 적용하는 코드 블록이다.
@media (min-width 600px) { body { background-color: blue; } } // min-width, 즉 600px 이상일 때 적용되는 CSS, 모바일 기본형 -> 데스크탑 @media (max-width 600px) { body { background-color: blue; } } // max-width, 즉 600px 이하일 때 적용되는 CSS, 데스크탑 기본형 -> 모바일 min-width와 max-width의 개념만 헷갈리지 않으면 되는데, 모바일 우선(작은 사이즈 우선)일 경우 min-width, 데스크탑 우선(큰 사이즈 우선)일 경우 max-width를 사용하게 된다.
모바일 우선의 장단점
장점
- 모바일 사용자 경험에 최적화되어 있다.
- 좀 더 미니멀하고 웹사이트에 필수적인 요소만 남을 확률이 높다.
단점
- 데스크탑 버전이 너무 단순하게 보일 수 있다.
Breakpoint 결정
기존에 알고 있던 지식에 의하면 기기의 사이즈를 기준으로 breakpoint를 결정하는 것이 일반적이다. 이번에 구글링을 통해 새롭게 알게된 점은 특정 기기를 기준으로 breakpoint를 결정하는 것은 그다지 좋은 방법이 아니라는 것이다. 😱
사실, 가장 간단하고 반응형 디자인을 배우기 쉬운 방법이지만 특정 기기의 회사에서 화면 비율이나 해상도를 변경할 가능성이 있고 그보다 단순하게 생각해보면 ‘모든 사람이 한 기기만을 사용하는 것은 아니다라는 이유’ 만으로도 충분히 좋지 않은 방법이라고 할 수 있다.
그렇다면 좋은 방법은 무엇일까? 바로 내 디자인을 기준으로 breakpoint를 결정하는 것이다. 특정 화면 너비에서 디자인이 무너진다면 그에 맞는 새로운 breakpoint를 설정해주면 된다. (1분 코딩 강의에서도 이러한 방식을 활용했다.)
vw, vh는 언제 사용하는 것이 적합한가.
큰 사이즈 화면(desktop)에서 Title : Jeju island 
작은 사이즈 화면(mobile)에서 Title: jeju island 데스크탑 사이즈 → 모바일 사이즈, 혹은 모바일 사이즈 → 데스크탑 사이즈로 유동적인 변화를 줄 때 가로폭은 유지하면서 요소의 크기를 줄이고 싶을 때 vw를 사용한다.
위 예시로 보면 ‘JEJU ISLAND’ 텍스트의 가로 너비는 viewport 기준으로 하므로 고정되어 있지만, 요소의 크기(font-size)는 창의 크기에 맞에 변화하는 것을 확인할 수 있다.
추가로 title에 font-size: 11.0vw(기존 10.9vw)를 주게 되면 단지 0.1vw만 커졌음에도 ‘island’ 부분이 밑으로 떨어지는 것을 볼 수 있다. 해당 요소에 이것을 방지해주는 코드
white-space: nowrap; (= 공백은 wrap하지 않겠다?)을 적용하면 밑으로 떨어지지 않는다.
Float할 때 깔린 요소 방지하는 방법? (기본적이지만 복습 또 복습)
parent::after { content: ''; display: block; clear: both; height: 0; visibility: hidden; }
Uploaded by
N2T