코딩스토리

1. HTML 본문

Web/HTML & CSS

1. HTML

kimtaehyun98 2021. 1. 2. 23:23

# 이 글은 생활코딩 Web1-HTML을 바탕으로 작성한 내용입니다.

 

 

Web의 기초중에 기초, HTML을 공부했다.

 

사실 HTML을 처음 접하는 것은 아니고, 작년?(오늘이 1월 2일이니까 작년이라고 하는게 맞겠네..) 여름방학에

학교에서 학과 홈페이지를 재구축하는 일을 했었었다.

 

그때 당시에 HTML을 하나도 몰랐어서 부랴부랴 공부해서 갔었던 기억이 있는데

그 덕분에 기본적인 내용은 알고 있었다.

 

생활코딩 강좌의 장점은 확실히 짧고 이해하기 좋다는 점 같다.

복습하는 느낌이기도 하고 책만 보고 공부했었던 나로서는 생각보다 재밌었다.

 

간단하게 정리해보자면

 

1. HTML은 태그가 중요하다! 

 

2. 태그들의 제왕, 링크를 잘 사용하는 것이 중요하다!

 

정도인것 같다. 

 

내가 이 글에 태그를 일일이 설명하는 것은 정말 의미가 없는 것 같고, 기억나는 말들만 써 보자면

 

 

검색엔진에게 선택되지 않는 WEB은 실질적으로 없는 것이나 마찬가지이다.

즉, WEB을 화려하고 멋지게 만드는 것보다 더 중요한 것은 어찌보면 검색엔진에게 선택되게 만드는 것이다.

 

난 위의 말이 정말 정말 인상깊었다.

검색엔진을 중요하게 생각해본적이 없었다. 

내가 제대로 된 WEB을 만든다면, 사람들이 좋아할 만한 WEB을 만든다면 당연히 사람들이 많이 들어오지 않을까라고 생각했었다.

위의 말은 앞으로 내가 얼마나 WEB을 공부할진 모르겠지만 항상 기억할 것이다.

 

 

NASA가 인류의 망원경이라면, 강입자연구소는 인류의 현미경이다.

 

어.. 이건 사실 엄청 중요한 얘기까진 아닌데 WEB의 탄생에 대해서 이야기하다 나온 말이다.

 

강입자연구소에서 일하던 프로그래머 팀 버너스가 WEB을 만들었다고 하는데 처음으로 주소를 부여받은 Website를 들어가 보았다. (궁금하면 한번 들어가 보는걸로.. http://info.cern.ch )

 

뭔가 저 단순한 것에서 이렇게 까지 발전했다는게 엄청 신기하고 이런 기분을 느끼는 내가 점점 프로그래머가 되는것 같기도 하고..

 

어쨌든 기본적인 HTML에 대한 문법과 코딩은 공부를 완료했다.

아래는 내가 짠 HTML코드이다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
<head>
    <title>WEB1 - HTML</title>
    <meta charset = "utf-8">
</head>
 
<body>
    <h1> 2021년 대비 WEB 공부 계획 </h1>
 
    <h2> 공부해야 될 것들 </h2>
 
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
 
    <h2> 목표 </h2>
 
    <strong>"나는 앞으로 <u>JavaScrpit</u>를 마스터 할 것이다!"</strong>
    <br>
    <h1>여러분의 인생은! 태그를 알기 전과 알기 후로 나뉠 것입니다!</h1>
 
    <p style ="margin-top:40px;"> p는 단락을 나누는데에 사용되는 태그입니다!</p>
    <p>br은 new line, 줄바꿈 태그입니다!</p>
    <p>style ="margin-top:40px;" 이건 css 코드인데 이해는 가능! 암기는 X!</p>
    <p>오늘 내용중 가장 기억에 남는 말 : 검색엔진에게 선택되지 않는 WEB은 실질적으로 없는 것이나 마찬가지이다.
    즉, WEB을 화려하고 멋지게 만드는 것보다 더 중요한 것은 어찌보면 검색엔진에게 선택되게 만드는 것이다.</p>
    <p>unsplash.com -> 공공이미지, 저작권 없는 이미지</p>
    <img src="test_img_web.jpg" width = "100%">
    <p>태그가 태그, 즉 이름만으로 부족할 때 속성(Attribute)를 통해 보조한다.</p>
    <p>ol : ordered list  ul : unordered list 
    Parent Tag has a Child tag</p>
    <p> meta charset = "utf-8" -> 이 태그는 웹 브라우저에게 utf-8로 문서를 읽으라고 알려주는 것임!</p>
    <h2> 링크, 태그들의 제왕 </h2>
    <p> 내 깃허브 : <a href = "https://github.com/kimtaehyun98/-" >링크 주소</a></p>
    <p> 오늘 들은 멋있는 말 : NASA가 인류의 망원경이라면, 강입자연구소는 인류의 현미경이다. </p>
    <p> <img src = "Messopotamia.PNG" width = "100%">
    <p> <strong>위의 사진은 Web의 메소포타미아와 같은, Web을 처음 만든 팀 버너스가 처음으로 주소를 부여한 website</strong></p>
 
</body>
</html>
 cs

 

나는 HTML 코딩할때 Visual Code를 사용해서 짰는데 강의에서는 Atom을 사용하긴 한다.

아래는 위의 HTML을 실행시켰을 때이다.

신기하게도 Tistory는 HTML을 글 내에 저렇게 보여줄 수 있기 때문에 한번 넣어봤다.

(캡처 사진 아님! 실제 위의 html 파일이랑 같은 거임!)

 

******************************************************************************************************************************

 

<!doctype html>

2021년 대비 WEB 공부 계획

공부해야 될 것들

  1. HTML
  2. CSS
  3. JavaScript

목표

"나는 앞으로 JavaScrpit를 마스터 할 것이다!"

여러분의 인생은! 태그를 알기 전과 알기 후로 나뉠 것입니다!

p는 단락을 나누는데에 사용되는 태그입니다!

br은 new line, 줄바꿈 태그입니다!

style ="margin-top:40px;" 이건 css 코드인데 이해는 가능! 암기는 X!

오늘 내용중 가장 기억에 남는 말 : 검색엔진에게 선택되지 않는 WEB은 실질적으로 없는 것이나 마찬가지이다. 즉, WEB을 화려하고 멋지게 만드는 것보다 더 중요한 것은 어찌보면 검색엔진에게 선택되게 만드는 것이다.

unsplash.com -> 공공이미지, 저작권 없는 이미지

태그가 태그, 즉 이름만으로 부족할 때 속성(Attribute)를 통해 보조한다.

ol : ordered list ul : unordered list Parent Tag has a Child tag

meta charset = "utf-8" -> 이 태그는 웹 브라우저에게 utf-8로 문서를 읽으라고 알려주는 것임!

링크, 태그들의 제왕

내 깃허브 : 링크 주소

오늘 들은 멋있는 말 : NASA가 인류의 망원경이라면, 강입자연구소는 인류의 현미경이다.

위의 사진은 Web의 메소포타미아와 같은, Web을 처음 만든 팀 버너스가 처음으로 주소를 부여한 website

 

 

 

******************************************************************************************************************************

 

이렇게 간단하지만 재밌게 html을 알아보았다.

너무 기초적인 것만 공부하긴 했지만 앞으로 공부할 것들을 위한 초석이라고 생각하자.

 

'Web > HTML & CSS' 카테고리의 다른 글

WEB2 - JavaScript _ CSS 기초  (3) 2021.01.09
2. 서버  (3) 2021.01.03
'Web/HTML & CSS' Related Articles more
Comments