개발 공부 기록하기

[생활코딩] 4강. 문서 만들기&구조 본문

프밍/HTML

[생활코딩] 4강. 문서 만들기&구조

태영(泰伶) 2022. 8. 19. 16:45 
<!Doctype html>
<html>
	<head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
    	<img alt="생활코딩 로고" src="https://opentutorials.org/user/course/1/94.png" />
        <br/>
        <a href="https://opentutorials.org/course/1">생활코딩</a>
    </body>
</html>

▲ 이렇게 글씨 써진 것을 source(또는 code), 이러한 행위를 하는 걸 programming(또는 coding)이라고 한다.

 

 

이 파일을 helloworld.html로 저장한다고 하면,

여기서 .html과 같은 것을 '확장자'라고 부른다. 이 파일이 어떤 형식을 띄고 어떤 성격을 띄는지 나타내주는 것이다.

 

.html은 html로 쓰여진 코드가 들어있는 web page임을 나타내고,

.mp3나 .wmv는 오디오가 들어간 음악파일을,

.mov나 .avi는 동영상파일을 나타낸다.

 

 

 

 

html 문서는 기본적으로

<html>이라는 tag로 시작하고 </html>이라는 tag로 끝난다.

 

그리고 두 tag 사이에 필요한 내용을 넣게 된다.

보통 <head>, <body>라는 tag가 온다.

이는 html 문서 규약으로 약속되어 있는 표준이니까 따라서 쓴다.

 

<head> 안에는 문서 자체가 무엇인지 정의하는 내용이 온다.

제목이나 키워드 등의 정보를 기술한다.

 

<body> 안에는 문서에서 나타내고자 하는 콘텐츠가 온다.

 

위의 이미지에서와 같이 <img>, <br />, <a> 이런 tag들은 <body> tag의 하위tag(즉, 자식tag)로 쓰게끔 약속되어 있다.

그니까 얘들을 <head> tag 안에 쓰지 마라!

 

 

 

 

meta data?

데이터를 설명하는 데이터래.. 뭔지 모르겠당...ㅎ...

저작자표시 비영리 변경금지

'프밍 > HTML' 카테고리의 다른 글

[생활코딩] 6강. Doctype(DTD)  (0) 2022.08.19
[생활코딩] 5강. 개발도구 & 실습방법  (0) 2022.08.19
[생활코딩] 3강. tag란?  (0) 2022.08.16
[생활코딩] 2강. html이란?  (0) 2022.08.16
[생활코딩] 1강. web이란?  (0) 2022.08.16
'프밍/HTML' Related Articles more
Comments