프로그래밍/HTML5

[html/css] 레이아웃 속성(display, inline, block)

콘파냐 2017. 5. 28. 19:41
반응형

html문서에 문자나 이미지 등의 컨텐츠가 위치될 때 다양한 태그들로 둘러싸인다. 


이런 태그들은 display 속성이 갖는 속성값(inline, block)에 따라서  컨텐츠의 표시되는 방식에 차이가 생기게 된다.


inline 속성값을 디폴트로 갖는 태그는 a태그가 있고 


block 속성값을 디폴트로 갖는 태그는 div, p 등의 태그가 있다. 


설명에 앞서 이 태그들을 사용한 간단한 예제를 보자.


코드와 결과를 보면 div 태그로 둘러쌓인 내용(block) 앞뒤로 줄바꿈이 되어 있다. block 속성을 가진 태그는 욕심쟁이라서 한 라인 전체를 혼자서 다 쓰는 성질을 갖기 때문이다.


반면에 a 태그는 한 라인 내에서 다른 컨텐츠들과 어울어져 있다. 


이런 기본적인 성질 외에도 inline 속성과 block 속성을 갖는 태그들은 몇가지 구별되는 차이점을 가진다.

display 속성이 inline인 태그의 성질

width, height, margin 속성들을 가질 수 없다.(이런 속성을 지정하더라도 무시된다.)

줄 간격의 조정은 line-height 속성을 사용한다.

inline 속성을 갖는 태그가 연속으로 위치할 때는 두 내용을 구별할 수 있을 정도의 간격이 생긴다.


display 속성이 block인 태그의 성질

width, height, margin 속성을 가진다.


※ 이런 성질로 인해서 inline 속성값을 갖는 태그 안에 block 속성값을 갖는 태그가 쓰일 수 없다. (반대로 block 속성값을 갖는 태그 안에 inline 속성값을 갖는 태그는 쓰일 수 있다.)



다음은 a태그와 div 태그에 background 속성을 입혀서 두 태그가 문서 내에서 차지하는 공간을 비교한 것이다.

block 속성을 갖는 태그는 기본적으로 width:100%의 값을 갖는다 이 값은 현재 웹 브라우저 창의 가로 사이즈를 나타낸다. 



다음처럼 a태그와 div태그에 width와 height 속성을 줘보면

a 태그에는 width와 height 속성이 적용되지 않음을 알 수 있다. margin속성 역시 div 태그에만 적용되고 a태그에는 무시될 것이다.



만약 a 태그에 width와 height 속성을 주고 싶다면 display 속성을 추가한다. 

display 속성값

none : 해당 요소를 제거

inline : 해당 요소를 inline 으로 바꿈

block : 해당 요소를 block 으로 바꿈

inline-block : inline 속성(한 줄 내에서 다른 요소들과 연결됨)과 block 속성(width, height, margin 등의 속성)을 동시에 가짐

레이아웃에 관련된 내용은 매우 중요한데 위 내용 뿐 아니라 box-sizing, 마진 겹침 등에 대한 내용을 제대로 이해해야 정확한 레이아웃을 설계할 수 있다. 간혹 레이아웃이 겹치거나 보기에 이상한 경우가 생기는 사이트들은 이런 기본적인 레이아웃 설계를 잘못한 것이다. 다음에는 다른 레이아웃 요소들에 대한 내용을 공부해야겠다.^^

반응형