HTML 단락으로 재생 : 다양한 서식 예제를 보여 드리겠습니다.

공개 : 귀하의 지원은 사이트 운영을 유지하는 데 도움이됩니다. 일부에 대해서는 추천 수수료를받습니다. 이 페이지에서 권장하는 서비스에 대해 자세히 알아보십시오. 자세히 알아보기

행 및 단락

이 섹션에서는 행 및 단락과 관련된 HTML에 대해 설명합니다. 기본 및 <P> 태그.

참고 :이 자습서에는 더 이상 사용되지 않는 태그 및 속성이 포함되어 있습니다.
이 자습서는 과거 가치를 위해 제공됩니다. 이 자습서에 제시된 태그 및 속성 중 개는 더 이상 사용되지 않으므로 사용해서는 안됩니다. 지원 중단 된 요소 및 속성에 대한 브라우저 지원이 제한 될 수 있으며이를 사용하면 예상치 못한 결과가 발생할 수 있습니다.

최신 HTML에 대한 자세한 내용은 자습서를 참조하세요. 시맨틱 마크 업, HTML 문서 구조, 글꼴 및 웹 타이포그래피에 관한 것입니다.

< DIV > 요소

<DIV>, 블록 레벨 요소는 단순히 페이지의 콘텐츠 블록을 정의합니다. 블록을 정의하는 것 외에도 <DIV> 자체는 아무 작업도 수행하지 않습니다. 예를 들어 다음 코드는 내부에 두 개의 단락이있는 <DIV> 요소를 만듭니다. <DIV> 안에 <P> 요소를 넣을 수 있습니다.

그 결과 :

이것은 <DIV ...> 이전 항목입니다.

이것은 <DIV ...> 내부 항목입니다. 이것은 <DIV ...>.

<DIV ...> 다음 항목입니다.

정렬 속성

ALIGN<DIV> 요소의 콘텐츠 정렬을 설정합니다. 네 가지 값, LEFT, CENTER, RIGHTJUSTIFY는 모두 잘 지원됩니다. LEFT가 기본값입니다.
이 코드는 기본값을 보여줍니다.

다음을 제공합니다.

커피 한 잔을 즐기기에 좋은 시간이 될 것 같지 않나요? 어떻게에 대한! 하루 종일 커피를 마시자!

단락 요소

<P>는 새 단락의 시작을 나타냅니다. 이는 일반적으로 두 개의 캐리지 리턴으로 렌더링되어 두 단락 사이에 하나의 빈 줄을 생성합니다.

다음을 생성합니다.

첫 번째 단락이고 두 번째 단락입니다.

정렬 속성

ALIGN는 단락의 정렬을 나타냅니다.

생성 :

왼쪽 정렬입니다. 이것이 기본값입니다.

중앙 정렬

오른쪽 정렬

CLEAR 속성

CLEAR는 일부 브라우저에서 인식되며 <BR>와 매우 유사하게 작동합니다. 그러나 표준 HTML이 아니며 여전히 널리 지원되지 않으므로 대신 <BR>를 사용하세요.

P Endtag가 필요합니까?

The W3C는 </P>에 대해 다음과 같이 말합니다. “종료 태그는 항상 파서가 유추 할 수 있으므로 선택 사항입니다.” 즉, 새 <P>는 이전 <P> (및 이전 ).

<HR> 또는 <BLOCKQUOTE>와 같은 다른 모든 블록 수준 요소도 종료되어야합니다. 그러나 항상 그런 식으로 작동하는 것은 아닙니다. 예를 들어 일부 브라우저에서는 표 뒤에서도 텍스트를 오른쪽 정렬합니다. 다음 예에서 MSIE는 “표 뒤”부분을 오른쪽 정렬로 렌더링합니다. Netscape는 왼쪽 정렬로 렌더링합니다.

MSIE의 렌더링 Netscape의 렌더링

