TIL / CSS 기초 : 단위(px, em, rem), CSS 레이아웃 구성 방법(flex, grid), font-face
✓ 2023.02.17 TIL
1. 단위 - px, em, rem
2. CSS 레이아웃 구성 방법 - flex, grid
3. font-face
1️⃣ 단위 - px, em, rem
(1) px (고정적인 단위)
: px은 우리가 흔히 알고 있는 픽셀값을 의미한다. 즉, 해상도를 지정할 때 사용하는 단위다.
다음에서 살펴볼 em, rem에 비해 고정값 영향을 많이 받는 단위다. 많은 웹 사이트에서 px 단위를 많이 사용하긴 하지만 픽셀값을 한번 사용하면 값을 변경하기가 번거롭기 때문에 px 사용을 많이 줄이고 있는 추세다.
→ 반응형 웹 사이트를 만들게 된다면 px 사용은 적합하지 않을 수 있다.
(2) em (가변적인 단위)
: em은 px에 비해 가변적인 단위이지만 그럼에도 불구하고 관리가 어려울 수 있다는 단점이 있는 단위다.
먼저, em은 상위 요소의 폰트 사이즈에 영향을 받는 단위다.
→ 바로 위에 위치한 상위 요소에 영향을 받는다.
<div class="parent"> -> font-size: 10px;
<p>em 단위 알아보기</p> -> font-size: 2em;
</div>
→ p태그는 상위 요소인 parent div 태그의 폰트 사이즈에 영향을 받아,
10px x 2 = 20px이 된다.(3) rem (가변적인 단위)
: rem은 em과 같이 가변적인 단위다. em과 다른 점은, em이 상위 요소의 폰트 사이즈에 영향을 받았다면 rem은 최상위 요소를 기준으로 변하는 단위다. 즉, 상위 요소가 아니라 가장 위에 위치한 최상위 요소에 영향을 받기 때문에 em보다는 관리가 용이하다는 점이 특징이다.
더불어, rem의 경우 크롬의 폰트 사이즈에도 바로 반응하기 때문에 사용자를 위해 사용하기 좋은 단위다.
<html> -> font-size: 10px;
<div class="parent"> -> font-size: 2em;
<p>em 단위 알아보기</p> -> font-size: 3em;
</div>
</html>
→ parent div는 html(최상위) 요소의 영향을 받아 10px x 2 = 20px이 된다.
→ p태그의 경우 html(최상위) 요소의 영향을 받아 10px x 3 = 30px이 된다.원래는 rem을 사용하는 것이 맞지만, 단위들마다 장점과 단점이 분명히 존재하기 때문에 상황에 맞게 사용하는 것이 좋다.
🔗 참고
[CSS] 폰트 사이즈 px, em, rem 차이
2️⃣ CSS 레이아웃 구성 방법 - flex, grid
CSS 레이아웃을 구성하는 방법은 다양하지만 가장 최신 기술이면서 많이 사용되는 방법은 flex와 grid다.
(1) flex
→ flex는 수평과 수직 구성이 모두 가능한 레이아웃 구성 방법이다.
display: flex; 속성을 줌으로써 flexBox를 사용할 수 있다.
flexBox에는 다양한 속성들이 있는데 기본적으로 flex-direction 을 통해 수직 혹은 수평으로 레이아웃을 구성할지 정할 수 있다.
justify-content 의 경우에는 주 축 정렬 방법을 설정하는 속성이며 align-content 와 align-items 은 교차 축 정렬 방법을 설정하는 속성인데 content의 경우에는 2줄 이상일 때, items는 1줄일 때 사용한다.
flex의 경우, float로 레이아웃을 구성하는 것보다 더 효율적으로 배치할 수 있다는 점이 장점이다. 또한 위에 언급한 속성 말고도 다양한 flexBox 속성들이 있어 원하는 레이아웃으로 자유롭게 구성할 수 있다.
(2) grid
→ grid는 flex보다 좀 더 자유로운 방법이라고 할 수 있을 것 같다. flex가 한 방향의 레이아웃 시스템이라면 grid는 두 방향의 레이아웃 시스템이라고 할 수 있다. 그렇기 때문에 flex보다 더 복잡하고 섬세한 레이아웃 구성이 가능하다는 장점이 있다.
<div class="wrap">
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
</div>
-> 해당 html 코드를 사용해서 grid 적용하기.wrap {
width: 400px;
height: 400px;
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"A B"
"C D";
-> grid로 가로 세로 각각 2등분을 해서 총 4개의 구역을 만든다는 의미!
-> "A B"
"C D" 가 레이아웃 모양이라고 생각하면 된다.
}
.A {
background-color: lightcoral;
grid-area: A;
-> 그 중 A구역에는 class="A"를 할당
}
.B {
background-color: skyblue;
grid-area: B;
-> 그 중 B구역에는 class="B"를 할당
}
.C {
background-color: lightseagreen;
grid-area: C;
-> 그 중 C구역에는 class="C"를 할당
}
.D {
background-color: lightpink;
grid-area: D;
-> 그 중 D구역에는 class="D"를 할당
}flex도 많이 사용하는 방법이지만 grid는 flex보다 내 입맛대로 내 마음대로 자유롭게 레이아웃을 구성할 수 있다는 점에서 현재 가장 많이 사용하는 레이아웃 구성 방법이기도 하다.
🔗 참고
이번에야말로 CSS Flex를 익혀보자
이번에야말로 CSS Grid를 익혀보자
3️⃣ font-face
: font-face는 CSS 스타일에서 font에 관련한 속성이다.
font-face는 url을 통해 글꼴을 가져와서 직접 font-family로 지정하여 사용할 수 있는 font 속성이다.
만약 특정 폰트를 사용하고 싶다면 폰트를 다운로드 받아 폴더에 넣고 @font-face로 해당 폰트를 지정해 사용할 수 있다.
@font-face {
font-family: neverFont;
src: url(./font/Never\ Brat.ttf);
}
-> url로 경로를 지정
-> neverFont라는 이름으로 저장
-> font-family: nverFont;로 사용 가능👉🏻 느낀 점 / 다짐
css 단위나 레이아웃 구성 방법의 경우 css의 가장 중요한 부분들이라고 할 수 있을 것 같다.
전에는 매번 px 단위만 사용을 했었는데 앞으로는 em, rem을 자주 사용해서 익숙해질 수 있도록 해야겠다.
더불어, 처음 grid 방식을 알게 되었는데 자주 사용했던 flexBox보다 레이아웃을 구성하는 데 있어 더 효율적이고 깔끔한 방법인 것 같다. 직접 레이아웃을 구성하고 콘텐츠를 각각의 구역에 할당을 하는 방법 자체가 마음에 들었고 또 재밌게 느껴지기도 했다. em, rem과 마찬가지로 grid도 자주 사용하면서 손에 익혀야 할 것 같다.
