IT/HTML\CSS 검색 결과
7 개의 검색 결과가 있습니다.
IT/HTML\CSS

[HTML] HTML 라벨(label) 위에 마우스 올리면 손가락 보여주기

이번 글은 라벨 태그 위에 마우스를 올렸을 때, 손가락 모양이 나오게 하려고 한다. 목차 1. 손가락 모양 나와라 1. 손가락 모양 나와라 사진 업로드 기능을 만드려고 input 태그에 type을 file로 하니, 아래와 같이 나오는게 꼴보기 싫어서 라벨을 사용하여 버튼처럼 사용하려고 한다. 일단, 아래와 같이 만들었는데, 라벨에 마우스를 올리니 손가락 모양이 나오질 않는다. 사진 업로드 손가락 모양을 나오게 하는 방법은 label 태그에 style을 먹이는 방법이다. style="cursor: pointer;"를 먹이면 손가락 모양이 나온다.

2023. 7. 21.
IT/HTML\CSS

[HTML] HTML 크롬(Chrome) input type='file' 커스터마이징 하는 방법

이번 글은 input type='file'을 사용할 때, 해당 기능을 다른 방법으로 커스터마이징 하는 방법에 대해 글을 기록한다. 물론, 이것을 사용하려고 했던 이유는 파일 첨부 기능을 넣으려고 했는데 해당 기능에 한글로 되어 있어 이것을 영어로 변환하려다가 적용했다. 목차 1. 커스터마이징 하는 방법 1. 커스터마이징 하는 방법 일단, 태그를 사용하면 크롬에서는 아래와 같이 나온다. 근데, 저 파일 선택과 선택된 파일 없음을 영어로 바꾸고 싶은데, 스타일을 먹여도 안먹혀서 label을 만들어서 사용하는 것이 있어 적용했다. 제일 먼저, input 태그에 있는 것을 style을 먹여서 display:none을 한다. 그러면, 해당 input 태그는 없어지게 되는데, 이 기능을 label을 만들어서 대체를..

2023. 7. 5.
IT/HTML\CSS

[HTML] input 태그 숫자만 입력할 수 있게 하는 방법(정규식)

input 태그에서 문자를 입력했을 때, 숫자만 입력할 수 있도록 하는 가장 좋은 방법은 키를 누르고 난 후에 이벤트를 정규식으로 먹이는 것이다. 1. 정규식 onKeyup="this.value=this.value.replace(/[^-0-9]/g,'');" 2. input 태그에 적용

2022. 6. 3.
IT/HTML\CSS

HTML5 인라인 요소(Inline Element)와 블록 요소(Block Element)

츄르사려고 코딩하는집사입니다. HTML5 태그에서는 블록 요소(Block Element)와 인라인 요소(Inline Element)로 나눌 수 있습니다. 이 블록 요소(Block Element)와 인라인 요소(Inline Element)는 HTML5에 CSS를 입힐 때, 중요한 요소라고 할 수 있습니다. 블록 요소(Block Element)와 인라인 요소(Inline Element)에 적용되는 CSS는 각 다르기 때문에 어느 정도 이해를 하고 있어야 합니다. 1. 블록 요소(Block Element) 블록 요소(Block Element)는 인라인 요소(Inline Element)를 포함할 수도 있고 안할 수도 있으며, 다른 블록 요소(Block Element)도 포함할 수 있습니다. 블록 요소(Block..

2021. 9. 29.
IT/HTML\CSS

HTML 테이블에 데이터를 넣는데 띄어쓰기로 문제 발생 해결 방법

츄르사려고 코딩하는집사입니다. 위의 코드처럼, GCol에 text 형식으로 ABCDE라는 쿼리문을 넣어 결과를 받아올 때, text 여기 뒤에 띄어쓰기를 할 경우에는 인식을 못한 문제점이 있었다. 그래서, 아래의 코드처럼 text 뒤에 띄어쓰기를 지웠을 때 정상적으로 작동했다.

2021. 9. 7.
IT/HTML\CSS

[HTML/CSS] CSS cursor 속성

츄르사려고 코딩하는 코집사입니다. 1. [HTML/CSS] CSS cursor 속성 사용 방법 - 예시로, a 태그 위에 마우스를 올렸을 때의 예제 - cursor : cursor 속성명; a:hovor{ cursor:wait; } 2. [HTML/CSS] CSS cursor 속성 종류 속성 설명 cursor: Auto; 자동 설정 cursor: help; 마우스 커서 우측 하단에 물음표 표시 cursor: wait; 로딩 아이콘 cursor: text; 텍스트 입력 I 모양 cursor: Move; 십자가 모양 cursor: Pointer; 손가락 모양 cursor: Default; 마우스 기본 커서 cursor: Crosshair; 십자 모양 cursor: zoom-in; 십자 돋보기 모양 curso..

2021. 3. 3.