HTML과 CSS를 사용하여 탭과 간격을 만드는 방법

브라우저에서 HTML의 공백을 처리하는 방법 살펴보기

처음 웹 디자이너 인 경우 초기에 이해해야 할 많은 것들 중 하나는 사이트 코드의 공백이 웹 브라우저에서 처리되는 방식입니다.

안타깝게도 브라우저가 공백을 처리하는 방식은 처음에는 그리 직관적이지 않습니다. 특히 HTML에 들어 와서 공백이 워드 프로세서 프로그램에서 처리되는 방식과 비교하면 더욱 익숙합니다.

워드 프로세싱 소프트웨어에서는 문서에 많은 간격이나 탭을 추가 할 수 있으며이 간격은 문서의 내용 표시에 반영됩니다. HTML이나 웹 페이지에서는 그렇지 않습니다. 따라서, 웹 브라우저가 공백을 실제로 처리하는 방법을 배우는 것은 매우 중요합니다.

인쇄 간격

워드 프로세싱 소프트웨어에서 세 가지 기본 공백 문자는 공백, 탭 및 캐리지 리턴입니다. 이들 각각은 별개의 방식으로 작동하지만 HTML에서는 브라우저가 모두 기본적으로 동일하게 렌더링됩니다. HTML 마크 업에 하나의 공백이나 100 개의 공백을 넣거나 탭과 캐리지 리턴으로 공백을 섞어도이 모든 것은 페이지가 브라우저에 의해 렌더링 될 때 하나의 공백으로 압축됩니다. 웹 디자인 용어에서이를 공백 붕괴 (white space collapse)라고합니다. 이러한 일반적인 간격 키를 사용하여 웹 페이지에서 공백을 추가 할 수 없습니다. 브라우저에서 여러 공간을 하나의 공간으로 축소하기 때문입니다.

왜 누군가가 탭을 사용합니까?

일반적으로 텍스트 문서에서 탭을 사용하는 경우 레이아웃을 이유로 텍스트를 사용하거나 텍스트가 특정 위치로 이동하거나 다른 요소와 일정한 거리를 유지하게합니다. 웹 디자인에서는 이러한 비주얼 스타일이나 레이아웃 요구 사항을 달성하기 위해 앞서 언급 한 공백 문자를 사용할 수 없습니다.

웹 디자인에서 코드에 여분의 공백 문자를 사용하면 순전히 코드를 쉽게 읽을 수 있습니다. 웹 디자이너와 개발자는 탭을 사용하여 코드를 들여 쓰기하여 다른 요소의 하위 요소를 볼 수 있지만 이러한 들여 쓰기는 페이지 자체의 시각적 레이아웃에 영향을 미치지 않습니다. 시각적 인 레이아웃 변경이 필요한 경우 CSS (Cascading Style Sheet)로 전환해야합니다.

CSS를 사용하여 HTML 탭 및 간격 만들기

오늘날 웹 사이트는 구조와 스타일이 분리되어 만들어졌습니다. 스타일은 CSS에 의해 지시되는 반면 페이지 구조는 HTML에 의해 처리됩니다. 즉, 간격을 만들거나 특정 레이아웃을 얻으려면 HTML 코드에 간격 문자를 추가하지 말고 CSS로 전환해야합니다.

을 사용하여 텍스트 열을 만드는 경우 CSS 대신 배치 된

요소를 사용하여 해당 열 레이아웃을 가져올 수 있습니다. 이 위치 지정은 CSS 플로트, 절대 및 상대 위치 지정 또는 Flexbox 또는 CSS Grid와 같은 최신 CSS 레이아웃 기술을 통해 수행 할 수 있습니다.

레이아웃중인 데이터가 표 형식 데이터 인 경우 표를 사용하여 원하는대로 해당 데이터를 정렬 할 수 있습니다. 테이블은 수년 동안 순수 레이아웃 도구로 악용 되었기 때문에 종종 웹 디자인에서 나쁜 비난을 받지만, 내용에 앞서 언급 한 표 형식의 데이터가 포함되어있는 경우에도 테이블은 여전히 ​​유효합니다.

여백, 안쪽 여백 및 텍스트 들여 쓰기

CSS로 간격을 만드는 가장 일반적인 방법은 다음 CSS 스타일 중 하나를 사용하는 것입니다.

  • 여유
  • 텍스트 들여 쓰기

예를 들어 다음 CSS로 탭과 같은 단락의 첫 번째 줄을 들여 쓸 수 있습니다 (단락에 "first"라는 클래스 속성이 있다고 가정합니다).

p.first {
텍스트 들여 쓰기 : 5em;
}

이제이 단락은 약 5 자 정도 들여 쓰기됩니다.

CSS의 여백 또는 패딩 속성을 사용하여 요소의 위, 아래, 왼쪽 또는 오른쪽 (또는 그 변의 조합)에 간격을 추가 할 수도 있습니다. 궁극적으로 CSS로 전환하여 필요한 간격을 확보 할 수 있습니다.

CSS없이 하나 이상의 공간으로 텍스트 이동하기

텍스트가 이전 항목에서 둘 이상의 공백을 이동하는 것이 전부라면 비 분리 공백을 사용할 수 있습니다.

비 분리 공간을 사용하려면 & nbsp; HTML 마크 업에서 필요한만큼.

예를 들어 단어를 5 칸 이동하려면 단어 앞에 다음을 추가 할 수 있습니다.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

HTML은 이것을 존중하며, 단일 공간으로 축소하지는 않습니다. 그러나 이것은 레이아웃 요구 사항을 달성하기 위해서만 문서에 여분의 HTML 마크 업을 추가하기 때문에 매우 빈약 한 것으로 간주됩니다 . 구조와 스타일의 분리를 다시 생각해 볼 때 원하는 레이아웃 효과를 얻기 위해 비공개 공백을 추가하지 말고 CSS 여백과 패딩을 사용해야합니다.