html

1. HTML tag의 종류

htmp tag list를 검색하면 다양한 종류의 tag들을 확인할 수 있다.
대표적으로 이미지를 나타내는 img, 문단을 나타내는 p, 목록을 나타내는 ul/li 등이 있다.

jsbin을 통해 html파일을 작성하고 실행시켜 볼 수 있다.

예시

그림에서 h태그는 제목을 나타낼 때 주로 사용하며 숫자에 따라 크기가 달라진다.
div 태그는 주로 전체적인 틀을 만들 때 사용한다.
ul 태그는 unordered list를 나타내고, li는 각 요소들을 나타낸다.
a 태그는 하이퍼링크를 위한 태그이다.

2. HTML Layout 태그

레이아웃이란 배치 라는 뜻으로 화면에서 어느 위치에 자리 잡을지 결정하는 것을 말한다.
기본적으로는 header, footer, nav, section, aside 등이 있다.
아래 그림과 같은 구조를 갖는다.

사용법은 일반적인 태그와 같이 선언해 준 후 사이에 내용을 입력하면 된다.

예시

header와 footer는 맨위, 맨 아래를 나타내며 nav는 navigation var를 나타낸다.

3. class, id

id
하나밖에 없는 고유한 속성으로 id를 통해 접근 및 검색이 가능하다.

class
비슷한 스타일을 여러번 사용하기 위해 class로 선언해서 사용한다.
하나의 태그에 여러개의 다른 class들을 공백을 기준으로 나열할 수 있다.

사용법은 태그 이후에 id=" "이나 class=" " 를 통해 사용할 수 있다.

출처
부스트코스 웹 프로그래밍(풀스택) 강좌 https://www.boostcourse.org/web316