반응형 타이포그래피 어떻게 할 수 있을까?

웹은 모바일, 태블릿, 노트북, 데스크탑 등 다양한 화면 크기에 맞춰 사용된다. 모바일도 종류에 따라 화면 크기가 다르기에 고려해야 할 것이 많다. responsible 태그를 통해 반응형 웹에서 적용이 가능한 이미지, 표...

반응형 웹에서 테이블 처리는 어떻게 해야 할까?

반응형에서 table을 쓰지 않고, ul li 또는 div로 만드는 경우가 많다. 그러나 table이 반드시 필요한 예도 있다. 그럴 때 사용할 수 있는 두 가지 방법을 소개한다. 여러 가지로 응용이 가능하니...

웹접근성

웹접근성이란? World Wide Web을 창시한 팀 버너스 리는 웹이란 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간이라고 정의한다. 즉, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를...

브라우저에서 사용할 수 있는 사이즈는 뭐가 있을까?

2000년대 초에는 %와 px로만 홈페이지를 만들어왔다. 그 당시에는 반응형이라는 말이 따로 없고, 넓이 1000px로 고정된 사이트만 있었기 때문이다(아마도). 조금 더 나아가 모바일 웹을 만들기도 했다. 당연히 똑같은 디자인일 수 없고,...

반응형 웹에서 이미지 활용 방법

이번 장에서는 반응형 웹에서 이미지 비율을 유지하고, 디바이스 크기에 따라 이미지 용량을 설정하는 방법에 대해 설명하겠다. 생각 외로 반응형 웹을 작업하다 보면 이미지 비율 문제가 많이 대두된다. 커다란 가로로 된...

CSS변수선언

변수는 대소문자를 구분하며 변수값은 하위 요소에 상속된다. CSS에서 변수를 선언할 때는 :root라는 가상선택자를 최상위 엘리먼트에 선언하여 모든 요소에서 변수를 사용할 수 있도록 한다.(대표적으로 부트스트랩) 각 요소에 변수를 지정해도 상관은 없지만,...