[#TIL] 마크업 작업 시 문제점 보완사항을 기재.

~ 2022년도 마크업 작업 시 문제점

• 대부분 div만으로 작업 진행
• 잘못된 h1 ~ h6 태그 사용

태그 기본정의

<!--전체는 element라고-->
<!--a - 시작태그(tag)-->
<!--href - 속성(Attribute)-->
<!--http:www.daum.net - 값(Value)-->
<!--Content - 콘텐츠(Content)-->
<!--</a> - 종료태그(tag)-->

시맨틱 마크업

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사
따라서 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말함

작성방법

• 머리글 - <header>
• 바닥글, 문서 하단에 들어가는 정보 구분 공간 - <footer>
• 다른 페이지로의 이동을 위한 네비게이션 역할 - <nav>
• 메인 콘텐츠 - <main> 과 <section>
• 최상위 제목 - <h1>
• 사이트의 정보 및 연락처를 기입할때 - <address>
  
  
  

주요 클래스 지정 순서

1) sc-000
2) group-000
3) 000-area
4) 000-wrap
5) 000-box

+) 의미없는 영역 지정 시
group-flex
column-left or right

리스트 클래스 지정

1) ul - 000-list
2) li - 000-item

a tag vs button

1) a link-000
2) a btn-000 [role=button] - 스크립트

button 태그는 form 안에서 쓴다. 데이터를 불러오는 경우 사용.

디자인 태그?

span, i, div 등

img vs background?

img - 데이터, 빈번하게 바뀌는, 개발자가 컨트롤 필요한 경우
background - 의미 없는 배경,꾸밈, 아이콘, 로고 등