티스토리 뷰
CSS 속성공부 #3 / display 속성
HTML5가 등장하면서 display 속성에 입력할 수 있는 다양한 키워드가 등장했다. 하지만 모든 display 속성을 제대로 지원하는 웹 브라우저는 아직 없다. 그러므로 우리는 모든 웹 브라우저가 지원하는 display 속성을 중심으로 살펴보도록 하자.
여기서 다룰 속성 키워드들은 다음과 같다.
1. none: 태그를 화면에서 보이지 않게 만듦.
2. block: 태그를 블록 형식으로 지정함.
3. inline: 태그를 인라인 형식으로 지정함.
4. inline-block: 태그를 인라인-블록 형식으로 지정함.
실전예제
더미 객체 더미 객체더미 객체 더미 객체
더미 객체 대상 객체 더미 객체더미 객체 대상 객체 더미 객체
더미 객체 대상 객체 더미 객체더미 객체 대상 객체 더미 객체
더미 객체 대상 객체 더미 객체더미 객체 대상 객체 더미 객체
테스트 결과 none, block의 차이는 눈에 잘보이는데 inline과 inline-block의 실행 결과는 동일하게 나온다.
inline & inline-block 차이
두 키워드의 테스트 결과가 동일하다고 해서 같은 것은 아니다. 두 키워드의 차이는 width와 height, margin 속성을 사용할 때 확인할 수 있다.
inline 키워드는 width, height 속성이 적용되지 않는다. 즉 div의 width, height를 몇으로 지정하든 inline 키워드에는 적용되지 않는다. 그리고 margin 또한 left, right만 적용된다.
inline-block 키워드는 width, height 속성이 적용되고 margin 또한 top, bottom, left, right 모두 적용된다.
속성공부 이전글 확인하기
2018/07/28 - [@WebDevelop/CSS] - CSS 속성공부 #2 / 박스에 대해 알아보자
2018/07/28 - [@WebDevelop/CSS] - CSS 속성공부 #1 / 단위에 대해 알아보자
