HTML 요약 노트

 

 

처음부터 배우는 자세로 공부한다. 학습을 잘하는 방법은 학습할 내용 외에는 모두 잊는 것이다. 오직 학습에만 집중하는 비결은 주의를 산만하게 만드는 것들을 일시적으로 제거하거나 잊는 것이다. 잊어야 할 것은 세 가지다.

 

첫째 이미 아는 것들이다. 새로운 내용을 배울 때 우리는 그 주제를 실제보다 많이 알고 있다고 가정하는 경향이 있다. 그러나 이런 생각은 새로운 정보를 흡수하는 것을 방해한다.

 

둘째 긴급하다거나 중요하지 않는 것이다. 일반적인 믿음과 달리 뇌는 멀티 태스킹을 하지 않는다. 완전히 몰입하지 않는다면 주의력이 분산돼서 학습하기가 어려워진다.

 

셋째 자신의 한계이다. 기억력이 좋지 않다거나 학습 속도가 느리다는 등 당신이 자신에 대해서 믿고 있는 선입견을 잊어라. 가능한 것들에 대한 당신의 믿음을 일시 정지시켜라. 

 

 

1강 요약

파일과 폴더 이름은 항상 소문자로 작성한다.

vsc에 파일들을 생성하기 전에 폴더를 열고 시작한다.

파일 이름 뒤에 만들 파일의 형식을 입력한다. (html, css, mp4 등등)

파일을 수정하고 반드시 저장을 해줘야 반영된다.

html 파일은 브라우저로 연다. 

 

1) HTML 파일 만들 때 확장자는 html

2) 파일명, 폴더명은 항상 소문자로 작성되어야 한다.

3) 파일 안에 내용이 변경될 때마다 저장을 해야 한다. (Ctrl + S)

파일명 옆에 흰색 동그라미가 보인다면 아직 저장되지 않은 것이다.

4) 브라우저 새로고침 : Ctrl + R,

크롬 탭 바꾸기 : Ctrl + Tab / Ctrl + 원하는 탭 번호

ctrl + tab 하면 다음 탭으로 이동하고, ctrl + shift + tab 은 이전 탭으로 이동 

 

VSC 'open with'으로는 브라우저 연결이 안 돼서 그 아래에 있는 'Reveal in File Explorer' 하니 되네요. 혹은 폴더 열어서 open with 'browser(chrome, brave, etc)' 해보세요 

 

2강 요약 

- 웹사이트를 만드는데 꼭 VSC가 필요한 것이 아니다. 메모장으로도 만들 수 있다. VSC를 쓰는 이유는 좋은 익스텐션이 많이 때문.

- WakaTime이라는 확장 프로그램 등 유용한 것들이 많다.

- 익스텐션 추천 : Community Material Theme → VSC 테마 변경 익스텐션

- Select Color Theme을 통해서 테마 변경 가능.

- 익스텐션 추천 : IMaterial Icon Theme → 아이콘 표시해주는 익스텐션.

- 브라우저와 HTML에서 중요한 부분 : 브라우저는 아무런 오류가 없다. HTML 문법을 따르지 않아도 언제나 사용자에게 콘텐츠를 보여준다. 브라우저는 HTML 파일에 에러가 있다고 알려주지 않는다.

- 이와 같은 브라우저의 특징은 장단점이 있다.

- 단점은 브라우저가 무엇이 잘못된 거지 알려주지 않는다는 것.

- 장점은 우리가 실수를 하더라도 페이지에 접속한 유저는 콘텐츠를 볼 수 있다는 것. 

wakatime 설치했어도 밑에 시간이 나오지 않는 경우에는 f1을 누른 뒤 wakatime :status bar enabled를 true로 바꿔줘 보세요. 

Waka time : 총 코딩 작업시간 알려줌

wakatime.com 로그인 > settings > Secret API Key 복사 extension > wakatime install 한 후 F1 > wakatime api 검색 > 복사한 key 값 입력 후 enter VSCODE 재부팅 

 

