HTML은 Hypertext Markup Language의 약자로, 웹 페이지의 구조를 표현하는 언어입니다. 여기서 Hypertext는 한 문서에서 다른 문서로 즉시 접근할 수 있게 해주는 텍스트를 뜻하며, Markup Language는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어를 뜻합니다. Elements와 그들의 Attributes(속성)가 HTML의 핵심 구성 요소이며, *Element(요소)*를 표현하는 방법은 *
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
html 문서는 일반 문서와 달리 정해진 형식에 맞춰 사용해야 합니다. html에는 기본구조가 있는데, 웹 브라우저는 html문서를 한 줄씩 읽으면서 해석합니다. , , , **네 가지 태그는 반드시 사용합니다.
: 현재 문서가 html5언어로 작성된 웹 문서를 뜻한다. 버전별html
~: 웹 문서의 시작과 끝을 나타내는 태그입니다. 웹 브라우저가 **태그를 만나면 **까지의 소스를 읽어 HTML문법에 맞춰 브라우저에 표시합니다.
~: 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분으로, head에 있는 정보는 실제 문서 내용이 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시되지 않습니다. 스타일 및 스트립트 등이 포함되기도 합니다.
~: 실제로 웹 브라우저 화면에 나타날 내용입니다. 대부분의 html 태그는 body태그 안에 위치가게 됩니다.
CSS는 Cascading Style Sheets의 약자로, 마크업 언어(HTML)가 실제 표시되는 방법을 기술하는 언어입니다. 쉽게 말해서, HTML의 요소들에게 스타일을 입히는 언어입니다. Selector를 이용해 해당 HTML Element에 스타일을 적용합니다. Selector는 class와 id, tag로 구분할 수 있으며, 다음과 같이 사용합니다.
예를 들면, 다음과 같습니다.
#id {
}
.class {
}
div {
}
html, body, #root, .no-margin {
margin: 0;
}
위 예제는 html태그, body태그, id가 root인 요소, class가 no-margin인 요소들의 margin을 0으로 만드는 코드입니다.