SEC 4. HTML : Next Steps & Semantics

Crucial! important Nice to Have
Understanding what HTML5 Actually is   VSCode Tip : Emmet
Block Vs. Inline Elements   <sub> elements
<span> and <div> elements   <hr> elements
Semantic Elements   <sup> elements
    <br> elements

 

What Exactly Is HTML5?

HTML5 is the latest evolution of the standard that defines HTML.

browser를 만드는 회사에서 설정하기 때문에 유저가 HTML 버전을 낮추거나 하는건 불가..

그냥 최신의 HTML 스탠다드라고 생각하면 될듯.. 

HTML 파일을 에디터할때 표준규격(boilerplate)이 가장 앞에

<!doctype HTML> 을 쓰는데 이건 HTML파일이라는 깃발, 선언에 가깝고, 실질적으로 문서에 영향을 주는건 없다. 바꾼다고해서(HTML 4.01 ~~) 버전이 달라지는것, 변경되는것도 없고 그저 명시해놓는것에 가까움.

 

 

 

 Block vs. Inline Elements - Divs and Spans

 

inline element : on-line , in-line  ex) <a>. <span>

block level element : own-line,  take own block ex) <div>

지금(HTML을 배우는 단계)은 중요하지 않을지 모르지만 CSS에서 많이 쓰인다고함.

 

div같은 경우에는 특히 CSS를 적용하기 전엔 컨텐츠에 아무런 영향을 주지 않음. (span도 비슷)

 

div

developer.mozilla.org/en-US/docs/Web/HTML/Element/div

 

span

developer.mozilla.org/en-US/docs/Web/HTML/Element/span

 

 

An Odd Assortment of Elements: HR, BR, Sup, & Sub

MDN에서 HR, BR , Sup, Sub 용법 찾아보면 자세한 예시가 나와있음

중요한 비중을 차지하지는 않는 요소들인것 같다.

 

HR(horizontal rule)은 구분선, self tag

developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

 

BR(break)은 Break line 줄 띄어쓰기,, 줄 띄어쓰기가 필요한 이유는 에디터안에서 줄 띄어쓰기를 해도 html 자체에서는 그냥 이어서 인식하기 때문에

a line break in text

developer.mozilla.org/en-US/docs/Web/HTML/Element/br

 

Sup(Superscript) 은 지수표현하는 느낌으로 철자하나를 위로 올림,, 위키에 주석을 달때도 자주 쓰이는 요소

developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

 

sub(subscript)은 분모나 분자 구조표현할때 쓰는 느낌으로 철자 하나를 아래로 내림,, 분모 표현할때 좋을거 같다.

developer.mozilla.org/en-US/docs/Web/HTML/Element/sub

 

 

Entity Codes

레퍼런스들

entitycode.com/

 

dev.w3.org/html5/html-author/charref

 

ex ) google search  - html entity less than 

entity : 독립체

잘 쓰이지 않거나 키보드로 타이핑하기 어렵거나 html 문서가 헷갈려하는 기호들을 표현할때 쓰는 코드.

에디터에선 이상하게 보일지모르나 브라우저에서는 엔티티코드를 인식하고 렌더링해준다

보통 &(ampersand)로 시작하고 ;(semi-colon)으로 끝난다.

ex) &copy;  &euro;

 

 

코딩 연습 4: Snowman Logo Exercise

entity code 사용법과 sup 요소 이용하는 연습

 

 

? : 등록 상표 기호(登綠商標記號, Registered Trademark Symbol, ®)은 특정 국가 및 지역에서, 어떤 단어나 문구, 기호가 등록된 상표 또는 서비스 마크 임을 알리기 위해 사용하는 심볼 마크이다. 동그라미 안에 '등록 상표'(Registered Trademark)'를 뜻하는 "R" 문자가 기입된 모양을 띈다. by wiki

 

 

Intro to Semantic Markup

semantic : 의미의, 의미론적인

 

Semantic markup, the term semantic itself, independent of code or HTML just means something relating to meaning.

semantic markup is meaningful markup or markup that relates or pertains to the meaning of the content of that element.

 

div 같은 경우는 그냥 컨테이너로써의 요소.. 의미가 없다.

