1. 텍스트 스타일링
HTML 공부를 계속해보자...
단락 (p)
<p> 태그는 텍스트의 단락(문단)을 생성하는 데 사용돼. 단락은 텍스트를 논리적인 블록으로 나누어서 가독성을 높이고 정보를 잘 전달하게 해줘.
예시:
<p>이것은 첫 번째 텍스트 단락이야. 약간의 정보를 포함하고 있어.</p>
<p>이것은 두 번째 텍스트 단락이야. 첫 번째 단락과 분리되어 있어.</p>
굵은 텍스트 (b)
<b> 태그는 텍스트를 굵은 (bold) 폰트로 강조하는 데 사용돼. 이는 특정 단어나 문구의 중요성을 강조할 때 유용해.
<p>이것은 <b>중요한</b> 텍스트야.</p>
기울임 텍스트 (i)
<i> 태그는 텍스트를 기울임꼴(italic)로 표시하는 데 사용돼. 주로 용어, 책 제목, 외국어 단어 등을 표시할 때 사용돼.
예시:
<p>이것은 <i>용어</i>로, 기울임꼴로 표시돼.</p>
2. 헤더 (h1 - h6)
HTML에서 헤더는 콘텐츠를 구조화하고 페이지의 헤더 계층 구조를 생성하는 데 사용돼. 헤더는 여섯 단계로 나뉘는데, <h1>이 가장 중요하고, <h6>이 가장 덜 중요해.
-
<h1>— 가장 중요한 헤더. 일반적으로 페이지의 메인 제목에 사용돼. -
<h2>—<h1>다음의 하위 제목에 사용돼. -
<h3>—<h2>보다 낮은 수준의 헤더. -
<h4>—<h3>보다 낮은 수준의 헤더. -
<h5>—<h4>보다 낮은 수준의 헤더. -
<h6>— 가장 덜 중요한, 가장 작은 헤더.
예시:
<h1>페이지의 메인 헤더</h1>
<h2>레벨 2 서브 헤더</h2>
<h3>레벨 3 서브 헤더,</h3>
3. head 문서에 추가 태그
HTML 예제에서 나중에 볼 수도 있는 몇 가지 태그를 간단히 살펴보자:
1. <title> 태그
<title> 태그는 브라우저 탭에 표시되는 페이지 제목을 설정해줘. 사용자가 페이지를 열 때 처음으로 보게 되는 요소야. 거의 모든 페이지에 항상 포함되며, HTML 편집기는 기본적으로 이 태그를 추가해. 하지만 학습용 프로젝트에서는 그렇게 중요하지 않아.
2. <meta charset="UTF-8"> 태그
<meta> 태그는 <head> 내부에서 문서의 문자 인코딩을 설정해. UTF-8은 대부분의 세계 언어를 지원하는 가장 널리 사용되는 인코딩 방식이야. 인코딩에 대해서는 나중에 조금 더 설명할게.
3. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 태그
이 태그 또한 <head> 내부에 있어. 모바일 기기에서 페이지를 올바르게 표시하도록 도와줘. 뷰포트(viewport)의 너비를 기기 화면 너비와 동일하게 설정하고, 페이지의 초기 스케일을 정의해.
4. <link rel="stylesheet" href="styles.css"> 태그
<link/> 태그는 외부 CSS 파일을 스타일링에 연결해. rel="stylesheet" 속성은 이것이 스타일 시트임을 나타내고, href="styles.css"는 스타일 파일의 경로를 지정해.
5. <script src="script.js" defer></script> 태그
<script> 태그는 페이지에 대화형 요소를 추가하기 위해 외부 JavaScript 파일을 연결해. src 속성은 스크립트 파일의 경로를 지정하고, defer는 HTML 문서가 로드된 후 스크립트를 실행하도록 지시해.
GO TO FULL VERSION