웹페이지 구성

웹페이지 구조는 보통 다음과 같이 나눌 수 있는데요. 이를 시멘틱(의미적) 구조라고 합니다.

이전엔 html에 div태그로 저렇게 화면을 구성했지만 그렇게 되면 지저분하고 협업 시 알아보기가 쉽지 않기에. 😥

로 다 나누기 보다 위의 시멘틱구조에 해당되는 경우 html에서 지정한 태그를 사용하는 걸 권장합니다. 물론 위처럼 반드시 모든 부분이 담겨야 되는건 아니고 자신이 원하는 레이아웃에 따라 그 부분이 의미하는 태그를 사용하시면 됩니다. header에는 보통 사이트의 타이틀 nav에는 # article, div, section, span ## 1. section과 article 보통 secion 안에는 article이 나오고 article엔 독립적인 컨텐츠가 담깁니다. section은 논리적으로 묶이는 내용이 담을 때 그 구역의 대표값이고, article은 그 구역의 기사쯤으로 생각하면 됩니다. ## 2. div div는 위의 section 이나 article 과 달리 논리적 관계와 상관없이 요소를 나워야 할 때 사용합니다. 즉, 아무데나 쓸 수 있습니다. 그러다보니 무분별하게 div를 쓰는 경우가 있는데 그러면 가독성이 떨어져서 유지보수도 힘듭니다. 또, display 기본값이 block이라서 한줄에 한칸씩 자리를 차지합니다. 묶어서 style을 할 필요가 있는 경우 div를 사용해 나누면 css를 따로 적용할 수 있습니다. ## 3. span span은 기본값이 dispaly inline이라서 줄바꿈 없이 글처럼 나오고 값이 없는 경우 자리를 차지하지 않습니다. # block vs inline block은 줄바꿈을 합니다. 충분한 공간이 있어도 다음칸에 나오는 거죠, inline의 경우 공간이 있다면 뒤에 바로 나올 수 있습니다. # element 하나의 태그를 의미하며 문서객체 모델(DOM; Document Object Model)으로 파싱됩니다. 각 요소들은 속성을 지정할 수 있습니다. # Attributes 태그의 속성값을 의미합니다. class나 id명을 지정할 수 있고 style, value 등 태그에 따라 다양한 속성을 지정할 수 있습니다. 자신이 사용하는 태그의 속성들을 검색하고 싶다면 [mdn사이트](https://developer.mozilla.org/ko/docs/Web/HTML/Element)에 들어가셔서 확인하시면 됩니다. # DOM; Document Object Model DOM은 XML HTML 문서의 각 항목을 계층으로 표현해 생성,변형,삭제할 수 있도록 돕는 인터페이스입니다. 예를 들어 아래와 같은 HTML파일이 있다면,  Dom은 다음과 같을 것입니다.