반응형 타이포그래피 어떻게 할 수 있을까?
By Sera on
웹은 모바일, 태블릿, 노트북, 데스크탑 등 다양한 화면 크기에 맞춰 사용된다. 모바일도 종류에 따라 화면 크기가 다르기에 고려해야 할 것이 많다. responsible 태그를 통해 반응형 웹에서 적용이 가능한 이미지, 표 등을 찾을 수 있다. 원한다면 이전 내용을 보시기 바란다. 이번 장에서는 세가지 방법의 반응형 타이포그래피를 설명한다. 각각의 장단점이 있으니 원하는 방법을 골라서 사용하기 바란다.
1.미디어쿼리
보편적으로 많이 사용하는 방법이다. 단점이라 꼽으면 스타일을 별도로 하나씩 작성을 해야 하므로 코드를 많이 써야 한다.
미디어쿼리
보편적으로 많이 사용하는 방식미디어쿼리
보편적으로 많이 사용하는 방식p {
font-size: 2em;
}
strong {
font-size: 1.5em;
}
/* 최소 태블릿 화면 크기에서 폰트를 1.5배 확대한다 */
@media (min-width: 768px) {
p {
font-size: 3em;
}
strong {
font-size: 2.25em;
}
}
2.css변수를 사용
코드 양을 줄이고 유지관리가 용이하다.
css변수
유지관리가 용이한 방식css변수
유지관리가 용이한 방식:root {
--text-multiplier: 1;/*변수 선언*/
}
/* 최소 태블릿 화면 크기에서 폰트를 1.5배 확대한다 */
@media (min-width: 768px) {
:root {
--text-multiplier: 1.5;
}
}
/* calc()를 사용하여 코드를 줄였다. */
p {
font-size: calc(2em * var(--text-multiplier));
}
strong {
font-size: calc(1.5em * var(--text-multiplier));
}
3. css clamp() 사용
한 줄의 코드에 모바일(최소값), 데스크톱(최대값)에서 폰트값 설정이 가능하다. 하지만 익스플로러는 지원하지 않고 있다 익스플로러 버리세요 여러분.
css clamp()
익스플로러 미지원css clamp()
익스플로러 미지원p, strong{
/* clamp(최소값, 우선값, 최대값) */
font-size: clamp(var(--min), var(--val), var(--max));
}
p {
--min: 2em;
--val: 5vw; /* 화면크기의 5%로 폰트 값을 지정 */
--max: 3em;
}
strong {
--min: 1.5em;
--val: 4vw; /*화면크기의 4%로 폰트 값을 지정 */
--max: 2.25em;
}
번외로 이런식으로 하는 법도 있음.
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
font-size:calc(.1rem + .55vmin + .1rem + .55vmax);
font-size: calc(.5em + 1vw);
font-size: calc(.5 * (1.5vh + 1.1vw));
}
훈민정음(訓民正音) : 백성을 가르치는 바른 소리 -세종대왕(feat.집현전)
훈민정음(訓民正音) : 백성을 가르치는 바른 소리 -세종대왕(feat.집현전)
훈민정음(訓民正音) : 백성을 가르치는 바른 소리 -세종대왕(feat.집현전)
훈민정음(訓民正音) : 백성을 가르치는 바른 소리 -세종대왕(feat.집현전)
Explore more like this
반응형 웹에서 테이블 처리는 어떻게 해야 할까?
반응형에서 table을 쓰지 않고, ul li 또는 div로 만드는 경우가 많다. 그러나 table이 반드시 필요한 예도 있다. 그럴 때 사용할 수 있는 두 가지 방법을 소개한다. 여러 가지로 응용이 가능하니...
반응형 웹에서 이미지 활용 방법
이번 장에서는 반응형 웹에서 이미지 비율을 유지하고, 디바이스 크기에 따라 이미지 용량을 설정하는 방법에 대해 설명하겠다. 생각 외로 반응형 웹을 작업하다 보면 이미지 비율 문제가 많이 대두된다. 커다란 가로로 된...