【margin을 마이너스치로 지정】html로 「버튼 안에 버튼」을 만드는 방법! (피아노의 백열쇠와 검은 열쇠를 만들어 보았다)
(앞두고) 버튼 태그만으로 피아노를 만들고 싶다! ⇒흰색 열쇠와 검은색 열쇠의 중첩을 어떻게 하자?
HTML에는 "button"이라는 태그가 있으며, 이라는 간단한 설명으로 버튼을 만들 수 있습니다. 이것을 사용해, 브라우저로 피아노를 만들어 보기로 했습니다!
우선, 「드」의 건반을 만들어 보았습니다.
piano.html<html>
<head>
<link rel="stylesheet" href="piano.css">
</head>
<body>
<div align="center">
<button id="do">ド</button>
</div>
</body>
</html>
로 둘러싸인 요소는 페이지 중앙에 표시됩니다.
건반이 페이지의 중간에 있던 쪽이 보기 좋기 때문에 사용해 보았습니다.
그런 다음 css에서 버튼의 너비와 높이를 지정합니다.
피아노의 건반이라고 하면, 새하얀 세로장의 직사각형이군요!
piano.css#do
{width : 80px;
height : 400px;
font-size : 20px;
background-color : #ffffff;
border-color : #000000;}
실제로 표시해 보면
좋은 느낌이네요.
이어서 "드#"를 만듭니다. 마찬가지로 버튼 태그로
piano.html<html>
<head>
<link rel="stylesheet" href="piano.css">
</head>
<body>
<div align="center">
<button id="do">ド</button>
<button id="dos">ド#</button>
</div>
</body>
</html>
css로 검정색 키의 색상과 모양을 지정합니다.
흑열쇠라고 하면, 흰 열쇠보다 조금 작고 검은색이군요.
piano.css#dos
{width : 64px;
height : 320px;
font-size : 20px;
background-color : #000000;
color : #fffafa;}
이런 식으로 지정하고 표시해 보면 ...?
생각했던 것과 다르다. 2점 정도 문제가 있네요.
①상단 모서리가 되어 있지 않다
②블랙키와 화이트키가 겹치지 않음
①을 해결하기 위해서는 css에 다음과 같은 붙이기를 해 봅시다!
piano.css#do, #dos
{display: inline-block;
vertical-align : top;}
메인에서하고 싶은 것은 "vertical-align : top;", 즉
「『드』의 건반과『드#』의 건반을 모두 상단 정렬로 표시해라!」
라는 지시입니다만, 이 vertical-align는 본래 텍스트 요소용의 쓰는 것 같고, 단독으로는 버튼등의 박스 요소에 대해서 효과가 주지 않습니다.
거기서 「display: inline-block;」를 더해 준다고 하는 것이군요.
이 부분은 나 자신도 아직 이해가 얕기 때문에, 제대로 이해할 수 있으면 또 다른 기사에 쓰려고 생각합니다.
어쨌든 vertical-align을 설정하여 표시
무사, 상단 가지런히 되었습니다!
다음으로, 「검은 키와 흰색 키가 겹치지 않는 문제」를 해결해 갑니다.
(본제) margin 태그로 버튼과 버튼을 겹치자!
html · css에서는 "margin"이라는 값을 지정할 수 있습니다.
margin은 "요소와 요소 사이의 공백"의 길이입니다.
margin은 상하좌우를 각각 지정할 수 있습니다.
상단: margin-top: ○○px;
아래쪽: margin-bottom: ○○px;
오른쪽: margin-right: ○○px;
왼쪽: margin-left: ○○px;
그리고 margin에 음수 값을 설정할 수도 있습니다! !
margin이 마이너스이면, 요소끼리는 겹치게 됩니다.
그래서 검은 열쇠를 흰 열쇠에 겹치려면 겹치는 쪽의 '도#'에 css로 다음과 같은 붙임을 해 줍니다.
piano.css#dos
{margin-left : -20px;}
표시해 보면,
화이트 키와 블랙 키가 겹쳐 피아노 같은 외형이되었습니다!
이상입니다.
"margin은 부의 값도 설정할 수 있다"는 것을 모르고 나는 빠져 버렸습니다.
html에 종사하는 사람의 도움이되면 기쁩니다.
Reference
이 문제에 관하여(【margin을 마이너스치로 지정】html로 「버튼 안에 버튼」을 만드는 방법! (피아노의 백열쇠와 검은 열쇠를 만들어 보았다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/AK092/items/188e00f9c1c69ecacd74
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<link rel="stylesheet" href="piano.css">
</head>
<body>
<div align="center">
<button id="do">ド</button>
</div>
</body>
</html>
#do
{width : 80px;
height : 400px;
font-size : 20px;
background-color : #ffffff;
border-color : #000000;}
<html>
<head>
<link rel="stylesheet" href="piano.css">
</head>
<body>
<div align="center">
<button id="do">ド</button>
<button id="dos">ド#</button>
</div>
</body>
</html>
#dos
{width : 64px;
height : 320px;
font-size : 20px;
background-color : #000000;
color : #fffafa;}
#do, #dos
{display: inline-block;
vertical-align : top;}
html · css에서는 "margin"이라는 값을 지정할 수 있습니다.
margin은 "요소와 요소 사이의 공백"의 길이입니다.
margin은 상하좌우를 각각 지정할 수 있습니다.
상단: margin-top: ○○px;
아래쪽: margin-bottom: ○○px;
오른쪽: margin-right: ○○px;
왼쪽: margin-left: ○○px;
그리고 margin에 음수 값을 설정할 수도 있습니다! !
margin이 마이너스이면, 요소끼리는 겹치게 됩니다.
그래서 검은 열쇠를 흰 열쇠에 겹치려면 겹치는 쪽의 '도#'에 css로 다음과 같은 붙임을 해 줍니다.
piano.css
#dos
{margin-left : -20px;}
표시해 보면,
화이트 키와 블랙 키가 겹쳐 피아노 같은 외형이되었습니다!
이상입니다.
"margin은 부의 값도 설정할 수 있다"는 것을 모르고 나는 빠져 버렸습니다.
html에 종사하는 사람의 도움이되면 기쁩니다.
Reference
이 문제에 관하여(【margin을 마이너스치로 지정】html로 「버튼 안에 버튼」을 만드는 방법! (피아노의 백열쇠와 검은 열쇠를 만들어 보았다)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/AK092/items/188e00f9c1c69ecacd74텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
