html 5 배우기

by 각설탕(샵) 2022. 8. 26. 15:38

안녕하세요, 각설탕입니다.

이곳에서는 html에 대해서 알아보려고 합니다. 티스토리에서는 html에 대한 이해도만 있으셔도 블로그를 관리하시기 편하시리가 생각합니다. 오늘부터 웹 용어를 하나씩 배워보겠습니다.

1. html이란?

hyper text markup language로 웹 표준 기술을 총칭합니다. 웹에서 사용하는 언어를 html이라고 생각하시면 됩니다. 인디자인에서 또는 일러스트에서 글을쓰거나 그림을 그릴때 도구툴을 사용하 듯 웹에서 텍스트를 쓰거나 이미지를 삽입할 때 html을 사용하신다고 이해하시면 좋습니다. 그럼 사용하는 기본적인 태그와 속성에대해 알아봅니다. html에 기본 구성을 알아봐야할텐데요 태그와 속성값을 사용하는 법에서 대해 알아보겠습니다.

태그: < >

태크는 <명령어 > 이렇게 표현합니다. 태그를 넣으실때는 대부분은 시작과 끝이 있어야 하는데 시작은 <명령어> 끝은 </명령어>로 표현합니다.

속성: 속성="속성값"

태그에 추가적인 명령을 나타냅니다. 예를 들어 이미지를 가져오거나 텍스트의 크기나 색을 주는 등을 말합니다. 속성 =" "게 표현합니다.

기본 틀 만들어보겠습니다.

메모장을 열어 준비합니다. 작업은 처음에는 메모장을 사용하겠습니다. 나중에는 편집기를 사용하시면 됩니다.

<head> 태그 부분에는 타이틀과 <meta charset="utf=8">라는 속성 값이 있는데 이 속성 값은 한글 사용 시 한글 깨짐을 보호해주는 값이어서 기본적으로 적어주시면 됩니다.

또 아래 <body> 태그 부분에 모든 내용이 들어가신다고 보시면 됩니다.

이처럼 html은 크게 <head>와 <body>로 나뉩니다.

2. 저장하기

이름은 반드시 영문으로 해주시고 확장자를 html로 하신 후 인코팅은 utf-8로 해주셔야 한글이 브라우저에서 읽을 수 있습니다.

이렇게 저장된 파일은 크롬에서 열 수 있습니다.

메모장에서 title 태그 부분에 html 시작하기라고 넣고 body부분에는 오늘부터 html 시작하기를 넣어보겠습니다. 이렇게 텍스트를 삽입 후 메모장을 저장하시고 브라우저 파일을 열어 F5를 누르면 새로고침이 되면서 메모장에서 수정한 내용이 브라우저 화면에 적용됩니다.