HTML/CSS

CSS CSS 가이드 - block

html 태그의 스타일시트 속성중에서 가장 기본이 되는 속성은 "display"가 될수가 있습니다.
중요하기도 하지만 기본 바탕이되는 속성이라 이 속성의 특성을 잘 파악해두면 많이 유용할 것입니다.

자주 사용되는 display속성의 종류는 block, inline, inline-block, none이 되겠습니다.
다음 css코드는 display속성의 기본적인 사용 예제입니다.

.box { display: block; }


다음은 display 속성을 알아보겠습니다.
display: block;
엘리먼트를 블럭박스로 바꿔줍니다. 블럭속성으로 바뀌면 브라우저 가로 한줄 전체로 적용됩니다.

display: inline
엘리먼트를 일반 글자같은 인라인 속성으로 바꿔줍니다. 안에 들어있는 글자 영역만큼 늘어납니다.

display: none
엘리먼트를 표시하지 않습니다. 단순히 보이지 않는것보다 지워진것과 같은 효과를 보입니다.

display: inline-block
엘리먼트를 블럭박스로 만들지만, 인라인요소처럼 배치합니다. block과 inline 두가지 성격을 다 띄고있습니다.


위의 속성들이 적용된 데모를 보려면 아래 링크를 참고해주세요.
http://codepen.io/anon/pen/jhBfd


그 외에도 많은 속성들이 있는데 자세한 내용은 아래 링크에서 확인할 수 있습니다.
http://www.w3schools.com/cssref/pr_class_display.asp
게시글 공유 URL복사
댓글작성

열기 닫기

댓글작성

top