HTML - 클래스 특징

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;
}

html css로 만든 piano

---

그렇지만 쪼갤 수 있는 단위는 한정적이다. "단어"가 그 최소 단위인듯 하다.

 

* 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;
}

 

 

음절 단위로 쪼갰을 때 제대로 적용되지 않는다.