저는 전문강사나 실무경험자가 아니기에 이론에 관해선 나무위키나 구글에 검색하시는게 좋습니다
제가 HTML을 배우면서
쉽게 이해하고 불필요한 부분은 최소화하여 설명해드리겠습니다
강좌를 진행하기 앞서 이전 1강에서
웹사이트를 구성하고있는 언어의 종류에 대해서 간단히 소개하고 에디터에대해서 소개해드렸습니다
이전 강좌를 보지 못한분은 아래링크를 클릭하여 확인해주세요
https://newstroyblog.tistory.com/2?category=874865
우선 HTML (Hypertext Markup Language)은 웹페이지 및 웹 응용프로그램을 만들기위한 언어입니다
CSS (Cascading Style Sheets) 및 자바스크립트 (JavaScript)를 사용하여 기본적인 웹 페이지를 구성합니다
지난 게시물에서 저는 비주얼 스튜디오 코드를사용하여 강좌를 진행하겠다고 말씀드렸습니다
비주얼 스튜디오 코드가 아니라 메모장이나 다른 에디터를 사용하시더라도 큰 문제는 없습니다
비주얼 스튜디오 코드를 먼저 켜줍니다
그러면 아래와 같은 사진이 열립니다
그 후에 왼쪽 상단 파일 - 새 파일을 클릭합니다
그러면 아래 화면과 같이 'Untitled-1'이 생성이됩니다 이제 코드를 작성후
Ctrl+s 단축키를 통하여 파일의 이름을 원하는이름.html 으로 저장하시면됩니다
우선 아래 코드를 입력해봅시다
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>페이지 타이틀</title> </head> <body> <h1>제목</h1> <p>내용</p> </body> </html> | cs |
코드에 사용된 태그에 관하여 설명해드리겠습니다
<!DOCTYPE html>
위 내용은 웹페이지를 HTML5로 정의한다는 의미입니다
<html> </html>
html코드를 작성할때 웹페이지의 코드는
<html>로 시작하여 </html>로 끝이납니다
<head> </head>
웹페이지에 대한 메타정보를 포함합니다
페이지를 열때 웹브라우저에는 표시되지 않지만
위에서 사용된 <title>이나 혹은 CSS의 링크(HTML페이지에 CSS로 스타일을 추가할경우)
그리고 웹사이트의 아이콘인 파비콘(favicon) 등을 포함시킵니다
<title> </title>
HTML문서의 제목을 지정할때 사용합니다
<body> </body>
이부분에 작성된 코드를 기반으로브라우저에 실제로 콘텐츠가 표시됩니다
<h1> </h1>
HTML문서에서 큰 제목을 정의할때 사용합니다
<p> </p>
<p>태그는
문단을 만들때 사용됩니다
자 그러면 이제 위에서 보여드린 코드를 비주얼 스튜디오 코드를 작성후
Ctrl + s 단축키를 통하여 저장해줍시다 단축키 사용이 싫으시다면
왼쪽 상단에 파일 - 저장 혹은 다른 이름으로 저장 누르시면 됩니다
이때 저장할때 파일확장자는 html이어야 합니다
1번 코드를 작성한다
2번 파일 형식을 모든 파일(*.*)으로 변경한다
3번 원하는이름.html (반드시 .html 확장자로 저장해줍니다)
4번 원하는 저장위치를 지정후 저장버튼을 클릭해줍니다
저장된 페이지를 더블 클릭하여 인터넷 익스플로어 혹은 크롬으로 열어봅시다
페이지를 열면 왼쪽과 같은 텍스트가 출력이 됩니다
오른쪽부분은 페이지에서 마우스 우클릭 후 소스보기를 클릭하면 우리가 작성하였던 코드가 나오게됩니다
* HTML태그의 시작과 끝 *
1 | <tagname>내용 입력</tagname>> | cs |
HTML태그는 꺽쇠괄호를 활용하여 <tagname>을 작성합니다
시작태그와 종료 태그가 존재합니다
종료 태그에는 시작태그와 비슷하지만 태그이름앞에 슬래쉬(/)를 붙여줘야합니다
* <!DOCTYPE>는 뭘까? *
HTML코드에서 제일 상단에 선언되어야 하며 웹페이지의 유형을 나타내며 브라우저가 웹페이지를
올바르게 표시할수있도록 도와줍니다
<!DOCTYPE> & <!doctype>
선언시에 대소문자는 구별하지 않습니다