VSC 환경을 갖추려면 확장 프로그램(Extensions)을 다운해야 한다.

- Community Material Theme (VSC 색깔 변경)

- Material Icon Theme (확장자명에 맞는 아이콘 표시

- prettier (자동 줄 바꿈 등) 

 

1. HTML tag 사이에 넣는 텍스트가 무언가가 된다 (title, image, 등등)

2. 브라우저는 아무 의미가 없어도 이해하려 한다

3. h1 = header no.1, h2 = header no.2 . . . h6까지 존재

4. 태그를 닫는것은

5. 브라우저는 내가 만든 태그를 사용하지 못한다 (텍스트로 표현할 수는 있지만 원하는대로 작동은 안됨)

- HTML의 목적 : 브라우저에게 무엇이 무엇인지 알려주는 것. 이건 링크야, 이건 제목이야, 이건 이미지야 등...

- '여기부터 여기까지가 무엇이다' → 이걸 말해주는걸 HTML Tag라고 함. 이 두 태그 사이에 넣는 내용이 무언가가 되는 것이다.

- HTML에서는 tag를 텍스트로 넣는다. 실제로 tag가 어떤 의미를 하는지 생각해보자.(물건에 붙어서 이게 뭔지 말해준다.)

- HTML에는 오류가 없어서 food tag를 이해 못하지만, 실제로 food 태그가 있으면 브라우저가 이해를 한다.

- /이 있다면 tag가 끝났다는 뜻. tag를 닫지 않으면 제대로 작동하지 않는다.

- tag : header number 1

- h1 ~ h6 까지 있다.

- 제대로 된 위치에 제대로 된 tag를 쓰면 브라우저가 이해하고 표시한다.

- 모든 tag를 전부 기억하고 암기할 필요는 없다. 아주 많은 tag가 있고 그냥 작동원리를 이해하면 된다.

 

HTML tag에 대해 다루어 보았다.

HTML tag는 쉽게 말해 어디서부터 어디까지의 구간이 tag인지 지정하는 도구라고 보면된다.

실제 존재하는 tag를 적으면 브라우저가 해당 tag에 맞춰 반영하고 존재하지 않는 tag를 적더라도 반영은 되지 않더라도 브라우저에 오류가 생기지는 않는다.

주의해야하는 것은 html태그가 끝난뒤에는 무조건 태그를 닫아주어야 하는데 그렇게 하지 않으면 모든 코드가 해당 태그로 인식되는 문제가 생긴다. 

 

prettier 적용 안되는 분들 방법.

solution for who can't operate prettier .

VSC html탭 (코드 작성하는 탭) 가서 go to html tab ( where you write code tab)

F1 혹은 cmd+shift+p을 누르고 >Format Document with... >Configure Default Formatter... > Prettier...... 하면 됩니다.

press F1 or cmd+shift+p > Format Document with... > Configure Default Formatter... > Prettier...... > then your VSC will operate. 

 

Prettier 태그 , 정렬 적용 안되는 분들

VSC > Preference 들어가셔서 'Default Formmatter' 검색하시고 Editor:Default Formatter 밑 선택 항목을 'null' 에서 'esbenp.prettier-vscode' 로 변경 해주시면 정상 작동 합니다. 

 

prettier 처음 설치하고 적용 안되시는 분들!!

1. ctrl + , 눌러서 설정들어간다.

2. editor format 이라고 검색한다.

3.Editor: Default Formatter 항목이 none 이라 되있는데 prettier 로 설정한다

4.Editor: Format On Save 체크 박스 체크한다. 위처럼 하시면 적용됩니다!! 

 

 

3강 요약 

a = anchor를 뜻함 (link를 떠올리면 됨) (추가적인 정보가 필요함)

attributes = 태그에 추가하는 정보

href = http reference라고 함 (anchor 태그에만 추가 가능)

target = 기본값은 self이고, _blank 입력 시 새 탭에서 링크가 열림

img = 다른 태그와 다르게 /로 닫는 태그가 없다 (자체 닫기 태그이기 때문)

src = img 안에 사진을 집어넣음 (img에서 작동) 

 

a=anchor(link)닻(다른 웹사이트로 이동하는 방법)

이동하게 하려면 다른 정보를 더 추가해줘야 한다

-어디로 가야되는지?

tag에 추가하는 부가적인 정보를 arrtibutes(속성)

1.href(=HTTP reference or hyperlink reference)

a href="http:google.com" 이런식

attribute href는 anchor 태그에만 추가 할 수 있다.

2.target(기본값="_self")

a href="http:google.com" target="_blank" 이걸로 하면 다른 화면으로 구글을 띄워준다

3.img

이건 </>닫아주는게 없다 img태그는 "self-closing tag"이다 이미지는 택스트가 없고 단지 이미지일 뿐이다. 이렇게 쓰임

img 태그가 가지고 있는 attribute src="여기 이미지 주소 넣음"(img 태그에서만 작동) 

 

- tag에 추가하는 부가정보를 attributes(속성)라고 한다.

- 한 tag 안에 2개 이상의 attributes를 동시에 사용할 수 있다.

- 속성 'href'는 오직 tag 'anchor'에만 붙일 수 있다.

- 속성 'target' : 기본값은 _self로, _blank입력 시 새 탭에서 링크가 열림

- tag 'img'는 self-closing tag 이다.

- 속성 'src'는 오직 tag 'img'에서만 작동한다. (사진넣는 기능) 

 

4강 요약 

 

- img local 표기법 : path notation (경로표기법) : 폴더/이미지.확장자

- 모든 HTML 문서의 시작을 나타내는 첫줄 :

- html tag 사이에 넣는게 html 코드가 됨

- 웹사이트 구조는 두개의 파트로 구성됨 head , body

- head : 웹사이트의 환경을 설정해주는 곳 (외부적으로 보여지지 않는 설정), 보이지 않음

- body : 사용자가 볼 수 있는 내용(content), 브라우저 화면 상에 보여질 내용들은 body에 있어야 함 

 

HTML의 구조 - 일종의 약속 html이라는 문서라고 브라우저에게 알려줌

# head태그에는 invisible 정보들이 들어가며

: 메타데이터 ex) 인코딩정보, og:title, og:image, 등등...

