본문 바로가기

[개발] Programming197

체크박스 배경을 이미지로 지정하기 체크박스의 기본 형태는 매우 못생겼다.. style로 background-color를 지정해도 인식이 안된다. 이미지를 background로 지정해 줘야 효과를 낼 수 있다. 체크박스의 스타일을 다음과 같이 지정하면 된다. 1 2 style="background:url('이미지 경로'); Colored by Color Scripter cs 그럼 드디어 못생긴 체크 박스를 원하는 색상으로 변경할 수 있다. 2018. 11. 2.
a태그 클릭 이벤트, href "#", "#none", onclick 등 차이점 이미지나 문자에 a태그로 링크를 주어 버튼 효과를 만들 수 있다.단순히 클릭 가능하도록 보이기 위해 사용하는 href 에는 다양한 요소를 넣을 수 있다. 아래 소스에서 버튼 클릭으로 clickBtn(); 가 실행된다. 물론 여기서 href는 아무런 이벤트를 발생하지 않는 것이 주 목적이다.이미지를 버튼 처럼 보이게 하는게 목적이니깐. 그럼 href를 버튼 처럼 사용하기 위해 주는 속성을 살펴보자. href="#" // 페이지 맨 위로 이동href="#none" // 페이지 이동 Xhref="javascript:void(0)" // 페이지 이동 Xhref="#특정id" // 페이지에서 해당 아이디가 있는 화면으로 이동 href="#none"과 유사하게 onclick="" 도 사용할 수 있는데,onclick.. 2018. 11. 2.
a태그 href 속성 #, #none 및 링크 옵션 href "#"와 "#none"의 차이 이미지나 문구 등에 a tag를 사용하여 버튼 처럼 사용하는 경우가 많은데, 이럴때 아래와 같은 차이가 있다. 버튼1 버튼2 "#" : 아무것도 실행하지는 않지만 페이지 최상단으로 이동한다. "#none" : 아무것도 실행하지 않으며, 페이지 최상단으로도 이동하지 않는다. 같은 페이지 내에서 이동 위로이동'을 클릭할 경우 name이 'here'인 곳으로 이동한디. 위로이동 다른 페이지로 이동 href에 넣은 주소로 페이지를 이동시킨다. 구글 열자 * 페이지를 열 창을 선택하는 옵션도 줄 수 있다. ValueDescription_blankOpens the linked document in a new window or tab_selfOpens the linked doc.. 2018. 11. 2.
HTML 특수문자 표현, 치환 방법 HTML 특수 문자 치환 특수 문자가 포함된 경우 브라우저는 웹소스의 일부(태그)로 인식하는 오류가 발생한다.이 경우 아래 코드로 치환하여야 한다. 특히 사용자가 입력할 수 있는 Form 에는 필수! 예) ", , 등 문자는 코드로 인식 되는 문제 발생 는 소스로 인식하는 방면, 치환된 문자인 는 문자로 인식한다. [ 자주 쓰는 특수문자 ]^^''>>", ">") 자바스크립트에서 치환 var res = str.replace(">", ">"); 2018. 11. 2.
드롭다운 메뉴 선택시 페이지 이동 (select option 태그 페이지 이동) 드롭다운 메뉴 선택시 페이지 이동 (select option 태그 페이지 이동) Select tag 아래 펼쳐진 Option을 클릭했을 때 페이지 이동이 되는 기능 추가 option 태그의 value에 링크를 넣으면 된다. 구글 열기 네이버 열기 예) '구글 열기'를 클릭하면 google.com으로 이동하게 된다. 클리해보기 -> 열어볼 페이지를 선택해 주세요. 구글 열기 네이버 열기 2018. 11. 2.
input 태그 힌트 주기 (placeholder 설정) 및 힌트 문구 폰트 색상 지정 input tag에서 예시 처럼 사용할 수 있는 힌트 문구를 추가할 수 있는 속성이다. 이름: 해당 문구에 색상을 주기 위해서는 추가로 브라우저별 style을 지정해줘야함. ::-webkit-input-placeholder { color:#aaa; font-size:12px; } // WebKit browsers :-moz-placeholder { color:#aaa; font-size:12px; } // Mozilla Firefox 4 to 18 ::-moz-placeholder { color:#aaa; font-size:12px; } // Mozilla Firefox 19+ :-ms-input-placeholder { color:#aaa; font-size:12px; } // Internet Expl.. 2018. 11. 1.

티스토리툴바