semantic markup은 a요소나 img 요소같은 눈에 딱 보이는 효과를 주지는 않지만 요소에 의미를 부여한다.

이게 메인이다. 이게 네비게이션이다. 이게 하단부(footer)다 이런것

이런 구분없이 div로만 떡칠한다면 정보를 모으는 주체(google 등등)는 정보를 모으는데 헷갈릴 수 있다.

그리고 호환성의 문제(screen reader user)도 있고 마지막으로 개발을 하는데 있어서 개발할 부분들을 쉽게 찾고 구분할 수 있다.

그래서 non-semantic markup(div)보다 semantic markup(main, nav, footer)등을 사용하는게 더 좋다.

->

section , main, nav, header, footer

Header footer, nav section, article main.

They all behave just like divs, except they have some meaning.

So that's one reason making your code more clawable, more friendly to other applications or to other code.

The second reason has to do with accessibility and making your code more accessible to people, using

screen readers to people who cannot see the rendered content or may not be able to fully see it or might

elect to use a screen reader.

Those screen readers can look for things like a nav element or a header or a footer or an article,

a main section.

It can use those as hooks.

And then the third reason that's important is that it just makes your your own code, your markup more

navigable for yourself and for other developers.

So adding meaning into our markup is the idea behind writing semantic markup.

There's nothing new about them except that they add meaning to the markup.

You use an article or a section or a main instead of divisive div.

 

 

Playing With Semantic Elements

그냥 div를 쓰는것보다 semantic한 markup을 쓰자.. 

div는 그냥 컨테이너적인 역할을 하는것이고 

의미가 있는 markup을 함으로써 우리가 그것이 실질적으로 무슨 의미인지 더 빠르게 이해할수 있고 검색최적화와 호환성및 스크린리더유저의 사용에 더 좋게 만들수 있다.

section 요소는 그저 섹션을 나누는 .. 그냥 의미적인 요소에 불과하지만 div보다는 훨씬더 의미가 있다.(이런게 semantic하다고 하는것일듯)

 

figure time footer section article nav main header footer aside summary

MDN으로 찾아보는것도 나쁘지 않을거같다.

 

Screen Reader Demonstration

스크린 리더 사용 동영상

스크린 리더유저의 시점으로 웹을 사용하는것을 보여준다. 

sematic markup을 기준으로 정보들을 읽어주기때문에 숙련이 된다면 숏컷과 함께 빠르게 정보를 찾는것도 가능하다.

또한 스크린 리더 유저를 위해서 semantic markup 사용을 권장하는것...

 

 

VSCode Tip: Emmet

docs.emmet.io/

docs.emmet.io/cheat-sheet/

 

emmet은 그냥 html 코드를 쓰는데 도움을 주는 툴이다. 

VSCode 안에 내장되있기도한데 코드를 빠르게 짜는데 도움이 된다.

치트시트에 간략하게 사용법이 요약되어 있다.

보통 자주쓰는건 child, sibiling, mutiply정도?

그 이외에도 html 요소들을 빠르게 코딩하게 숏컷하게 해주는 툴...

 

 

'TIL(today I learned)' 카테고리의 다른 글

2020-10-21 TIL  (0) 2020.10.21
2020-10-20 TIL  (0) 2020.10.20
2020-10-19 TIL(2)  (0) 2020.10.19
2020-10-18 TIL(2)  (0) 2020.10.18
2020-10-18 TIL(1)  (0) 2020.10.18

sec 3 . HTML : The Essentials

crucial! important nice to have
Paragraph Elements Using MDN as a Resource VSCode Formating On save
HTML Headings The Chrome Inspector  
HTML Lists    
HTML Anchor Tags    
HTML Images    
HTML Boilerplate    

Introduction to HTML

 HTML kind of like the nouns of a Web page, it is the structure of the content.

 HTML : hypertext markup language.

 

 It's just about marking up a document.

 

 Additional information is being added onto the pure content.

 

 in 1989,1990, HTML was created to help describe the structure of academic research papers and share them across the very early Internet.

 Originally was the same issue, but with academic research papers and sharing research papers and sharing

the structure.

 

