애니빌드.LAB
HTML/CSS
CSS CSS 가이드 - block
- 망구
- 2014-06-19 17:53:47
- hit5680
- http://lab.anybuild.co.kr/bbs/htmlcss/1673
html 태그의 스타일시트 속성중에서 가장 기본이 되는 속성은 "display"가 될수가 있습니다.
중요하기도 하지만 기본 바탕이되는 속성이라 이 속성의 특성을 잘 파악해두면 많이 유용할 것입니다.
자주 사용되는 display속성의 종류는 block, inline, inline-block, none이 되겠습니다.
다음 css코드는 display속성의 기본적인 사용 예제입니다.
다음은 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
중요하기도 하지만 기본 바탕이되는 속성이라 이 속성의 특성을 잘 파악해두면 많이 유용할 것입니다.
자주 사용되는 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복사
열기 닫기