❗ 해당 문서는 지속적으로 업데이트 될 예정입니다.
❗ 잘못된 정보나 오류가 있으면 댓글로 편하게 남겨주세요!🥰
물론 어떤 태그들을 써도 어떻게든 구현은 가능하다. 그러나 지금까지 어럽사리 배운 수많은 태그들을 시맨틱하게, 또 적재적소에 사용하지 못하면 안되지않는가? 자주 사용되는 태그들의 사용법 및 주의사항들을 기재해두었으니, 헷갈릴 때 마다 찾아보자 🔍
ul,ol
👉 직계 자식은 무조건 li만 사용한다
li
👉 3개 이상 쓸 때 사용하는 것이 베스트
small
👉 저작권 법률 표기를 나타낼 때 사용한다
aside > a
👉 보통 광고를 처리해줄 때 이렇게 많이 쓴다
address
👉 문서나 글의 저자 회사와 연락할 수 있는 정보를 명시할 때 사용
👉 footer > address > dl > dt+dd 로 하는 것이 베스트
cite
👉 출처에 관한 내용을 적을 때 사용하는 태그이다
input
👉 label은 img의 alt같은 존재! 반드시 적어주고, 보이지 않게 하고싶으면 display:none;을 준다
- display:none
영역 사라짐
이벤트(ex.클릭) 작동 안함
tab focus 안됨
- visibility:hidden
영역 있음
이벤트(ex.클릭) 작동 안함
tab focus 안됨
뒤에 있는 요소 클릭 가능
- opacity:0
영역 있음
이벤트(ex.클릭) 작동 함
tab focus 됨
뒤에 있는 요소 클릭 불가능
출처 : https://velog.io/@kya754/no1
👉 type은 올바른 데이터 입력을 요구하기위해
👉 id는 label과 연결하기 위해
👉 name은 서버전송할때 key값으로 주기위해
👉 select는 입력이 아니라 선택해주기 때문에 value를 지정
👉 required는 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시. 라디오는 하나만, 체크박스는 꼭 해야하는 답변에만 required를 하면된다!
input type="submit" vs button type="submit"
👉 input type=”submit” 닫힌 태그 없기에 자식이 없다.
👉 button type=”submit” 닫힌 태그 있음 = 이미지 자식 요소로 넣을 수 있음. (이쁜 버튼 만들 때 사용한다!)
select
👉 option value안에 있는 값들이 전달이 됨.
👉 multiple 속성을 주면 사용자가 cmd 누를 시, 여러개 선택이 가능하다.
👉 속성명과 속성값이 같은경우 값을 쓰지 않아도 괜찮음
textarea
👉 cols = 가로에 들어갈 글씨의 개수 ⇒ 기준은 문자의 평균적인 넓이(폰트마다도 다름)를 기준으로 하므로 딱 정해져 있는게 아니다. ex) 10일때 영어는 11개 한글은 8개밖에 안들어감
👉 rows = 기본적으로 보여줄 입력 줄 수 인데, 일반적으로는 그냥 css로 넓이 값을 줌.
👉 readonly 속성을 넣으면 수정이 안됨.
fieldset
👉 SEO에 영향을 주진않지만 legend 는 영향을 줄 수 있음
👉 fieldset의 제목, fieldset바로 뒤에 위치해야함
datalist
👉 최근 나온것 select와 input을 섞어서 사용할 수 있다
👉 제안을 할 수 있지만 사용자가 선택하고 싶은 값이 없을 때 사용한다 (ex.이메일 직접입력)
main
👉 메인 요소는 페이지당 하나만 !!!! body에 하나만 사용해주기!!!!
👉 메인 요소를 담을 수 있는 요소는 html body div 밖에 없음
👉 section으로 메인 감싸지 말기
👉 article 안에 header, footer가능하지만 main 요소 안에 넣지말기
form
👉 사용자의 입력을 받아 서버에 전달하는 태그
👉 get post 차이 : 데이터를 전달을 할 때
- get ⇒ 대표님을 부르는 것 제 이름은 뭐구여~! 많은 내용 전달 못함 주변에 누가있으면 들림
- post ⇒ 포스트잇 적는 것. 막 적어서 보낼 때 접어서 아무도 못보게 보내는거.
