1 > 1000

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

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

웹페이지에 이미지나 영상을 넣을 때 가로 크기를 지정하지 않을 수도 있지만,가로 크기를 지정하고 싶을 수 있다.만약 가로 크기를 지정할 때 가로 속성 값을 %로 지정했을 때 width와 max-width는 무시할 수 없는 차이가 있다. width와 max-width의 차이 width 속성과 max-width 속성은 비슷해 보이지만 분명한 차이가 있다.width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만,max-width 속성은 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않는다. 이 곳을 클릭하면 직접 만든 예제 페이지로 이동한다.width: 100%로 지정한 경우가로 너비 값을 아무 것도 지정하지 않은 경우max-width: 100% 로 지정한 경..

일전에 워드프레스에서 css 커스터마이징을 하다가 이상한 일을 겪었다.여태 padding 값을 지정하면 전체 div의 사이즈는 변함이 없이 안쪽의 여백만 조절이 되었는데,그때는 padding 값을 지정하면 전체 div 사이즈가 변해버리는 것이었다. 당시에 padding은 div의 border 영역 안쪽 여백으로 이해하고 있었기 때문에,이런 현상이 이해가 안되어서 찾아보니 padding이 지정되는 방식이 두 가지가 있다는 것을 알고 깜짝 놀랐었다. 너비값을 조절하는 방법을 설정하는 box-sizing div의 여러 너비값을 조절하는 방법은 여러 가지가 있다.div 안의 콘텐츠가 얼마나 길어지든 간에 최우선적으로 콘텐츠가 다 보이도록 지정하는 방법도 있고,처음 디자인한 div의 가로와 세로 너비를 더이상 변..

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