HTML 마크 업

DANA·2022년 4월 5일
0

멋사

목록 보기
10/15
post-thumbnail

페이지에 h1태그를 항상 넣는 것이 좋다!

h태그 많이 쓰는 연습!
푸터에는 주로 회사 정보!
푸터 안에는 nav 쓰지 않는다
h1태그 푸터에도 필요하다!

헤딩의 중요성을 항상 생각하자.

위젯같은 것들이 이제 <article>

주제가 있으면 section 쓰는 게 좋음
나누는 데 디자인적으로 나눈다 그럼 div!
섹션 안에 h태그 들어가면 좋음. 권장! 에러는 아니지만.
되도록 넣어주기. 만들고 숨기면 됨

-> 무슨 말이냐면 섹션 만들었지만 막상 그 안에 h1이라고 특히 ##### 지정할 title이 없으면 그냥 만들어주고 숨겨버린다. 여기서 제일 중요한 키워드가 뭐다! 라는 건 브라우저에게 알려주어야 하니까!

이 페이지 안에서만 쓴다? section
다른 페이지에서도 쓸 거 같다? article

🚫 자주 하는 실수
ul이나 ol에는 li만 들어간다. 다른태그 넣지 말기.
li안에는 상관 없움.

퀵메뉴 메인밑 혹은 푸터 밑에 넣지 않을까 싶으심. 위치가 크게 상관 없음.

사이드잡 하시면 좋다

html태그에는 다 타당한 이유가 있어야 한다.

코딩할 때 다른사람에 대한 배려가 드러나면 좋다. 협업스킬!

헤더태그는 위 상위 헤더태그가 안나오면 보통 안쓰나요? 예를들면 h3이 없는데 h4를 쓰면 안좋다거나... 제목인 태그들은 p태그보다 웬만하면 헤더태그 쓰는 게 좋을까요? h4 h5 이렇게 넘어가더라도
그렇지도 않은 듯. section안에서 title일 때 쓰는 게 좋을 거 같다.

홈페이지 하단에 주소 연락처 등 나올 때 마크업

address > dl > dd+dt

html태그를 최대한 단순하게 / tag숫자를 적게 쓰는 연습도 해라

마크업은 많이 해보셔야 하고 지적도 많이 당해야 함.

모동숲
무인도에서 시작하는 새로운 생활
이런거 그냥 a태그

메인과 관련 없는 순수한 광고 같은 거 <aside>

자주묻는 질문은 a태그

날짜는 이란 태그가 있다.

날짜별로 나오는 게시글이나 목록 있으면
<ol>태그도 갠츈

000 : 000000
이런 정보는 <dl> <dt> <dd>

li를 쓸 거면 세 개 이상이 좋다.
한두개는 a태그!

카피라잍은 small태그 씀

검색창 <input type=search>
광고는 주로 aside

레이블은 인풋에 거의 모두 들어간다고 생각.
안들어가는 경우는 이미지에 alt안들어가는 경우랑 비슷
이런 경우는 figcaption이 있는 경우나 로고 같은 거겠죠?

select와 옵션 태그는 세트

필수로 선택해야 할 때는 <select>select에 required 넣으면 됨
value값을 비워두면 필수선택이 됨!

article은 작은 html
<main><article>안에 들어가면 안된다. <body>body안에 하나마 넣기

legend 넣고 h2 또 쓰면 과잉친절. 스크린리더기는 두 번 읽게 된다 ▶ 그럼 어찌됐든 legend를 활용해서 써야겠다


tabel

cation은 반드시 넣어주십쇼 시각장애인 분들을 위해!

thead tfoot은 스타일 차이나 레이아웃 바꾸거나 하는 건 아니다
그냥 내용을 알려주려고. 혹은 스타일 지정.
tabel이 크지 않으면 굳이 안쓰는 것 같다
테이블의 크기는 기본적으로 자식들 크기만큼

병합할 때 행렬 헷갈리지 않게 조심
세로로 병합하고 싶으면 row병합이고
가로로 병합하고 싶으면 col을 병합하는 거다!
병합하고 싶은 서로 다른 두 칸이 뭔지 생각하면 쉬울 듯.

표를 위 아래로 나눌 때 빈 td 넣어서 높이값 주는 방법도 있음


✅ 해볼 것

  • 각 페이지마다 article을 쓴 거 찾아보기!
  • h 태그도
profile
프론트엔드 개발자입니다.

0개의 댓글