개요
아래 내용은 CSS의 기본 텍스트 스타일(font-style, font-family, font-size)을 먼저 정리한 뒤, 글자/박스에서 자주 쓰는 길이 단위(px, %, em, rem, vw, vh)와 박스 모델(margin, padding)을 실습 코드로 확인하고, 마지막으로 테이블에 스타일을 적용하는 예제까지 한 번에 정리한 글이다.
문자 스타일 설정 (font 계열)
텍스트 스타일은 가장 기본적으로 font-style, font-family, font-size로 시작한다.
font-style: 글자 기울임(예: italic)font-family: 적용할 글꼴 목록을 우선순위로 지정하며, 마지막에serif,sans-serif같은 generic family를 붙이는 형태가 흔하다.font-size: 글자 크기를 지정하며%,em,rem같은 “폰트 기준 상대 단위”도 여기서 같이 자주 등장한다.
예제 코드에서는 기본 폰트 출력 후, italic / Times 계열 / 24px을 각각 바로 확인할 수 있게 구성했다.
절대 크기 vs 상대 크기 (px, %, em, rem)
CSS 단위는 크게 절대 단위와 상대 단위로 나뉜다.
px: 절대 길이 단위처럼 사용되며, 고정 크기를 줄 때 직관적이다.%: 보통 부모(상위) 요소의 크기나 글자 크기에 대한 비율로 동작한다.em: 현재 요소(또는 부모)의 글자 크기를 기준으로 상대적으로 계산된다.rem: 최상위(root) 요소인html의 글자 크기를 기준으로 상대적으로 계산된다.
예제에서 div의 font-size: 20px을 부모로 두고, 자식에서 %/em/rem을 섞어 써서 “무엇을 기준으로 커지는지”를 비교하게 되어 있다.
<p>글자의 기본 크기</p>
<p style="font-size: 150%;">부모 글자의 1.5배 크기</p>
<div style="font-size: 20px;">
부모텍스트
<p style="font-size: 150%;">자식 텍스트 - %</p>
<p style="font-size: 1.5em;">자식 텍스트 - em</p>
<p style="font-size: 1.5rem;">자식 텍스트 - rem</p>
</div>
너비/높이 단위 (%, vw, vh)
레이아웃에서는 글자 크기뿐 아니라 요소의 width, height에도 단위를 자주 쓴다
%: 보통 부모 요소 크기를 기준으로 상대적으로 결정된다vw: 뷰포트 너비의 1%를 의미하는 단위(예:5vw는 화면 너비에 따라 글자 크기가 같이 변함)vh: 뷰포트 높이의 1%를 의미하는 단위(예:20vh는 화면 높이의 20%)
예제는 width: 300px처럼 고정 박스와, width: 50% + height: 20vh처럼 “부모/뷰포트 기준 상대 박스”를 같이 두어서 차이를 바로 확인할 수 있다.
<div style="width: 300px; height: 150px; background-color: lightgray; margin-bottom: 10px;">
고정 너비/높이(300px x 150px)
</div>
<div style="width: 50%; height: 20vh; background-color: lightblue; margin-bottom: 10px;">
부모 너비의 50%, 뷰포트 높이의 20vh
</div>
margin과 padding의 이해
박스 모델에서 가장 먼저 체감해야 하는 개념이 margin과 padding이다.
margin: 요소 바깥쪽 여백(요소와 요소 사이 간격을 만든다).padding: 요소 안쪽 여백(테두리와 콘텐츠 사이 간격을 만든다).
예제처럼 margin: auto를 주면 “가로 방향으로 남는 공간을 이용해서 가운데 정렬”되는 패턴을 자주 쓴다.
또 text-align: center는 블록 안의 인라인 콘텐츠(텍스트 등)의 수평 정렬을 담당한다.
<div style="border: 5px solid black; width: 200px; height: 100px;">기본 div박스</div>
<div style="border: 5px solid black; width: 200px; height: 100px;
margin: 20px;">margin: 20px</div>
<div style="border: 5px solid black; width: 200px; height: 100px; margin: auto;">margin: auto</div>
<div style="border: 5px solid black; width: 200px; height: 100px; padding: 20px;">padding: 20px;</div>
<div style="border: 5px solid black; width: 200px; height: 100px; place-content: center;">place-content: center;</div>
<div style="border: 5px solid black; width: 200px; height: 100px; text-align: center;">align: center;</div>
테이블 스타일 적용 예제
테이블은 기본적으로 테두리가 겹쳐 보일 수 있어서 border-collapse: collapse를 자주 적용한다.
예제는 margin: auto로 테이블을 가운데로 보내고, text-align: center로 셀 내부 텍스트를 정렬한 뒤, thead에 배경색을 넣어 헤더를 구분했다.
<table border="1" style="border-collapse: collapse; margin: auto; width: 300px; height: 130px; text-align: center;">
<caption style="text-align: left;">테이블 A</caption>
<thead style="background-color: lightgray;">
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터1</td>
<td>데이터2</td>
<td>데이터3</td>
</tr>
<tr>
<td>데이터1</td>
<td>데이터2</td>
<td>데이터3</td>
</tr>
</tbody>
</table>