단락 요소에 대해 정렬 또는 기타 스타일 속성을 설정하는 경우 사용하는 것이 가장 좋습니다. </P>. 스타일 설정을 사용하지 않는 경우 일반적으로 </P>를 무시할 수 있습니다.

이 주제에 대한 자세한 내용은 단락에 대한 W3C 사양을 참조하세요.

텍스트 정렬

text-align 스타일 규칙을 사용하여 HTML 요소의 정렬을 설정할 수 있습니다. text-align를 사용하여 단락, 문서의 섹션 또는 전체 문서의 정렬을 설정할 수 있습니다. text-align를 사용하여 왼쪽, 오른쪽, 가운데 또는 양쪽 정렬을 설정할 수 있습니다.

예를 들어 단락을 가운데에 맞추고 싶다고 가정합니다.먼저 문서의 “섹션에 다음 코드를 입력하여 centeralign라는 스타일 클래스를 만듭니다.

이제 모든 단락을 다음과 같이 중앙 정렬 클래스로 설정할 수 있습니다.

이렇게하면

.centeralign { text-align : center;}

가운데 가져 오기

<DIV> 요소에 동일한 클래스를 적용하여 페이지 :

이점 :

이것은 중앙 정렬 된 텍스트 묶음입니다. 중앙 정렬 스타일이있는 DIV.

중앙 정렬 DIV 내의 각 요소는 중앙 정렬 스타일을 상속합니다.

정렬

기본적으로 , 대부분의 브라우저는 오른쪽 가장자리가 들쭉날쭉 한 텍스트를 렌더링합니다.

모든 텍스트가 오른쪽 가장자리가 고른 책처럼 렌더링되도록하려면 단일 스타일 규칙을 사용할 수 있습니다. 모든 텍스트를 양쪽 맞춤으로 설정하려면 다음을 복사하세요. 코드 I 문서의 “섹션으로 이동합니다.

정당화의 문제는 많은 브라우저가 텍스트의 마지막 줄이 어디에 있는지 혼동한다는 것입니다. 정당화 됨). 예를 들어, MSIE 4.x는 텍스트 블록 바로 뒤에 테이블이 올 때 혼동됩니다. 이 이미지에서 텍스트의 마지막 줄에는 “one of our agents”라는 단어가 전체 줄에 걸쳐 표시됩니다.

이 상황을 해결하기 위해 모든 텍스트 블록을 <P></P>로 둘러 쌉니다.

이제 잘못된 MSIE가 더 많은 것을 렌더링합니다. 깔끔하게 :

들여 쓰기

웹 페이지의 단락과 전체 섹션을 들여 쓰는 방법에는 여러 가지가 있습니다. 다음 몇 섹션에서는 들여 쓰기를위한 네 가지 주요 기술에 대해 설명합니다.

  • 단락 들여 쓰기
  • 페이지 섹션 들여 쓰기
  • 전체 페이지 들여 쓰기
  • 각 단락의 첫 줄 들여 쓰기

하지만 시작하기 전에 <BLOCKQUOTE>에 대해 몇 마디 말씀해 볼 가치가 있습니다. . 페이지의 섹션을 들여 쓰기 위해 <BLOCKQUOTE>를 사용해야한다는 오해가 있습니다. 이러한 믿음은 대부분의 시각적 웹 브라우저가 인용 된 텍스트를 렌더링한다는 사실에서 비롯됩니다. 들여 쓰기로. 그러나 HTML은 형식화 언어가 아니며이를 하나로 사용하려고하면 예측할 수없는 결과를 제공한다는 점을 기억하십시오. 인용 된 텍스트 블록이있는 경우 <BLOCKQUOTE>를 사용하고, 그렇지 않으면 다음 몇 단락에 설명 된 기술을 사용합니다.

단락 들여 쓰기

스타일을 사용하여 단일 단락을 들여 쓸 수 있습니다. 예를 들어 단락을 50 포인트 들여 쓰기한다고 가정합니다. 먼저 다음 스타일 규칙을 사용하여 indented라는 클래스를 만듭니다. 이 코드를 문서의 “섹션에 넣으십시오.

