공부정리_HTML(1~9강)

 

WEB1 - 1.수업소개

나의 문제를 코딩으로 해결하려는 엔지니어가 되어보자.

이해력 < 공감력

 

' 어떤 문제가 우리 삶에서 중요하고 심각할 수록 그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다.'

출처 입력

반대로 그 문제가 우리 삶과 동떨어져 있고 사소하다면 어떻게 될까?

공부자체가 삶의 문제가 되어서 우리를 해방시키기는 커녕 억압할 것.

자신의 뇌를 이기는 장사는 없다.

공부의 효용을 뇌에게 자주 증명해보인다면 우리의 뇌는 공부를 좋아하게 될것 .

공부를 좋아하게 된다면 노력하지 않아도 우리는 공부거리를 찾게 된다.

자연스럽게 시간이 흐를수록 실력도 좋아진다.

공부와 친해지는 계기가 되는 수업이 되길

 

WEB1 – 2.프로젝트의 동기

개발자들과의 협업을 위해 강의하다 일반인 상대로 확대됨.

본인 안의 강사기질 발견, 무대공포증 극복.

시간,장소에 구애받음.

영상화질의 변화로 인한 동영상으로 지식 공유 가능.

제작자가 생활코딩을 만들게 된 계기

 

WEB1 - 3.기획

 

무엇을 만들기 전에 내가 무엇을 만들것인가를 계획, 상상, 구체화해야한다.

이런 일을 하는 사람이 기획자다.

 

WEB1 - 4.코딩과 HTML

 

기계가 하는일(결과,앱,프로그램,웹페이지,웹사이트) | 사람이 하는일(원인,부호,신호,코드,소스,컴퓨터언어)

우리가 하는 일 = 웹페이지를 만드는 일이고

사용하는 언어가 HTML(HyperTextMarkup Language)

 

HTML은

1.쉽다

2.중요하다

출처 입력

1.쉽다 = 앞으로 배우는 어떤 언어도 이것보다 어려움, 문법을 완전히 배우는데 10분도 걸리지 않음.

2.중요하다 = 사람들은 웹페이지를 하루에 백번이상 본다. 인류가 생산하는 거의 모든 디지털 정보가 담기는 가장 거대한 그릇이 웹페이지고 그것을 만드는 언어이다.

 

웹을 좋아하는 또 다른 이유

→ 퍼블릭 도메인이라는 점

웹을 어떠한 저작권도 존재하지않는 완전한 자유를 의미하는 퍼블릭 도메인으로 선언

팀 버너스리(웹의 창시자)

그렇기 때문에 구글 마이크로소프트, 애플, 모질라, 네이버 같은 회사들이 각자 브라우저를 만들 수 있는것이고, 우리가 만든 웹페이지를 여러 브라우저에서 똑같이 볼 수 있게 된 것은 이러한 이유 때문이다.

퍼블릭도메인이라는 거대한 바다 위에 저작권이나 특허는 섬처럼 드물게 존재.

빨리 가려면 혼자가고 오래 가려면 같이가라는 말이 있듯이 웹은 특정 기업이 독점하는 기술만큼 빨리 발전은 못했지만 특정기업이 독점하지 않기 때문에 90년대 이후 27년이 지난 지금가지도 살아남았고 27년이 지난 후에도 살아남을 가능성이 높다.

 

WEB1 - 5. HTML코딩과 실습환경 준비

html 에디터 찾는 법

google 검색 : ‘html editer’, ‘best html editer 2020’

출처 입력

저장 시 파일형식 : 파일명.html

	윈도우	맥
파일열기	ctrl + o	command + o
파일저장	ctrl + s	command + s

(브라우저 엣지에서는 안됨)

 

WEB1 - 6.기본문법 태그

HTML을 지배하는 가장 중요한 문법 : 태그

	열린 태그	닫힌 태그	변화
강조 <strong></strong>	<strong>	</strong>	폰트굵기의 굵어짐과 의미상의 중요도가 올라감
밑줄 <u> </u>	<u>	</u>	폰트 밑의 밑줄생김과 의미상의 중요도가 올라감

 

태그는 일상에서 유사한 용어를 비유적으로 씀. 컴퓨터공학은 하나의 거대한 시. 물질에 기반하는 것이 아니고 논리적인 것을 기반으로 하기 때문에, 컴퓨터공학에서 만든 것들을 사람들에게 설명해주고, 또 사람들이 그것을 마치 손에 잡히는 것처럼 받아들이게 하기 위해서는 필연적으로 여러 가지 비유와 은유를 쓸 수 밖에 없게 되는데 이런 부분이 시와 굉장히 유사함.

 

WEB1 - 7.혁명적인 변화

중요한 것은 어렵고 쉬운 것은 사소하다는 생각의 오류

출처 입력

쉬운 것은 시험에 나오지 않기 때문.

처음 배우는 것들은 가장 중요하고 쉬운 것이다.

h1태그는 어떤 태그인가?

검색엔진으로 검색 해볼 것

지식을 쉽게 습득할 수 있다.

/*h1은 제목 태그이다. h1~6까지 있으며 의미상 중요함을 나타내기 위해 h1은 로고에 많이 사용된다.*/ <h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h4>제목4</h4> <h5>제목5</h5> <h6>제목6</h6>

 

WEB1 - 8.통계에 기반한 학습

웹페이지에서 많이 쓰는 태그들 랭킹

The average web page from top twenty Google results

 

WEB1 - 9.줄바꿈 : br vs p

html new line tag

<br> 줄바꿈 태그

html paragraph tag

<p></p> 단락을 나타내는 태그

css에서 여백을 나타내는 태그

"margin" html에서 사용예시 : <p style=“margin-top:40px;”></p>