to write HTML, we use what are called HTML elements.

 

 There's lots and lots of things that we can do, but we define them using this syntax here, this general

pattern where we wrap a tag in opening tag this right here and a closing tag around some content.

 ex)<p> blar blar </p> 

 

 the key concept here is that we are marking up some document just like this here where we're marking

up an essay or a plagiarized poem.

 

 We're going to be marking up Web documents, actual content to be displayed on a page.

 

 So we'll be able to do things like make this a paragraph of text or make this an image, make this a

link to Facebook, make this a bold element or a bold piece of text. Make this a heading.

 That's all stuff we can do with HTML hypertext markup language.

 

 

Our Very First HTML Page

 HTML 문서 만들어보기

 그냥 확장자명을 HTML로 만들면 HTML문서가 만들어지고 문서를 열면 웹브라우져에서 HTML파일을 열고 HTML파일을 인식한다.

 간단한 HTML bold tag를 써보고 확인해보기..

 

 

TIP: Mozilla Developer Network

MDN : Mozila Developer Network

유용한 사이트 

공식적인 문서는 아니고 개발자들이 오픈소스로 만든 자료들이 많다.

HTML CSS JS 가이드들이 많다.

만약 HTML form 태그를 잘 모르겠다하면

HTML form MDN 으로 구글링하면 가이드가 잘 나와있음

참조에서 html 요소 레퍼런스를 보면 요소들의 용법들이 잘 나와있음

developer.mozilla.org/en-US/docs/Web/HTML/Element

 

Paragraph Elements

developer.mozilla.org/en-US/docs/Web/HTML/Element/p

 

 

 

: The Paragraph element

The HTML p element represents a paragraph.

developer.mozilla.org

html은 텍스트에 줄을 띄어쓰기해도 인식해주지 않는다.

따로 html 요소를 사용해야하는데 paragraph element를 사용한다.

p태그를 이용해서 글을 문단 단위로 인식하게 만들어준다.

 

블록 레벨이다. (나중에 배운다고한다)

 

※tip   cmd + arrow ,, or ctrl + arrow  :  줄의 처음과 끝,  글의 처음과 끝을 갈 수 있는 단축키

 

Heading Elements

developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

h1에서 h6까지.. 

컨텐츠의 제목에 대한 html 요소

h1은 대부분의 문서에 하나만 들어가고(주제에 대한 표현으로 쓰인다) h2가 자주쓰인다.

헤딩 요소는 다른 컨텐츠와 섞이지 않는다.

<h1>chicken</h1>asdfasdfasd

->

chicken

asdfasdfasd

로 표현된다.

 

헤딩 요소의 사이즈는 조절할 수 있지만 문서의 구조성으로 인해서 쓰는걸 권장하진 않는다.

 

헤딩을 글씨 사이즈 조절하는데 쓰지말고 올바르게 써라.

 -> h1 아래 h2 아래 h3 그러니까 문서의 구조성을 생각하면서 써야한다. 토픽 아래 하부 토픽

 

※emmet으로 h1을 쓰고 탭키를 누르면 h1태그가 스니펫된다.

  lorem + 탭 을하면 lorem ipsum 문장이 나온다.

  lorem ipsum은 placeholder text로 쓰인다.

  lorem ipsum * n + tab 을 하면 n줄만큼 lorem 문장이 나온다.

 

 

코딩 연습 1: Pangolin Practice

 h 태그와 p 태그를 사용하는 practice

 별로 어려울건 없었다.

 

 

Introduction to the Chrome Inspector

크롬 page source 보기에 대한 가이드

페이지 소스를 보면서 각각에 요소에 어떤것이 쓰였는지 볼 수 있다.

 to help debug and work with HTML and CSS and JavaScript. For now, we're going to look at one called the inspector.

임시적으로 컨텐츠를 바꿀 수도 있다.

 

 

 

HTML Boilerplate

developer.mozilla.org/en-US/docs/Web/HTML/Element/html

 

: The HTML Document / Root element

The HTML html element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.

developer.mozilla.org

developer.mozilla.org/en-US/docs/Web/HTML/Element/head

 

: The Document Metadata (Header) element

