01. <a> vs <button>
- <a href=index.html>인덱스 바로가기</a>
a태그는 현재 페이지에서 다른 페이지나 url로 이동할 때 사용하는 태그이다. 클릭시 이벤트 발생과 같은 페이지 내 효과 발생시에는 주로 button 태그를 사용한다.
'href'에 경로를 입력하면 된다. - <button>태그는 클릭시 이벤트 발생, 효과 발생 등에 사용하는 태그이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//button을 클릭하면 showError()라는 함수를 호출한다.
<button onclick="showError();">
SHOW ERROR!
</button>
<script>
function showError(){
console.log("알 수 없는 경로입니다.");
}
</script>
</body>
</html>
02. button 태그의 타입 (type = submit/reset/ button)
- button 태그에는 type = "submit", "reset", "button"이라는 속성이 있다. 이 중 기본값은 'submit'이다.
- button을 button의 기능으로만 사용하고 싶다면 button type="button"을 명시해주어야 한다.
(form태그 안에서 button의 타입을 명시하지 않는다면 button은 submit(제출)의 기능을 한다.) - button태그는 닫힌 태그고, input 태그는 열린 태그이기 때문에 <input type="button">을 쓸수도 있지만 button 태그를 사용하는 것이 좋다.
=> button은 자식태그를 가질 수 있고, css로 꾸밀 수 있기 때문에 이미지나 텍스트가 들어간 버튼을 사용할 수 있다.
03. preventDefault (javascript)
<body>
<a href="#" id="aTag">
클릭 시 이동
</a>
</body>
//jquery & js를 이용하는 방법.
$(document).on('click', 'a[href="#"]', function(e){
e.preventDefault();
});
//js를 이용하는 방법
document.getElementById("aTag").addEventListener("click", function(e){
e.preventDefault();
console.log("이동이 차단되었습니다.")
});
//id가 aTag인 요소를 클릭시, preventDefault 메서드를 작동시킨다.preventDefault() 메서드는 해당 이벤트에 대한 기본동작을 실행하지 않도록 지정한다.
<a href="#"></a>태그를 클릭할 경우, 페이지의 맨 위로 이동하게 되는데, 이 메서드를 통해 속성값이 href="#"인 a태그를 클릭하더라도 페이지가 맨 위로 이동하지 않게 된다.
03-1. addEventListener
해당 태그에 이벤트를 부여할 때 사용하는 메소드.
'HTML & CSS' 카테고리의 다른 글
| text-shadow와 text-stroke (0) | 2022.11.21 |
|---|---|
| 웹폰트 cdn 연결 사이트 (0) | 2022.11.21 |
| 클릭하면 열리는 menu bar (0) | 2022.11.21 |
| [css] 웹폰트와 설치된 글꼴 사용하기 (link, @import, @font-face) (0) | 2022.11.07 |
| [css]Position 속성 정리: fixed/static/absolute/relative (0) | 2022.11.04 |