« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

[52일차](HTML/css로 피아노 만들기) -0편 피아노 건반 설계하기

왜 하필?

뭔 뻘짓인가 싶겠지만,

글쎄 오늘 HTML이랑 CSS배우는데

이거 배운걸로 스프린트과제 전에 뭘해볼까 해서 강의보다가

container박스랑 inner박스 설명하는 부분에서

와 ! 피아노 만들어봐야지! 했다

근데 결국 inner container 활용도 못했다.

내창의력은 여기까지 아 ㅋㅋ

설계하기

건반 하나하나마다 박스를 만들고

그 박스에 사운드를 링크하면

또로롱~~! 피아노가 나오겠지 !하고 생각했다

ㅋㅋㅋㅋ ㅋ

첫 문제 봉착

첫실험은 이거였다

이너박스와 컨테이너가 정상적으로 켜지는가?

안켜지더라 , 이 문제에 봉착했을 때 도무지 어떻게 검색해야될지 모르겠고

정규시간중이었는데 헬프데스크 올리면 다른사람들 열심히 하는데 뻘짓한다고

혼날거같았다. 그냥 얌전히 로그인폼 만들걸 ㅠ

그래서 grid모델을 쓰자고 생각했다

그리드는 배우지도 않았고 생활코딩에서 잠깐 본게 다지만,

그리드로 구성하면 대충 설계가 그려졌다.

설계도(?)

검은건반 블럭을 그리드로 3등분해서

하단 왼쪽블럭을 마우스로 누르면 '도' 소리가나고

하단 오른쪽부분을 누르면 '레' 소리가 나게 만들거다.

이를 토대로 수도코드 비스무리한걸 주석으로 달아봤다

HTML에서 주석은 <!--할말 —>이다!

꼭 이렇게까지 해야겠냐만은

그냥 이렇게 했다..! 더좋은 방법 있으면 소개좀 해주세요..!

HTML 구성 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UrWorldClassPianist</title>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
<div id = "keyBoard">
    <!-- cKey -->
    <button id = "cKey"></button>
    <!--div c오른쪽 c샵 d왼쪽-->
    <div id = "cRHLKey">
        <button id = "cHKey"></button>
        <button id = "cRKey"></button>
        <button id = "dLKey"></button>
    </div>
    <!-- dKey -->
    <button id = "dKey"></button>
    <!--div d오른쪽 d샵 f왼쪽-->
    <div id = "dRHLKey">
        <button id = "dHKey"></button>
        <button id = "dRKey"></button>
        <button id = "eLKey"></button>
    </div>
    <!-- eKey -->
    <button id = "eKey"></button>
    <!-- fKey -->
    <button id = "fKey"></button>
    <!--div f오른쪽 f샵 g왼쪽-->
    <div id = "fRHLKey">
        <button id = "fHKey"></button>
        <button id = "fRKey"></button>
        
        <button id = "gLKey"></button>
    </div>
    <!-- gKey -->
    <button id = "gKey"></button>
    <!--div g오른쪽 g샵 a왼쪽-->
    <div id = "gRHLKey">
        <button id = "gHKey"></button>
        <button id = "gRKey"></button>
        
        <button id = "aLKey"></button>
    </div>
    <!-- aKey -->
    <button id = "aKey"></button>
    <!--div a오른쪽 a샵 b왼쪽-->
    <div id = "aRHLKey">
        <button id = "aHKey"></button>
        <button id = "aRKey"></button>
        
        <button id = "bLKey"></button>
    </div>
    <!-- bKey -->
    <button id = "bKey"></button>
 
</div>
</body>
</html>
Colored by Color Scripter
cs