1. 클래스 이름을 여러 이름으로 쪼갤 수 있다.
* HTML
<div class="piano">
<button class="key white" data-note="C"></button>
<button class="key black" data-note="C#"></button>
* CSS
.key {
width: 40px;
height: 200px;
border: 1px solid #000;
margin: 1px;
box-sizing: border-box;
display: flex;
align-items: flex-end;
justify-content: center;
cursor: pointer;
}
.white {
background: #fff;
z-index: 1;
}
.black {
background: #000;
width: 30px;
height: 120px;
margin-left: -15px;
margin-right: -15px;
z-index: 2;
position: absolute;
}
그렇지만 쪼갤 수 있는 단위는 한정적이다. "단어"가 그 최소 단위인듯 하다.
* CSS
.k {
width: 40px;
height: 200px;
border: 1px solid #000;
margin: 1px;
box-sizing: border-box;
display: flex;
align-items: flex-end;
justify-content: center;
cursor: pointer;
}
.whi {
background: #fff;
z-index: 1;
}
.black {
background: #000;
width: 30px;
height: 120px;
margin-left: -15px;
margin-right: -15px;
z-index: 2;
position: absolute;
}
음절 단위로 쪼갰을 때 제대로 적용되지 않는다.
'웹 프로그래밍 > 기초' 카테고리의 다른 글
[HTML/Javascript] 🖱️클릭 이벤트 처리 하는 방법 (0) | 2024.06.01 |
---|---|
웹 프로그래밍 기초 4일 - 피아노 건반 구현🎹 (0) | 2024.05.26 |
웹 프로그래밍 기초 3일 - 스도쿠 채점기 (0) | 2024.05.22 |
HTML - 하이퍼링크 걸기 (0) | 2024.05.22 |
웹 프로그래밍 기초 2일 (0) | 2024.05.19 |
댓글