안녕하세요! 웹 디자인이나 코딩을 시작하다 보면 em, px, pt 같은 단위를 자주 보게 되죠. “이게 뭐지? 숫자 뒤에 왜 붙는 거야?“라는 궁금증이 생길 수 있는데요, 오늘은 이 세 가지 단위가 뭔지, 어디에 쓰이는지 초보자도 이해하기 쉽게 풀어보려고 해요. 비유도 곁들여서 설명할 테니, 편하게 읽어보세요!
단위가 왜 필요할까?
먼저, 이 단위들은 주로 웹사이트에서 크기를 정할 때 쓰여요. 예를 들어, 글자 크기, 버튼 크기, 여백 등을 설정할 때 “얼마나 크게? 얼마나 작게?“를 숫자와 단위로 표현하는 거예요. 마치 우리가 “물 500ml 주세요”라고 말하는 것처럼, 컴퓨터한테도 정확한 크기를 알려주는 거죠. 그럼 이제 em, px, pt가 뭔지 하나씩 알아볼게요!
1. px (픽셀, Pixel)
- 뭐예요?: px는 화면의 가장 작은 점 하나를 뜻하는 “픽셀”이에요. 고정된 크기 단위로, 절대적인 값을 나타내요.
- 쉽게 설명: 모니터나 스마트폰 화면은 작은 점들로 만들어져 있죠. px는 그 점 하나하나를 세는 단위예요. 예를 들어, font-size: 16px라고 쓰면 글자가 16개의 점 크기로 보인다는 뜻이에요.
- 특징:
- 어디에 쓰나요?: 버튼 크기, 이미지 크기, 여백 등 정확한 크기를 정할 때 좋아요.
- 비유: px는 마치 자로 재는 길이 같아요. “여기서 여기까지 5cm!“처럼 딱 정해진 길이를 주는 느낌이에요.
2. em
- 뭐예요?: em은 상대적인 단위예요. 기준이 되는 크기(보통 부모 요소의 글자 크기)에 비례해서 계산돼요.
- 쉽게 설명: em은 “내 부모 크기의 몇 배”라는 뜻이에요. 예를 들어, 부모 글자가 16px이고 font-size: 1.5em이라고 하면, 16 × 1.5 = 24px이 되는 거예요. 부모 크기가 바뀌면 같이 바뀌어요!
- 특징:
- 어디에 쓰나요?: 글자 크기, 여백, 패딩 등 비율을 맞추고 싶을 때 사용해요.
- 비유: em은 가족 안에서의 키 비교 같아요. “나는 아빠 키의 1.2배야!“처럼 기준에 따라 달라지는 느낌이에요.
3. pt (포인트, Point)
- 뭐예요?: pt는 인쇄물에서 주로 쓰이는 단위로, 1pt는 1/72인치예요. 절대적인 크기를 나타내요.
- 쉽게 설명: pt는 종이에 글자를 찍을 때 쓰던 전통적인 단위예요. 예를 들어, 워드에서 글자 크기를 “12pt”로 설정하면 익숙하죠? 웹에서도 가끔 쓰이지만, 주로 인쇄용 스타일시트(CSS)에 적합해요.
- 특징:
- 어디에 쓰나요?: PDF 출력이나 인쇄용 웹 디자인에서 많이 봐요.
- 비유: pt는 책이나 잡지의 글자 크기를 정하는 것 같아요. “이 책은 10pt로 인쇄합시다!“처럼 딱 정해진 느낌이에요.
비교해보기: 언제 뭘 써야 할까?
| 단위 | 특징 | 언제 좋아요? |
| px | 고정 크기 | 정확한 크기를 정하고 싶을 때 |
| em | 상대 크기 | 유연하고 비례적인 디자인 할 때 |
| pt | 인쇄용 단위 | 인쇄물이나 PDF 작업 할 때 |
예를 들어:
- 버튼을 딱 20px로 만들고 싶다? → px.
- 글자 크기를 부모의 1.5배로 하고 싶다? → em.
- 인쇄용 웹페이지를 만든다? → pt.
초보자가 기억할 팁
- px: “고정”이 키워드예요. 눈에 보이는 대로 딱딱 맞춰요.
- em: “비율”이 핵심이에요. 부모 크기에 따라 유동적이에요.
- pt: “인쇄”를 떠올리세요. 웹보다는 종이에 가까워요.
처음엔 px부터 써보고 익숙해지면 em을 연습해보는 걸 추천해요. pt는 인쇄 관련 작업 할 때만 기억하면 돼요!
em, px, pt는 웹 디자인에서 크기를 정하는 세 가지 도구예요. 각각 장단점이 있어서 상황에 맞게 쓰면 돼요. 마치 요리할 때 “고정된 계량컵(px)”, “눈대중 비율(em)”, “레시피북 단위(pt)“를 골라 쓰는 것과 비슷하죠.
웹 코딩 연습하다가 “이 단위가 뭐지?” 싶으면 이 글 다시 떠올려보세요. 궁금한 점 있으면 언제든 댓글로 물어보시고, 다음엔 더 재밌는 IT 이야기로 찾아올게요! 😊
즐거운 코딩 되세요!
최근댓글