web

HTML 기초 02

HTML 기초 02입니다. 글자 관련 태그, CSS font-size/color/font-family, strong/em/mark/code, 예약 문자 entity와 브라우저 확인을 정리했습니다.

devmes

• 조회 90

HTML 기초 02: 글자 관련 태그와 예약 문자

HTML에서 글자 크기, 색상, 글꼴, 장식을 표현할 수는 있지만, 현재 기준으로는 구조는 HTML이 담당하고 시각 표현은 CSS가 담당하는 방식이 좋다. 설명의 글자 관련 태그 흐름을 유지하면서, semantic tag와 CSS를 함께 사용하는 예제로 정리한다.

기본 HTML 파일

<!doctype html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <title>HTML text basic</title>
 <style>
 body {
 font-family: system-ui, sans-serif;
 line-height: 1.6;
 }.lead {
 font-size: 20px;
 color: #1f6feb;
 }.warning {
 color: #b42318;
 font-weight: 700;
 }
 </style>
</head>
<body>
 <h1>글자 관련 태그</h1>
 <p class="lead">CSS로 글자 크기와 색상을 조정한다.</p>
 <p><strong>중요한 내용</strong>은 strong으로 표시한다.</p>
 <p><em>강조</em>가 필요한 문장은 em을 사용한다.</p>
 <p class="warning">경고 문구는 class와 CSS로 표현한다.</p>
</body>
</html>

글자 크기

예전에는 <font size="...">를 쓰기도 했지만, 현재는 CSS font-size를 사용한다.

<p style="font-size: 18px;">18px text</p>

글자 색상

<p style="color: #1f6feb;">blue text</p>

글꼴 지정

body {
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

글자 장식과 의미

태그의미
<strong>중요한 내용
<em>문맥상 강조
<mark>하이라이트
<small>부가 설명
<code>코드 또는 명령어

예약 문자

HTML에서 <, >, &는 tag나 entity로 해석될 수 있으므로 entity로 적는다.

표현entity
<&lt;
>&gt;
&&amp;
"&quot;

브라우저에서 확인

python3 -m http.server 8000

브라우저에서 http://127.0.0.1:8000/로 접속해 결과를 확인한다.

마무리

HTML 글자 태그를 배울 때는 화면에 굵게 보이는지만 보지 말고, 의미가 있는 태그인지와 CSS로 표현할 부분인지를 나누어 생각해야 한다. 중요한 텍스트는 strong, 강조는 em, 시각 스타일은 CSS로 처리하는 방식이 유지보수에 좋다.

문서 링크

BGM EVER