's IT STORY 's IT STORY

주축 방향으로 다양하게 플렉스 아이템 배치하기 플렉스 아이템은 플렉서블 박스 주축의 시작점부터 배치됩니다. 만약 주축 방향으로 박스를 다양하게 배치하고 싶다면 다음의 속성과 속성값을 사용하세요. 속성명 속성값 적용 요소 justify-content flex-start(기본값), flex-end, center, space-between, space-around 플렉서블 박스 속성값명 속성값 설명 flex-start 자식 박스를 부모 박스 주축의 시작점으로 배치하며, 기본값입니다. flex-end 자식 박스를 부모 박스 주축의 끝점으로 배치합니다. center 자식 박스를 부모 박스의 중앙으로 배치합니다. space-between 플렉서블 박스에 빈 공간이 있을 때 사용합니다. 첫 번째 박스와 마지막 박스는..

플렉서블 박스 기본 개념 이해하기 플렉서블 박스(Flexible Box)를 이용하면 가변적인 박스를 아주 손쉽게 만들 수 있어 반응형 웹과 플렉서블 박스는 환상의 콤비라고도 할 수 있습니다. 이미 해외의 유명 웹 기술 잡지인 'W.E.B'에서 최고 신기술상을 수상하기도 했으며 웹 기술 중 가장 주목을 받고 있는 기술입니다. 기존의 속성들로는 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 불가능했습니다. 하지만 플렉서블 박스가 등장하면서 박스 요소들을 다양하고 자유롭게 조작할 수 있게 되었습니다. 예로 플렉서블 박스의 특정 속성값을 중앙으로만 설정하면 박스들을 중앙으로 배치할 수 있으며, 여러개의 박스가 나란히 있을 때는 가장 높은 크기의 박스에 맞춰 모든 박스의 높이를 확장하는 등 유연하게 작동하는..

화면의 크기나 환경에 따라 웹사이트를 변경하는 기술, 미디어 쿼리 미디어 쿼리(Media Queries)는 사실 새로운 기술이 아닙니다. 이미 오래 전에 미디어 타입이라는 이름으로 등장한 적이 있는데, 미디어 타입은 말 그대로 미디어의 종류만 감지하기 때문에 기기의 세부적인 사항들은 감지할 수가 없었습니다. 또한 예전에는 기기의 종류가 다양하지 않아 사용성에도 의구심을 갖는 사람들이 많아 거의 사용하지 않았던 기술이었죠. 하지만 CSS3가 등장하면서 이 미디어 타입이라는 기술은 '미디어 쿼리'라는 이름으로 바뀌었고 기기의 종류뿐만 아니라 해상도, 비트 수, 가로, 세로 여부 등 세밀한 부분까지 감지할 수 있는 기술이 탑재되면서 반응형 웹의 시작과 함께 웹 개발의 새로운 지평을 열고 있다는 찬사를 받고 있..

폰트도 자유자재로! 가변 폰트 이용하기 웹사이트를 구성하는 요소는 여러 가지가 있지만 그중에서도 글자, 즉 폰트는 웹사이트에서 빠져서는 안 될 핵심 요소 중 하나입니다. 기존에 웹사이트를 개발할 때는 고정 단위인 픽셀(px)을 많이 사용했습니다. 하지만 픽셀은 모니터의 해상도를 기준으로 하기 때문에 화면이 확대되거나 축소되는 환경에는 맞지 않습니다. 웹 페이지를 표시하는 모니터 해상도에 따라 픽셀 크기가 달라지기 때문이죠. 웹 브라우저에서 정확하게 글자 크기를 나타내려면 상대적인 단위인 em을 사용하는 것이 좋습니다. em 단위는 대문자 M의 너비를 1cm으로 표현한 것으로, 16px이 1cm에 해당합니다. (최신 브라우저는 픽셀(px) 단위를 사용해도 축소, 확대가 가능합니다.) 글자를 가변적이게 만들..

가변 마진과 가변 패딩 이해하기 웹사이트의 요소에 마진과 패딩을 설정할 때는 모든 박스들을 감싸고 있는 wrap과 같은 요소들의 너빗값을 고려하여 요소의 마진값과 패딩값을 지정해야 합니다. 만약 너빗값을 고려하지 않은 상태로 마진값과 패딩값들을 설정하면 의도했던 대로 레이아웃이 나오지 않거나 박스들이 밀려 아래로 떨어지는 문제가 생길 수 있습니다. 이는 반응형 웹에서도 마찬가지지만 크기가 가변값으로 설정된다는 차이가 있습니다. 여기서는 가변 마진과 가변 패딩을 설정하는 방법을 알아보고 실습해 보겠습니다. 간격을 자유자재로! 가변 마진 설정하기 반응형 웹사이트에서는 모든 요소가 가변적이어야 합니다. 구조상의 간격 역시 마찬가지죠. 기존의 고정되어 있는 마진(여백)을 변할 수 있게 설정해줘야 합니다. 가변 ..

본격적으로 가변 그리드 배우기 이제부터는 본격적으로 가변 그리드에 대해 알아보고 가변 그리드를 이용한 가변 마진 그리고 가변 패딩도 함께 알아보겠습니다. 가변 그리드 공식 이해하기 앞에서 간단히 % 값을 이용해서 가변 크기의 박스를 만들어 보았습니다. 하지만 사실상 가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술입니다. 공식은 다음과 같습니다. (가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 크기의 % 값 예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px이고, 가변 크기로 만들 박스의 가로 너비가 300px이라면 노란 박스를 가변 크기로 만들기 위한 공식은 다음과 같습니다...

반응형 웹 제작을 위한 핵심 기술 맛보기 반응형 웹을 제작할 때는 여러 가지 기술이 필요합니다. 화면 크기나 환경의 변화를 감지하는 기술, 화면 크기를 정확하게 제어하는 기술, 그리고 감지한 화면 크기로 변환하는 기술 등 다양한 기술이 필요합니다. 이 기술들에 대해서는 02장에서 살펴보기로 하고 우선 여기서는 반응형 웹 제작에 필요한 네 가지 기본 개념만 익히고 넘어가겠습니다. 픽셀은 한계가 있다! - 가변그리드 우선 가변 그리드(Fluid Grid)라는 개념을 이해하고 있어야 합니다. 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술입니다. '가변'또는 '가변적이다'라는 말은 무슨 의미일까요? 학창시절 과학 시..

반응형 웹이란? 반응형 웹이 세상에 나온 이유 2007년, 처음으로 모바일 기기가 세상에 선을 보이자 사람들은 열광했습니다. 이제야 기본적인 검색뿐만 아니라 예약, 주문까지 언제, 어디서든 할 수 있게 되었다고 소리치면서 말이죠. 하지만 모바일 기기의 인터넷 사용에는 문제가 있었습니다. 바로 모바일에서 인터넷을 사용하면 모든 웹사이트들이 모바일 화면 크기로 축소되어 보인다는 점입니다. 그래서 등장한 것이 '모바일 웹'입니다. 모바일 웹과 반응형 웹 모바일 기기에 최적화된 웹사이트를 제공하기 위해 모바일 웹이 등장하면서 사람들은 쾌적한 웹 사용 환경을 접할 수는 있었지만 곧바로 다른 문제에 봉착하게 되었습니다. 모바일 기기뿐만 아니라 태블릿 기기, 패블릿(스마트 폰과 태블릿의 합성어) 기기 등 모바일 기기..