1.2.6.4 CSS 기초 - 테두리와 글상자

전자책을 만들다 보면 상자 안에 문단이나 본문을 넣어 다른 내용과 구분을 해야 할 때가 있다. 이 글에서도 코드는 본문과 구분할 수 있도록 네모난 글상자를 만들고 그 안에 코드를 작성한다. 상자를 만드는 방식에는 테두리와 글상자가 있다(테두리, 글상자는 설명을 돕기 위해 임의로 정한 이름임). 테두리는 텍스트 주위에 선을 그어 네모난 상자를 만드는 것이고, 글상자는 네모난 개체를 만들고 그 안에 텍스트를 채워 넣는 방식이다. 테두리는 텍스트에 종속되기 때문에 텍스트가 사라지면 테두리도 함께 사라지지만, 글상자는 텍스트와 독립돼 있는 완성된 개체기 때문에 텍스트가 없어도 글상자는 사라지지 않는다. 

▶ 테두리 예제

<p style="border: 1 solid red;">테두리는 문단 주위에 선을 그리는 것으로 문단과 하나로 움직인다. 문단 내용이 사라지면 테두리도 함께 사라진다.</p>

테두리는 문단 주위에 선을 그리는 것으로 문단과 하나로 움직인다. 문단 내용이 사라지면 테두리도 함께 사라진다.

▶ 글상자 예제

<div style="border: 1 solid red;">

<p>글상자는 테두리와 달리 하나의 독립된 개체다. 사각형의 상자를 먼저 만들고 그 안에 내용을 채워 넣기 때문에 내용이 사라져도 글상자는 사라지지 않는다.</p>

</div>

글상자는 테두리와 달리 하나의 독립된 개체다. 사각형의 상자를 먼저 만들고 그 안에 내용을 채워 넣기 때문에 내용이 사라져도 글상자는 사라지지 않는다.

테두리와 글상자 예제를 보면 결과가 동일하고 테두리를 그리기 위해 사용하는 CSS 속성도 같다. 다만 테두리는 <p>태그에 바로 속성을 적용하고, 글상자는 <div>태그에 테두리를 적용한 후 그 안에 <p>태그를 넣은 차이만 있을 뿐이다. 

테두리는 한 문단을 상자 안에 넣을때 간단하게 사용할 수 있다. 위 예에서 처럼 자주 반복되지 않고 한 문단으로 끝나는 상자를 만들 때 테두리 클래스를 만들어 두면 편집을 쉽게 할 수 있다.

글상자는 한번에 여러 문단에 테두리를 치거나 반복적으로 테두리를 적용해야 할 때 사용할 수 있다. 이 문서에서 태그를 표현하기 위해 자주 사용하는 테두리는 모두 글상자로 만들었다.

▶ 테두리와 글상자 비교

<p style="border: 1 solid red;">테두리는 한 문단씩 적용된다</p>

<p style="border: 1 solid red;">테두리는 한 문단씩 적용된다</p>

<p style="border: 1 solid red;">테두리는 한 문단씩 적용된다</p>

<div style="border: 1 solid red;">

<p>여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다. </p>

<p>여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다. </p>

<p>여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다. </p>

</div>

테두리는 한 문단씩 적용된다

테두리는 한 문단씩 적용된다

테두리는 한 문단씩 적용된다

여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다.

여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다.

여러 문단에 테두리를 적용하고 싶다면 글상자를 이용한다.

테두리를 이용하면 한 문단을 상자에 넣을 수 있지만 여러 문단을 넣을 수는 없다. 반면 글상자는 <div>태그로 여러 문단을 하나의 상자에 넣을 수 있다. 테두리와 글상자는 쓰임이 다르기 때문에 전자책을 편집할 때 필요에 따라 선택해서 사용하면 된다.