HTML, CSS, JAVASCRIPT에 관한 내용은 '이지스퍼블리싱' 출판사의 "Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석"이라는 책을 공부하고 요약 및 정리한 것입니다.
이제 웹 문서에 입력할 다양한 내용들에 대해 알아보겠다.
먼저 제목을 나타내는 <hn> 태그가 있다. 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다. <hn> 태그에서 h는 제목을 뜻하는 heading의 줄임말이고, n의 자리에는 1부터 6까지의 숫자가 들어가며 6으로 갈수록 제목의 크기가 작아진다. 제목 태그는 반드시 닫는 태그도 사용해야 한다.
<p> 태그는 닫힌 부분까지 묶은 부분을 하나의 텍스트 단락으로 만들어 준다. 텍스트 단락이라는 것은 하나의 단락을 앞뒤로 한 덩어리로 만들어서 다음 부분과의 사이에 빈 줄을 넣어준 것을 말한다. 다시 한번 말하자면, <p> ~ </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어 진다는 것이다. 그리고 만약 텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시할 수 없을 경우 자동으로 줄이 바뀐다.
...
<h1>사과</h1>
<p>과육은 기본적으로 노란색에서 연두색이다.</p>
<p>일반적으로 한국에서 말하는 사과는
새콤달콤하면서 아삭아삭 씹히는 탄력이 있다.</p>
<p>대부분의 영양성분은 사람들이 잘 먹지 않는 껍질에 몰려있다.</p>
...그렇다면 텍스트 단락을 만들 때 원하는 위치에서 줄을 바꾸려면 어떻게 해야 할까? 바로 이때 <br> 태그를 사용하면 줄을 바꿀 수 있다. <br> 태그는 한 단락 안에서 화면에 보기 좋게 줄바꿈을 해주는 역할을 한다. <br> 태그가 들어가는 바로 그 위치에서 줄이 바뀌어 따로 닫는 태그가 필요없다. 위의 예시에서 살펴보면 "말하는 사과는" 바로 뒤에 <br> 태그를 붙여주면 된다.
※<br> 태그와 <p> 태그의 차이점에 대해 다시 정리해보자면, <br> 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시할 수 있다. 하지만 실제로 단락이 만들어진 것은 아니므로 CSS를 이용해서 텍스트 스타일을 적용할 때 문제가 발생한다. 따라서 텍스트 단락을 만들 때는 <p> 태그를 사용해야 한다. ※
우리는 보통 다른 사람의 말이나 책의 내용을 인용할 때 큰 따옴표(")를 사용한다. 하지만 웹 브라우저에서는 이렇게 표시한 인용문을 인식하지 못하기 때문에 인용문으로 인식할 수 있게 <blockquote> ~ </blockquote> 태그로 감싸주어야 한다. 이렇게 하면 웹 브라우저는 <blockquote> 태그 안의 내용을 다른 텍스트보다 약간 들여 쓴다.
만약 텍스트를 강조하기 위해 굵게 표시하려면 어떻게 해야 할까? 바로 <strong>, <b> 태그가 있다. 다만 <b> 태그는 굵게만 표시해주고 강조 부분은 아닌 부분에 사용하고 강조까지 하고 싶다면 <strong> 태그를 사용하면 된다.
기울인 텍스트를 입력해주는 태그도 존재한다. <em> 태그와 <i> 태그이다. 전자는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용하면 되고, 후자는 생각이나 관용어구 등에 사용한다. 간단히 정리하면 강조하고 싶다면 <em> 태그, 단순히 다른 텍스트들과 구별하고 싶은 거면 <i> 태그를 사용하면 된다.
이외에도 부가 정보같이 작게 표시하고 싶은 부분이 있다면 <small> 태그, 화학식이나 로그의 밑과 같이 아래 첨자를 표시하고 싶으면 <sub> 태그, 밑줄을 치고 싶으면 <u> 태그 등 여러 태그들이 더 많이 있다.
<이외의 다양한 태그>
| 종류 | 설명 |
| <abbr> | 줄임말 표시 |
| <cite> | 참고 내용 표시 |
| <code> | 소스 코드 표시 |
| <sup> | 위 첨자 표시 |
| <s> | 취소선 표시 |
| <ins> | 새로운 내용 삽입 |
| <del> | 기존 내용 삭제 |
다음은 지금까지 나열한 다양한 태그를 사용한 예시이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>상품 소개</title>
</head>
<body>
<h1>사과</h1>
<p>과육은 기본적으로 <b> 노란색</b>에서 연두색이다.</p>
<p>
일반적으로 <em>한국에서 말하는 사과는</em><br> 새콤달콤하면서 아삭아삭
씹히는 탄력이 있다.</p>
<p>
<i>잼</i>과 <i>빵</i>같은 요리의 재료로도 쓰인다.<br>
혈액순환<sup>1</sup> <ins>또는</ins> 감기예방<sub>2</sub>등에
좋<del>은 것으로 알려져 있</del>다.
</p>
<p>영국에는 사과에 대한 속담이 있는데<br>
<blockquote>사과를 매일 하나씩 먹으면<br>
<strong>의사 볼 일도 없다.</strong>
</blockquote> 라는 말이 있다.</p>
</body>
</html>
'Front - End > Html' 카테고리의 다른 글
| HTML(3) (0) | 2023.06.30 |
|---|---|
| HTML(1) (0) | 2023.06.22 |
| 웹 개발에 들어가기 앞서... (0) | 2023.06.16 |