[Frontend-HTML] HTML 기초 배우기 01

오늘은 HTML 기초에 대해서 배워보는 시간을 가지도록 하겠습니다. 사전 지식이 딱히 필요하지는 않다고 생각됩니다. 그러나, [Frontend-Network]로 기재해놓은 아래 게시글들을 순서대로 읽으신 후 이어서 보시는 것을 추천 드립니다!

1. 인터넷은 어떻게 동작하는가? ~ 2. 도메인 주소란? coding-dong-dang.tistory.com/25 

---

  1   코드는 어디에 적어야할까?

앞으로 프론트엔드 관련 주제로 작성되는 글은 모두 VsCode를 기준입니다. 정말 많은 에디터들이 있으나 저에게는 VsCode가 가장 잘 맞는 것 같습니다. 입문자용으로도 적합한 프로그램이기도 합니다. 아래 링크를 통해 자신의 OS를 고려하여 적절하게 선택하여 다운로드 받으실 수 있으십니다.

code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

---

  2   HTML이란 무엇인가

HTML이란 웹 문서에 문단이나 제목, 멀티미디어(이미지, 표, 동영상 등)을 정의하고 그 구조와 의미를 부여하는 정적 언어입니다. 쉽게 풀어 말하자면, 웹의 구조를 담당하는 언어라는 것입니다. 따라서, HTML로는 짜임새 있는 틀을 잡는 용도로 사용하는 것이 좋습니다. HTML를 복잡하게 짤수록 웹 문서 로딩 속도가 저하될 확률이 있습니다.

---

  3   HTML의 기본 형태

HTML은 프로그래밍 언어라고 하기 민망할 정도로 쉬운 언어로, 주로 '마크업 언어'로 불립니다. 실제 구조를 보시면 쉽다는 것이 체감이 되실 것입니다.

<TAG></TAG> <TAG>CONTENT</TAG>

놀랍게도 위의 구조만 알아도 HTML의 구조를 다 아는 것입니다. 다만, 태그의 사용 용도나 태그에 따라 부가적으로 붙게되는 속성 값들은 알아야합니다. 그렇다고, 여러 태그들을 줄줄이 외울 필요는 없습니다. 외워서도 안됩니다! 인터넷에 그때그때 검색하여 찾아보는 느낌으로 다뤄야 합니다. 단, 여러번 사용하면서 주로 사용되는 태그들은 손에 익혀둬야합니다. 생산성 향상을 위해서 입니다.

아래는 속성을 사용하는 구조와 예제입니다. (div라는 태그를 사용, 이때 class라는 속성을 "blogname"로 저장)

1) 구조 <TAG 속성="값"></TAG> 2) 예제 <div class="blogname">코딩동댕</div>

---

  4   HTML 태그 찾기

아래 링크를 통해서 HTML 태그를 쉽게 찾아보실 수 있습니다. 나무위키여서 공신력이 떨어진다고 생각하실 수 있는데, HTML 태그는 잘 정리되어 있는 것 같으니 믿으셔도 될 것 같습니다.

namu.wiki/w/HTML/%ED%83%9C%EA%B7%B8

HTML/태그 - 나무위키

---

오늘도 긴 글 읽어주셔서 감사합니다.
공감 버튼 꼭 눌러주세요!