The HTML head element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

developer.mozilla.org

developer.mozilla.org/en-US/docs/Web/HTML/Element/body

 

: The Document Body element

The HTML body Element represents the content of an HTML document. There can be only one body element in a document.

developer.mozilla.org

 

 

boilerplate 미국식 [-lər-]  영국식 [ˈbɔɪləpleɪt](사업상 서류·법률적 합의안 등의) 표준 문안

 

모든 HTML 문서는 뼈대(skeleton)이 필요하다. 보통 이것을 boilerplate(표준문안)라고 하는데

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>

이 뼈대는 HTML형식의 기본이 된다. 

 

<!doctype html>태그는 이 문서가 html이라는 걸 표현해주는 셀프태그이다(클로징 태그가 없는데 태그가 그자체를 표현하기 때문에 그렇다. 깃발이라고 생각하면 된다.)

 

<html>태그는 모든 태그의 상위 요소이다.

모든 html요소는 이 안에 들어간다.

 

html 요소의 설명에는 이런 설명이 있다.

 

Permitted content

One <head> element, followed by one <body> element.

<head>요소와 <body>요소가 따라온다고 되어있는데

head 요소는 메타 데이터를 설명하는 구간이고

body 요소는 컨텐츠 데이터를 설명하는 구간이다.

 

head 요소는 페이지에 표시가 안되는 메타 데이터를 설명하는 구간이다.

구글에 검색하거나 브라우저에 탭에 표현되는 <title>요소의 내용을 집어 넣는 부분..

 

body 요소는 페이지에 표현되는 컨텐츠 데이터를 넣는 부분.

 

VSCode에선 html 문서를 에디팅할때 ! + tab을 하면 이 boilerplate가 스니팻된다.

 

 

VSCode Tip: Auto-format

 auto-format기능은 컨텐츠에 영향을 주진 않지만 코드를 에디팅하는 입장에서는 보기 좋게 정렬해주는 기능이다.

수동 : commend palette -> mac : cmd + shift + p ,  window? : ctrl + shift + p 

         and format document

자동 : setting -> format on save

 

setting -> extention에 html란에도 format 관련 옵션이 있다.

 

List Elements

developer.mozilla.org/en-US/docs/Web/HTML/Element/li

 

 

  •  

    The HTML li element is used to represent an item in a list.

    developer.mozilla.org

developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

 

 

      : The Ordered List element

 

The HTML ol element represents an ordered list of items — typically rendered as a numbered list.

developer.mozilla.org

developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

 

 

      : The Unordered List element

 

The HTML ul element represents an unordered list of items, typically rendered as a bulleted list.

developer.mozilla.org

 

<li> - an item in a list

<ol> - ordered list

ex)

<ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>
  1. first item
  2. second item
  3. third item

 

<ul> - unordered list

ex)

<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>
  • first item
  • second item
  • third item

 

 

list를 nesting 할수 있다.

ex)

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

 

  1. first item
  2. second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  3. third item

물론 nesting된 ol을 ul로 바꾸면 bullet point(unordered list) list 로 바뀐다.

 

※tip : VSCode 줄복사 short cut : mac - opt + shift + ↑ or ↓ 

        li + tab ,, ol + tab ,, ul + tab -> emmet

 

 

코딩 연습 2: Favorite Movies Exercises

ul , ol 요소 연습하기. 쉽다.

 

Anchor Tags

developer.mozilla.org/en-US/docs/Web/HTML/Element/a

 

 

<a> : anchor tags -> creates a hyperlink

most frequently these are used to create hyperlinks to go to another page.

also use link same page

 

a태그만 단독으로 쓰면 제 역할을 하지 못한다. destination을 지정해줘야하는데 

이런 추가적인 정보를 더하기 위해 attribute를 사용한다.

 

Attributes in HTML are like little pieces of information we can pass in to a tag.

 

So not in between an opening and closing tag, but actually inside one of the tags.

 

a 태그에 attribute는 href를 사용 

href : hypertext reference

 

href를 쓸때 https://을 써서 인터넷 참조를 해야한다. 

안쓰면 로컬 파일을 참조한다.(local URL을 부름) 

