CSS스타일 줄때 display 속성에 대해 오늘 정리해보고자 합니다.
말그대로 요소에대한 표시에 대한 부분으로 다양한 속성값을 선택해서 지정합니다.
1. none : 요소가 보이지 않는다
2. block : 블록의 형태로 박스로 보이게 합니다.
3. inline : 인라인 박스
4. inline-block : block으로 기본 만들어지고, 배치는 inline처럼 된다.
여기서 none은 영어 할줄 안다면 바로 아실것이고 (안보이게 한다는 의미)
block과 inline의 차이가 뭔지 궁금하실텐데요.
1. block은 화면에서 가로 기준으로 100% 길이 값으로 가로를 꽉 채우게 됩니다.
그리고 줄바꿈이 될때 자동으로 줄바꿈 이루어지고 가로 세로 길이를 지정하면 적용됩니다.
이 속성은 기본적으로 div태그에 저장됩니다.
2. inline은 block반대개념이라 보시면 됩니다. 가로 세로(width, height)지정 해도 적용되지 않구요. 줄바꿈또한 안됩니다.
이 속성 적용 태그는 span입니다.
3. inline-block은 둘의 하이브리드라고 보시면 되는데... 특징은 다음과 같습니다.
자동 줄바꿈은 안됩니다.
그러나 가로세로 (width, height)크기 지정은 가능합니다.
이 속성은 ie7이하는 지원되지 않으며(8부터 지원) 그래서 이 경우 대신 *zoom:1; *display:line 넣어 대체 가능
인라인 블록 지정하면 요소와 요소 사이 공백이 만들어집니다.
다음의 간단한 예시로 이해에 도움 되기를 바랍니다.
- CSS
- HTML
<div id="block">display:block</div>
<span id="inline">display:inline</span>
<span id="inline-block">display:inline-block</span>
아래처럼 표시됩니다.
여기서 display:block의 경우 기본적으로 가로 세로 지정은 가능하나 가로가 100%으로 적용이 되는데요.
무슨말인고 하니 지금 현재는 120으로 지정되어 위처럼 보이지만 개발자 모드로 검사해보면 보이지 않는 마진값이 100%의 나머지를 꽉 채워둡니다.
위처럼 주황색영역이 안보이는 마진(margin)값이라 보시면 되겠습니다.
따라서 display:block지정하면 다른 요소가 옆에 착 달라붙을수 없다는 말이 되겠습니다.
그외에도 table에 매칭되는 display속성으로
1. table : "display:table" 지정하면 HTML태그의 <table>처럼 동작합니다.
2. table-cell : 이 경우는 마찬가지로 HTML태그의 <td>처럼 동작합니다.
3. table-row : <tr>과 같습니다.
그밖의 더욱 자세한 정보는
http://www.w3schools.com/cssref/pr_class_display.asp
으로 이동해서 살펴보세요.
이해에 도움이 되기를 바랍니다.
댓글