htmlhtml5를 이용하여 홈페이지를 만들고 싶은데 어떻게 해야 할지 모른다면 먼저 무료 동영상 강의나 블로그 또는 지식백과 등을 참고하면 꾸준히 읽으면 된다. 읽을 때는 너무 쉽기 때문에 빠르게 읽을 수 있으며 여러번 읽기에 부담이 없다. 눈으로 많이 봐도 되지만, 직접 만들거나 다른 플랫폼을 수정하고 싶다면 직접 간단한 코딩을 해 보는 것이 좋다.
html5
html은 이미 오래전에 나왔기도 하지만, 지금도 많이 사용되는 웹파일이다. 뉴스나 검색포털을 이용할 때 웹브라우저를 이용하고 인터넷을 주소를 입력한 후 접속하는 곳이 다 웹페이지이다. html5는 기존의 html을 업그레이드 한 버전으로 여러기기에서 같은 내용을 볼 수 있도록 정비가 되었다. 그리고, 웹의 느린 멀티미디어 환경과 뭽표준의 부분에서 많은 기능들이 향상되었다.
현재 많이 제작되고 있는 형태이기도 하며, 옛날을 html도 익히면 좋지만, html5부터 공부해도 크게 상관은 없다.
아무리 글로 써도 이건 직접해보지 않으면 모르는 부분이다.
문서 구조
html5의 문서는 매우 간단하다.
<tag>의 형식으로 화면을 구성할 수 있으며, 화면의 모든 구성되는 것들은 태그들의 나열로 이러우져 있다.
<!-- html5 문서 -->
<!DOCTYPE html>
<html>
<head>
<!-- // -->
</head>
<body>
<!-- // -->
</body>
</html>위의 코드를 설명하자면 아래와 같다.
<!DOCTYPE html> : html5 문서라는 것을 표시한다.
<html> : html로 구성되고 있음을 표시한다.
<head> : 문서에서 사용할 문서정보, 스타일시트, 자바스크립트 등을 불러오고 준비한다. <meta> 같은 문서정보는 필히 들어갈 수 있지만, 스타일시트, 자바스크립트 등의 위치는 <head> 가 아니어도 크게 상관이 없다.
<body> : 화면에 실제로 보여질 태그들을 나열한 부분이다.
태그의 작성방식
html 에서 태그는 <시작태그>~<종료태그> 로 이루어져 있다. 이것은 xml 문서도 마찬가지 이다. 하지만 어떤 태그들은 종료태그가 없는 것들도 있다. 이것은 태그 워크시트를 검색하면 잘 볼 수 있는데, input 태그나 img 태그들이 좋은 예이다. 문단을 나타내는 p 태그라던지 줄바꿈을 위한 br 태그들의 차이가 여기에 있기도 하다.
<!-- 문단 -->
<p>
<!-- 문장 --><br/>
<!-- 문장 --><br/>
<!-- 문장 --><br/>
</p>
<!-- // -->매일 한줄씩 코딩
코딩을 하기에 하마 부담이 없고 배우기 쉬운것이 html5 이기도 하다. html5에 대해 출간된 책을 보면 css3 와 자바스크립트가 너무 혼재되어 있고 설명이 장황해서 그렇지 html5만 높고 보면 그렇게 어려운 것도 아니고 부담도 없는 언어이기도 하다.
하루 한개 태그를 익힌다고 생각하고 하나씩 연습하다보면 모양새는 좋지 않더라도 왠만한 페이지는 만들 수 있다. 물론 검색포털이나 웹서비스 페이지같은 현란한 것은 안되겠지만 말이다.
하지만, 그런 현란하고 화려한 홈페이지들도 html5 만 놓고 보면 별게 없기 때문에 이것만 공부하는 사람들도 있을 정도다. 스타일은 입히면 그만이기 때문이다.
표준적 html문서를 만드는 것이 그만큼 어려운 것이다.
하지만, 공부하고 싶고 나만의 뭔가를 보여주고 싶다면 자신이 할 수 있는 부분부터 하는 것이 정신건강에 이롭다.
'programming > web' 카테고리의 다른 글
| html5 기본 템플릿 만들기 template (0) | 2021.04.16 |
|---|---|
| html5 뷰포트 반응형 웹페이지 만들기 viewport responsive webpage (0) | 2021.03.23 |
| 자바스크립트 애니메이션 라이브러리 anime.js javascript animation library (0) | 2021.02.20 |
| html5 독학 빠르게 익히는 방법 (0) | 2021.02.18 |
| 홈페이지 필수 html5 css3 자바스크립트 / Homepage javascript (0) | 2021.02.16 |
댓글