[Web] #1 HTML

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 학교 수업에서 웹에 대해 많이 학습했지만, 직접 웹 개발자로서 프로젝트에 참여하는 것은 처음입니다. 첫 프로젝트에 웹파트장으로 참여하게 되면서 배우고 느낀 점을 기록하려 합니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 

---

html은 Hyper Text Markup Language의 약자이다. hypertext는 링크이고, mark를 태그라고 생각했을 때, markup은 plaintext 위에 태그로 의미를 부여한다는 것이다. 

프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저가 알 수 있게 하는 마크업 언어다. 

html은 태그가 전부라고 할 수 있다. 정말 여러 종류의 태그가 있고, MDN 사이트를 이용해서 필요한 태그를 적절히 검색해 사용하면 된다. 공식 문서는 아니지만 공식 문서처럼 사용된다. 

https://developer.mozilla.org/ko/

MDN Web Docs

html, css, js를 작성하면 바로 결과를 확인할 수 있는 codepen을 간단한 작업을 할 때 사용한다.

https://codepen.io/pen/

Create a New Pen

연습용으로 여러 이미지와 동영상이 필요할 때를 위한 추천 사이트가 있다.

• 이미지 - 다운로드 or 우클릭, 이미지 주소 복사

https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

• 동영상 - 다운로드

https://pixabay.com/ko/

---

html 태그들에 대해선 MDN 사이트 등에 잘 나와 있으므로 권장 사항, 몰랐던 사항을 정리하려 한다.

 

• h1은 전체 html 파일에서 제목을 표시할 때 사용하므로 페이지당 한 번만 사용하는 것을 권장한다.
• h1부터 차례대로 쓰는 것을 권장한다. h2를 사용하고 h3를 사용하지 않고 h4를 사용하는 것을 권장하지 않는다.
• 글씨 크기로 인해서 헤딩 태그를 사용하는 것은 오해다. 글씨 크기나 굵기는 css로 적용하면 된다. 원래는 h3를 사용해야 하는데, 글씨 크기가 너무 작아서 h2를 사용하는 일은 없어야 한다. 구조와 의미에 맞게 태그를 써야 한다는 것이다.

 

• div는 division의 약자로, 주로 레이아웃을 구성할 때 사용한다.
• div는 가장 많이 남용되는 태그이다. 다른 태그를 쓸 때 보다 div태그를 사용할 때는 한 번 더 생각해보는 것이 좋다. div가 남발되면, 아무 의미 없이 막 쓴 태그라는 인식이 강하기 때문이다. 좋은 코드를 위해서다.
• div가 남발되는 것을 막고자 등장한 게 semantic태그이다. semantic은 '의미의'라는 뜻이며 semantic태그는 의미가 있는 태그라는 뜻이다. semantic태그는 기존의 div태그에 더 의미를 부여해주기 위해 나온 태그이다. 각 영역별로 태그에 의미를 넣어준 것이다. header, section, footer 등이 있고 페이지 레이아웃에 맞게 사용하면 된다.

 

• ul태그는 unordered list, ol태그는 ordered list, li태그는 list item라는 뜻이고, ul태그와 ol태그 속에 li태그가 쓰인다. 

 

• 처음과 끝이 명확한 내용을 쓸 때는 closing태그를 쓴다.
• video태그는 source가 여러 개일 수 있기 때문에 closing태그를 쓴다.
• img태그와 같이 처음과 끝이 없고, 그냥 이미지 하나를 삽입하는 경우 하나의 태그로 해결 가능하다. self-closing.
• self-closing태그는 하나의 태그이고, contents가 사이에 없기 때문에 정보가 매우 부족해서 거의 항상 속성이 있다. 태그 맨 뒤에 /를 붙여주는 게 좋다.