HTML

• 실습환경 준비

코딩 에디터가 필요하다. 생활코딩 HTML 강의는 Atom을 쓰는데, 나는 이미 Visual Studio Code가 있고 거의 써보진 않았지만 이미 생활코딩 강의를 어느 정도 들어봤는데 VSC를 써도 별 문제가 없을 것 같다.

 

근데 생활코딩은 왜 Atom을 쓸까? 대부분이 VSC를 쓰지 않나?

Visual Studio Code vs Atom : https://ko.myservername.com/visual-studio-code-vs-atom

먼가 번역체로 쓰여져 있고 대부분 처음 듣는 말이 많아 솔직히 잘 모르겠다. 그냥 VSC가 더 빠르긴 하단다.

그리고 학부시절 C언어 강의를 들은 적이 있는데 이 때 Visual Studio를 사용했다. 조금 비슷해 보여서 VSC를 쓰겠다. 그나마 더 익숙하기도 하고 인터페이스가 나한테는 더 편하다!

 

 

• 파일 열기

Chrome(Web Browser)에서 Crtl + O를 통해 현재 내 컴퓨터에 있는 파일을 불러올 수 있다.

 

 

• 기본 문법 Tag

<strong>글자를 진하게 강조할 수 있다.</strong>
<u>글자에 밑줄을 그을 수 있다.</u>
<h1>h1~h6으로, 글자의 크기를 조절할 수 있다. h1이 가장 크다. 제목, 소제목과 같다고 보면 되고, 줄바꿈이 실행된다</h1>
<br>을 통해서 줄바꿈을 실행할 수 있다.
<p>이 태그는 문단을 나타내는 paragraph의 약자로, 말 그대로 문단을 나타내고 '<h1~6>'태그처럼 줄바꿈이 실행된다.</p>
<img src="#">#에 img의 주소를 넣으면 사진을 불러올 수 있다. 혹은 같은 디렉토리(폴더)안에 있다면 파일 이름을 적어도 사진을 불러올 수 있다.
<title>head 태그 안의 title 태그 안에 해당 페이지가 가졌으면 하는 원하는 제목을 넣어, 페이지의 이름을 정할 수 있다.</title>

Tag는 무언가를 지정할 때 쓰인다.

 

 

• 부모-자식 구조

<div class="parent">
	<div class="child">
	부모(parent)의 속성이 바뀌면 자식(child)의 속성 또한 바뀌게 된다.
	HTML에서 div(parent) 안에 들어간 div(child)는 parent에 속해 있다고 보기 때문이다.
	</div>
</div>

 

 

• 목록

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

ul 태그 안에 list를 배열하면 점으로 list들을 나열하게 된다.(이 또한 부모-자식 구조이다)

<ol>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ol>

반면 ol 태그 안에 list를 배열하면 숫자가 매겨지며 list들이 나열된다.

ol은 ordered, ul은 unordered의 약자라는 것을 알고 있으면 기억하기 수월하다.

 

 

• 링크

<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">링크</a>

a 태그는 하이퍼링크를 걸어줄 때 사용된다. 여기서 href는 이동할 링크 주소이고, target="_blank"를 통해 새로운 창에서 링크가 뜨도록 할 수 있다. title="html5 specification"은 사용자가 마우스를 링크에 가져다 놓았을 때 Tool Tip이 뜨게 한다.

Tool Tip, 마우스가 안 보이는데 실제론 마우스를 갖다댔다.

 

 

• Server & Client

출처 : 생활코딩 HTML WEB1-17 강의

Web Browser, 즉 Client(나라고 생각하자)가 Server에 index.html을 Request(요청)하면, Server가 저장해두고 있던 index.html을 Response(반응)한다.

 

그냥 내가 서버에 index html 보여줘!라고 하면 서버가 index.html을 보여주는 단순한 것이다.

 

생활코딩에서는 웹호스팅(아직 잘 모르는 단어이다)으로 github를 썼다. 같은 개념인지는 모르겠지만, SW 사관학교 정글을 준비한 적이 있는데 이 때는 AWS Instance와 Gabia를 사용했었다. 일단 생각나는 것을 그냥 적어봤는데, 나중에 더 배우고 나서 저 2개가 다른 것임을 알게 된다면 조금 쪽팔릴 것 같다 ㅎㅎㅎ!

 

또한 Apache와 Bitnami를 이용해 localhost로 서버를 운영해 내가 만든 페이지를 열 수 있다. 앞의 Ctrl + O로 HTML 파일을 열었을 때와 다른 점은, 서버가 이용됐다는 점이다. 비록 지금은 서버를 내 컴퓨터에 두는 기반으로 내가 만든 HTML 파일에 들어갔지만, 훗날 좀 더 배우면 거대한 서버 대여 서비스를 이용해 내가 만든 웹, 앱, 혹은 프로그램을 배포할 수 있을 거란 생각이 든다.

 

 

 

 

출처 : 생활코딩