[부스트코스] HTML -FE

Tags

 

개발자 도구를 통해 웹 페이지의 소스 코드를 보면 <> 형태의 다양한 태그들이 사용된다는 것을 알 수 있습니다.

HTML 태그는 다양한 만큼 모두 각각의 용도와 의미를 갖고 있습니다. 이런 특징을 'Semantic 하다'라고 표현합니다.

 

이러한 HTML 태그를 모두 외워야 할 필요는 없습니다.

자주 사용되는 것 위주로 공부하면 좋을 것 같습니다.

 

하지만, 더 우선시되는 것은 적절한 의미에 맞는 태그를 찾아 사용하는 것이 겠지요.

 

HTML 태그 종류는 태그 정리 사이트를 통해 쉽게 알 수 있습니다.

자주 사용되는 HTML 태그

[출처: https://www.edwith.org/boostcourse-web/lecture/16669/]

 

 

 

Layout 태그

 

여러 개의 HTML 화면을 동시에 보면 레이아웃이 어느 정도 동일한 것을 알 수 있습니다.

한눈에 보기 쉽게 하기 위함인데요. 

 보통 위의 사진과 같은 레이아웃으로 페이지가 구성되어있죠.

이 레이아웃은 html 코드에서 layout tag로 구분 지어 줄 수 있습니다.

• header
• section
• nav
• footer
• aside

이렇게 의미에 맞는 태그를 사용하여 코드의 가독성을 높일 수 있습니다.

 

[출처 : https://www.edwith.org/boostcourse-web/lecture/19355/]

 

 

 

구조설계

 

HTML 개발은 백지에서 시작하는 것이 아닙니다.

기획서나 디자인 파일을 받아 이것을 그대로 구현해야 하는 것인데요.

 

예를 들어, 우리가 구현해야 하는 한 화면을 받았다고 생각해 봅시다.

먼저 우리는 이 화면의 구조를 분석해야 합니다.

가장 크게 header, body, navigation 부터 시작하여 header 안의 작은 요소로 영역을 좁혀가면서 html 뼈대를 세우게 되는 것입니다. 이것을 구조설계라고 합니다.

 

[출처 : https://www.edwith.org/boostcourse-web/lecture/16668/]

 

 

 

class와 id 속성

 

class

: 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해 사용합니다.

 

네이버 웹툰 사이트를 보더라도 요일별 웹툰 아래쪽으로 여러 가지 웹툰들이 나열되어있죠.

만약, 이 웹툰들의 이미지 크기가 제각각이라면 우리는 통일감, 일관성이 없다고 생각할 것입니다.

그래서 이렇게 공통적으로 나타나야 하는 것들에 같은 class를 부여하여 통일성을 만들어 주는 것입니다.

 

id

: 고유한 속성입니다. HTML 문서 안에서 중복하여 사용할 수 없습니다.

 

웹툰 사이트를 생각해보면, 웹툰 하나하나 다른 id 값이 부여되어있어야 각각 웹툰에 대해 특별한 제어를 할 수 있습니다. 또한 id는 검색하는 데에도 용이하게 작용합니다.

 

[출처: https://www.edwith.org/boostcourse-web/lecture/16670/]