HTML 기초(1)

 

HTML 기초(1)

---

오늘은 HTML 기초에 대해 설명드리겠습니다.

시작에 앞서 HTML은 HTML5 버전을 사용하겠습니다.

 

HTML은 html 태그, head 태그, body 태그로 구성되어 있습니다.

 

보통 html 태그에는 사용할 언어 대한 내용이 들어 있고

head 태그는 웹 브라우저를 구성에 필요한 메타 태그,

웹브라우저의 제목, css 외부 스타일 시트, 내부 스타일 시트에 대한 정보를 작성할 수 있습니다.

 

그리고 위에 html 태그와 head 태그가 완성된다면 body 태그에 작성하고자 하는 내용을 넣을 수 있습니다.

 

공부를 하면서 가장 중요한 것은 기초를 알아야 하는 것과 조급하게 하면 안 된다는 것입니다.

그래서 오늘은 프론트앤드 개발에 가장 많이 사용되는

Visual Studio Code 코드 에디터를 사용하여 HTML의 기초를 배워보겠습니다.

 

먼저 Visual Studio Code를 켜서 폴더를 연결하여 준비를 해줍니다.

그리고 new file을 만들어 제목을 index.html로 작성합니다.

 

html의 기본 문서는 index.html로 정의됩니다.

그래서 연습할 때는 html 문서는 index.html로 css 문서는 style.css로 만들어 진행하겠습니다.

 

기본 구조

이렇게 new file를 만들었다면 유용한 단축키를 설명드리겠습니다.

먼저 !를 작성한 뒤 엔터를 클릭하면 HTML5 기본 구조를 알아서 만들어 줍니다.

 

HTML에는 유용한 단축키들이 있는데 이렇게 필요한 단축키가 나오면 그때마다 설명드리겠습니다.

단축키는 공부할 때에는 엄청 중요하진 않지만 알아둔다면 작업을 할 때 빠르게 할 수 있기 때문에

알아두시면 정말 유용하게 사용될 겁니다.

 

이 단축키를 모를 경우 위에 태그를 직접 입력해야 하기 때문에

단축키를 알아두시면 정말 유용하게 사용될 겁니다.

 

이제 단축키를 사용하여 기본 구조를 만들었다면 html 태그에 있는

언어를 'en'에서 한국어인 'ko'로 변경하시면 됩니다.

 

다음은 head 태그 안에 있는 메타 태그의 내용에 대해 설명드리려고 하는데

자세하게 알아두시면 좋긴 하지만 코드를 작성하는 데 있어

간단하게 어떤 역할을 하는지 정도만 알아두시면 공부하시는데 문제없이

진행하실 수 있으실 겁니다.

 

여기서 메타 태그는 head 태그 안에 작성되는 태그로 웹페이지를 구성하는 데 있어

필요한 정보를 기입하는 태그를 의미합니다.

 

이제 사진에 나온 head 태그 안에 있는 내용을 간단하게 설명드리겠습니다.

 

(1)

먼저 'UTF-8'를 작성한 것은

간단하게 설명드리면 전 세계의 모든 문자를 사용할 수 있도록 만들어주는 태그입니다.

 

(2)

다음은 <meta http-equiv="X-UA-Compatible" content="IE=edge">

이 태그의 역할은 웹을 실행할 때 인터넷 익스플로어, 사파리, 크롬, 파이어폭스 등등 다양한 브라우저가 있습니다.

각각의 브라우저에도 다양한 버전이 있는데 그중 최신의 버전을 호환하기 위해서 사용되는 메타 태그입니다.

만약 진행하는 프로그램이 최신의 버전이 아닌 버전을 사용할 시 삭제하시는 것을 권장 드립니다.

 

(3)

다음은 <meta name="viewport" content="width=device-width, initial-scale=1.0">

이 태그의 역할은 뷰포트에 관련한 태그입니다.

여기서 뷰포트란 우리가 화면을 봤을 때 보이는 영역을 뷰포트라고 합니다.

 

이것을 지정해 주는 이유는 우리는 웹페이지를 보려고 할 때

스마트폰으로 보기도 하고 태블릿 pc로 보기도 하고 PC 모니터로 보기도 합니다.

 

그리고 PC 모니터의 크기, 태블릿 pc의 크기, 스마트 폰의 크기가 다 다르기 때문에

이 태그를 사용하여 뷰포트를 화면의 크기에 따라 스크롤을 만들어 보여줄 수 있게 만드는 역할을 합니다.

그래서 만약 화면이 작으면 상하좌우로 움직이는 스크롤이 생기거나 확대/축소를 사용할 수 있도록 지원해 줍니다.

 

(4)

마지막은 <title> 태그인데 이 태그는 웹페이지를 봤을 때 위에 헤드라인의 제목을 지정해 줄 수 있습니다.

만약 title의 제목을 지정하지 않으면 사진처럼 기본 제목인 Document로 적용되어 보입니다.

---

오늘은 HTML에서 head 태그 안에 있는 태그에 대해 설명드렸습니다.

자세하게 아시면 좋지만 간단하게 어떤 역할을 하는지 정도로만 넘어가시고

추후에 익숙해지시면 더 공부하시는 느낌으로 가시면 좋을 것 같습니다.

어떤 역할을 하는지 아시고 공부하시는 것과 모르고 공부하시는 것은 엄청난 차이가 있기 때문에

이 부분에 대해서는 꼭 이해하시고 넘어가시길 바랍니다.

 

감사합니다!!

https://jjong-wiki-bigdia.tistory.com/11

HTML 기초(2) div, span, a, img, ul, ol, li, dl, dt, dd 태그