컨텐츠 vs 디자인 구조관점
1.컨텐츠 구조 관점
: 3단(메인(nav), 헤더, 푸터)2.디자인 구조 관점
: 4단 (헤더, 네비, 메인, 푸터)Naming
-
유지보수와 다양한 이슈때문에 id보다는 클래스를 사용하여 태그 이름 정하기
-
파스칼 케이스 : MemberService
(대문자로 시작하여 대문자로 두 단어를 구분한다) -
카멜 케이스 : memberService
(소문자로 시작하고 대문자로 두 단어를 구분한다. ) -
케밥 케이스 : member-service
(-를 사용하여 구분) -
스네이크 케이스 : member_service
(__를 사용하여 구분)
시멘틱 마크업
-
의미를 잘 전달하도록 문서를 작성해야한다.
-
사람뿐만 아니라 기계도 잘 이해하도록 코드를 짜야한다.
-
기계처리도 가능해야한다.
점진적 향상
-
가능한 많은 사용자에게 필수 콘텐츠와 기능을 제공하기위한 설계 철학.
-
최신 브라우저 사용자에게 최상의 경험을 제공해야한다.
-
script와 style을 뺀 후에도 기본 기능은 사용할 수 있도록 설계해야한다.
전체 구조 설계
-
div : 묶어두는 역할
(디자인적 관점이나 해당하는 기능 태그가 없을때 사용한다. 하지만 해당 기능이 있을때는 해당 태그를 사용해야지 div를 사용하는것은 지양한다) -
header/ footer : 여러번 사용가능하다
-
main : 중복 사용이 불가하다
-
article : 독립된 정보일 때 사용.
(현재 구성하는 페이지의 경우, 슬로건만으로 다른사람한테 뿌려도되고 재사용이 가능한 독립적인 부분임으로 article을 사용)
-> 사실 아직 section과 article사이에 많은 논쟁이있지만 둘 다 사용해도 여기서는 무방하다.
🏃♀️movin' forward, developer