« 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

[53일차](HTML/css로 피아노 만들기) 1편 피아노 모양 만들기

우선 전 편을 토대로 페이지를 불러오면

이런 페이지가 나온다.

각각 검은건반 블록은 한그룹<div>태그로 따로 묶여져있다 .

하나하나 피아노 건반 모양을 내야하기 때문에

건반하나의 높이와 크기를 딱 정했다

가로 30px 세로 250px인데

검은 건반의 크기와 검은건반 사이에 들어가는

블럭의 크기도 고려해야 하기 때문에

가로 사이즈는 하나하나 정해줄 수 밖에 없었다.

display: grid;

그리드모델에 대해서는 다른곳에 보면 설명이 많다.

기존 박스모델과 다른점은

https://ko.mort-sure.com/blog/flexbox-vs-css-grid-a-comparative-analysis-175c07/

나는 건반을

이렇게 만들기위해 그리드를 사용했다.

grid-template-columns: N px .....

1
2
3
4
5
6
7
#keyBoard {
    display: grid;
    grid-template-columns: 30px 30px 15px 30px 30px 30px 30px 15px 30px 15px 30px 30px;
    height: 250px;
    font-size: 1px;
    padding-bottom: 2rem;
}
Colored by Color Scripter
cs

이 짓 말고도 가로로 자동으로 정렬해줄 수 있다.

참조문서를 보자.

개발자 도구를 보면서 내가 생각한 크기가 맞나 확인한다.

CSS html로 생성한 버튼의 색깔과 모양을 없애고 싶을때

기본적으로 나오는 버튼모양이 참 못낫다 어떻게 이렇게 만들 수 있나 싶을정도다

참고할만한 팁을 알려주겠다.

border: none

현재 버튼이나 박스의 모든 테두리를 없애준다

그런데 나는 특정 테두리가 필요한걸? 그러면

특정 테두리만 지정해서 다시그려주면된다.

예를들면

border: none border-left: 1px solid black 이런식으로

css는 한번 없앴다고 영영없애는게아니라

border: none 했을 때 지우개로 한번 지운다고 생각해라

그리고 border-left:로 다시 그리면 된다.

절대 순서가 바뀌면 안된다!

outline: none

버튼을 눌렀을때 표시되는 파란색 테두리를 없애준다.

background: none

버튼의 존못색깔을 없애준다.

개발자 도구 단축기는 커맨드 + 옵션 + i

어느정도 생각한것에 비슷해지고 있다.

이제 검은색 건반 밑 블록을 설정해주자.

grid-column-start: 1;

grid-column-end: 3;

만약에 세개의 블럭이 있다 치자 ,

가로로 세 칸이 들어갈 수 있는 공간에 자기혼자 다 들어가겠다는 소리다!

그래서 이건 한 그룹을 설정하는게 아니라

특정 아이템에게만 지정해줘야한다.

1
2
3
4
5
6
7
#cHKey {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 3;
  outline:none;
  border: none;
}
cs

그리고 남은건 노가다이다.

필요한블럭에 테두리를 넣어주고

검은건반에 색을 넣어주고

크기조정이 필요하면 크기조정까지 해주자.

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
#keyBoard {
    display: grid;
    grid-template-columns: 30px 30px 15px 30px 30px 30px 30px 15px 30px 15px 30px 30px;
    height: 250px;
    font-size: 1px;
    padding-bottom: 2rem;
}
#cKey{
  padding: 0;
  border: none;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  background: none;
  outline:none;
}
#cRHLKey {
  display: grid; 
  border-bottom: 1px solid black;
}
#cHKey {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 3;
  outline:none;
  border: none;
}
#cRKey{
  padding: 0;
  border: none;
  border-right: 1px solid black;
  background: none;
  outline:none;
}
#dLKey{
  padding: 0;
  border: none;
  outline: none;
  background: none;
}
#dKey{
  padding: 0;
  border: none;
  border-bottom: 1px solid black;
  background: none;
  outline: none;
}
#dRHLKey {
  display: grid;
  border-bottom: 1px solid black;
}
#dHKey {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 3;
  border: none;
  outline: none;
}
#dRKey {
  background: none;
  border: none;
  border-right:1px solid black;
  outline: none;
}
#eKey{
  background: none;
  border: none;
  border-bottom: 1px solid black;
  outline: none;
}
#eLKey{
  background: none;
  border: none;
  outline: none;
}
#fKey{
  background: none;
  border: none;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  outline: none;
}
#fRHLKey {
  display: grid;
  border-bottom: 1px solid black;
}
#fHKey {
  border: none;
  outline: none;
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 3;
}
#fRKey {
  border: none;
  border-right:1px solid black;
  outline: none;
  background: none;
}
#gKey {
  border: none;
  border-bottom: 1px solid black;
  outline: none;
  background: none;
}
#gRHLKey {
  display: grid;
  border-bottom: 1px solid black;
}
#gRKey {
  border: none;
  outline: none;
  border-right:1px solid black;
  background: none;
}
#gLKey {
  border: none;
  outline: none;
  background: none;
}
#gHKey {
  border: none;
  outline: none;
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 3;
}
#aKey{
  border: none;
  outline: none;
  border-bottom: 1px solid black;
  background: none;
}
#aRHLKey {
  display: grid;
}
#aHKey {
  border: none;
  outline: none;
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 3;
}
#aLKey {
  border: none;
  outline: none;
  background: none;
}
#aRKey {
  border: none;
  outline: none;
  border-right:1px solid black;
  border-bottom: 1px solid black;
  background: none;
}
#bLKey {
  border: none;
  outline: none;
  border-bottom: 1px solid black;
  background: none;
}
#bKey{
  border: none;
  outline: none;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background: none;
}
Colored by Color Scripter
cs