CSS 미디어 쿼리에 대해서 알아보자
안녕하세요 탐구소년입니다. 우리는 PC, 태블릿, 스마트폰 등 여러 가지 기기로 웹 사이트에 접속하곤 하는데요. 어떤 기기로 사이트에 접속하냐에 따라 웹 사이트의 형태가 달라지는 것을 종종 확인할 수가 있습니다. 이는 저절로 이루어지는 것이 아니고, 제작 과정에서 웹사이트를 반응형으로 제작했기에 가능한 것입니다. 웹 사이트를 제작할 때에, 하나의 웹 사이트를 기기마다 다르게 표현할 수 있는 방법들은 여러가지가 존재하는데요. 오늘은 그 중에서도 많이 사용되는 방법인 미디어쿼리에 대해서 정리를 해보도록 하겠습니다. 미디어쿼리란? 미디어 쿼리(mediaqueri)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈입니다. 미디어 쿼리를 이용한 사이트는 웹 사이트에 접속하..
CSS 단위 px, rem, em, %
안녕하세요 탐구소년입니다. 탐-하 ㅋㅋ CSS는 주로 HTML문서 스타일을 정의해줄 때 사용되는 언어입니다. CSS는 사이즈를 표현할 때 여러 가지 단위를 사용하기 때문에 각각의 단위의 쓸모를 잘 구별해서 사용해야 합니다. 특히나 반응형 웹을 만들 때 이들에 대한 이해가 정말 중요한데요. 여러가지 단위가 있지만, 이번 글에서는 사용 빈도가 높은 px, rem, em, % 에 대해서만 알아보겠습니다. 먼저, 각각의 특징! - px : 절대값으로 사용되는 단위. 고정된 값이므로 사용하기 편하지만 반응형 웹에는 적절하지 않습니다. - rem : 최상위 요소인 요소에 비례하여 사이즈를 갖게 되는 단위. 에 font-size가 16px로 되어 있다면 1rem은 자동적으로 16px과 같아집니다. - em : 부모 ..
HTML 작성 시 viewport 지정하는 이유
안녕하세요 탐구소년입니다. 웹 사이트를 만들기 위해서는 HTML, CSS, Javascript 세 가지의 프로그래밍 언어를 익혀야 합니다. 이 세 언어가 웹 사이트를 만드는 데 기본이 되는 언어들이기 때문입니다. 싫어도 어쩔 수 없어요. 해야 합니다(ㅠㅠ)! 그런데 일반적인 고정형 웹사이트가 아닌, 다양한 기기에서 유연하게 디자인을 바꾸어 가며 표시되는 '반응형 웹 사이트'를 제작하기 위해서는 이 외에도 추가적으로 알아야 하는 개념이 한 가지 더 있습니다. 바로 '뷰포트(viewport)'가 그것입니다. 웹 사이트를 만들 때 이를 반응형으로 제작해주지 않으면, 모바일 화면에서는 PC화면일 때와 똑같은 형태를 유지하되 비율만 축소된 채 웹사이트가 표시되어 보기가 무척 불편합니다. PC화면에서 보이는 내용이..