정보실

웹학교

정보실

html 텍스트 관련 HTML 태그

본문

페이지에 텍스트를 출력하는 데 사용할 수 있는 다양한 HTML 태그를 발견하십시오


p 태그 


이 태그는 텍스트 단락을 정의합니다.

<p>Some text</p>


블록 요소입니다.


그 안에 span 또는 a와 같이 원하는 인라인 요소를 추가 할 수 있습니다.


블록 요소를 추가 할 수 없습니다.


p 요소를 서로 중첩 할 수 없습니다.


기본적으로 브라우저는 상단과 하단에 여백이 있는 단락의 스타일을 지정합니다. Chrome에서는 16px이지만 정확한 값은 브라우저마다 다를 수 있습니다.


이로 인해 연속 된 두 단락이 간격을 두고 인쇄 된 텍스트의 "단락"에 대한 생각을 그대로 재현합니다.


span 태그 


CSS를 사용하여 대상으로 지정할 수 있는 단락에 섹션을 만드는 데 사용할 수 있는 인라인 태그입니다.

<p>A part of the text <span>and here another part</span></p>


br 태그 


이 태그는 줄 바꿈을 나타냅니다. 인라인 요소이며 닫기 태그가 필요하지 않습니다.


새 단락을 만들지 않고 p 태그 안에 새 줄을 만드는 데 사용합니다.


그리고 새 단락을 만드는 것과 비교하여 간격을 추가하지 않습니다.

<p>Some text<br>A new line</p>


제목(heading) 태그 


HTML은 6 개의 제목 태그를 제공합니다. 가장 중요한 것부터 가장 덜 중요한 것까지, 우리는 h1, h2, h3, h4, h5, h6을 갖습니다.


일반적으로 페이지에는 하나의 h1 요소 (페이지 제목)가 있습니다. 그런 다음 페이지 내용에 따라 하나 이상의 h2 요소가 있을 수 있습니다.


제목, 특히 제목 조직도 SEO에 필수적이며 검색 엔진은 이를 다양한 방식으로 사용합니다.


기본적으로 브라우저는 h1 태그를 더 크게 렌더링하고 h 근처의 숫자가 증가함에 따라 요소 크기를 더 작게 만듭니다.

Headings 


모든 표제는 블록 요소입니다. 다른 요소를 포함 할 수 없습니다. 텍스트 만. 


strong 태그 


이 태그는 그 안의 텍스트를 강하게 표시하는 데 사용됩니다. 이것은 매우 중요하며 시각적 힌트는 아니지만 의미 힌트입니다. 사용 된 매체에 따라 해석이 다를 수 있습니다.


기본적으로 브라우저는 이 태그의 텍스트를 굵게 표시합니다.


em 태그 


이 태그는 강조 표시된 텍스트를 표시하는 데 사용됩니다. 강력 함과 마찬가지로 시각적 힌트가 아니라 의미 힌트입니다.


기본적으로 브라우저는 이탤릭체로 텍스트를 만듭니다.


인용 부호 


blockquote HTML 태그는 텍스트에 인용을 삽입하는 데 유용합니다.


브라우저는 기본적으로 blockquote 요소에 여백을 적용합니다. Chrome은 40px의 왼쪽 및 오른쪽 여백과 10px의 위쪽 및 아래쪽 여백을 적용합니다.


q HTML 태그는 인라인 따옴표에 사용됩니다.


수평선 


실제로 텍스트를 기반으로 하지는 않지만 hr 태그는 종종 페이지 내에서 사용됩니다. 가로 규칙을 의미하며 페이지에 가로 선을 추가합니다.


페이지에서 섹션을 구분하는 데 유용합니다.


코드 블록 


code 태그는 브라우저에 고정 폭(monospaced ) 글꼴을 제공하기 때문에 코드를 표시하는 데 특히 유용합니다.


그것은 일반적으로 브라우저가 하는 유일한 일입니다. 이것은 Chrome에서 적용한 CSS입니다.

code {
    font-family: monospace;
}


코드 요소는 공백과 줄 바꿈을 무시하므로 이 태그는 일반적으로 pre 태그로 래핑됩니다. p 태그처럼.


Chrome은 이 기본 스타일을 pre 제공합니다.

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}


공백이 접히는 것을 방지하고 블록 요소로 만듭니다.


Lists 


3 가지 유형의 목록이 있습니다.

  • 정렬되지 않은 목록
  • 정렬 된 목록
  • 정의 목록

정렬되지 않은 목록은 ul 태그를 사용하여 생성됩니다. 목록의 각 항목은 li 태그로 작성됩니다.

<ul>
	<li>First</li>
	<li>Second</li>
</ul>


정렬 된 목록은 ol 태그를 사용하여 비슷합니다.

<ol>
	<li>First</li>
	<li>Second</li>
</ol>


두 항목의 차이점은 정렬 된 목록은 각 항목 앞에 숫자가 있다는 것입니다.

Lists 


정의 목록은 약간 다릅니다. 용어와 그 정의가 있습니다.

<dl>
	<dt>Flavio</dt>
	<dd>The name</dd>
	<dt>Copes</dt>
	<dd>The surname</dd>
</dl>


브라우저가 일반적으로 렌더링 하는 방법입니다.

Definition list 


정의목록은 실전에서 거의 볼 수 없습니다 .ul과 ol만큼 많지는 않지만 때로는 유용 할 수 있습니다.


다른 텍스트 태그 


프리젠테이션 목적의 여러 태그가 있습니다.

  • mark tag
  • ins tag
  • del tag
  • sup tag
  • sub tag
  • small tag
  • i tag
  • b tag

다음은 브라우저에서 기본적으로 적용되는 시각적 렌더링의 예입니다.

Various tags 


b가 어떻게 strong하고 다른지 궁금 할 것입니다. 그리고 i가 어떻게 em과 다른가요?


차이점은 의미적 의미에 있습니다. b와 i는 브라우저에서 텍스트를 굵게 또는 기울임 꼴로 표시하는 직접적인 힌트이지만 strong하고 em은 텍스트에 특별한 의미를 부여하며 스타일을 지정하는 것은 브라우저에 달려 있습니다. 기본적으로 b 및 i와 정확히 동일합니다. CSS를 사용하여 변경할 수 있습니다.


텍스트와 관련하여 덜 사용되는 다른 태그가 많이 있습니다. 방금 가장 많이 사용하는 것을 언급했습니다.














  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 58회 ]  작성일19-08-20 11:51

웹학교