브라우저의 특징과 장단점
우리가 외국어를 말할 때 아무리 이상하게 말해도 누가 막지 않는 것처럼 이상한 코드가 담긴 html이라도 브라우저에서 실행할 수는 있다. 다만, 이상하게 말하면 외국인이 이해하지 못하듯 브라우저도 html 문서를 이해하지 못할 것이다.
- 장점 : 우리가 실수를 하더라도 페이지에 접속한 유저는 콘텐츠를 볼 수 있다.
- 단점 : 브라우저는 잘못된 부분을 알려주지 않는다.
HTML(Hyper Text Markup Language)이란?
- HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어
HTML을 대할 때 반드시 필요한 마음가짐과 팁
- 절대 외우지 말기!!! 암기 금지!!!
- 중요한 것은 암기가 아니라 구글링이다.
- html, css, javascript를 검색할 때, mdn 키워드로 검색하면 "Mozilla Developer Network(web에 관한 정보를 정리한 문서)"로 안내해준다.
ex) html tags mdn, html attribute mdn
* w3 school 은 절대로 이용하지 말 것을 추천 *
HTML의 태그들 정리
<!-- 브라우저에게 이 파일은 html문서라고 알려준다. -->
<!DOCTYPE html>
<!--
용어 설명
1.attributes : 태그에 추가하는 정보
- atrribute 값은 항상 "" 큰 따옴표 안에 작성한다.
- 어떤 태그는 id라는 arrtribute를 가질 수 있다.ex) image, paragraph. header, link...
- 반대로 src(source)라는 attribute는 모든 태그가 가질 수 있지 않다.
2.semantic tag: 코드 자체에 의미가 부여된 태그 (header, navigation, footer...)
- semantic 태그로 코드를 작성 하는 것은 매우 중요하다.
- 작성된 코드들의 가독성이 좋아진다.
3.container
- header, main, footer, navigation, hgroup 등 <>속 태그들은 전부 container이다.
- 전부 div 태그로 대체 할 수 있다. div 태그는 가장 통용적인 container다.
- 코드만 보고 어떤 의미인지 파악하기 위해서 semantic 태그를 쓰는 것이다.
-->
<!--
1.html : 태그 사이에 오는 text가 html 코드가 된다.
- lang="" : 사이트에 사용되는 언어 표기 (검색엔진에게 알려줌)
2.head : 웹사이트의 페이지에 관한 환경을 설정한다.
- head 태그에서 이해되고 실제 동작하는 코드는 화면 상에 안보여진다.
3.body : 사용자가 볼 수 있는 content를 보여준다.
- 브라우저 화면 상에 보여질 내용은 전부 body 태그에 있어야 한다.
-->
<html lang="kr"></html>
<head></head>
<body></body>
<!-- head에 들어가는 태그 -->
<head>
<!--
1.link rel="shortcut icon" : title 옆의 icon을 지정해준다.
2.title : 웹페이지 상단과 구글에 검색했을 때 보여지는 text가 들어간다.
3.meta : 부가적인 요소 라는 뜻 (content, name attribute를 가짐)
- self closing tag 이다.
- meta name="description" : 구글에 검색하면 title 밑에 나오는 설명이다.
- meta charset="uft-8" : 한글 등 문자 표시하게 해줌
-->
<link
rel="shortcut icon"
sizes="16x16 32x32 64x64"
href="https://nomadcoders.co/m.png" />
<title>This is Title</title>
<meta name="description" content="This is description" />
<meta charset="uft-8" />
</head>
<!-- body에 들어가는 태그 -->
<body>
<!--
1.a href(anchor)
- href(hyperlink reference) : 이동할 사이트를 지정해준다.
- target="_self" : 해당 탭에서 작업을 실행한다.(기본값)
- target="_blank" : 새로운 탭을 생성해서 작업을 실행한다.
2.p(paragraph) : 평문을 작성할 때 사용하는 태그
3.ol(ordered list) : 순서대로 1,2,3,4번호로 리스트를 생성하는 태그
4.ul(unordered list) : 정해진 순서없이 리스트를 생성하는 태그
5.img : 이미지 태그 (self-closing tag: </something>처럼 따로 close를 하지 않는다.)
6.form : 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타내는 태그
7.label
- label은 항상 input과 같이 사용해야한다.
- label의 for과 input의 id가 같아야한다.
- for과 같은 값을 가진 id를 들고있는 input을 작동시켜준다.
8.id
- body 안에 어떤 태그에든 넣을 수 있는 attribute이다.
- element당 하나의 id 만을 가질 수 있다.
- id는 고유해야한다. (중복된 id를 사용하면 doesn't work!)
- scripting 이나 css를 식별하려는 목적을 가진 attribute이다.
-->
<h1>Hello this is my website!</h1>
<h2>Hello</h2>
<a href="http://google.com" target="_blank">Go google</a>
<ol>
<li>list1</li>
<li>list2</li>
</ol>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
<img src="img/good_picture.jpg" />
<form>
<div>
<label for="profile">Profile Photo</label>
<input id="profile" type="file" accept=".pdf,image/*" />
</div>
<label for="first-name">First Name</label>
<input id="first-name" required placeholder="Name" type="text" />
<input placeholder="Password" minlength="8" type="password" />
<input type="color" />
<input type="submit" value="Create Account" />
</form>
<!--
1.div(division) : box라고 생각하면 된다.
2.header : div를 대체할 수 있다. haed와는 다르다.
3.main : 내용을 의미하는 태그
4.footer : 꼬릿말을 의미하는 태그
5.span : 짧은 텍스트를 의미하는 태그
-->
<div></div>
<header></header>
<main></main>
<footer></footer>
<span></span>
</body>
쓸만한 vscode extension
- Live Server(Go Live) : 코드 변경사항을 저장하면 브라우저에서 새로고침 할 필요없이 바로 저장사항을 브라우저에서 확인할 수 있다.
- Community Material Theme : VSC 테마 변경 익스텐션
- Material Icon Theme : 아이콘 표시해주는 익스텐션.
- Prettier - Code formatter : 코드를 저장할 때 틀린 부분을 고쳐주고, 가독성이 편하게 코드를 수정해준다.
- WakaTime : 코딩을 얼마나 오랫동안했는지 확인할 수 있다.
- Korean Language Pack for VSC : VSC의 한국어팩
VSC 간편 단축키
1) 마우스가 가는 곳 마다 커서 만들기
▷ [Mouse Drag + Alt]
2) 클릭하는 곳마다 커서 생성
▷ [Click + Alt]
3) 여러개의 동일한 문자열 선택
▷ Target Drag → [Ctrl + d] (한번에 한문자열씩 추가로 선택됨 / 일괄선택: Ctrl + F2)
4) 한 줄 주석처리
▷ [Ctrl + / ]
5) 파일 맨 위아래로 한번에 이동하기
▷ [Ctrl + Home or End]
6) 커서가 이전/이후에 위치한 곳으로 되돌아가기
▷ [Alt + ←/→]
7) 커서가 위치한 줄의 코드를 위/아래로 움직이기
▷ [Alt + ↑ / ↓]
8) 사이드 메뉴 Show/Hide
▷ [Ctrl + B]
9) 커서가 있는 줄부터 그 아래의 줄들을 아래로 내리기
▷ [Ctrl + Shift + Enter]