로컬 파일을 의도적으로 사용할것이 아니면 http://www. ~~~ 를 써줘야한다.

 

in-line : a element

own-line : <h1> , <p> element

 

※ a tag snippet : a + tap

 

 

Images

developer.mozilla.org/en-US/docs/Web/HTML/Element/img

 

: The Image Embed element

The HTML img element embeds an image into the document.

developer.mozilla.org

 img 요소는 클로징 태그가 없다. 셀프 클로징태그라고 하는데 이미지는 글에 부연설명을 하는게 아니라 이미지 그자체가 정보기 때문에 클로징 태그가 없는것이다.

 그대신에 img 태그에는 src(source) attribute가 있어야한다. img태그만 달랑 있고 이미지에 대한 위치정보가 없다면 아무것도 안되기 때문 

+ The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility(cuz screen reader user)

 

Comments

 comments in HTML, so comments are not an element there,

 nothing that you will see rendered in the browser.

 

It's really just way of adding notes or text to your HTML document that will be ignored by the browser.

 

So usually use this for notes or feedback or reminders.

 

comment는 다른 언어에도 사용되고 형식은 다르지만 컨셉트는 같다.

 

html의 코멘트 형식

<!-- blar blar -->

VSCode 코멘트 숏컷 :  mac - cmd + /    window? : ctrl + /(forward slash)

아니면 커멘트 팔레트에서 comment를 치면 실행해보거나 숏컷을 확인해 볼 수 있다.

 

 

코딩 연습 3: Wolf Images & Links Exercise

 

 a 태그와 img 태그를 사용하기

 a 태그는 href 속성을 img태그는 src와 alt 속성을 써서 연습해보는 시간

'TIL(today I learned)' 카테고리의 다른 글

2020-10-21 TIL  (0) 2020.10.21
2020-10-20 TIL  (0) 2020.10.20
2020-10-19 TIL(2)  (0) 2020.10.19
2020-10-19 TIL (1)  (0) 2020.10.19
2020-10-18 TIL(1)  (0) 2020.10.18
  • udemy에서 웹 개발 부트캠프 강의 듣기 시작.

오리엔테이션

1. 모든 과제 해보기

2. 그냥 따라하지 않기 - 고든램지를 본다고 고든램지가 될 순없다.

3. 시간을 가지기 - 부트캠프코스는 10~12주 풀타임 코스워크다.. 60시간은 그냥 동영상 시간일뿐.

4. 당황하지 않기 

5. 때로는 휴식 취하기.

---

섹션 인트로 스킵 하지말것

 

 

 

sec 2 : An introduction to Web Development

 

crucial! important nice to have
installing vscode and chrome How the internet works(in 5minutes) VSCode Theme
understanding the roles of HTML, CSS and JS HTTP Requset/Response cycle  
  Intro to the Web  

 

how the internet works(in 5minutes)

 internet : a global network of networks

              it's jsut a bunch of connected computers, devieces

              infrastructure 

물리적인 케이블로 연결된 커뮤니케이션.. 

 

ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7

 

인터넷 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 라우터를 통해 연결된 인터넷을 시각화한 그림. 인터넷(영어: Internet, 문화어: 인터네트)은 컴퓨터로 연결하 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신

ko.wikipedia.org

 

디바이스들이 그물망처럼 연결된 것이라고 생각하면 될 것 같다.

 

intro to the web

인터넷을 통해서 웹(world wide web)을 비롯한 많은 것들을 할 수 있다.

인터넷은 디바이스들을 연결하는 구조 그자체..

 

The World Wide Web, commonly known as the Web, is an information system where we're able to share

documents and resources over the Internet.

 

And those resources, those documents are identified by you, URLs, uniform resource locators.

 

HTTP is the foundation of how the World Wide Web works, how we communicate and how we request and share resources or web pages.

It's a standardized sort of set of rules for how a form of communication should work.

foundation of communication on the World Wide Web

 

웹 브라우저는 그저 웹 리소스를 요구하고 보는것뿐이다.

 

인터넷은 웹 이상의 것이다. (스트리밍 서비스, 이메일, 인터넷 게임 등등)

 

