1. display: table로 메뉴 버튼 만들기
옆으로 쭉 나열되는 메뉴 버튼은 float를 이용해 자주 작업했는데 메뉴 버튼 개수가 늘어나거나 줄어들면 매번 width:100%/n(개수) 수정해야 하는 불편함이 있었다. 그래서 다른 방법을 찾아보다가 dispaly: table를 이용한 방식을 알게 되어 기록하려 한다.
[중요한 속성!]
- display: table - 다른 요소를 <table> 태그처럼 표현할 수 있는 속성이다.
- display : table-cell - 다른 요소를 <td> 태그처럼 표현할 수 있는 속성이다.
- table-layout: fixed - 너비를 고정시키는 속성으로 셀 내용에 따라 너비가 달라지지 않는다.
2. HTML, CSS 소스
[HTML]
<body>
<div class="wrap">
<div class="box" style="background-color: #FFB4B4;"><a href="#">바로가기1</a></div>
<div class="box" style="background-color: #FFF89A;"><a href="#">바로가기2</a></div>
<div class="box" style="background-color: #FFB4B4;"><a href="#">바로가기3</a></div>
<div class="box" style="background-color: #FFF89A;"><a href="#">바로가기4</a></div>
</div>
</body>
[CSS]
<style type="text/css">
.wrap{
width: 1000px;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.wrap .box{
text-align: center;
background: #dbebfa;
display: table-cell;
vertical-align: middle;
}
.wrap .box a{
display: inline-block;
width: 100%;
height: 100%;
padding: 20px 0;
}
</style>
[결과 화면]
3. 정리
부모요소에 display: table; table-layout: fixed; 넣어 주고 자식 요소에는 display: table-cell;를 넣어주면 부모요소의 width안에서 자식 요소들이 동일한 간격으로 자동 조절된다.
'개발' 카테고리의 다른 글
| input 체크박스 CSS 변경하기 (0) | 2022.08.19 |
|---|---|
| z-index 값을 올려도 적용이 안 되는 이유 (0) | 2022.08.19 |
| CSS로 말풍선(tooltip) 만들기 (0) | 2022.08.17 |
| float 적용 시 발생하는 부모의 높이 문제 해결 방법 (0) | 2022.08.16 |
| clear 알아보기 (0) | 2022.08.16 |
댓글