HTML은 hyper text markup language의 약자입니다. HTML을 이용해서 홈페이지를 만들 수 있습니다. HTML 외에도 CSS, javascript를 알면 홈페이지를 더 예쁘고 많은 기능을 하게 할 수 있습니다.
홈페이지는 그러면 어떻게 만들까?
홈페이지는 에디터에 HTML코드를 적으면 만들 수 있습니다. 에디터는 코딩을 쉽게 할 수 있게 도와주는 도구입니다. 대표적인 예로 atom, visual studio code 등등 여러 가지 에디터가 있습니다. 하지만 이렇게 코드를 쉽게 짜주는 에디터가 없더라도 메모장을 이용해서도 홈페이지를 만들 수 있습니다. 바로 메모장을 이용해서 간단한 홈페이지를 만들어 보겠습니다. 메모장을 열어준 후 메모장 이름을 hello.html이라고 저장해줍니다. 앞에 hello는 자신이 원하는 것으로 바꿔도 괜찮지만 뒤에. html은 확장자를 표시하는 것이기 때문에 반드시. html을 붙여야 합니다. 이름을 바꿨다면 이제 안에 HTML을 작성해보겠습니다.
<html>
<head>
</head>
<body>
</body>
</html>위에 넣은 코드가 html의 기본적인 코드입니다. 저렇게 코드를 짜면 바로 위 소스처럼 빈 화면이 나옵니다. html을 작성할 때에는 항상 <html>로 html을 열어주고 </html>로 닫아줘야합니다. 그러면 이제 title을 입력해보겠습니다. 참고로 title는 저희가 인터넷 창을 봤을 때 인터넷 창의 탭 부분에 나타나는 부분입니다.
<html>
<head>
<title>윤바리 title</title>
</head>
<body>
</body>
</html>title태그는 head태그 안에 들어갑니다. 이렇게 title를 집어놔도 홈페이지 안에서는 아무 것도 변한 게 없습니다. 하지만 내가 저장한 html 파일을 열고 들어가 보면 탭 부분에 글자가 바뀌어 있을 겁니다. 그러면 이제 안에 내용물을 집어 놓겠습니다.
<html>
<head>
<title>윤바리 title</title>
</head>
<body>
이젠 나도 웹개발자~!
</body>
</html>그러면 이제 html파일을 새로고침 하면 빈 화면에 "이젠 나도 웹 개발자~!"라는 문구가 작게 써져있는 것을 보실 수 있습니다. 그렇다면 이제 이 글자를 제목 크기처럼 키워보겠습니다.
<html>
<head>
<title>윤바리 title</title>
</head>
<body>
<h1>이젠 나도 웹개발자~!</h1>
</body>
</html>h1태그 안에 문구를 넣었습니다. h1태그는 제목을 뜻합니다. h1 ~ h6 태그까지 있으면 제일 큰 건 h1 그 후로 조금씩 작아집니다. h태그 외에도 여러가지 태그들이 있으니 필요한 태그들은 구글에서 검색을 하시면서 홈페이지를 만드시다 보면 점점 완성해가는 것을 볼 수 있을 겁니다. 파이팅~!
댓글