요즘에는 프런트엔드의 기본기(HTML, CSS, JS)를 한번 전부 다져두었다. 간단한 건 클론코딩을 하고 조금 만져보는 것으로도 꽤나 경험이 되는 것 같다. 물론 프로젝트도 진행하고 있지만. 이번 주 안에는 최소한의 기능을 넣은 앱을 배포해보고 싶다. 어차피 남아도는 게 시간이라.
각설하고, 그래도 지금은 CSS쪽을 더 파고 싶었다. 일단 적어도 앱을 출시하기 위해서는 보이는 것, 적당히 모던해 보이는 게 필수라고 생각했기 때문이다. 물론 "반응형" CSS를 공부하는 건 다른 맥락에 있을 수도 있겠지만, 대충 그런 느낌이라는 것만 알아두면 된다. 도서관에서 책을 빌려서 지속적으로 보고 있는데, 빌린 책이라서 기록을 더 해두고 싶은 것도 있는 것 같다.
웹페이지 디자인을 기획할 때 간단하게 쓸 수 있는 방법은 우선 고정된 크기로 앱을 전부 디자인한 후, %, vmin, vmax등을 이용해서 치환하는 것인 것 같은데, 그런 점에서 일단 가장 간단하게 가변 단위부터 정리하고자 한다.
1. %(퍼센트 단위)
사실 책에서는 이 단위에 대한 명확한 설명을 찾지는 못했다. 다른 단위는 제대로 설명을 하는데 굉장히 자주 쓰는 이 단위에 대해서 딱히 큰 설명이 없다는 건 좀 이상했다고 생각했다. 그래서! 믿음직한 gpt 선생에 물어본 결과 다음과 같다 :
CSS에서 "%" 단위, 혹은 퍼센트 단위는 다른 크기에 대해 일정 퍼센티지(비율)로 상대적인 크기를 갖게 하기 위해서 사용되며, 주로 부모 요소의 크기에 대해서 그 비율을 적용하여 사용한다.
1. 상대적인 크기 조절 : % 단위는 상대적이고 다른 값에 의존한다. 예시로, 어떤 요소의 너비(width)를 50%로 정했을 때 부모 요소의 50%만큼의 너비값을 가질 것이다.
2. 적응형 레이아웃 : 이 단위는 주로 반응형 웹 기획에 쓰이는데, 요소들이 부모 요소의 크기에 따라서 적절히 크기를 조절하기 때문이다. 이런 성질은 모바일, 태블릿, PC 등 다양한 화면 크기에 디자인 레이아웃을 기획할 때 유용하다.
3. 다른 성질 : width, height말고도 padding, margin, font-size에도 이용될 수 있다. 간단히, margin을 10%로 설정하면 부모요소의 너비의 10%만큼 마진을 갖게 된다.
4. 맥락에 의존적이다 : % 단위를 쓰는 것은 그 단위가 쓰인 속성, 그리고 문서 내의 다른 맥락(다른 css)등에 따라서 효과가 달라질 수도 있다. 만약 margin, padding등에 쓰일 경우 언제나 부모 요소의 width, 즉 너비를 참조하는데, padding-top 과 같은 수직적인 요소를 지정하는 데도 width를 참조한다는 것이다.
물어보기를 잘한 듯 싶다. 살짝 더 공부가 되었다. 예제는 다음과 같다 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style>
#wrap {
width: 90%;
/* 960px 라고 가정 */
height: 500px;
margin: 0 auto;
border: 4px solid #000;
}
#wrap div {
width: 31.25%;
display: inline-block;
}
#wrap div:first-child {
padding: 50px 5.208333333333333%;
background: #1f518b;
}
#wrap div:first-child + div {
padding: 130px 13.541666666666667%;
background: #f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div>
</div>
</body>
</html>
2. em, rem(폰트 단위)
2-1. em
em은 대문자 "M"의 너비를 기준으로 만든 단위로, 16px가 1em에 해당한다... 만 사실 이건 제일 최상위의 폰트를 적용할 때만 그렇게 된다. "부모 요소의 1em"을 기준으로, 글자 크기를 지정하는 단위에 가깝다. 글자 크기가 상속되기 때문이다.
예를 들어, 최상단의 html요소를 기준으로, 부모 요소에게는 6em = 96px, 자식 요소에게는 4em = 64px 정도의 글자 크기를 적용하고 싶다면 아래의 예제처럼 작성을 해야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style>
#para-example {
font-size: 6em;
}
#para-example p {
font-size: 0.666666666666667em;
/* 64px / 94px */
}
</style>
</head>
<body>
<div id="para-example">
가변적인 폰트 1
<p>가변적인 폰트 2</p>
</div>
</body>
</html>가변적인 폰트 2
그냥 6em, 4em하고 쓰는게 아니라, 번거롭더라도 64px / 96px과 같은 계산과정을 거쳐야한다. 부모 요소에서 6em = 96px이 다시금 "1em"이란 단위로 지정된다고 생각하면 편하다. 그럼 #para-example을 기준으로, 1em = 96px이므로, 64px정도의 크기를 나타내기 위해서는 64 / 96 = 0.66666666667em 으로 아래의 p태그의 글자 크기를 지정한다.
2-2. rem
자 여기 까지 봤으면 em이 쓰기 어려운 단위겠구나... 생각이 들었을 것이다. 그런 당신을 위해서 조금은 더 친절한 단위가 존재한다. rem은 부모 요소를 기준으로 하지 않고 무조건 최상단의 html태그를 기준으로 크기를 지정해주는 아이이다. 위의 예시를 rem을 이용해서 그대로 재현해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style>
#para-example {
font-size: 6em;
}
#para-example p {
font-size: 4rem;
}
</style>
</head>
<body>
<div id="para-example">
가변적인 폰트 1
<p>가변적인 폰트 2</p>
</div>
</body>
</html>가변적인 폰트 2
3. vw, vh, vmax, vmin단위
하지만 위의 단위들은 사실 정확히는 가변단위로 쓰기는 어렵다. 브라우저 크기가 변한다고 글자가 늘어나거나 줄어들지는 않기 때문이다. viewport, 브라우저 화면에 따라서 변하는 위의 4개 단위들을 써주면 된다. 그렇다 두번째 문단은 끝까지 글을 읽지 않는 사람들을 위한 페이크
viewport width = vw / viewport height = vh는 웹브라우저의 너비 / 높이를 100으로 했을 때의 단위를 말한다. 1vw는 웹브라우저 너비의 100분 1, 1vh는 웹브라우저 높이의 100분의 1이라 생각할 수도 있다.
vmin과 vmax는 vw, vh를 비교해서 작은 것, 혹은 큰 것을 쓰는 옵션이다. 보통 화면은 가로가 넓으므로 vmin은 vh, vmax는 vw가 될 확률이 높다. 세로가 긴 화면이라면 반대가 될 것이다. 아래 예제를 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style>
.viewport-example p:nth-of-type(1){
font-size: 2vw;
}
.viewport-example p:nth-of-type(2){
font-size: 2vh;
}
.viewport-example p:nth-of-type(3){
font-size: 2vmin;
}
.viewport-example p:nth-of-type(4){
font-size: 2vmax;
}
</style>
</head>
<body>
<div class="viewport-example">
<p>크기 비교용 텍스트!</p>
<p>크기 비교용 텍스트!</p>
<p>크기 비교용 텍스트!</p>
<p>크기 비교용 텍스트!</p>
</div>
</body>
</html>
'프로그래밍 > CSS' 카테고리의 다른 글
| CSS margin padding 해도 안 사라지는 공백 (inline-block) (3) | 2023.12.21 |
|---|---|
| CSS 고급 선택자 2 - 속성 선택자 (0) | 2023.08.13 |
| CSS 고급 선택자 (0) | 2023.07.28 |
| CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정 (0) | 2023.05.31 |
