[부스트코스] HTML - FE, 문서 구조, 기본

이 글은 부스트코스 강의를 정리한 글 입니다.

 

01. HTML (HyperText Markup Language)

▷ HTML이란 웹페이지를 만들기 위한 언어

• HT - HyperText / 문서와 문서가 링크로 연결
• M - Markup / 태그로 이루어져 있다.
• L - Language

[HTML Tags]

▷ 태그란 정보를 정의하는 형식

▷ 태그는 문을 여는 태그(<)와 닫는 태그(/>)가 있다.

▷ 태그들은 각각의 의미가 있기에 목적에 맞는 옳은 태그를 사용해야 한다.

• 링크 <a href=""></a>
• 이미지 <img></img>
• 목록 <ul><li></li></ul>
• 제목 <h1></h1>

See the Pen Tags by ChuJiHye (@ChuJH) on CodePen.

 

02. HTML Layout 태그

▷ 레이아웃(Layout)이란 배치라는 뜻

▷ HTML 태그로 감싸진 각 정보를 화면상의 어느 위치에 어떻게 자리잡을지 결정하는 것

▷ 기본적으로 상단의 <header>, 하단의 <footer> 그리고 본문의 body, nav 등이 있다.

 

 

• header : 웹페이지를 나타내는 로고 또는 소개글
• section : 부문, 구역, 영역을 나타낸다
• nav : 메뉴
• footer : 웹 페이지와 관련된 정보
• aside : 추가적인 것들을 표시

 

 

See the Pen Layout by ChuJiHye (@ChuJH) on CodePen.

 

03. HTML 구조설계

▷ 표준 페이지 디자인 및 주요 페이지 요소 (왼쪽 그림)

▷ 밑 코트의 예시 디자인 (오른쪽 그림)

https://webstyleguide.com/wsg3/6-page-structure/3-site-design.html

 

See the Pen design by ChuJiHye (@ChuJH) on CodePen.

 

04. class 와 id 속성

[Id ; Identifier]

▷ 고유한 속성으로 한 HTML 문서에 하나만 사용 가능

• 한개 이상 써도 오류 X

▷ 고유한 ID 값이 있으면 특별한 제어가 가능하기에 검색에 용이

 

[class]

▷ 한 HTML문서 안에 중복해서 사용 가능

▷ 홈페이지 전체적인 스타일을 일관성있게 지정하기 위해 필수적이다.

▷ 유사한 스타일을 표시하기 위함이다.

 

See the Pen id&class by ChuJiHye (@ChuJH) on CodePen.