HTML은 웹 문서를 작성할 때 사용하는 표준 마크업 언어입니다. HTML 문서의 기본 구조는 <!DOCTYPE html> 선언으로 시작하며, 이 선언은 문서가 HTML5 표준을 따르고 있음을 브라우저에 알려줍니다.
HTML 문서 구조
<!DOCTYPE html> <!-- html 문서의 형식을 선언 --> <html lang="ko"> <!-- html 문서의 시작, 끝을 표시해주는 태그 / lang 속성은 페이지가 어느 나라 언어로 되어있는지를 표시 --> <head> <!-- 머리부를 나타냄 : 문서의 각종 정보, 제목, 설명, 외부파일을 가져오는 것들 --> <meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 지정 --> <meta name="generator" content="VScode"> <!-- generator : 해당 문서를 작성한 프로그램 --> <meta name="author" content="jaemin"> <!-- author : 해당 문서를 작성한 사람 --> <meta name="description" content="학습용 문제"> <!-- description : 문서에 대한 간단한 설명 --> <title>글자 태그 관련</title> <!-- 문서 제목 --> </head> <body> <!-- 몸체부를 나타냄 : 화면상에 출력해서 보여주고자 하는 모든 정보 / 내용을 작성하는 부분 -->
제목 태그 (h1 ~ h6)
<!-- h태그(h1~h6)--> <h1>제목 태그입니다.</h1> <h2>제목 태그입니다.</h2> <h3>제목 태그입니다.</h3> <h4>제목 태그입니다.</h4> <h5>제목 태그입니다.</h5> <h6>제목 태그입니다.</h6> <h7>제목 태그입니다.</h7> <!-- 없는 태그를 사용해도 에러 발생 X, 표현 가능한 부분만 표현 -->
- HTML에서는 제목을 표시할 때
h1에서h6까지의 태그를 사용합니다.h1은 가장 큰 제목,h6은 가장 작은 제목을 나타냅니다.h7과 같은 태그는 존재하지 않지만, 브라우저는 오류를 발생시키지 않고 무시합니다.
수평선 태그 (<hr>)
<hr> <!-- 수평선 태그 -->
<hr>태그는 문서 내에서 주제의 분리를 위한 수평선을 그어줍니다.
문단 태그 (p, pre)
<h3>문단을 나누는 태그 : p, pre</h3> <p> 문단영역을 나누는 태그로는 p태그와 pre태그가 있다<br> p태그는 줄바꿈을 하고자한다면 별도의 태그를 작성해야한다.<br> 그리고 공백은 한개의 공백만을 표시하기 때문에<br> 별도의 기호문구들 </p> <pre>pre태그는 시작태그에서부터 종료태그까지 입력된 내용을 그대로 표현하는 태그 줄 바꿈이라던가 여러개의 공백을 그대로 인식함 </pre>
<p>태그는 문단을 표시하는 태그로, 브라우저가 자동으로 문단 간의 간격을 설정합니다.<br>태그는 줄 바꿈을 나타내며, 공백은 기본적으로 하나의 공백만 인식합니다.<pre>태그는 공백과 줄 바꿈을 포함하여 작성된 그대로의 텍스트를 표시합니다.
글자를 다루는 태그들
<h3>그 밖에 글자를 다루는 태그들</h3> 일반글꼴(태그로 감싸지 않은 텍스트) <br><br> <b>b : 글자를 굵게 표시하는 태그</b> <br><br> <strong>strong : 글자를 굵게 못하게 하는 태그 + 스크린리더</strong> <br><br> <em> em : 글자를 기울여서 보여주는 태그</em> <br><br> <i> i :글자를 기울여서 보여주는 태그</i> <br><br> <mark> mark : 형관팬 </mark> 효과를 주는 태그 <br><br> <u> u : 글자에 반줄이 그려지는 태그</u> <br><br> <s> s: 글자에 취소선을 넣어주는 태그</s> <br><br> <small>small : 글자를 작게 표현해주는 태그</small> <br><br> 기본글자에 <sub>sub : 아래첨자</sub>를 나타내는 태그 <sup>sup 윗첨자</sup>를 나타내는 태그
<b>태그는 텍스트를 굵게 표시합니다.<strong>태그는 굵은 텍스트를 표시하고, 의미적으로 중요한 텍스트를 나타냅니다.<em>과<i>태그는 텍스트를 기울여서 표시하며, 의미적으로 중요한 경우에는<em>을 사용합니다.<mark>태그는 텍스트에 형광펜 효과를 줍니다.<u>태그는 텍스트에 밑줄을 표시합니다.<s>태그는 텍스트에 취소선을 넣습니다.<small>태그는 텍스트를 작게 표시합니다.<sub>와<sup>태그는 각각 아래첨자와 윗첨자를 표시합니다.
태그 중첩
<p> 태그를 중첩해서 사용하면 가능한가?<br> <b><em>굵고 기울인 글자</em></b> </p>
- HTML에서는 여러 태그를 중첩하여 사용할 수 있습니다. 예를 들어,
<b><em>굵고 기울인 글자</em></b>는 텍스트를 굵고 기울게 표시합니다.
초보부터 시작하는 개발자 생활