이제

태그 :

이 들여 쓰기 된 단락은 다음과 같습니다.

.indented {padding-left : 50pt; padding-right : 50pt;}

Tom Sawyer의 모험이라는 이름의 책을 읽지 않고는 나에 대해 모르지만 상관 없습니다. 그 책은 Mr. . Mark Twain, 그는 주로 진실을 말했습니다. 그가 늘린 것이 있었지만 주로 진실을 말했습니다. 그건 아무것도 아닙니다. 나는 아무도 폴리이 모나 과부 없이는 거짓말을 한 번도 본 적이 없습니다. , 또는 Mary. Polly 이모-Tom의 Polly 이모, 그녀는-Mary 및 Widow Douglas는 모두 그 책에서 이야기합니다.이 책은 대부분 제가 전에 말했듯이 들것이있는 진정한 책입니다. – Opening to Huck Finn

페이지의 섹션 들여 쓰기

두 개 이상의 파 들여 쓰기 이전 예제에서 설정 한 것과 동일한 스타일을 사용합니다. 페이지의 “섹션에 다음 코드를 입력하세요.

그런 다음 <DIV> 요소 :

다음과 같은 움푹 들어간 섹션을 제공합니다.

가정용 유해 폐기물
이러한 품목은 재배포를 위해 재활용 센터로 가져올 수 있습니다. 버리는 것보다 훨씬 낫습니다.

  • 가정용 세제
  • 컴퓨터 및 컴퓨터 액세서리
  • 의류

전체 페이지 들여 쓰기

전체 페이지를 들여 쓰려면 “요소에 대해 오른쪽 및 왼쪽 패딩을 설정하는 스타일 규칙을 설정하십시오. 예를 들어 다음 스타일은 오른쪽 및 왼쪽 패딩을 100 픽셀로 설정합니다.

이 기술은 배경 이미지와 함께 사용할 때 널리 사용됩니다. 예를 들어이 이미지를 페이지 왼쪽 아래로 실행한다고 가정 해 보겠습니다.

이 이미지의 너비는 56 픽셀이므로 패딩을 60으로 설정하겠습니다.다음 스타일은 배경 이미지를 설정하고 반복을 repeat-y로 설정하고 (페이지의 왼쪽 아래에 수직으로 만 반복) 왼쪽 패딩을 60 (오른쪽 패딩은 설정하지 않음)으로 설정합니다.

모양은 다음과 같습니다.

각 단락의 첫 줄 들여 쓰기

각 단락 집합의 첫 줄 들여 쓰기 텍스트 들여 쓰기를 사용하는 스타일 규칙. 예를 들어, 다음 코드는 각 단락의 첫 줄을 30 포인트 들여 씁니다. 이 코드를 페이지의 “섹션에 복사하십시오.

이 코드는 각 <P>의 첫 줄을 들여 씁니다. 대부분의 디자이너라면 첫 단락 앞이나 <H1>와 같은 헤더 사이에 P를 넣지 않을 것입니다. 안타깝게도 단락을 들여 쓰기를 원할 경우 정확히 수행해야하는 작업입니다. 이러한 상황에서 텍스트는 “익명 블록”이라는 부분의 일부이며 직접 참조 할 수 없습니다. 들여 쓰기하려면 <P> 요소에 텍스트를 넣어야합니다.

예를 들어 다음 코드에는 헤더와 텍스트 사이에 텍스트가 들여 쓰기되지 않도록합니다.

이점 :

My 스토리
이 단락은 들여 쓰기되지 않았습니다.

이 코드는 헤더와 텍스트 사이에 <P>가 있으므로 텍스트가 들여 쓰기됩니다.

.indented-p {text-indent : 30pt;} 내 스토리

이 단락은 들여 쓰기되었습니다.

< BR > 요소