# body태그에는 visible한 콘텐츠 정보들이 들어간다

: 실제로 웹페이지에 보이는 콘텐츠들에 대한 정보들 

 

 

meta 태그의 meta는 부가적인 정보라는 뜻

meta 태그는 두개의 attribute를 갖고 있다.

1.content

2.name

head 태그에 있는 것들은 보이지 않음

meta charset="utf-8" 매우 중요(브라우저에게 text를 어떻게 그려달라는지 말해준다)

-한글이나 다른 특수문자가 있는 언어를 입력 할 때 브라우저가 그 문자들을 이해 못 할 때가 있다.

그래서 이 charset 메타 태그가 없으면 글자가 사이트에서 깨져보일 것이다. 꼭 잊지말고 기입하자.

meta 태그들은 self-closing 태그이다.

html의 attribute lang(구글,네이버,bing 같은 검색엔진들에 도음을 준다, 우리 사이트에서 사용되는 언어가 무엇인지 말해주는 것이다. 주된 언어가 한국어인지 영어인지 검색엔진에게 알려주는 것이다.)

이 작업들은 사이트의 정보를 브라우저에게 알려주는 용도인것이다. 최대한 명확하게 우리의 웹사이트가 무엇인지 브라우저에게 알려주는 것이다.(검색엔진이 이해 할 수 있게 정리해서 말해주는 것이다.)

head태그에 있는것: 보이지않는 태그들로 사이트 설정을 하는 것.

브라우저에게 사이트가 어떻게 보여지는지, 구글이 어떻게 사이트를 바라보는지 이 모든게 head태그에 속해있다.

