인라인 및 블럭 - 계층 박스 표시하기

인라인 및 블럭 - 계층 박스 표시하기

웹브라우저가 모든 태그를 일종의 박스처럼 취급하기는 하지만, 모든 박스가 같은 것은 아니다. CSS 에는 두 종류의 태그(인라인 및 블럭)에 해당하는 두가지 다른 종류의 박스가 존재하는데, 블럭 박스와 인라인 박스가 그것이다. 블록-계층태그는 그 앞 뒤에 틈을 만든다. 예를 들면 <p> 태그는 위 아래 태그로 부터 분리된 블록을 생성한다. 제목, <div>태그, 테이블, 목록은 블럭-계층 태그의 서로 다른 예다

인라인 태그는 그러한 태그들의 앞이나 뒤에 블럭을 생성하지 않는다. 인라인 태그는 내용, 그리고 그옆 태그들과 같은 줄에 위치한다. <strong> 태그는 인라인태그다. 이 태그로 형식 정의된 단어는 다른 텍스트 옆에 적당히 놓인다. <em> 같은 또 다른 인라인 태그에 감싸인 텍스트 옆에도 놓일수 있다. 사실, 단락 가운데 있는 한 단어를 <strong> 태그로 강조했는데, 그 단어만 그 줄에 갑자기 단독으로 나온다면 상당히 어색해 보일 것이다. 다른 인라인 태그로는 이미지를 넣기 위한 <img>, 링크 생성에 쓰이는 <a>, 폼필드를 생성하는 데 사용되는 여러가지 태그가 있다.

대부분의 경우에 CSS는 인라인 박스와 블럭 박스에 있어서 동일한 역할을 한다. 두 종류의 박스 모두에 글꼴, 색상, 배경을 스타일 정의 할 수 있으며 테두리를 넣을수 있디. 그러나 margin 과 padding 에 대해서는 , 브라우저가 인라인 박스를 달리 취급한다. 인라인 엘리먼트에 좌우 padding 이나 margin 을 사용하여 왼쪽이나 오른쪽에는 공간을 줄수 있지만,상하 padding 이나 margin 을 사용하여 인라인 엘리먼트의 높이를 늘릴 수는 없다.

Note : Padding 이나 margin이 추가될 경우 인라인 엘리먼트가 더 커지지 않는 규칙에 대한 하나의 예외가 있는데, 그건 인라인 태그인 <img> 태그다. 웹 브라우저는 이미지의 박스높이를 정확하게 늘려서 개발자가 넣어준 padding 과 margin 에 맞도록 조절해준다.

가끔 인라인 엘리먼트가 좀더 블럭 계층 엘리먼트처럼 작동하기를 바라거나 혹은 그 반대 상황을 바랄 수도 있다. 블릿 목록은 각 항목을 각각의 자체 블럭처럼 표현하여, 각 목록 항목은 그 다음 항목 위에 쌓인다. 그러나 만약 목록 항목들이 한 줄에 전부 나란히 보이도록 작용을 바꾸고 싶으면 어떻게 할 것인가. 아니면 인라인 엘리먼트를 블럭 계측 엘리먼트처럼 취급하는 경우도 있을것이다. 아마 단락에 삽입된 이미지의 위와 아래에 간격을 두려 하는 경우일 것이다.

다행히, CSS에는 그런 기능을 하는 display 프로퍼티가 있다. 이것을 사용하여 블럭 계층 엘리먼트를 인라인 엘리먼트처럼 작동하도록 할 수 있다. display:inline;혹은 이미지나 링크 같은 인라인 엘리먼트를 블럭 계층 엘리먼트처럼 작용하도록 할수도 있다. display:block;

Note : 요즘 브라우저에서는 지원되지 않는 수많은 옵션들이 display 프로퍼티에는 있다. 그러나 none 값 하나만은 대부분의 브라우저에서 지원되며 많은 쓰임새가 있다. 그것은 간단한 한 가지 기능을 수행하는데, 웹 브라우저에서 보이지 않도록 엘리먼트를 완전히 숨겨준다. 이런 방법으로 감춰진 엘리먼트는 약간의 자바스크립트 프로그래밍으로 원래의 인라인이나 블럭 중의 하나로 되돌려 즉시 보이게 할수 있다. 그리고 CSS를 사용하여 display 가 none 으로 설정된 엘리먼트를 갑자기 보이게 할수도 있다