버튼 세 개를 x축으로 정렬하려면 float 속성이나 inline-block 속성값을 사용해야 합니다. 하지만 <button> 태그는 display 속성의 기본값으로 inline-block 속성값을 갖고 있으므로 따로 적용할 필요가 없습니다. 이 덕분에 x축으로는 기본으로 정렬되므로 width와 height 속성을 적용하고 좌우 배치 작업을 할 수 있습니다.
예제 소스 Exercise/15장/KidsGao/css/style.css
#color2 .color2Wrap .btn-wrap {
margin-bottom: 20px; /* 버튼 서랍장 하단에 공백을 20px만큼 만듭니다. */
}
/* <button>의 공간을 만듭니다. */
/* <button>은 기본값이 display: inline-block입니다. */
#color2 .color2Wrap .btn-wrap .red,
#color2 .color2Wrap .btn-wrap .yellow,
#color2 .color2Wrap .btn-wrap .blue {
width: 59px;
height: 82px;
}
#color2 .color2Wrap .btn-wrap .red {
background-image: url(../img/color/color2/btn/btn_red.png); /* 빨간색 버튼 이미지를 삽입합니다. */
}
#color2 .color2Wrap .btn-wrap .yellow {
background-image: url(../img/color/color2/btn/btn_yellow.png); /* 노란색 버튼 이미지를 삽입합니다. */
}
#color2 .color2Wrap .btn-wrap .blue {
background-image: url(../img/color/color2/btn/btn_blue.png); /* 파란색 버튼 이미지를 삽입합니다. */
}
#color2 .color2Wrap .color2Comment {
color: #8E7577; /* 글자 색을 바꿉니다. */
}