[💻] 마크업,시멘틱태그

📌중요한 마크업!

• <article> 태그는 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다. 특정한 영역을 그룹화 한다.
  
• <section> 태그는 주제별 영역들을 그룹화 하기 위해 사용한다. 주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다.클래스는 sc-클래스로 주는게 보기 좋다.
  
• <div> 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 필요가 있을 경우 사용한다.
• <nav> 태그는 헤더에 들어가는 gnb,lnb같은애들에 쓰면 좋다.

🤔Article,Section 뭐가 달라요??

둘다 특정영역을 그룹화하는건 같다

특징은??

- article[아티클!]

1. 내용이 독립적이다
2. **하위 요소로 제목(h1~h6)나와야함**
3. 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적
   으로 갖다 붙힐 수 있는 영역을 그룹화
4. 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
5. 게시판과 블로그 글, 매거진이나 뉴스 기사, 신문 논평
6. <header> 요소와,<footer> 요소를 포함하기도 합니다.
7. section보다 의미가 있다. → 모든 section은 article로 바뀔수있다.

- section [섹션!]

1. 논리적으로 관련된 집합체
2. 주제별 영역들을 그룹화
3. **하위 요소로 제목(h1~h6)나와야함**
4. <header> 요소와,<footer> 요소를 포함하기도 합니다.
5. section다음에는 h1,h2,h3..제목들이 나와줘야함
   
   

BUT

Article은 section 태그와는 다르게 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다.

✨ 즉, section은 영역을 감싸거나 구분할 때 article은 영역을 나누지만 언제든 그 영역이 다른 페이지나 영역에 가져다 쓸 수 있는 것

위와 같은 기본적인 의미를 생각 한다면 <section>안에 <article>이 여러 개 들어가는 것은 조금 부자연스러울 수 있다.
왜냐하면 서로 관련 있는 내용을 모아 놓아야 할 <section>안에 각각이 독립된 <article>이 들어가 서로 다른 내용의 독립 <article>이 배치되기 때문이다.

따라서 <article>안에 <section>이 들어가는 것이 자연스럽다.

** 추가 검색 내용

• 동봉된 컨텐츠가 그 독립된 자체만으로도 의미가 통하면 만약 그렇다면 <article>를 사용하라
• 동봉된 컨텐츠가 주제와 관련된 것이가? 만약 그렇다면 <article>를 사용하라동봉된 컨텐츠가 주제와 관련된 것이가?
• 의미론적인 관련성이 없다면, <div>를 사용하라.

📌style위치

style은 헤더에 주로 쓰이긴하지만 바디안에든 어디든 상관없음

라이브서버 - alt+ L + O

라이브서버 크롬으로 안열릴때 맨밑 테트리스에서 라이브서버 검색후
오른쪽 버튼 확장설정에서 null(기본값)에서 크롬으로 변경하면 된다.

📌기본 초기화

기본적으로 초기화 해줘야하는애들이 있다.

BUT
reset - 실무에선 안씀 (너무 광범위하게 초기화하기때문)

실무에선 css초기화 검색해서 파일로 제작해주는게 제일 좋다.

{margin: 0;padding: 0; font: inherit; }
body {line-height: 1;} - 행간이 사라짐
ul{ list-style: none;}
a{ color: inherit; text-decoration: none;}
img{ vertical-align: top;
/ display: block; /
/ vertical-align: bottom; */ }

• body {line-height: 1;} - 행간이 사라짐
• vertical-align - 이미지는 드래그하면 밑에 여백이 있음, 수직정렬을 위로 올린다
• {line-height: 1;} 는 라인높이 내가 잡을꺼니까 가만있어라라는 뜻

📌시멘틱태그

div로 의미없는 태그가 아닌, 의미 있는 태그로 마크업 해준다면??

📎 협업에서의 이점
직관성
⭐seo(검색엔진최적화)에서 좋은 점수
접근성

📌seo(검색엔진최적화)

• h1 - 한페이지에 단1개
• h2 - 영역에 대한제목
• h3 - 콘텐츠의 대한제목

주의사항
타이틀 다음으로 중요하다.
h1은 만드는 페이지에서 꼭 하나만 나와야한다.
여러개가 나온다면 에러

• 장애인들을 위해 먼저 읽혀야하는 순서대로 써주는게 좋다

📌태그의 우선순위 점수

점수가 높은애 css값으로 먹힌다.

태그 : 1점

클레스 : 10점

가상요소(nth) : 10점

아이디 : 100점