웹은 인터넷을 통해 서로의 리소스를 공유하는 정보체계(information system)

 

리소스는 URL(uniform resouce locators)을 통해 인식한다.

 

정보를 transfer하는 방식을 protocol(규약)이라고한다. 

대표적으로 HTTP , 주소창앞에 http또는 https 라고 적혀진것이 그것..

 

인터넷엔 다른 규약들도 많다. TCP, IP

 

http를 통해 우리(client)는 서버에 정보를 요구(request)하고 서버는 요구받은 정보에 반응(response)하고 우리(client)에게 요구한 정보를 보냄으로써 우리는 정보를 볼 수 있다.

 

웹은 http를 기반으로 작동한다.

 

The Request/Response Cycle

 

웹 브라우저를 통해 서버로 http request를 보내면 서버는 코드로 이루어진 구조(instructure with code)를 웹브라우저로 보내고 웹 브라우저는 구조를 html, css, javascript를 통해 해석하고 사람에 맞춰서 보여준다.(understanding instructure for human)

 

※소스 페이지보기를 통해 어떻게 코드가 짜여져 있는지 볼 수 있다.

 

Front-end and Back-end

프론트 앤드와 백 앤드는 무엇인가?

프론트 앤드는 보여지는 부분, 백앤드는 보여지지 않는 서버작업 부분

음식점에 비유하자면 프론트 앤드는 접객하게 되는 테이블부분이고 백 앤드는 주방일 이라고 할 수 있다.

 

What do HTML/CSS/JS do?

 

HTML은 컨텐츠 

CSS는 그 컨텐츠를 꾸며주고

JS(Java Script)는 컨텐츠에 역동성과 논리를 만드는 역할을 한다.

문장으로 비유하자면 HTML은 명사 CSS는 형용사 JS는 동사로 생각하면 된다.

 

Setting up our Developer Environment

개발에 필요한 tool들 소개.

기본적으로

web browser와 text editor가 필요

web browser - Chrome , firefox

text editor - Visual Studio Code

옵션으로는

spectacle -> 맥에서.. rearrange window 하는데 쓰임

                 근데 윈도우에서는 기본적으로 시작키와 화살표키로 리어레인지가 가능해서 나한테는 아직 필요없다.

 

OPTIONAL VSCode Theme

www.youtube.com/watch?v=rH1RTwaAeGc&t=1s

기본적으로 

강의에선 material theme만 추천하지만

유튜브 링크로 자기가 사용하는 vs code 확장프로그램을 소개함

 

1.emmet

기본적으로 설치되어 있음

html 스니펫인것 같음

※ 스니펫(Snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. - 위키백과

 

2. material theme

설치하고

cmd +k & t 로 간단하게 바꿀 수 있음

세팅에 들어가서 theme으로도 바꿀 수 있음

 

3. live server

저장하고 새로고침하고 할 필요 없이

live server extention을 켜면 수정된 사항을 바로바로 볼 수 있음

우클릭으로 시작하고 끌 수 있음

 

4. css peek

id와 class위에 f12나 f12+opt을 누르면 바로 그 id와 class 설정으로 이동시켜줌

 

5. color highlight

컬러 설정을 바로 띄워줌 

기본 설정이 백그라운드로 띄워주는거라서 

설정에서 background -> dot-before로 바꿔주는게 편함

 

6.bracket pair colorizer

괄호를 색깔로 구별되게 매칭시켜줌

보기 편함

세팅으로 색깔 바꾸기 가능

 

7. react snippets

js 스니펫이 필요할때 쓰는것 같은데

아직 필요는 없을듯

 

8. prettier now

코드를 예쁘게 정렬해줌

setting에서 editor.format 찾아서 format on save 체크할지 안할지 설정

세이브하면 자동적으로 코드 정렬해줌

'TIL(today I learned)' 카테고리의 다른 글

2020-10-21 TIL  (0) 2020.10.21
2020-10-20 TIL  (0) 2020.10.20
2020-10-19 TIL(2)  (0) 2020.10.19
2020-10-19 TIL (1)  (0) 2020.10.19
2020-10-18 TIL(2)  (0) 2020.10.18

+ Recent posts

티스토리툴바