HTML/CSS 1.3 · 1부. HTML 기초

글을 담는 태그

제목과 문단을 적습니다. 공백과 줄바꿈이 왜 무시되는지도 봅니다.

예상 학습 시간 15분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문

개념 설명

글에도 종류가 있습니다

같은 글자라도 제목인지 문단인지에 따라 다른 태그를 사용합니다. 브라우저가 그에 맞는 기본 모양으로 그리고, 검색 엔진과 화면 읽기 프로그램도 그 태그를 보고 문서의 짜임을 파악합니다.

최소 예제 · 편집 가능

제목은 h1 부터 h6 까지 여섯 단계입니다. 숫자가 커질수록 아래 단계입니다.

<h1>사원 안내</h1>
<p>부서별 담당자를 안내합니다.</p>

<h2>영업부</h2>
<p>담당은 홍길동입니다.</p>

<h2>개발부</h2>
<p>담당은 김철수입니다.</p>

제목 단계는 글자 크기가 아니라 문서의 짜임으로 고릅니다. 한 화면에 h1 은 하나이고, 그 아래 항목이 h2, 다시 그 아래가 h3 입니다. 크기가 마음에 들지 않으면 CSS 로 바꿉니다.

상세 사용법

HTML 에서 이어진 공백과 줄바꿈은 모두 한 칸으로 줄어듭니다. 코드에서 아무리 띄워도 화면에서는 한 칸입니다.

<p>여기에        빈칸을 많이 넣고

줄도
여러 번 바꿨습니다.</p>

줄을 실제로 바꾸려면 <br> 을 넣습니다. 닫는 태그가 없는 태그입니다.

<p>서울시 중구 세종대로 100<br>
2층 개발부</p>
<hr>
<p>위와 아래를 <code>hr</code> 이 갈랐습니다.</p>

상세 사용법

강조에는 두 가지가 있습니다. 보이는 모양은 굵게와 기울임이지만, 뜻이 다릅니다.

<p>마감은 <strong>금요일 오후 6시</strong> 입니다.</p>
<p>이 책의 제목은 <em>열두 달</em> 입니다.</p>
<p>명령은 <code>dotnet build</code> 입니다.</p>

흔한 실수

줄을 띄우려고 <br> 을 여러 번 넣습니다. 문단 사이를 띄우는 것은 CSS 의 일입니다. <p> 를 나누어 적고 간격은 2부에서 정합니다.
제목 단계를 크기로 고릅니다. 글자를 작게 하려고 h1 대신 h3 을 쓰면 문서의 짜임이 어긋납니다. 크기는 CSS 로 바꿉니다.
<p> 안에 <p> 를 넣습니다. 브라우저가 앞의 문단을 먼저 닫아 버리고, 적은 것과 다른 짜임이 됩니다. 오류는 나지 않아 화면만 보아서는 알기 어렵습니다.

실습 문제

1. 안내문 짜기 난이도 하

제목 하나와 소제목 둘로 된 안내문을 작성하십시오. 소제목마다 문단을 하나씩 두고, 한 곳에는 strong 으로 중요한 부분을 표시하십시오.

제목은 h1, 소제목은 h2 입니다. 위 첫 예제의 짜임을 그대로 따라가면 됩니다.

<h1>도서관 이용 안내</h1> <h2>이용 시간</h2> <p>평일은 오전 9시부터 오후 6시까지입니다.</p> <h2>대출</h2> <p>한 번에 <strong>다섯 권</strong> 까지 빌릴 수 있습니다.</p>

요약