'2020/09'에 해당되는 글 1건

안녕하세요? 프리입니다!

 

오늘은 첫 강좌로, 이번에는 HTML을 소개해드리고, 알려드리려고 합니다! 먼저 HTML은 흔히 프로그래밍 언어라고 생각하시겠지만, 프로그래밍 언어라기보다는 마크업 언어에 더욱 가깝습니다. 사이트에서 주소에 흔히 ~~~.html 이란 것을 흔하게 볼 수 있는데, 이것이 바로 HTML로 작성된 페이지입니다.

 

그리고 코딩시 편한 점이 많습니다. 문법 오류에 매우 관대한 언어라서 <h1>테스트 이렇게 작성을 해도 정상적으로 결과가 표출됩니다. 또한 여러 태그들만 기억해놓으면 쉽게 사이트를 하나 뚝딱 만드는 것도 가능합니다.

 

그래서 이제 한번 본격적으로 만들어보도록 하겠습니다!


자, 먼저 에디터를 켭시다. 에디터라고 해서 거창한게 아닙니다. 여러분 손에 들고 있는 종이와 펜도 에디터가 될 수 있고, 윈도우 기본 프로그램인 메모장도 에디터가 될 수 있습니다. 저는 참고로 vscode를 사용하고 있습니다.

 

먼저 본격적으로 코딩을 시작하자면, 위 코드 <!DOCTYPE html>을 먼저 써줍니다. 이 코드는 이 문서가 HTML 5로 작성되었다는 것을 알려줍니다.

 

그 후에는 <html></html>을 적어줍시다. 이 태그는 안에 내용이 html으로 작성되었다는 것을 알려주는 태그이고, 이 태그 안에서 본격적으로 모든 코딩이 이루어집니다.

 

 

그 다음 우리가 작성할 태그는 head입니다. 이 태그는 말 그대로 프레임워크를 적용하거나 스타일, 스크립트 같은 것을 넣을때는 보통 head 안에 넣습니다.

 

이제는 title 태그를 작성합니다. 이 태그는 사이트의 제목을 정하는 태그입니다. 예를 들어 사이트 제목이 안녕하세요라면, <title>안녕하세요.</title>라고 작성해주시면 됩니다.

 

또한 바디 태그를 넣어주시면 됩니다. 이 바디 태그 안에서 글자를 넣거나, 모양을 넣거나.. 하는 일들이 모두 이루어집니다.

 

이제 바디에 글자를 넣어보겠습니다.

글자도 태그에 따라서 크기가 정해지는데요!

 

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

 

이렇게 되어있습니다. 숫자가 클을 수록 글자가 작아지고, 숫자가 작을 수록 글자가 커집니다. 그래서 제일 큰 글자는 h1입니다. 

그리고 <p> 태그도 있는데, 이것은 문단을 만들때 사용하는 태그입니다.

 

줄바꿈을 하려면 <br>을 사용하여 바꾸면 됩니다. 2칸을 띄우려면 <br><br> 이렇게 br을 2개를 써주시면 됩니다.

<h1>h1태그는 제일 크기가<br>크다.</h1>

이렇게 작성한다면 출력은

 

h1 태그는 제일 크기가

크다.

 

이렇게 출력됩니다. 

 

이렇게 간단하게 코드를 작성해봤습니다. 이것을 확장자는 html로, 이름은 자유롭게 해주시고 실행해보겠습니다.

그러면 알 수 없는 외계어가 나올 것입니다. 당황하지 말고, 인코딩을 안하여 글자가 깨져보이는 것 입니다. head에 아래 코드를 넣어봅시다

<meta charset="utf-8">

그라면은 이렇게 정상적으로 출력이 됩니다!

 

 

정리

 

 

 

<!DOCTYPE html>
<html>
	<head>
   		<meta charset="utf-8">
    	<title>Hello Would</title>
    </head>
    <body>
    	<p>Hello Would!</p>
    </body>
</html>
블로그 이미지

MSP 프리 Peuri

개발, OS, 강좌를 올리는 블로그입니다.