마지막

meta property="og:image" 태그의 이미지는 카카오톡으로 공유될때 보여지는 이미지다

사이트의 링크를 카카오톡에 공유 할때 카카오톡은 우선 1.og:title이라는 태그를 찾는다

2.그리고 description을 찾는다

3.그리고나서 og:image를 본다. 

 

VSC 간편 단축키 - 한방에 정리 - https://www.youtube.com/watch?v=Wn7j5dfbJF4

7) 반복되는 단어 한방에 수정

⌘ + D or Ctrl + D(한번씩 일일이 눌러줘야함 / 귀찮으면 Ctrl + F2)

6) 클릭하는 곳마다 커서 생성

⌥ + Click or Alt + Click

5) 코드 위/아래로 움직이기

⌥ + ↑ / ↓ or Alt + ↑ / ↓

4) 코드 복사해서 위/아래로 움직이기

⌥ + ⇧ + ↑ / ↓ or Alt + ⇧ + ↑ / ↓

3) 코드 블록 한방에 코멘트 처리하기

⌘ + / or Ctrl + /

2) 선택된 영역에 커서 만들기

⌥ + ⇧ + i or Alt + ⇧ + i

1) 마우스가 가는 곳 마다 커서 만들기

⌥ + ⇧ + Mouse Drag or Alt + ⇧ + Mouse Drag

Bonus:

파일 맨 위-아래로 한번에 이동하기

Top / Bottom of File: ⌘ + ↑ / ↓ or Ctrl + Home / End

사이드바 숨기기

Hide / Show Sidebar: ⌘ + B or Ctrl + B 

 

+[Ctrl + Shift + Enter]

 

커서가 있는 줄부터 그 아래의 줄들을 아래로 내리기

 

+Alt + ←/→

 

커서가 이전에 위치한 곳으로 되돌아가는 기능이고 알트 오른쪽은 그 반대 효과 

 

audio autoplay가 아마 안 될 거에요. 크롬의 정책이 바뀌어서 현재는 autoplay가 지원되지 않습니다. 

 

form안에서 가장 중요한 것은 input이다.

input은 self-closing 태그다

input은 1개 혹은 여러개의 type을 가질 수 있다.

type에 color text submit 등이 들어갈 수 있다.

file에는 특정형태만을 요구할수 있다.

