렝무식
💚 display: inline-block 속성을 이용한 레이아웃 예제 본문
display 속성은 해당 요소를 어떻게 보여줄 것인지에 대해 결정할 수 있는 css 속성입니다.
보통 관련있는 것들을 나열할 때, <ul>과 <li> 태그를 이용합니다.
ul li 태그는 본래 순서가 없는 요소의 리스트를 작성할 때 사용하는 태그지만, 실제로 그러한 용도로는 잘 쓰지 않는 것이 대부분입니다.
그런데 ul li 태그는 블록 요소이기 때문에 가로로 나열되지 않고, 보통 아래로 나열됩니다.
우리가 원하는 레이아웃을을 만들기 위해서는 가로로 나열이 되어야 하는데, 이때 사용할 수 있는 방법 중 하나가 바로 display: inline-block으로 속성을 변경해주는 방법입니다.
block 요소의 특징은 다음과 같습니다.
- 줄 바꿈 발생
- 너비(width)의 기본 값이 100%
- 높이(height)의 기본 값은 0
- 너비 높이로 면적을 줄 수 있음
따라서 너비 기본값이 100% 이므로 한 줄에 여러 개를 배치할 수 없는 것입니다.
inline 요소의 특징은 다음과 같습니다.
- 줄 바꿈이 발생하지 않음
- 너비와 높이를 지정할 수 없음
- 기본 여백이 존재
여기서 주목해야할 점은 너비와 높이를 지정할 수 없다는 점인데요.
우리는 너비와 높이가 존재하는 요소들을 가로로 배치하고 싶은데 말이죠.
그럴 때 사용할 수 있는 속성이 바로 inline-block 요소가 됩니다.
inline 속성과 비슷하지만, 하나 다른 점이 있습니다.
그것은 바로 너비와 높이를 지정해줄 수 있다는 점입니다.
이러한 inline-block의 특성을 이용해서~
이런 모양을 한 번 만들어 볼게요.
위에 텍스트들은 중요하지 않고, 저 네모네모들을 중심으로 봅니다!
✅ HTML 코드
<body>
<div id="wrap">
<h2><span>01.</span> 입학지원서 작성</h2>
<p>1.26.(금) ~ 2. 16.(금) 22시 모집마감</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
ul과 li 태그로 레이아웃을 구성했습니다 .
✅ CSS
* {margin: 0; padding: 0;}
#wrap {width: 800px; height: 400px; margin: 0 auto; padding: 30px; background: rgba(59,105,197,1.00);}
/*-------------------------------------------------------------------------------------*/
#wrap h2 {margin-bottom: 10px; font-size: 30px; font-weight: 600; letter-spacing: -1px;}
#wrap h2 span {font-size: 22px; color: darkblue;}
#wrap p {margin-bottom: 20px; font-size: 45px; font-weight: 600; color: #fff; letter-spacing: -1px;}
/*-------------------------------------------------------------------------------------*/
#wrap ul {text-align: center;}
#wrap ul li {display: inline-block; width: 380px; height: 70px; margin: 7px; border-radius: 7px; background: #fff;}
inline-block 속성을 이용하면 가운데 정렬이 편리합니다.
왜냐하면 상위부모에 text-align : center 속성을 써주면 가운데 정렬이 되기 때문이죠
text-align 속성은 텍스트 뿐만 아니라 하위의 인라인 요소들을 가운데 정렬하고 싶을 때 사용할 수 있습니다. ㅎㅎ
그리고 우리가 나열하기를 원하는 li 요소에 display: inline-block 속성을 적용해주면 됩니다.
margin 속성으로 간격을 맞춰주면 끝!
사실 이런 레이아웃은 grid 속성을 이용하는 게 훨씬 편리합니다만..
아직 소외된 브라우저에서 실행되지 않는 명령어들이 몇 있습니다.
display grid나 flex도 이러한 명령어들 중 하나이기 때문에 inline-block 이나 float를 이용하여 배치하는 법도 알아두는 게 좋겠지용
안뇽
'웹퍼블리싱 수업정리 > html + css + js' 카테고리의 다른 글
| ❤️ 공통된 컨텐츠의 나열, li 영역 예제 (0) | 2024.04.01 |
|---|---|
| 🧡 메인 슬라이드 영역 예제 (0) | 2024.03.31 |
| 💛 button 태그 사용 예제 (1) | 2024.03.31 |
