HTML 또는 웹 페이지에서 추가 공간을 만드는 방법

웹 페이지에서 HTML에 추가 공간을 만드는 것은 만들려는 공간의 유형에 따라 여러 가지 방법으로 수행 할 수 있습니다. 다음 섹션에는 HTML과 CSS를 사용하여 추가 공간을 만드는 여러 가지 방법이 많이 포함되어 있습니다.

자신의 웹 페이지를 만드는 신규 사용자에게 가장 혼란스러운 점 중 하나는 스페이스 바를 여러 번 눌러 추가 공간을 확보 할 수 없다는 것입니다. 텍스트 앞이나 뒤에 또는 사이에 여분의 공백을 만들려면 (비 분리 공간) 확장 된 HTML 문자.

예를 들어 "여분의 공간"을 사용하면 HTML에 다음 코드가 있습니다.

 여분의 공간 

참고 : WYSIWYG 편집기를 사용하여 위 코드를 입력하는 경우 HTML 탭에 있거나 HTML 코드를 편집 중이어야합니다.

  • 확장 된 특수 HTML 문자의 전체 목록

페이지에 붙여 넣는 텍스트의 간격 유지

여분의 공백이나 탭이있는 텍스트를 붙여 넣는 경우 HTML

 태그를 사용하여 텍스트 서식을 유지합니다. 다음은 텍스트를 추가 공백으로 붙여 넣는 방법의 예입니다. 
 꼬리표.

 이 텍스트에는 많은 공백이 있습니다. 

위의 예는 아래 HTML 코드를 사용하여 수행됩니다.

 이 텍스트에는 많은 공백이 있습니다. 

참고 : 위의 코드를 입력하기 위해 WYSIWYG 편집기를 사용하는 경우 HTML 탭에 있거나 HTML 코드를 편집 중이어야합니다.

  • HTML보기
     이 태그에 대한 자세한 정보는 태그 페이지를 참조하십시오.

요소 나 객체 주위에 여분의 공간 생성하기

모든 HTML 요소는 위쪽, 오른쪽, 아래쪽 또는 왼쪽에 추가 간격을 추가 할 수 있습니다. 그러나 요소 나 다른 객체 주위에 어떤 유형의 공간을 추가할지 결정하기 전에 여백과 여백의 차이를 이해하는 것이 중요합니다. 아래 그림에서 볼 수 있듯이, 패딩은 요소, 경계, 테두리 밖의 여백을 바로 둘러싸고 있습니다.

아래 예제에서, 단락은 테두리로 둘러싸여 있고 여백을 들여 쓰고 단락의 오른쪽과 아래쪽에 공백이 있습니다.

마진 및 패딩이있는 단락의 예입니다.

위의 예는 아래 코드를 사용하여 작성되었습니다.

마진과 패딩이있는 단락의 예.

코드의 첫 번째 섹션에서 "margin-left : 2.5em;" 들여 쓰기 된 텍스트의 모양을 제공하는 2.5 em의 왼쪽 여백을 추가합니다. 예에 표시된 것처럼이 간격은 테두리 외부에 있습니다. 다음 섹션에서 "패딩 : 0 7em 2em 0;" 위쪽, 아래쪽 및 왼쪽 (시계 방향) 패딩을 정의합니다. "0"위쪽 패딩, "7em"오른쪽 패딩, "2em"아래쪽 패딩 및 0 패딩이 있습니다. 이 예제의 나머지 부분에서는 경계를 표시하는 방법을 정의합니다.

CSS와 HTML을 사용하여 탭 만들기

탭은 요소의 왼쪽 여백을 조정하여 HTML로 만들 수 있습니다. 예를 들어이 단락에는 텍스트가 포함 된 요소의 왼쪽 여백이 2.5입니다. 이 왼쪽 여백을 만드는 CSS가 아래에 나와 있습니다.

 .tab {margin-left : 2.5em} 

이 코드를 CSS 파일에 배치 한 후에는 "탭"클래스를 모든 텍스트에 적용하여 탭 모양을 만들 수 있습니다. 왼쪽 여백 값은 필요에 따라 늘리거나 줄일 수 있습니다.

위의 방법을 권장하지만 여백을 남긴 CSS는 아래 예제와 같이 인라인으로 추가 할 수도 있습니다.

5em 왼쪽 여백의 예입니다.

5em 왼쪽 여백의 예입니다.

  • 내 웹 페이지 또는 HTML에서 텍스트를 들여 쓰거나 탭하는 방법은 무엇입니까?

한 줄 또는 텍스트 단락 아래에 추가 공간을 추가해야하고 한 번만 수행하면됩니다.

태그를 사용하여 문서에 추가 공간을 추가하십시오. 다음은이 기술을 적용하는 방법의 예입니다.

이 문장에는 예제 텍스트가 들어 있습니다.

보시다시피 위의 공간을 만들기 위해 두 번의 휴식이 추가되었습니다.

위의 코드는 아래에 표시된 텍스트를 만듭니다.

이 문장에는 예제 텍스트가 들어 있습니다.

보시다시피 위의 공간을 만들기 위해 두 번의 휴식이 추가되었습니다.

필요할 경우 추가 휴식 시간을 추가 할 수 있습니다. 그러나 앞에서 언급 한 CSS 방법을 사용하여 페이지의 여러 위치에서 완료되면 텍스트 주위에 여백과 공백을 추가하는 것이 좋습니다.