accept =.png , img/* 이런식으로 가능

disable은 클릭이 안되게하는 attribute이다.

required는 아무것도 없을 시 제출이 안되게 하는 attribute이다.

ㄴ form을 검증한다.

minlength 최소 글자 수

태그 작성법과 attribute를 어떻게 찾고 사용하는 지 아는게 중요하다 

 

lable은 input과 함께 작동한다. (label이 input을 activate)

lable 태그에 for=""

input 태그에 id="" 에 완전 똑같은 벨류가 들어가야 함.

(커서 동시 선택하고 싶을 때는, option 키)

*핵심은 Id

id는 body 안에 어떤 태그에든 넣을 수 있는 attribute임

element당 하나의 id 만을 가질 수 있다 (고유식별자임, 중복된 id를 사용하면 doesn't work!)

Why? CSS가 태그를 지정하여 꾸미기 위해서 ID가 필요하기 때문이다! 

 

1. form을 더 괜찮게 만들기 위한 label 태그

- label tag에는 question을 추가 가능

- label은 input과 함께여야 작동됨. 같이 사용하는 방법은 label 태그에는 for이라는 속성을 적고 input 태그에는 id라는 속성을 적는데 두 속성의 값이 동일해야 함. profile photo라는 콘텐츠를 클릭하면 for과 같은 값을 가진 id를 들고있는 input을 작동시킴.

2. type 유형

- email, url 같은 값 넣으면 원하는 유형의 정보만 받을 수 있게 해줌

- range는 범위 선택할 수 있음

- date는 날짜 선택, 숫자만 입력 가능

3. ID

- body 안에 어떤 태그에도 id 속성 입력 가능. 왜냐하면 id는 unique identifier이기 때문.

- 태그 하나당 하나의 id만 가질 수 있고 그 값은 고유해야 함.

- html은 뼈대. 나중에 css로 특정 스타일을 적용할 수 있는 이유는 id가 있기 때문. 나중에 css에서 "website라는 id를 가진 input을 파란색으로 해줘" 라고 입력해야 함. 따라서 id 값을 다른 태그에서 공유하면 안됨. 

 

요약

Semantic HTML(document와 code를 명확하게 할 수 있도록 짜는게 좋다)

div tag = division (박스라고 생각해도 됨) 아무런 값이 없는 단순한 box

header tag = div 대체 태그 (head와 헷갈리지 않기. head는 보이지 않지만 header는 보인다)

main tag = 내용을 의미하는 태그

footer tag = 꼬릿말을 의미하는 태그

span tag= 짧은 텍스트를 의미하는 태그 

 

- visul studio code는 코드 작성이 잘못되면 빨간색으로 나타내준다.

- atrribute 값은 항상 "" 큰 따옴표 안에 작성한다.

- 어떤 태그는 id라는 arrtribute를 가질 수 있다.ex) image, paragraph. header, link...

- 반대로 src(source)라는 attribute는 모든 태그가 가질 수 있지 않다.

- 코드 자체에 의미가 부여된 semantic 태그를 잊지 말자.ex) header, navigation, footer...

- semantic 태그로 코드를 작성 하는 것은 매우 중요하다. 작성된 코드들이 훨씬 더 보기 좋고, 좋은 프로그래머가 되기 위해서는 필수 사항이다.

- header, main, footer, navigation, hgroup 등 <>속 태그들은 전부 container이다. 전부 div 태그로 대체 할 수 있다.

- div 태그는 가장 통용적인 container이다. 대체가 가능하지만, 코드만 보고 어떤 의미인지 파악하기 위해서 semantic 태그를 쓰는 것이다.

- 모든 태그를 암기 할 필요는 없다. 필요할 때마다 문서를 찾아 적용하면 된다. 

 

 

HTML Visual Studio Code에서 배우면서 알게 된 여러 팁들

 

▶ index.html 파일을 웹 브라우저에서 드래그로 올려서 하셔도 좋으나, "VS Code"의 확장프로그램 "Live Server(Go Live)"라는 것을 설치하시면 조금 더 쉽게 웹 브라우저에서 사용 가능합니다. Extension에서 Live Server라고 검색해보세요! "Live Server(Go Live)"를 설치하면 VS Code 하단에 Go Live 텍스트가 생기고 이 텍스트를 누르면 자동으로 기본 브라우저에서 실행이 됩니다. 이 기능은 VS Code의 코드 변경사항을 저장하면 브라우저에서 새로고침 할 필요없이 바로 저장사항을 브라우저에서 확인 할 수 있어요!! VS Code 사용이 조금 익숙해지면 한번 사용해보세요. 

 

▶ 공백에 점 표시 하고 싶으신 분들은 settings(설정)들어가셔서 user>text editor>Render whitespace에서 all 선택해주시면 됩니당 

 

▶ Settings에서 Format on Save해도 저장할 때 Format 안 바뀌시는 분들, "Settings" - "user"에서 "default formatter"라고 검색하시고, 'Null'을 'esbenp.prettier-vscode'로 바꾸시면 됩니다 

 

Tip: 구글에 html이나 css, javascript를 검색할 때 "mdn"이라는 키워드를 끝에 붙여주는게 좋다 "html tags mdn" 이런식으로 mdn을 붙이면 Mozilla Developer Network로 안내해줄 것이다. 

 

for="" id="" 를 동시에 바꾸려면, 첫 번째 "" 사이를 클릭하고, 두 번째 "" 사이를 alt 키와 함께 클릭하면 두 부분이 함께 타이핑 된다. 

 

 

HTML 공부