해당 div에 아래 항목을 추가
transform: translate(-50%, -50%);
해당 div에 아래 항목을 추가
transform: translate(-50%, -50%);
HTML에서 이미지 버튼을 수동으로 삽입하는 방법을 알아보겠습니다. CSS의 background-image 속성을 활용하여 버튼에 이미지를 추가할 수 있습니다.
예제 코드
HTML
1
|
<input type="button" value="Add a new row" class="button-add" />
|
cs |
CSS
1
2
3
4
5
6
7
8
9
10
11
|
input.button-add {
background-image: url(/images/buttons/add.png); /* 16px x 16px */
background-color: transparent; /* make the button transparent */
background-repeat: no-repeat; /* make the background image appear only once */
background-position: 0px 0px; /* equivalent to 'top left' */
border: none; /* assuming we don't want any borders */
cursor: pointer; /* make the cursor like hovering over an <a> element */
height: 16px; /* make this the size of your image */
padding-left: 16px; /* make text start to the right of the image */
vertical-align: middle; /* align the text vertically centered */
}
|
cs |
설명
• background-image: 버튼의 배경에 이미지를 삽입합니다.
• background-color: 버튼 배경색을 투명하게 만들어 이미지가 선명하게 보이도록 합니다.
• background-repeat: 배경 이미지가 반복되지 않도록 설정하여 이미지를 한 번만 표시합니다.
• background-position: 배경 이미지의 위치를 조정합니다. 0 0은 좌상단을 의미합니다.
• border: 버튼의 기본 테두리를 제거하여 깔끔한 디자인을 만듭니다.
• cursor: 마우스 오버 시 포인터 커서로 변경하여 클릭 가능한 요소임을 나타냅니다.
• height: 버튼의 높이를 이미지의 높이와 일치시켜 일관성을 유지합니다.
• padding-left: 이미지와 텍스트 사이에 간격을 두어 가독성을 높입니다.
• vertical-align: 텍스트를 수직으로 중앙 정렬하여 버튼 내부의 요소들이 균형 있게 배치되도록 합니다
추가 팁
• 이미지 크기 조정: 이미지의 크기에 맞게 height와 padding-left 값을 조정해야 합니다.
• 반응형 디자인: 다양한 화면 크기에 대응하려면 미디어 쿼리를 사용하여 스타일을 조정할 수 있습니다.
• 접근성 고려: aria-label 등을 사용하여 스크린 리더 사용자에게도 버튼의 기능을 명확히 전달합니다.
참고 자료
• Stack Overflow: HTML/CSS - How to add image/icon to input type=“button”?
http://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button
Windows 기준:
1. 고 홈페이지 에 접속
https://golang.org/dl/에 가서 최신버전 MSI 설치파일 다운로드
2. GO의 경우 GOPATH라는 workspace 를 따로 설정해줘야 하므로 환경변수 설정을 해준다
Mac 기준:
1. Homebrew 사용시
brew install go
# Gopath 설정
export GOPATH="의존성폴더위치"
참조자료:
Cordova로 갑작스럽게 Build 에러가 나서 원인을 찾지 못한채 삽질을 해보다가 검색을 해보니
Resource 파일명이 아스키코드가 아니면 나는 에러이다. 그림파일중 일부가 한글파일인 상태로 그대로이기때문에 일어나는 문제였다.
Error: cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':processDebugResources'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\andsdk\build-tools\24.0.1\aapt.exe'' finished with non-zero exit value 1
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
파일명을 한글에서 영문으로 바꾸어주니 잘해결되었다.
참고:
http://stackoverflow.com/questions/38690348/ionic-build-failed-find-the-line-where-the-error-occurs
JQuery mobile 에서 로더(스피너) 변경 (0) | 2016.12.13 |
---|---|
특강 7일차 (오후) - 센차터치 (0) | 2015.01.13 |
특강 7일차 (오전) - 센차터치 (0) | 2015.01.13 |
특강 6일차 (오전) - HTML localstorage, 크로스도메인 AJAX, 센차터치 (0) | 2015.01.12 |
특강 5일차 (오후) - JQuery Mobile (0) | 2015.01.09 |