FrontEnd Programming

[FrontEnd] 4. HTML 공통 Attributes, 공통Event

코딩펭귄 2024. 3. 6. 11:30

HTML의 주요 공통 속성 (Attributes)

- 모든 태그에 쓸수있는 속성들 (java script에서 쓰기위한 용도)

- accesskey : alt누르고 다른걸 눌렀을때 포커싱

- data : 데이터의 변수. 태그에 필요한 데이터(변수)를 지정할 수 있음( java script로 제어하기 위한 속성. 쇼핑몰(ex쿠팡)에 굉장히 자주 쓰임)

- hidden : 보여주고싶지않을대 사용

- id : 북마크 기능을 만들때 활용 -> 한 페이지 안에서 반드시 고유해야한다

- style : 색, 굵기 등 css용도를 tag에 부여

- tabindex : tab를 눌러 선택하기 위함. 장애인차별방지법(시각장애인이 주로 사용)

- title : 시각장애인이 주로 사용. 해당하는 값을 장치가 읽어줌. title이 적용된요소에 커서 올리면 툴팁이 나타남

 

HTML의 주요 공통 Event

- 전부 'on'으로 시작함

- 1개가 아닌, 여러개의 이벤트를 부여할수있음

- onblur : 포커스를 가지고있다가 포커스를 잃을때

- onchange :값들이 바뀌었을때 실행해라

- oncontextmenu : ex.우클릭했을때 메뉴가 호출되게 하고싶을때

- oninvalid : 룰에 어긋났을때

- onreset : 초기화가 됐을때 실행

- onsubmit : 서버로 뭔가를 보냈을때 실행

 

- keyboard Events 중에서는 : onkeyup 을 제일 많이 사용함

- onmouseup : 마우스를 눌렀다가 뗏을때

- onwheel : 스크롤바가 있든없든 휠 입력이 있을때 실행

- onscroll : 스크롤바가 움직였을때 실행

- oncut : ctrl + x 실행시

- onpaste : ctrl + v 실행시

- 유트브가 이 media events를 다 사용하여 구현했다고 보면됨

- onended : 플레이가 끝났을때 준비된행동 실행

- onpause : ex.동영상 실행중 pause했을때 썸네일 보여주는것

- onseeking : ex.영상의 타임라인에 해당하는 이미지 보여줌

- ontoggle : ex.블로그나 기사에서 '더보기'를 눌러야 데이터가 나오는것

- window os의 이벤트가아닌, 브라우저 이벤트를 말하는것

- onload 라는 이벤트를 가장 많이 사용함

- onbeforeunload / onunload : 보안문제로 이제는 사용하지않음

- onmessage : 브라우저와 브라우저간의 통신에 사용됨

- onstorage : html5기능중 하나인 storage 기능 : 브라우저에 사용자의 데이터를 저장할수있음. 이 데이터를 수정/삭제 할 경우 사용

 

html:5 + enter -> html 한번에 만들어줌

사용예제
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events</title>
</head>
<body>
    <div onclick="alert('클릭했습니다.');"
         onfocus="console.log('div태그가 선택되었습니다.')"
         onblur="console.log('다른 태그를 선택했습니다.')"
         onmouseover="console.log('div태그위로 마우스가 올라왔습니다.')"
         onmouseout="console.log('div 태그에서 마우스가 벗어났습니다.')"
         tabindex="1">
        클릭해보세요.
    </div>
</body>
</html>