CSS를 사용하여 HTML에서 요소의 공백과 물리적 구분을 만듭니다.
HTML에서 공간을 만들고 요소를 물리적으로 분리하는 것은 초기 웹 디자이너가 이해하기 어려울 수 있습니다. 이것은 HTML 이 "공백 붕괴"로 알려진 속성을 가지고 있기 때문입니다. HTML 코드에 1 공간 또는 100을 입력해도 웹 브라우저는 자동으로 해당 공백을 하나의 단일 공간으로 축소합니다. 이는 Microsoft Word 와 같은 프로그램과는 다른데, 문서 작성자는 단어와 문서의 다른 요소를 구분하기 위해 여러 공백을 추가 할 수 있습니다.
이것은 웹 사이트 디자인 공간이 작동하는 방식이 아닙니다.
그렇다면 웹 페이지 에 나타나는 HTML에 공백을 어떻게 추가합니까? 이 기사에서는 여러 가지 방법 중 일부를 검토합니다.
CSS가있는 HTML의 공백
HTML에 공백을 추가하는 가장 좋은 방법은 CSS (Cascading Style Sheets) 입니다. CSS는 웹 페이지의 시각적 요소를 추가하는 데 사용되어야하며 간격은 페이지의 시각적 디자인 특성의 일부이므로 CSS는이를 수행하기를 원합니다.
CSS에서는 마진 또는 패딩 속성을 사용하여 요소 주위에 공간을 추가 할 수 있습니다. 또한 text-indent 속성은 들여 쓰기 단락과 같이 텍스트 앞에 공간을 추가합니다.
다음은 CSS를 사용하여 모든 단락 앞에 공백을 추가하는 방법의 예입니다. 다음 CSS를 외부 또는 내부 스타일 시트에 추가하십시오.
p {
텍스트 들여 쓰기 : 3em;
}
HTML의 공백 : 텍스트 내부
텍스트에 추가 공백을 추가하려는 경우 비 분리 공백을 사용할 수 있습니다.
이 문자는 표준 공백 문자처럼 작동하며 브라우저 내부에서만 접히지 않습니다.
다음은 텍스트 줄 안에 5 개의 공백을 추가하는 방법의 예입니다.
이 텍스트 안에는 5 개의 여분의 공백이 있습니다.
HTML을 사용합니다.
이 텍스트에는 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 그 안에 5 개의 여분의 공간
태그를 사용하여 줄 바꿈을 추가 할 수도 있습니다.
이 문장은 끝에 5 줄의 줄 바꿈을합니다.
왜 HTML에서의 간격은 나쁜 생각입니까?
이러한 옵션은 모두 작동하지만 비 구분 공백 요소는 실제로 텍스트에 공백을 추가하며 줄 바꿈은 위에 표시된 단락 아래에 공백을 추가합니다. 이는 웹 페이지에서 공백을 만드는 가장 좋은 방법은 아닙니다. 이러한 요소를 HTML에 추가하면 비주얼 스타일 (CSS)에서 페이지 구조 (HTML)를 분리하는 대신 코드에 시각적 정보가 추가됩니다. 모범 사례는 미래의 업데이트 용이성 및 전반적인 파일 크기 및 페이지 성능을 비롯하여 여러 가지 이유로 개별 파일이 분리되어야한다고 규정합니다.
외부 스타일 시트를 사용하여 모든 스타일과 간격을 지정하는 경우 해당 스타일 시트를 업데이트해야하기 때문에 전체 사이트에 대한 스타일을 변경하는 것은 쉽습니다.
끝에 5 개의
태그가있는 문장의 위의 예를 고려하십시오. 모든 단락의 맨 아래에 간격이 필요하면 전체 사이트의 모든 단락에 HTML 코드를 추가해야합니다. 이것은 페이지를 부 풀릴 여분의 마크 업입니다.
또한이 간격이 너무 많거나 작지 않은 도로를 결정한 후 조금만 변경하려면 전체 웹 사이트의 모든 단락을 편집해야합니다. 아니요 괜찮습니다!
이 간격 띄우기 요소를 코드에 추가하는 대신 CSS를 사용하십시오.
p {
패딩 하단 : 20px;
}
한 줄의 CSS로 페이지의 단락 아래에 공백이 추가됩니다. 나중에이 간격을 변경하려면 전체 사이트의 코드 대신이 한 줄을 편집하면됩니다.
이제 웹 사이트의 한 부분에 하나의 공백을 추가해야한다면
태그 나 하나의 공백없는 공백을 사용하여 세계가 끝나지는 않지만 조심해야합니다.
이러한 인라인 HTML 간격 옵션을 사용하면 미끄러운 경사가 될 수 있습니다. 하나 또는 두 개가 사이트를 손상시키지 않을 수도 있지만 경로를 계속 진행하면 페이지에 문제가 생깁니다. 결국 HTML 간격 및 다른 모든 웹 페이지 시각적 요구에 대해 CSS로 전환하는 것이 좋습니다.