HTML 태그 쓸 때 주의사항 (실무중심)

samkong·2022년 4월 4일
1

HTML

목록 보기
4/5
post-thumbnail

❗ 해당 문서는 지속적으로 업데이트 될 예정입니다.
❗ 잘못된 정보나 오류가 있으면 댓글로 편하게 남겨주세요!🥰

물론 어떤 태그들을 써도 어떻게든 구현은 가능하다. 그러나 지금까지 어럽사리 배운 수많은 태그들을 시맨틱하게, 또 적재적소에 사용하지 못하면 안되지않는가? 자주 사용되는 태그들의 사용법 및 주의사항들을 기재해두었으니, 헷갈릴 때 마다 찾아보자 🔍

ul,ol

👉 직계 자식은 무조건 li만 사용한다

li

👉 3개 이상 쓸 때 사용하는 것이 베스트

small

👉 저작권 법률 표기를 나타낼 때 사용한다

aside > a


👉 보통 광고를 처리해줄 때 이렇게 많이 쓴다

address

👉 문서나 글의 저자 회사와 연락할 수 있는 정보를 명시할 때 사용
👉 footer > address > dl > dt+dd 로 하는 것이 베스트

cite


👉 출처에 관한 내용을 적을 때 사용하는 태그이다

input

👉 label은 img의 alt같은 존재! 반드시 적어주고, 보이지 않게 하고싶으면 display:none;을 준다

IR기법 https://velog.io/@wltnrms0629/HTMLCSS-웹-접근성이미지-표현-IR기법

  • 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 ⇒ 포스트잇 적는 것. 막 적어서 보낼 때 접어서 아무도 못보게 보내는거.
profile
공유와 공감을 사랑하는 프론트엔드 개발자 김삼콩입니다

0개의 댓글