본문 바로가기
컴퓨터 지식/HTML5&CSS

HTML5 공부 시작, 웹프로그래머 첫 걸음

by 잇마우 ITMAU 2020. 1. 6.

 HTML5 공부의 목적은 아무래도 업무 때문입니다. 웹 프로그래밍을 알아야 되기 때문에 가장 기초적인 HTML5를 시작했습니다.

 

 HTML5를 많이 사용하는 직종은 웹프로그래머 보다 정확히는 웹퍼블리셔입니다.

 

 HTML5란 무엇인가?

 

 풀네임은 HTML(hypertext markup language)로 웹 문서를 제작하는데 사용되는 프로그래밍 언어다. 

 그러나 대부분의 프로그래머들은 프로그래밍 언어로 취급을 안 하는 것 같다.

 

 쉽게 설명하면 홈페이지 만들때 사용하는 언어라고 보면 된다. 그러나 요즘 홈페이지는 HTML5만 있어서는 안 되고 자바스크립트, CSS 등 여러가지 필요하다.

 

 HTML5로 웹 구조를 짤 수 있지만 단점은 일일이 수동으로 코드를 짜야 되는 불편함이 있습니다. 그래서 시각적인 부분을 보완하기 위해 나온 것이 CSS인데 아직 시작도 안 했으니 자세한 설명은 넘어가겠습니다.

 

 

 HTML5를 공부하기 위해서 필요한 조건은 간단합니다.

 

 다른 언어들은 이클립스, 비주얼 스튜디오 같은 도구들을 많이 사용하지만 HTML5는 메모장만 있어도 시작할 수 있습니다.

 

 메모장을 열어서 HTML5 코드를 입력하고 저장할 때 확장자명을 .html로 입력하면 됩니다. 그러면 저장한 파일은 웹페이지로 인식이 되어 크롬, 엣지, 파이어폭스 같은 브라우저로 실행할 수 있습니다.

 

 그러나 단순한 작업이 아닌 좀 더 전문적이고 편리한 기능들을 이용하고 싶다면 메모장 보다는 다른 도구를 사용하는 것이 좋습니다.

 

 HTML 관련 도구들은 여러가지 있는데 사용자 취향에 맞게 알아서 선택하시면 됩니다.

 

 1. 에디트 플러스

 2. 메모장

 3. subLime Text(서브라임 텍스트)

 4. 비주얼 코드(Visual CODE)

 

 대부분 용량도 적고 가벼운 도구들입니다. 저는 이 중에서 비주얼 코드를 사용하고 있습니다. 확장 도구도 많고 다크 모드를 지원하기 때문에 쓰고 있습니다.

 

비주얼 코드로 코딩한 HTML5

 

 위 사진은 비주얼 코드로 코딩한 HTML입니다. 비주얼 코드가 좀 무겁다고 생각되면 저사양 컴퓨터에서는 에디트 플러스로 작업을 시작해도 충분합니다.

 

 HTML의 기본 구조는 <!DOCTYPE html>로 시작해서 <head></head>, <body></body> 그리고 마지막으로 </html>로 끝납니다.

 

 헤드와 바디 사이에 이제 코드를 넣어서 자신이 원하는 웹페이지를 만들면 됩니다. 

 

 HTML5 책을 구매해서 문법을 공부해도 되고 무료로 배우고 싶다면 w3schools, 생활코딩 같은 무료 웹사이트에서 설명과 예제를 보고 따라하시면 됩니다. 

 

 최근에는 유튜브에서도 HTML5 강좌 동영상들이 많이 올라오고 있으니 참고하셔도 되고요.

 

https://www.w3schools.com/

 

W3Schools Online Web Tutorials

HTML Example:

This is a heading

This is a paragraph.

Try it Yourself » CSS Example: body {   background-color: lightblue; } h1 {   color: white;   text-align: center

 

www.w3schools.com

 

 

 

<!DOCTYPE html>
<html lang="en">
<html lang="ko">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> html5 연습 1 </title>

</head>
<body>

<center><h1>h+숫자 태그로 글자 크기를 조절할 수 있다.</h1></center>

<h1> h1 크기 </h1>
<h2> h2 크기 </h2>
<h3> h3 크기 </h3>
<h4> h4 크기 </h4>
<h5> h5 크기 </h5>
<h6> h6 크기 </h6>




</body>

</html>

 

위의 HTML5 코드를 브라우저로 열어보면 아래 이미지처럼 나옵니다.

 

h1 ~ h5 태그는 글자 크기를 변경할 수 있습니다. 그리고 center 태그를 넣으면 글자를 가운데 정렬로 맞출 수 있고요.

 

<html lang="ko">, <meta charset="utf-8"> 태그는 한글이 깨지지 않고 제대로 화면에 보여주도록 해주는 태그이기 때문에 한글을 사용하고 싶다면 꼭 넣으시길 바랍니다.

 

 일단 오늘은 HTML5 구조와 간단한 태그만 공부해보았습니다. 글자 크기 변경이 있다면 글자 폰트 변경, 색깔 변경, 기울기, 굵게, 밑줄 등 다양한 효과가 있을 것입니다.

 

 한 달이면 충분히 HTML5와 CSS를 공부할 수 있다는데 업무를 위해 배워야되므로 저는 좀 더 빨리 공부해야겠습니다. 나중에 돈 벌어서 개발용으로 노트북도 하나 장만해야겠습니다.

 

초급 중급자를 위한HTML5+CSS3 Programming, 아티오HTML5+ CSS3 정복:실습 위주의 친절한 HTML5 자습서, 한빛미디어HTML5와 Java Script 기반의 웹 프로그래밍 정석:누구나 쉽게 배울 수 있는 웹 개발 학습서의 정석, 혜지원

댓글0