HTML에서는 여러 요소의 텍스트 서식이 사용되며 그것을 지정할 수 있습니다. 여러가지 태그는 몇 가지 그룹으로 나눌 수 있는데 텍스트 스타일을 지정하는 물리적 태그와 논리, 의미론적 태그 등이 존재합니다. 그렇다면 이제부터는 태그 서식을 지정할 수 있는 방법에 대해 자세히 알아보겠습니다!
보통 태그의 목차로서 제목~ 본문에 이르기까지 다양하게 태그를 지정할 수 있습니다. 바로 <h1> ~ <h6> 태그입니다. 이것은 HTML 제목 본문 소제목 등 다양하게 정의하는데 사용되며 이런 6가지 단계별 제목은 <h1> 가장 중요도 높은 제목부터 가장 작은 소제목인 <h6>를 정의할 수 있습니다.
<h1> <h6> 태그를 사용하여 아래와 같이 본문을 구성해봤습니다.
<html>
<head>
<title>이 문서의 제목입니다. 타이틀!</title>
</head>
<! 헤드 및 타이틀 부분이 끝났습니다. >
<body>
<! 본문의 시작입니다, 이제 h1~h6 태그를 사용하여 목차를 만들어봅니다. >
<h1>이것은 h1</h1>
<h2>이것은 h2</h2>
<h3>이것은 h3</h3>
<h4>이것은 h4</h4>
<h5> h5h5h5h5h5h5 </h5>
<h6> h6h6h6h6h6h6h666666666 </h6>
</body>
</html>
이로써 h1 부터 h6까지 태그가 어떻게 표현되는지 볼 수 있습니다. 결과는 h1부터 순서대로 큰 문자를 지니게 됩니다. 여기서 한걸음 더 나아가서 <b> 태그는 굵은 글씨체를 나타냅니다.
<b> 굵은 글씨체 </b>
<strong> 텍스트의 중요성을 강조하는 태그 </strong>
<b> 태그는 물리적 태그이며 <strong>은 중요성을 나타내는 논리적 태그입니다. 결과는 비슷하게 나타나지만 그 안에 숨겨진 의미는 다르다고 할 수 있죠.
<b> 와 <strong>에 이어서 <i> 및 <em> 태그를 알아보겠습니다. 이 두 가지 태그 모두 텍스트를 기울여보이게 만듭니다.
<html>
<body>
<p> 띄어쓰기 ppp </p>
<p> 이것은 일반. <em>여긴 em 태그입니다.</em></p>
<p><i>기울임 텍스트 태그 iiii </i> </p>
</body>
</html>
<pre></pre> 및 <mark></mark> 태그를 설명해보겠습니다.
pre : 미리 서식이 지정된 텍스트를 정의하는데 사용되며 공백과 줄바꿈으로 묶인 텍스트를 표시하게 됩니다.
mark : 태그는 한 문서에서 다른 강조 표시된 참조 목적의 텍스트를 알려줍니다.
<small></small> 글씨들의 글꼴 크기를 문서의 기본 글꼴 크기보다 한 크기 작게 줄이며 이것은 전체적인 글에서 약간의 작음으로 더욱 돋보이게할 수 있으며 그냥 중요치않게 생각될 수 있게 만드려는 목적으로 사용합니다. 많은 글중에 그저 작은 글씨는 보이지 않겠죠.
<del> 이 텍스트는 취소선으로 글씨의 중앙에 취소선을 나타냅니다.
<s> 두 태그의 취소선으로 표시되며 시각적 유사성에도 불구하고 이러한 태그는 서로를 대체할 수 없습니다.
<ins> <u>
<sub> <sup>
<dfn> : 처음 언급된 내용을 정의, 글씨체가 기울임꼴로 표시됨.
여러가지 태그들을 익히는데 가장 좋은 방법은 반복숙달입니다. 아무리 많은 태그를 알고 있어도 적재적소에 쓰이거나 필요할 때 생각나지 않으면 무용지물이겠죠. 또한 썼던 것만 기억하면 새로운 글을 쓸 때는 여러 태그를 복합적으로 사용하기 힘들 수 있습니다. 그러므로 틈틈히 연습하고 계속해서 태그를 사용해야합니다. 여러가지 태그를 정리해놓고 하루에 모든 태그를 사용해서 글도 써보고 적용시켜야할 것 입니다.
특히 html 양식은 양식 요소를 포함한 문서입니다. form 태그는 양식을 선언하는데 매우 중요하며 여러가지 요소들은 양식을 만드는데 중요합니다.
입력 / 텍스트의 영역 / 버튼 / 선택 / 옵션 / 취소 / 라벨 등 html과 css를 다루어서 만들 수 있는 많은 유형이라고 생각됩니다. 다. 아래 언급된 양식은 무료로 복사하여 사용할 수 있습니다.
<html>
<head>
<title> 제목 시작 </title>
<link href="www.naver.com rel="stylesheet">
<link rel="stylesheet"
<https://use. fontawesome.com/releases/v 5.5.5 / css / all.css integriy>
<<style>
//html의 스타일 시작
body, div, h1, form, input, p {
paddin : 0;
margin : 0;
</head>
</html>
오후 5시쯤 졸음이 몰려오면 미스트를 뿌리며 공부한다. 이것이 html 박사로 가는 지름길...
'뉴스' 카테고리의 다른 글
| C언어의 정의 및 C++? / Ruby 대체 문자열은? (0) | 2022.11.29 |
|---|---|
| 루비(Ruby)의 흔한 오류, 배열 결합 방식 등 (0) | 2022.11.28 |
| 리눅스와 루비 상관관계, 와일드카드 추가 (0) | 2022.11.28 |
| HTML 속성과 태그에 대한 여러가지 정보 " " (0) | 2022.11.26 |
| 독립적이고 사회주의적인 혁명 조직 퀘벡 전선 (0) | 2022.11.25 |
