웹 브라우저
주소에 대응되는 서버에 페이지를 요청하고, 클라이언트에게 페이지를 응답해주는 것. 우리가 사용하는 인터넷은 요청과 응답으로 처리된다. 네이버에서 검색을 할 때, 사용자(클라이언트)는 네이버(서버)에 '질문'에 대한 검색 페이지를 요청한다. 네이버(서버)는 요청에 맞는 페이지를 사용자(클라이언트)에게 응답하여 돌려준다.
HTML (Hyper Text Markup Language)
html은 마크업 언어로 이루어져 있다. 웹 구성은 HTML, CSS, JavaScript 세 가지로 나눌 수 있는데, 그 중 HTML은 전체적인 뼈대를 담당한다. 마크업 언어는 텍스트 인코딩 시스템으로 다른 언어와 다르게 작성한 텍스트가 직접적으로 나타난다. 어느 태그도 넣지 않고 body안에 아무렇게나 작성해도, 그 글이 페이지에 나타나는 모습을 보인다. 변수, 함수, 제어문 등이 없어 html은 코딩이 아니라는 말까지 있다. 단순히 html을 사용하면 어떤 데이터도 담아내지 못하고 그저 눈에 보이는 것만 움직이지만, js를 이용해 통신을 하거나 서버 개발도 할 수 있다. html과 css, js는 국제적인 웹 표준 기술로 가장 기본이 된다.
html 기본 형식
<시작태그 속성1="속성값" … 속성n="속성값"> 내용 </종료태그>
html은 태그를 사용하고 있다. <시작태그>@</종료태그> 시작태그와 종료태그 사이 @에 내용이 들어가고, 관련 정보는 태그 안에 속성값으로 들어간다.
html 작성 전에 아래와 같은 모습이 준비되어야 한다. vscode 기준으로 html:5를 작성하면 자동으로 뜬다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<! Document html>
문서 Document 형식을 html로 지정한다. 이 문서는 html로 작성되었다는 걸 알린다.
<html>
html이 작동하는 범위. 실제적인 html문서의 시작은 두번째 줄부터 시작한다고 볼 수 있다.
모든 요소를 포함하고 있는 최상위 요소로 root를 의미한다.
<head>
메타데이터의 집합으로 타이틀, 외부 파일, 각종 설정을 작성하는 곳. 브라우저에는 표시되지 않는다.
스타일, 스크립트, 각종 소프트웨어 탐색 및 렌더링을 도와주는 정보가 포함된다.
<base>
모든 상대 주소의 기본 url을 미리 지정한다. base에 기본 url을 미리 지정해두면, 파일을 가져올 때 '/파일명'과 같은 식으로 사용할 수 있다.
<link>
현재 문서와 외부 리소스 간 관계를 지정한다. css에 연결해 사용하는 것이 일반적이다.
<meta>
<base>, <link>, <script>, <style>, <title>과 같은 다른 메타 요소로 나타낼 수 없는 데이터를 나타낸다.
<title>
브라우저의 제목을 정의한다. 페이지 탭에 정의한 이름이 표시된다.
<style>
문서에 적용되는 css를 포함한 스타일 정보가 모여있다.
<body>
해당 문서의 콘텐츠 영역. 눈으로 보여지는 부분은 이 body에 들어간다.
body에서 사용할 수 있는 태그의 종류는 매우 많아 다음 글에서 작성해보도록 하겠다.
reference
이웅모, "모던 자바스크립트 Deep Dive", 위키북스, 2020.09.25
"HTML 태그 </> 종류 총 모음", Inpa Dev, https://inpa.tistory.com/
"HTML요소 참고서", MDN Web Docs, https://developer.mozilla.org/ko/docs/Web/HTML/Element
"코딩의 시작, TCP School", https://www.tcpschool.com/html-tags/intro
'Language > HTML | CSS' 카테고리의 다른 글
| [JS] 자동 슬라이드 캐러셀 구현하기 (0) | 2024.12.31 |
|---|---|
| [HTML] 레이아웃 구조 구분과 텍스트 관련 태그 (1) | 2024.12.27 |