[HTML] Layout (1)

 

 

 

기존에는 HTML에서 영역을 나눌 때 div태그에 id값을 지정해 주는 방식을 사용했다.

하지만 여러 개발자들이 각각 다른 id를 사용하게 되고, HTML 코드의 일관성이 떨어져 새로운 방법을 고안했다.

 

 

 

각각의 레이아웃에 대응되는 새로운 태그를 만들어 화면을 구성하는 방법을 사용한다.

 

 

CSS FlexBox : 컨테이너 내부에 요소를 배치한다. 가로 또는 세로를 기준으로 요소를 배치한다,

CSS Grid : 컨테이너 애부에 요소를 배치한다. 2차원 좌표평면을 기준으로 요소를 배치한다.

 

두 가지 모두 HTML 요소를 배치할 때 유용하게 사용된다.

 

 

Semantic Element

 

태그만 봐도 직관적으로 해당 태그가 무슨 역할을 하는지 유추할 수 있는 Element를 의미한다.

 

 

<section> : 내부에 제목과 내용을 포함한다. 말 그대로 기사의 한 부분을 지정할 때 사용한다. 큰 주제로 묶는다고 생각하면 편하다.

<article> : section이라는 큰 주제 내부에 여러 가지 article이 존재할 수 있다.

 

두 가지를 엄격하게 구분할 필요는 없다.

 

<header> : 머릿말 정도로 생각하면 된다.

<footer> : 맨 밑에서 제작자의 연락처 등을 보여준다.

<nav> : 다른 사이트로 이동하는 요소들을 모아 놓은 집합으로 생각하면 된다.

<aside> : 웹 페이지 내용과 관련이 적은 요소들을 모아 놓은 집합이다. 

<figure> : 그림 및 사진과 그 설명을 보여줄 때 사용한다.

 

Entity

 

HTML의 예약어나 특수문자를 표현할 때 사용한다. ex.) < 를 &lt로

 

 

 

 

Encoding 

 

웹 서버는 보통 영어를 기본으로 사용한다.

한글을 표현하기 위해서는 한글 character set을 표현해 줘야 하는데, 이 때 인코딩을 사용한다.

UTF-8은 한글과 영어를 모두 표현할 수 있다.

 

 

 

URL

 

 

 

URL은 위와 같은 형태로 구성된다.

 

scheme부분에서 http 혹은 https를 사용하는데, https는 보안성을 강조해 패킷을 암호화하는 작업을 수행하기 때문에 http보다 안전하다.

 

URL에서 아스키코드로 표현할 수 없는 문자들은 %와 16진수를 사용해서 표현한다.