오늘은 웹 사이트를 직접 만들기 위해서 필요한 아주 필수적인 지식에 대해서 알아볼 것입니다.
웹 사이트를 만드는 데 필요한 핵심적인 지식은 딱 3가지입니다.
1. HTML
2. CSS
3. JavaScript
각각이 뭐 할 때 필요한지 차근차근 알아보겠습니다.
HTML
웹 사이트는 사실 구조화된 문서와 같습니다. 특정 규칙에 따라 문서를 작성하면 우리가 사용하는 구글 크롬, 마이크로소프트 엣지 등과 같은 브라우저들이 이 문서를 해석하고 내부적으로 처리해 화면에 그려줍니다. 이렇게 그려주는 작업은 브라우저가 알아서 하기 때문에 저희는 그냥 브라우저가 알아들을 수 있는 구조로 문서를 작성해주면 됩니다.
이때 구조에 대한 규칙을 정의한 것이 HTML(HyperText Markup Language)라고 생각하면 됩니다. 결국 웹 사이트를 만들기 위해서는 HTML이라는 규칙 혹은 문법을 알고 그에 맞게 문서를 작성하면 되는 것입니다. 이 규칙은 시간에 따라서 조금씩 변해왔는데 지금은 HTML5이라는 문법을 주로 사용합니다.
그럼 간단하게 HTML을 이용해서 웹사이트를 한 번 만들어 보겠습니다.
우선 메모장을 켭시다!
(저는 맥북을 써서 메모장 말고 텍스트 편집기를 사용해야겠네요)
아래와 같이 메모장에 작성해주고 파일 확장자명을 .html으로 저장해줍니다(이름은 뭘 하던지 상관없습니다).
<!DOCTYPE html>
<html>
<head>
<title>내가 만든 웹사이트</title>
</head>
<body>
<h1>내가 만든 웹사이트</h1>
<p>웹 사이트 만들기 겁나 쉽네</p>
</body>
</html>저장을 해주면 아래와 같은 게 생길 겁니다. 그냥 일반 .docx나 .hwp 파일이랑 다를 게 없습니다.
자 이제 이 파일을 더블클릭하면 여러분들이 만든 웹사이트가 뜰 겁니다.
이렇게 간단하게 웹 사이트를 만들어봤는데 위에 저 문서가 다 어떤 걸 의미하는지 정도는 알고 있어야겠죠? 하나하나 살펴봅시다.
우선 HTML에는 태그라는 것을 사용해 작성합니다.
<html></html>
<head></head>
<p></p>이런 게 다 태그죠. 그리고 태그들은 서로를 감쌀 수 있으면 <태그></태그>와 같이 여는 태그가 있으면 닫는 태그가 있습니다(항상 그런 것은 아닙니다).
<html>
<head>
<title>웹 페이지 탭에 적히는 이름</title>
</head>
<body>
<h1>크게 적히는 글씨</h1>
<p>단락 내용</p>
</body>
</html>여기서 태그들은 각각 무언가를 의미하고 웹 브라우저는 이 태그들의 의미를 해석합니다. 각각의 태그들은 저마다의 의미가 있고 때론 그에 따라 화면에 그려지는 방식이 다릅니다.
- html 태그는 문서를 html로 시작한다는 의미의 태그입니다.
- head 태그는 웹 사이트의 정보를 감싸는 태그입니다.
- title 태그는 브라우저 탭의 제목을 의미하는 태그로 브라우저 탭에 내용이 적힙니다.
- body 태그는 웹 사이트 본문 내용을 감싸는 태그입니다. 안에 들어가는 내용들은 웹 사이트 본문에 대한 정보를 나타냅니다.
- h1 태그는 본문 가장 상위 제목을 의미하는 태그입니다.
- p 태그는 본문의 단락 내용을 의미하는 태그입니다.
이렇듯 웹 사이트는 HTML 태그들을 이용해 마치 문서를 작성하듯 만들 수 있습니다. 우리가 해야 할 일은 그저 HTML 규칙에 맞게 문서를 작성하고 나머지는 브라우저가 알아서 해주죠.
제가 이 글에서 설명한 태그들은 몇 개 안되지만 HTML 태그들은 정말 많습니다. 그렇기 때문에 이 많은 태그들을 억지로 외우려고 하면 웹 사이트 만들기가 굉장히 어렵죠. 직접 웹 사이트를 만들어 보면서 태그들은 필요할 때마다 찾아서 사용하다 보면 금방 익숙해지고 자연스럽게 외워질 것입니다.
태그들에 대한 정보는 아래의 사이트에서도 확인할 있고 구글에 검색만 해도 잘 나옵니다.
HTML html tag
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
그럼 이제 태그들을 사용해서 HTML만을 이용해 자신만의 웹 사이트를 만들어보세요!
다음 글에서는 HTML만을 사용할 경우 웹 사이트를 만들 때 어떤 한계 있고 이 한계를 극복하기 위해 CSS를 어떻게 사용할 수 있을지 알아보겠습니다.
감사합니다.
'개발 공부 > WEB' 카테고리의 다른 글
| [FastAPI] Gunicorn과 Uvicorn을 함께 사용하는 이유 (2) | 2024.01.28 |
|---|---|
| [React] <></>에 key props 추가하는 방법 (0) | 2022.03.30 |
| [React] 배열 렌더링 시 key props를 사용하는 이유 (0) | 2022.03.27 |
| [React] setState가 바로 적용되지 않는 이유 (1) | 2022.02.12 |
| [Next.js] Data Fetching을 하는 4가지 방법 (0) | 2021.12.21 |
