css display
■ 웹 문서를 보기 좋게 꾸미기 위해서 여러 가지 속성을 넣지만, 무엇보다 중요한 게 각 요소의 위치 일 것입니다. 요소들을 위치에 따라서 전체적인 문서의 구조가 확 바뀌게 되는데요. 각 요소들을 배치할 때 유용하게 사용할 수 있는 속성이 css display입니다.
■ HTML에서 사용하는 모든 요소들은 크게 블로(block) 레벨과 인라인(inline) 태그로 나눠지는데요. '블록' 라벨은 요소 하나가 문서의 한 줄을 차지하는 속성이고, 인라인 라벨 태그는 한 줄을 통째로 차지하지 않는 속성입니다. 즉, 한 줄에 여러 개의 요소가 연속적으로 위치하게 되는 속성인데요.
■ 대표적인 인라인 요소는 이미지(img)가 있구요. 블록 레벨 요소는 박스(div)가 있습니다. 이것들을 이용해서 block과 inline 속성에 대해서 알아보겠습니다.
먼저 블록 레벨과 인라인 레벨 요소를 정리하고 넘어갈게요.
■ 이것들 중에서 블록 레벨 요소인 div 태그를 이용해서 속성을 알아보고, display 속성값을 변경해서 위치를 바꾸는 과정으로 정리해볼게요.
■ 본문에 두 개의 박스를 넣고 크기와 배경색 등을 지정한 상태인데요. 대표적인 block 레벨 요소이기 때문에 당연히 한 줄에 하나의 요소만 위치하게 됩니다. 이제 이 요소의 display 속성을 변경해서 바로 옆으로 배치하도록 변경해보겠습니다.
■ div의 속성에서 display의 속성값을 inline으로 변경해주고, float 속성을 left로 설정하고 출력해해본 결과 값입니다. 이렇게 하나의 줄에 여러 개의 블록 레벨 요소를 연속으로 배치할 수 있습니다.
css float 속성 참고하실 분들은 다음 글 잠깐 참고하시구요.
http://godvow.tistory.com/67 ◀ css float
반대로 inline 요소인 <img>를 넣으면 한 줄에 연속으로 나란히 위치하게 되는데요. 한 줄씩 차지하게 하려면 display : block; 속성을 부여하면 되겠죠?^^ 참고해서 직접 해보셔요. 수고하셨습니다.
