
왜 HTML을 배워야 할까?



위의 세 이미지의 공통점 혹시 보이시나요? 멍무리가 보이는 사이트... 들이 아니라!
인스타그램, 유튜브, 그리고 이 티스토리 블로그까지 우리가 웹으로 보는 모든 사이트들은 HTML로 이루어져있습니다. HTML은 웹개발에 '기본 문법'이자, 웹의 뼈대를 만드는 중요한 언어입니다.
HTML이란?
HTML이란 무엇일까요? 우선 영어 풀이를 해보면 HTML이란 Hyper Text Markup Language 입니다. 웹페이지의 구조를 만드는 언어라는 뜻이에요. HTML은 프로그래밍 언어는 아니지만 웹에서 가장 중요한 기초를 담당하고 있습니다.
- HyperText : 링크를 통해 연결된 텍스트
- Markup : 태그를 써서 구조를 만드는 방식
여기서 하이퍼란 하이퍼링크라는 말을 많이 들어보셨죠? 거기의 하이퍼입니다.
HTML의 역할
보통의 웹사이트는 HTML, CSS, JavaScript로 이루어져있는데, 여기서 HTML은 화면에 보여지는 기본 틀을 정해줍니다.
- HTML : 벽돌/골조
- CSS : 인테리어
- JavaScript : 전기/기계 시스템
실제 집 구조와 비교해보면 위와 같이 비유해볼 수 있습니다. 조금 더 이해가 쉬우실까요?
HTML 코드 예시
<h1>이것은 제목입니다.</h1>
<p>이것은 글입니다.</p>
<h1></h1> 이렇게 꺽쇄로 되어있는 글자를 태그라고 하는데 이런 태그들로 HTML이 구성되어있고 이 태그를 이용해 웹페이지의 기초를 만듭니다.

트위터를 살펴보면 로고에 <h1> 태그를 사용한 것을 확인할 수 있습니다. 주로 웹페이지 전체 제목에 사용하는 태그로 로고에 많이 쓰입니다. 이런식으로 그 외에도 많은 태그들로 이루어진 것을 알 수 있습니다.
HTML에 조금 친근해졌나요? 앞으로 함께 알아가봅시다~!
같이 보면 좋은 포스팅
[coding/개발 팁] - [무료 코딩 강의] 사이트 모음
[무료 코딩 강의] 사이트 모음
최근에 발행했던 무료 강의 소개 포스팅을 모아봤어요. 한 번에 편하게 봅시다! 1. 생활코딩 https://www.youtube.com/user/egoing2 생활코딩 일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니
ssimplay.tistory.com
[coding/html + css] - [HTML] 텍스트 그대로 표현되는
[HTML] 텍스트 그대로 표현되는 <pre> 태그 (줄 바꿈 그대로 표현)
줄 바꿈 등 텍스트가 그대로 표현되는 태그에 대해 알아봅시다. 태그 사용법 및 활용 여기서 줄바꿈하려면 태그를 꼭 써줘야한다. ① 보통 줄 바꿈을 할 경우원래는 줄바꿈 태그인 태그
ssimplay.tistory.com
'coding > html + css' 카테고리의 다른 글
| [HTML] 텍스트 그대로 표현되는 <pre> 태그 (줄 바꿈 그대로 표현) (0) | 2024.12.20 |
|---|---|
| [CSS] 눈누 웹폰트 굵기 변경 안될 때 (1) | 2024.12.06 |
| [CSS] 배경 고정하기 (70) | 2023.08.08 |
| [CSS] 메뉴 상단에 고정하기 (sticky) (56) | 2023.08.04 |
| [CSS] overflow 스크롤은 없지만 이미지는 넘치게 하고 싶을 때 (21) | 2023.07.20 |