본문 바로가기

IT/HTML

HTML 기본 구조

HTML은 하이퍼 텍스트 마크업 언어의 줄임말이며

<태그>를 이용하여 쉽고 빠르게 웹 페이지를 디자인 할 수 있습니다.


HTML을 만드는 방법은 매우 간단합니다.




바탕화면에 마우스 우클릭 - 새로 만들기 - 텍스트 문서를 차례로 누른 후,




확장자 명을 .html로 만들면 끝입니다.


당연하지만 이렇게 만들어서 열면 흰 바탕화면만 나오게 됩니다.





여기서 HTML을 수정해보도록 합시다.



생성된 HTML파일을 우클릭하여 연결 프로그램 - 메모장으로 열도록 합니다.

저는 Notepad++로 열도록 되어있습니다만 기본 메모장으로도 열 수 있습니다.


만약 리스트에 메모장이 없다면 맨 밑의 다른 앱 선택을 눌러 메모장을 찾아 열어주시면 됩니다.


이어서 메모장에는 다음과 같은 내용을 입력합시다.



위의 내용은 HTML의 기본적인 구조입니다.


1번째 줄은 Doctype선언이라고 지금 작성된 html이 무슨 버전으로 만들어졌는지 알려주는 내용입니다.

이를 통해서 웹 브라우저가 현재 페이지를 올바르게 표시할 수 있게 되죠.


2번째 줄부터 위아래, 또는 문장의 앞뒤로 같은 단어들로 감싸져있는것이 보이실겁니다.

저 단어들이 "태그"라고 불리며 html에서는 명령어에 해당하는 부분입니다.


대부분 <과 >로 포장되어(?) 있으며, 항상 마칠때에는 /를 넣어서 해당 구문을 끝냅니다.

즉 "시작태그"와 "종료태그"로 나뉘어져있죠.



물론 태그는 위와 같이 한두종류가 아닌 수많은 종류들이 있지만, 여기서는 간단하게 쉬운 것 부터 차근차근 설명하도록 하겠습니다.


우선 태그 사용 시 주의점은


1. 띄어쓰기는 몇칸이 되었던 한칸으로만 인식함

2. 시작/종료 태그가 있는 경우 무조건 달아야 함

3. Tab키를 이용하여 보기 쉽도록 적절하게 정렬

4. 대소문자 가리지 않고 인식함                     


정도입니다.


'IT > HTML' 카테고리의 다른 글

HTML 비주얼 스튜디오 코드 추천 확장기능  (0) 2019.10.05
HTML 비주얼 스튜디오 코드 설치  (0) 2019.10.03