<BR>는 단일 캐리지 리턴을 삽입합니다. . <P>는 새 단락의 시작을 나타내는 반면, <BR>는 동일한 단락 내에서만 캐리지 리턴을 의미합니다. <BR>는 일반적으로 단일 캐리지 리턴으로 렌더링됩니다.

예 : 다음 코드 :

이걸 생산하는 사람 :

난 터켓 출신의 한 남자가
모든 반죽을 양동이에 담아 두었습니다
그의 딸 이름 난
란이 남자와 멀리 떨어져 있습니다
버킷의 경우 Nantucket

<BR>가 새 단락을 시작하지 않기 때문에 현재의 모든 단락 속성이 동일하게 유지됩니다.

이 제품을 생산하는 업체 :

난 터켓 출신의 한 남자가
모든 반죽을 양동이에 담았습니다
딸 이름 Nan
남자와 쫓아 내고
물통은 Nantucket

The CLEAR Attribute

CLEAR는 줄 바꿈을 삽입하는 것 외에도 오른쪽이나 왼쪽에 그림이나 다른 개체가 있으면 그 부분도지나 간다고 말합니다. 예를 들어,이 코드는 그림이 페이지의 왼쪽에 정렬되어야한다고 말합니다. 그런 다음 텍스트가 있고 LEFT가 있습니다. 사진 뒤에 오는 텍스트 :

생성자 :

할로윈 파티에 가자! 즐거운 시간 보내세요.
오후 8 시부 터 자정까지. 의상을 입거나 무서운 모습으로 오세요!

BOTHALL와 동일하지만 그렇지 않습니다. 많은 브라우저에서 지원되므로 대신 ALL를 사용하세요.

CENTER 요소

사용 권장 사항 : 대신.

이점 :

안녕하세요! 이야기 해 봅시다!

다음과 같은 의미 :

이점 :

안녕하세요! 이야기합시다!

< HR > 요소

<HR>는 페이지에 가로선 ( ‘수평선’)을 그립니다. 그게 다입니다. 이러한 단순한 개념의 경우 가로선이 의외로 인기가 많습니다. 기본부터 시작하겠습니다. <HR>에는 종료 태그가없고 속성이 필요하지 않습니다.

이 규칙을 생성하는 사람 :

여기 위에있는 일부 텍스트

여기 아래에있는 일부 텍스트

<HR>는 일반적으로 페이지의 분할을 나타냅니다. 규칙 이전의 항목은 이후 항목과 다른 “섹션”에 있습니다. 이러한 이유로 많은 디자이너는 <HR>를 레이아웃 태그가 아닌 논리적 태그로 간주합니다.

NOSHADE 속성

NOSHADE는 규칙이 3 차원이 아닌 평면으로 표시되어야 함을 나타냅니다.다음 일반 수평 규칙 비교 :

NOSHADE 규칙 사용 :

이점 :

NOSHADE는 종종 SIZE :

다음 규칙을 생성합니다.

NOSHADE는 일반적으로 브라우저가 3 차원 규칙을 잘 렌더링하지 않기 때문에 널리 사용됩니다. 실제로 대부분의 경우 규칙은 배경과 동일한 색상으로 표시되어 거의 보이지 않습니다.

SIZE 속성

SIZE는 규칙의 높이를 나타냅니다. ( ‘HEIGHT’라고 부르는 것이 너무 쉬웠을 것 같습니다.) 가로 너비는 WIDTH를 참조하세요. 다음 크기 중 일부를 비교하세요.

다음 규칙을 제공합니다.

브라우저는 일반적으로 100보다 큰 <HR>를 렌더링하지 않습니다. .

WIDTH 속성

WIDTH는 규칙의 가로 너비를 설정합니다. 크기를 픽셀 또는 백분율로 표현할 수 있습니다.

다음 <HR>는 픽셀 너비로 설정됩니다.

이러한 규칙 :

WIDTH는 일반적으로 백분율로 표시됩니다. 백분율 너비를 사용하는 경우 값을 따옴표.

다음 규칙을 생성합니다.

