수학과의 좌충우돌 프로그래밍

[html] html 기본문서 구조 본문

웹프로그래밍/html,css

[html] html 기본문서 구조

ssung.k 2019. 1. 8. 21:41

안녕하세요 강민성입니다.


저번 시간에 이어서 html에 대해서 더 알아보고자 합니다.


저번 시간에는 여러 환경 설정을 하느라 코드를 작성해보지 못했지만


이번에는 html의 기본 태그들을 알아보도록 하겠습니다.



html 의 기본을 알아보자!


지난 번 포스팅에서 알아봤던 마크업 이라는 단어 기억에 나시나요?


복습 차원에서 다시 한 번 알아보자면 마크업이란 어디가 이미지고 어디가 택스트인지


표시해주는 것을 말합니다.


그러면 html 에서 이 마크업을 어떻게 구분할까요?


바로 태그를 이용해서 표시를 해주게 됩니다.


html 문서를 만들기 전에, 태그에 대해서 간단히 알아보도록 하겠습니다.



태그의 특징


1. 태그는 < 과 > 를 사용하여 구분


html 문서를 보면 <,> 두 괄호가 굉장히 많은 걸 볼 수 있을 겁니다.


이것들이 모두 태그를 나타내기 위함인데 뒤에 가서 다시 살펴보도록 하겠습니다.



2. 태그는 소문자로


물론 대문자로 쓰던 소문자로 쓰던 오류가 일어나지는 않지만


html 표준에서는 소문자로 쓰기를 권장하고 있습니다.


서로의 약속인 것이죠.



3. 적당한 들여쓰기로 가독성 향상


html 태그는 여러 번 띄어쓰기를 해도 한 칸의 공백으로 인식을 하게 됩니다.


따라서 여러 번 띄어쓰기를 해줘도 문제는 없지만


코드를 읽어야 할 경우에 불편해질겁니다.


따라서 단계적으로 tab  을 이용하여 구분을 해줍니다.


아래 예시와 같이 말이죠.


1
2
3
<div>
    <p>다음과 같이 들여쓰기를 해줍니다.</p>
</div>
cs


지금은 div 와 p 가 뭔지는 모르셔도 됩니다.



4. 태그는 속성과 함께 사용 


태그는 단순히 태그 뿐 아니라 속성을 부여해 여러 기능을 추가적으로 시행할 수 있습니다.


각 태그마다 가질 수 있는 속성도 다 다르기 때문에 알아두셔야 합니다.


예를 들면 입력창을 만드는 input 태그를 봐보도록 하겠습니다.


1
<input type="text" id="id">
cs


여기서 형광색 글씨가 input의 속성이고 노랑색 글씨가 그 속성의 값입니다.


다음과 같이 속성과 속성값은 = 으로 연결을 하며 속성 값에는 " "를 붙여줍니다.



자 지금 까지 태그가 무엇인지 알아봤으니 html의 주요 태그를 확인해볼까요?




html 의 주요 태그


html 문서는 정해진 형식이 존재합니다.


단순히 웹 브라우저에 Hello World! 를 띄우는 문서를 만들어보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>
cs


다음과 같은 코드로 인해서



웹 브라우저에 Hello World! 가 나오는 걸 확인 할 수 있습니다.


간단하고 짧은 코드지만 중요한 내용을 다 담고 있기에 하나씩 알아보도록 하겠습니다.




1
<!doctype html>
cs


doctype 은 document type 의 줄임말로서 말 그대로 문서의 유형을 결정해주는 역할을 합니다.


웹 브라우저에게 지금 작성된 문서가 html 문서이니


 이에 맞는 방법으로 해석을 하라고 알려주는 역할을 하게 됩니다.



1
<html lang="ko">
cs


다음은 <html> 태그 입니다.


이는 문서가 시작하고 끝나는 부분을 알려주는 역할을 합니다.


따라서 <html> 라는 여는 태그로 문자의 시작을 알려주고


</html> 이라는 닫는 태그로 문자의 끝을 알려주게 됩니다.


근데 html 옆에 lang="ko" 가 보시길 겁니다.


위에서 이야기했던 html 태그의 속성과 그 값입니다.


html 태그는 lang 이라는 속성을 통해 언어를 지정해줍니다.


언어를 지정해주는 이유가 무엇일까요?


첫 번째로는 검색이 폭을 좁혀줄 수 있다는 점 입니다.


한국어로 쓰여진 문서가 보고 싶을 경우에 우선적으로 lang="ko"인 문서를 먼저 보여주게 될 것입니다.


또한 두 번째로 화면 낭독기로 웹 문서를 읽을 시 각 언어의 맞춰서 낭독을 할 수 있을 겁니다.


중국어와 한국어는 발음부터 억양까지 많이 다르니까요.


아래 표는 언어에 따른 코드를 나타내고 있습니다.


코드 

 de

en 

fr 

ja 

ko 

zh 

 언어

독일어 

영어 

프랑스어 

일본어 

한국어 

중국어 



이제 <html> 태그는 <head> 태그 와<body> 태그를 포함하게 됩니다.


따라서 위의 전체코드에서 같이 들여쓰기를 해주었습니다.



1
2
3
4
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
cs


<head> 태그는 웹 브라우저가 알아할 정보를 제공하는 역할을 합니다.


<head> 태그 안에 들어있는 <meta> 태그와 <title> 태그를 알아보면 무슨 의미인지 알 수 있을 겁니다.


<meta> 태그는 문자 인코딩 방법을 제공합니다.


인코딩이란 문자나 기호들의 집합을 컴퓨터에서 표현하는 방법을 의미합니다.


웹은 영어를 기본으로 하기 때문에 한글을 화면에 나타내기 위해서는 다음과 같은 인코딩 과정을 거쳐야 합니다.


html 에서는 한글과 영어 등 모든 언어를 표현할 수 있는 'utf-8' 방식을 사용합니다.


<title>태그는 문서의 제목을 표시합니다. 제목이 무엇이냐고 하면 



바로 이 부분이 문서의 제목입니다.


1
2
3
<body>
    <h1>hello world!</h1>
</body>
cs


마지막으로 <body> 태그 입니다.


이 태그는 웹 브라우저에 표시되는 내용을 입력하는 곳입니다.


내용을 입력하는 방식도 <h1>태그 등 여러 방법이 있지만 이는 뒤에서 알아보도록 하겠습니다.






마무리


간단하지만 아주 중요한 html 의 기본 태그들에 대해 알아보는 시간이었습니다.


다음 시간에는 웹 브라우저의 내용을 구성하는 태그들에 대해서 알아보도록 하겠습니다.


지금까지 긴 글을 읽어주셔서 감사합니다 :)




저작자표시

'웹프로그래밍 > html,css' 카테고리의 다른 글

[html] 이미지를 만드는 태그  (0) 2019.01.22
[html] 2.텍스트 관련 태그들 (3) 표를 만드는 태그  (0) 2019.01.19
[html] 2.텍스트 관련 태그들 (2) 목록을 만드는 태그  (0) 2019.01.18
[html] 2.텍스트 관련 태그들 (1)  (0) 2019.01.15
[html] html이란, 웹 브라우저와 웹 편집기  (0) 2019.01.08
'웹프로그래밍/html,css' Related Articles more
Comments