기술나눔

[HTML 입문] 4강 - 줄 바꿈, 줄 구분, HTML 주석

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

이 섹션에서는 줄바꿈, 가로줄 분리, 주석(html 주석)을 포함한 HTML의 입문 지식에 대해 계속해서 설명합니다.

목차

줄 바꿈 1개

2 수평선 분할

HTML 코멘트 3개

줄 바꿈 1개

HTML은 다음과 같이 나누어진다.블록 요소 인라인 요소. 이 섹션에서는 이러한 요소에 대해 먼저 이야기하지 않고 먼저 줄 바꿈에 대해 이야기하겠습니다. 블록 요소에 대해 이야기하는 이유는 나중에 이해하게 될 것입니다.

줄 바꿈은 br 태그로 내용의 두 부분을 분리할 수 있으며 중간에 줄 바꿈 효과가 발생한다는 의미입니다.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是第一段内容</p>
  12.         <p>这是第二段内容</p>
  13.     </body>
  14. </html>

위의 효과를 살펴보겠습니다. 왜냐하면 p 태그 자체가 블록 요소이고, 빠른 요소는 두 개의 p 요소를 쓰면 랩된다는 의미이기 때문입니다. 그러나 p 요소를 래핑한 후에는 중간에 생성된 높이가 확실하며 일부 기본 설정에 의해 제어됩니다.

그렇다면 두 블록 요소 사이의 줄 바꿈 공간을 더 크게 만들고 싶다면 어떻게 해야 할까요? 아니면 텍스트 중간에 줄 바꿈 효과를 원합니까? 다음을 수행할 수 있습니다.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是<br/>第一段内容</p>
  12.         <br/>
  13.         <p>这是第二段内容</p>
  14.     </body>
  15. </html>

 

위 그림과 같이 두 개의 p 태그는 중앙에 큰 간격 효과를 줍니다. 게다가 첫 번째 p 태그의 텍스트에도 줄 바꿈 효과가 있습니다.

2 수평선 분할

중앙에 있는 수평선을 보세요. 수평선이라고도 할 수 있고, 구분선이라고도 할 수 있습니다. 그는 그것을 달성하기 위해 다양한 방법을 사용할 수 있으므로 그 중 하나가 이 섹션에서 언급된 것입니다. 태그 이름은 hr입니다. 코드 효과를 살펴보겠습니다.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <p>这是第一段内容</p>
  12.         <hr/>
  13.         <p>这是第二段内容</p>
  14.     </body>
  15. </html>

물론, 그림 예제의 효과를 얻으려면 일부 스타일 컨트롤을 추가하거나 다른 솔루션을 사용해야 합니다.

3 HTML 주석

개발자로서 댓글을 작성하는 것은 매우 중요합니다. 코드에 주석이 없으면 나중에 다시 보면 다른 사람이 이해하지 못하기 쉬우며, 주석을 쓰지 않으면 코드가 있을 때 다른 사람이 이해하기 쉽습니다. 다른 사람에게 넘겨지거나 보기가 매우 어렵습니다.

게다가 댓글은 기계가 읽거나 브라우저에 표시하기 위한 것이 아니라 개발자가 스스로 읽기 위해 사용하는 일종의 콘텐츠이므로 댓글이 웹 페이지에 표시되지 않습니다.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <!-- 这是第一行代码的注释内容 -->
  12.         <p>这是第一段内容</p>
  13.         <hr/>
  14.         <!-- 这里是第二行哦 -->
  15.         <p>这是第二段内容</p>
  16.     </body>
  17. </html>

위의 코드에서처럼 우리는 개발자들에게 자신에 대해 알려주기 위해 각각 두 줄의 코드에 주석을 추가했습니다. 하지만 브라우저에는 표시되지 않습니다.

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편