인라인 요소에 공백 자유롭게 추가하기 (블록요소와 비교)

HTML의 구조는 크게 블록요소와 인라인요소로 나눌 수 있다. (몇몇 특수경우를 제외)

 

블록요소와 인라인요소는 아래와 같은 상황에 주로 사용하게 된다.

 

• 블록요소

• 레이아웃, 구조 등 페이지의 전체적인 UI를 결정할때는 블록요소를 주로 사용
• width, height, margin, padding등 레이아웃에 영향을 주는 속성이 기본적으로 적용 가능
• 단락을 나누거나 줄바꿈이 필요할때 사용할 수 있음

• 인라인요소

• 텍스트 기반 컨텐츠를 꾸미거나 기능을 추가할때 사용 (텍스트 레이아웃을 유지하며 기능 추가하기 등)
• 레이아웃에 영향을 주는 CSS 속성들이 일부 적용되지 않음
• 간단한 아이콘, 버튼, 짧은 컨텐츠 등에 사용

 

인라인요소는 여러개를 붙여 사용할 경우 의도하지 않은 공백이 발생하는 것을 알 수 있다. 이는 부모요소의 폰트 사이즈를 0으로 하여 간격자체의 크기를 없애버리거나 flex 등의 요소로 감싸 처리하는 등의 방법으로 해결할 수 있다.

 

반대로 인라인요소에 원하는 만큼의 간격을 추가하기위해 띄어쓰기를 여러번 넣어보면 원하는대로 구현되지 않는것을 알 수 있다. HTML은 문서의 구조화, 텍스트 컨텐츠 표현을 위해 만들어졌는데 HTML 문서 작성자의 띄어쓰기 수와 관계없는 일관된 마크업환경 및 문서 구조를 위해 이와같이 설계되었다고 볼 수 있다.

 

하지만 여러가지 방법을 통해 기본 적용 되어있는 공백 규칙을 무시하고 원하는만큼 공백을 추가할 수 있다.

 

 

 

1. Non-breaking Space ( )

HTML 엔터티중 하나인  를 활용하면 간단히 공백을 추가할 수 있다.

<span>Item 1&nbsp;&nbsp;&nbsp;</span> <!--"Item 1   "-->
<span>Item 2   </span> <!--"Item 2 "-->

 

장점

• CSS 없이 간단하게 공백을 추가
• 브라우저 기본 공백 크기로 적용되어 일관된 공백크기를 유지하며 추가가 가능

단점

• 공백 크기 조정, 스타일링 불가능
• 남용할경우 코드 가독성이 저하될 수 있음

 

 

2. CSS white-space 속성

인라인요소의 white-space 속성은 기본적으로 normal값을 가진다. 이를 pre로 수정하여 공백을 추가할 수 있다.

<span>Item 1   Item 2</span> <!--"Item 1 Item 2"-->
<span style="white-space: pre;">Item 3   Item 4</span> <!--"Item 3   Item 4"-->

 

장점

• HTML 문서상에서 입력한 공백을 그대로 유지
• 단순 텍스트 공백 표현에 가장 편리함

단점

• 일관되지 않은 공백 제어 환경으로 의도치 않은 공백이 렌더링될 수 있음.

 

 

3. CSS Margin

인라인요소에서 수평방향(상하)의 margin값은 적용할 수 없지만 수직방향(좌우)의 margin값은 적용이 가능하다.

<span style="margin-right: 30px;">Item 1</span>
<span>Item 2</span>

<!--Item 1       Item 2-->

 

장점

• 손쉽게 공백 크기 조절 가능
• margin값으로 공백의 크기를 관리하므로 여러요소에 일관된 공백크기를 집어넣기 유리함

단점

• 공백 추가를 위한 추가적인 CSS 작성이 필요
• 복잡한 구조의 문서에서 사용하면 스타일 관리가 번거로울 수 있음.

 

 

4. CSS Flex 혹은 Grid

Flex나 Grid요소 안에 집어넣어 레이아웃 단위로 관리할 수 도 있다.

<div style="display: flex; gap: 10px;">
  <span>Item 1</span>
  <span>Item 2</span>
</div>

 

장점

• 손쉽게 공백 크기 조절 가능
• gap등의 CSS 속성값으로 공백의 크기를 관리하므로 여러요소에 일관된 공백크기를 집어넣기 유리함

단점

• 공백 추가를 위한 추가적인 CSS 작성 및 추가적인 HTML 요소 작성이 필요
• 간단한 공백에 Flex 컨테이너 등을 추가하는것은 비효율적일 수 있음
• 일반적인 인라인요소의 특징 및 사용방법과는 거리가 있음

 

 

결론

소개한 방법 외에도 pseudoelement(::before ::after 등)를 활용할 수 도 있으며 CSS의 여러가지 조작을 통해 간격을 고의로 만들어 줄 수도 있다.

하지만 인라인 요소는 텍스트를 가독성을 해치지 않도록 관리하는 요소라는 특징을 잊지말고 상황에 맞는 HTML 태그를 사용하여 레이아웃을 제작할 수 있어야 한다.

단순 텍스트의 공백 추가의 경우에는 위 방법을 사용할 수 있지만 레이아웃 단위에서 간격의 추가가 필요한 경우에는 블록요소의 사용도 고려해야한다.