WEB1 - HTML & Internet 1 to 10

HTML(HyperText Markup Language) & Internet

---

비전공자가 공부를 시작하며 생활코딩님께서 말씀하신

이 수업 전체를 통틀어서 가장 중요한 부분에 포커스를 맞춰 시작해보려 한다.

 

어떤 쪽이 사람이 하는 일이고 어떤 쪽이 기계가 하는 일인가 분리해서 생각해보자.
어떤 것이 원인이고 어떤 것이 결과인지 추론해보자

(오른쪽이 사람이 하는 일이면서 원인이고 그것에 대한 결과가 왼쪽이면서 기계가 하는 일)

그리고 무엇을 먼저 시작해야 할지 몰랐던 나에게 첫 발걸음을 띄게 해주셨다.

"여러분이 하루에 100번 이상 하는 일이 있다면
그 일은 우리 삶에서 중요한 일일까요 아닐까요?
중요한 일이겠죠
여러분은 하루에 웹페이지를 100번 이상 보지 않나요?
인류가 생성하는 거의 모든 디지털 정보가 담기는 가장 거대한 그릇
바로 웹페이지입니다.
바로 그 웹페이지를 만드는 컴퓨터 언어가 HTML입니다.
쉬우면서 중요합니다."

 

준비

---

코드를 작성하는 프로그램이 필요하다.

이러한 프로그램을 편집하는 프로그램이라는 뜻에서 에디터(editor)라고 부른다.

생활코딩 WEB1 - HTML & Internet 강의에서는 atom이라는 에디터로 사용한다. 

[추천 검색어] best HTML Editor 2021

---

바탕화면에 WEB이라는 이름의 디렉터리 만들기
이 프로젝트에서 사용되는 파일들은 WEB이라는 디렉토리 안에 앞으로 저장될 것이라는 뜻

---

File > Open Folder... > 바탕화면 WEB 디렉토리 열기 > Select Folder 
(File을 선택한 것이 아니라 Folder를 선택한 것) 

atom에서 Project란에 불러온 디렉터리, 폴더가 생성된다. 이곳에 파일 생성

(웹 페이지의 확장자는 일단 xxx.html)

---

웹 브라우저에서 Ctrl+O, 파일 열기

웹 페이지 만들기를 했고 그 만들어진 웹 페이지를 웹 브라우저로 실행한 것 

---

HTML의 기본 문법 Tag

앞에 있는 태그를 '열리는 태그', 뒤에 있는 태그는 '닫히는 태그'라고 한다. 

한 페이지당 평균 몇가지의 태그를 사용하는지에 대한 통계를 살펴보았다.

https://www.advancedwebranking.com/html/

생활코딩님께서 영상을 올리신 2017년도 기준 평균 25개에서
제가 듣고 있는 2021년도 기준 평균 32개로 올랐네요

기본적으로 밑천으로서 가지고 있을 만한 태그가 무엇인가를 스스로 판단할 수 있게 해 주신다고 했는데 

이 통계를 보고 단순히 개발자의 능력을 평가할 수는 없겠지만

확실한 건 더 열심히 해봐야겠네요...

• 강조
  <strong> </strong>
• underline
  <u> </u>
• 제목
  <h1> </h1>
  <h2> </h2>
  <h3> </h3>
  <h4> </h4>
  <h5> </h5>
  <h6> </h6>
  [추천 검색어] HTML h1 tag
  
• 줄 바꿈
  <br>
  [추천 검색어] html new line tag
• 단락 바꾸기
  <p> </p>
  (어디서부터 어디까지가 같은 단락인지 알 수 있다.)
  <p>의 단점, <br> 태그는 줄 바꿈을 많이 하고 싶으면 여러 번 사용하면 된다. 하지만 <p> 태그는 정해져 있는 여백만큼이 벌어지기 때문에 시각적으로는 자유도가 떨어진다. 그래서 CSS를 사용해야 한다.  
  [추천 검색어] html paragraph tag
• CSS예시
  <p style=margin-top:40px;">
  부족한 부분은 CSS를 통해서 훨씬 더 정교하게 제어할 수 있기 때문에 의미에 맞는 태그를 사용하는 것이 더 좋은 방법

WEB1 - 1 to 10 

<h1>WEB网络</h1>
<p style="margin-top:40px;">
<strong>WEB<u>（World Wide Web）</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<p>
网络是由若干节点和连接这些节点的链路构成，表示诸多对象及其相互联系。
</p>

 

개발공부와 동시에 블로그를 시작했더니 제가 개발공부를 하는 건지 블로그를 하는 건지 모르겠네요...

개발공부를 올릴 때는 글을 줄이고 간결하게 해야겠네요...