CSS display:inline-block 값
display: inline과 비교할 때, 주요 차이점은 display: inline-block을 사용하여 요소의 너비와 높이를 설정할 수 있다는 것이다.
또한 display: inline-block에서는 상단 및 하단 여백/패딩이 존중되지만 display: inline에서는 그렇지 않습니다.
display: block과 비교할 때, 주요 차이점은 display: inline-block은 요소 뒤에 줄 바꿈을 추가하지 않으므로 요소는 다른 요소 옆에 앉을 수 있습니다.
다음 예제에서는 inline, display: inline-block 및 display: block의 서로 다른 표시 동작을 보여 줍니다:
| <!DOCTYPE html> <html> <head> <style> span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } span.c { display: block; width: 100px; height: 100px; padding: 5px; border: 1px solid blue; background-color: yellow; } </style> </head> <body> <h1>display 속성</h1> <h2>display: inline</h2> <div>서울은 한국의 다른 도시에 비해 오래 전부터 서양에 잘 알려진 도시였기에, 서양에서는 각 언어권마다 자체적으로 표기를 만들어 쓰는 경우가 많다. 가장 보편적인 표기인 Seoul은 표준적인 로마자 표기법 제정 전부터 사용됐다. <span class="a">남대문</span> <span class="a">동대문</span> 조선시대 서울의 공식 명칭은 한성이지만, 조선 후기에는 이미 수도를 뜻하던 일반명사 서울이 이 지역을 가리키는 것으로도 사용되었다. 때문에 역대 조선을 방문했던 외국인이 한성/한양보다 구어체인 서울을 자국어 음운에 맞게 표기했다. </div> <h2>display: inline-block</h2> <div>서울은 한국의 다른 도시에 비해 오래 전부터 서양에 잘 알려진 도시였기에, 서양에서는 각 언어권마다 자체적으로 표기를 만들어 쓰는 경우가 많다. 가장 보편적인 표기인 Seoul은 표준적인 로마자 표기법 제정 전부터 사용됐다. <span class="b">남대문</span> <span class="b">동대문</span> 조선시대 서울의 공식 명칭은 한성이지만, 조선 후기에는 이미 수도를 뜻하던 일반명사 서울이 이 지역을 가리키는 것으로도 사용되었다. 때문에 역대 조선을 방문했던 외국인이 한성/한양보다 구어체인 서울을 자국어 음운에 맞게 표기했다. </div> <h2>display: block</h2> <div>서울은 한국의 다른 도시에 비해 오래 전부터 서양에 잘 알려진 도시였기에, 서양에서는 각 언어권마다 자체적으로 표기를 만들어 쓰는 경우가 많다. 가장 보편적인 표기인 Seoul은 표준적인 로마자 표기법 제정 전부터 사용됐다. <span class="c">남대문</span> <span class="c">동대문</span> 조선시대 서울의 공식 명칭은 한성이지만, 조선 후기에는 이미 수도를 뜻하던 일반명사 서울이 이 지역을 가리키는 것으로도 사용되었다. 때문에 역대 조선을 방문했던 외국인이 한성/한양보다 구어체인 서울을 자국어 음운에 맞게 표기했다. </div> </body> </html> |
span요소에 a 클래스는 display:inline을 설정하여 높이와 너비를 지정하였지만 inline속성으로 아래 그림과 같이 표시가 되고
span요소에 b 클래스는 display:inline-block을 설정하여 높이와 너비를 지정하면 inline에 block속성에 높이와 너비만큼 span 요소가 설정되어 표시된다.
span요소에 c 클래스는 display:block을 설정하면 span요소가 줄바꿈하여 높이와 너비만큼 위치와 자리를 차지하여 배치된다.
상기 코드를 실행한 결과가 아래 그림과 같이 표시된다.
inline-block으로 네비게이션링크 활용하기
디스플레이에 대한 공통 사용: inline-block은 수직 대신 수평을 표시할 수 있다. 다음 예는 수평 탐색 링크를 생성한다.
| <!DOCTYPE html> <html> <head> <style> .nav { background-color: yellow; list-style-type: none; text-align: center; margin: 0; padding: 0; } .nav li { display: inline-block; font-size: 20px; padding: 20px; } </style> </head> <body> <h1>수평 네비게이션 링크</h1> <p>기본적으로 목록 항목은 수직으로 표시됩니다. 이 예제에서는 inline-block을 사용하여 항목을 수평으로 표시합니다(나란하게 표시).</p> <p>참고: 브라우저 창 크기를 조정하면 너무 붐빌 때 링크가 자동으로 끊어집니다.</p> <ul class="nav"> <li><a href="#home">홈</a></li> <li><a href="#about">우리는</a></li> <li><a href="#clients">고객들</a></li> <li><a href="#contact">연락처</a></li> </ul> </body> </html> |
클래스 nav에 li요소에 display:inline-block값으로 설정하면 옆으로 나란히 li요소들이 배치된다. 위의 코드를 실행하면 아래 그림과 같다.
지금까지 CSS layout에 display:inline-block으로 설정하는 개념과 예제를 실습하였다.
꼭,,, 손으로, 눈으로, 머리로 코딩을 하며 실습하여 익히기를 바란다.
모두 화이팅입니다...
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
댓글