TIL #230313

yunbiyomi·2023년 3월 13일
0
post-thumbnail

📌 HTML

button

버튼의 타입

  • button : 클릭했을 때 아무것도 하지 않으며 JavaScript와 연결하여 사용
  • submit : 서버로 양식 데이터 제출
  • reset : css <input type="reset"> 과 동일하게 초깃값으로 되돌립니다.
  • disabled : 누르거나 클릭하는 것을 막음

📍   a VS button

abutton
역할하이퍼링크사용자의 동작 실행을 위한 트리거
기능다른 페이지 혹은 페이지 내의 특정 영역으로 이동브라우저 기본동작 없음. JS를 이용하여 동작 추가 (submit: form 전송 / reset: form 초기화)
키보드엔터스페이스, 엔터
주의href 값 없이 JS로 동작하게 하면 안됨!JS로 동작




📌 CSS

동적 가상 선택자

:active

클릭시 활성화 (누르는 동안)


:visited

사용자가 이미 방문한 링크일 경우 해당 상태에 만족


:disabled

비활성화 된 요소 선택


:hover

마우스를 커서 위에 올려두었을 때


:focus

focus를 받은 상태


:checked

input이 선택된 상태




동적 가상 선택자

[속성 이름]

해당 속성을 가진 요소 모두 선택

[title]{
	text-decoration:underline;
}
  • ~= : 특정 문자열로 이루어진 단어를 포함하는 요소 모두 선택
  • |= : 특정 문자열만 포함하거나, 특정 문자열로 시작하면서 바로 하이픈(-) 기호가 있는 태그
  • ^= : 특정 문자열로 시작하는 요소를 모두 선택
  • $= : 특정 문자열로 끝나는 요소를 모두 선택
  • *= : 특정 문자열을 포함하는 요소를 모두 선택




transform

scale

기본적으로 자신의 가운데를 중심으로 크기 변경

rotate

기본적으로 자신의 가운데를 중심으로 회전

translate

자신의 위치에서 x, y축으로 이동

skew

요소를 왜곡시키는 속성으로 각도 단위 사용







출처 : weniv

profile
새로움을 두려워 하지 않는 도전하는 프론트엔드 개발자👩‍💻

0개의 댓글