1 > 1000

em과 rem을 사용하면 기준이 되는 폰트 크기를 바꾸었을 때,다른 폰트의 크기들도 지정해둔 것에 따라 차등적으로 바뀌어 적용되기 때문에 편리하다.하지만 em과 rem은 브라우저의 창의 크기와는 상관이 없는 단위이다. 이와 달리 vw, vh, vmin, vmax는 브라우저 창의 가로 또는 세로 크기에 따라 변하는 폰트 단위이다. vw : viewport widthvw단위는 웹 브라우저의 가로폭 (너비)를 기준으로 결정되는 크기다.만약 웹 브라우저의 너비가 1280이고, 폰트 크기를 10vw라고 한다면이 때 10vw의 크기는 1280의 1%인 12.8px이 되는 것이다. vw단위를 지정한 예제는 이곳을 클릭하면 볼 수 있다.브라우저 창의 가로 크기를 늘렸다 줄였다 하면서 보면 글자 크기가 달라지는 것을 확..

미디어 쿼리 (Media Queries) 란? 미디어 쿼리란 반응형 웹을 구현하기 위해 필요한 기술 중에 하나로,컴퓨터나 기기에게 '너는 어떤 종류의 미디어니?' 또는 '미디어의 화면 크기는 어느 정도나 되니?' 라고미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술이다. 기기의 종류 뿐만이 아니라 해상도, 비트 수, 가로/세로 여부 등 세밀한 부분까지 감지가 가능하여 유용하다. 미디어 쿼리의 기본 용법 미디어 쿼리 작성을 할 때는 기본적인 순서와 규칙을 따라야 한다. 다음과 같은 구조가 기본이다. @media 미디어 쿼리 문법의 시작을 선언하는 부분이다. 조건문 조건문에서는 뒤따라 올 실행문을 실행시킬 조건을 명시해준다. 미디어의 유형이나 속성 등을 적어준다. 어떤 종류가 있는지는 이따 자세히 알아보..

이지스 퍼블리싱에서 출간된 첫째마당의 2장 [px을 %로 바꾸기 - 가변 그리드]를 공부하다가책에서는 별다른 언급이 없지만나같은 초심자가 쉽게 실수할 수 있는 부분에 대해 공유하려고 한다. 둘을 합쳐 너비가 100%인데,옆으로 나란히 배치가 안되고 아래로 넘치네? 책에서 제시한 예제의 가변 그리드 구조 두 div를 합쳤을 때 너비가 100%로 꽉 차는 형태이다. 책의 45page 부터 시작되는 예제에서 위와 같은 구조의 가변그리드를 만드는데,보면 알 수 있듯 container 라는 클래스의 div 안에 두 div가 가로로 꽉찬 구조이다.그런데 예제 코드를 직접 입력해서 실행해보니 책의 예시와는 다르게아래 그림과 같이 자꾸 두 번째 div가 밑으로 내려가는 것이었다. 책에서 제시한대로 코드를 입력하고 실행..