기본값은 100 %입니다. 기본적으로 규칙은 다음과 같습니다. 다른 정렬을 설정하려면 ALIGN를 사용하세요.

백분율 너비는 백분율 o를 사용합니다. f 페이지의 전체 너비가 아닌 사용 가능한 너비. 예를 들어 규칙이 표에있는 경우 너비는 표 셀 너비의 백분율입니다.

다음 표를 생성하는 항목 :

p>

이봐, 뭐야!

시간의 스티치로 9 개 절약

정렬 속성

ALIGN는 규칙. ALIGN은 WIDTH도 사용하는 경우에만 유용합니다.

다음 정보를 제공하세요.

< PRE > 요소

<PRE>는 HTML 도구 상자에서 가장 편리한 태그 중 하나입니다. <PRE>는 텍스트를 “사전 서식 지정”으로 표시합니다. 모든 공백과 캐리지 리턴은 입력 한 그대로 렌더링됩니다.

생성자 :

<PRE> 텍스트는 고정 너비 글꼴로 렌더링됩니다. 즉, 모든 문자와 공백이 동일한 너비. 고정 너비를 사용하면 원하는 방식으로 텍스트를 쉽게 레이아웃 할 수 있으므로 <PRE>는 위와 같은 “빠르고 더티”테이블을 만드는 데 적합합니다.

<PRE>는 브라우저가 태그를 무시하도록하지 않습니다. 링크 및 기타 기능은 계속 만들 수 있습니다.

생성 :

마크 업 추가를 시작할 때 , 텍스트가 어떻게 나오는지 확인하기가 더 어려워집니다 (위의 표가 도움이되는 것처럼 태그 간격을 균등하게 배치). <PRE>는 “HTML 화”하고 싶지 않은 큰 텍스트 블록을 인용하는 데 자주 사용되지만 “는 텍스트를 엉망으로 만들 수 있습니다. 몇 줄보다 큰 테이블의 경우 일반적으로 장기적으로 테이블 코드를 사용하는 것이 더 쉽습니다.

“요소

“는 캐리지 리턴 발생을 방지합니다. 예를 들어, 다음 코드는 한 줄로 된 말도 안되는시를 생성합니다.

이시를 생성합니다.

뒤 틀고 돌리기, 빙빙 돌리기, 소리 치기, 쉿하는 소리와 으르렁 거리는 소리, 쉿하는 소리와 으르렁 거리는 소리, 겁 먹고 조롱하는 소리, 쿵쿵 거리는 소리, 뛰고 뛰는 소리, 달리기와 뛰기, 껍질 벗기기, 다이 싱, 요리 및 무게 측정, 가격 및 가격 책정, 먹고 마시기,이 모든 것이 하루 일과에 있습니다.

is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by :

생성물 :

비틀고 돌리기,
회전하고 소리 치기,
치찰음과 포효,
공포와 조롱,
쿵쿵 소리,
달리기와 뛰기,
박피와 다이 싱,
요리와 무게 측정,
가격과 가격,
> 먹고 마시기,
하루 일 모두.

“요소

is for the situation where you have used 섹션에서 줄 바꿈 방지 “하지만 원하는 경우 여기에서 깰 수 있습니다”라고 말하고 싶을 것입니다.”는 줄 바꿈을 강요하지 않고 단지 하나만 허용합니다.

생성물 :

아마도 마지막 줄에 도달 할 때마다 할 말이 너무 많아서 생각할 수있는 최대한 많은 단어를 밀어 넣고 밀어 넣어야한다고 느끼기 때문일 것입니다.

다음과 같이 , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within를 발명했습니다.

이 단락은 다음과 같습니다.

아마도 마지막 줄에 도달 할 때마다 할 말이 너무 많아서
생각할 수있는 한 많은 단어를 밀어 넣고 밀어 넣어야한다고 느끼기 때문일 것입니다. 내가 할 수있는 한
Adam은 개발자 문서 및 튜토리얼을 전문으로하는 기술 작가입니다.

Write a Comment

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다