html 2 : 텍스트 Visual Studio 단축키, blockquote, q, pre, figure, abbr, address, cite, bdo

에디터 창 

	윈도우	맥
현재 창 닫기	Ctrl + w	Cmd + w
닫은 창 다시 열기	Ctrl + Shift + t	Cmd + Shift + t
사이드바 토글	Ctrl + b	Cmd + b
사이드바 + 탐색기	Ctrl + Shift + e	Cmd + Shift + e
사이드바 + 전체 탐색	Ctrl + Shift + f	Cmd + Shift + f
에디터 확대	Ctrl + +(=)	Cmd + +(=)
에디터 축소	Ctrl + -	Cmd + -

 

소스코드 편집

	윈도우	맥
들여쓰기	Tab 혹은 Ctrl + ]	Tab 혹은 Cmd + ]
내어쓰기	Shift + Tab 혹은 Ctrl + [	Shift + Tab 혹은 Cmd + [
아래에 행 삽입	Ctrl + Enter	Cmd + Enter
위에 행 삽입	Ctrl + Shift + Enter	Cmd + Shift + Enter
현재 행 이동	Alt + ▲/▼	Opt + ▲/▼
현재 행 복사	Alt + Shift + ▲/▼	Opt + Shift + ▲/▼
현재 행 삭제	Ctrl + Shift + k	Cmd + Shift + k
주석 토글	Ctrl + /	Cmd + /
같은 단어 한번에 바꾸기	Ctrl + Shift + L	Cmd + Shift + L

 

blockquote

-<p>코드 안에는 블록 코드를 쓸 수 없음

-cite를 사용해 출처 등을 표시, 화면에 보이지는 않음

<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>Avian carriers can provide high delay, low
  throughput, and low altitude service.  The
  connection topology is limited to a single
  point-to-point path for each carrier, used with
  standard carriers, but many carriers can be used
  without significant interference with each other,
  outside of early spring.  This is because of the 3D
  ether space available to the carriers, in contrast
  to the 1D ether used by IEEE802.3.  The carriers
  have an intrinsic collision avoidance system, which
  increases availability.</p>
</blockquote>

 

q

-인라인 코드로 p 안에 사용 가능

-앞 뒤로 ""가 자동 생성됌

<p>Mozilla 재단의 웹사이트에 따르면,
  <q
  cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0
  은 2004년 처음 공개되어 큰 성공을 거두었습니다.</q></p>

 

pre

-이미지처럼 코드 안의 내용을 그대로 반영(띄어쓰기 등)

-figcation을 통해 대체 설명을 해주는 것이 중요

-고정폭 글꼴을 가지게 됌(글꼴이 차지하는 크기가 일정하다 = A나 I나 차지하는 공간이 같음)

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  _______________________
< 나는 이 분야의 전문가다. >
  -----------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을 적용한 텍스트로 그려져있습니다.
  </figcaption>
</figure>

 

figure

-인용구, 이미지, 영상 등 독립적인 콘텐츠를 표현할 때 사용

-콘텐츠 + 설명을 하나의 덩어리로 묶을 때 사용

<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN.">
  <figcaption>MDN Logo</figcaption>

 

hr

-문단과 문단 사이를 나눌 때 사용

-보통 css로 꾸며서 사용

abbr

-약어를 표시할 때 사용

-마우스를 올려두면 풀이가 나옴

<abbr titel="Too Much Information">TMI</abbr>

 

address

-집 주소나 이메일 주소 등 주소를 표현할 때 사용

 

cite

-인용의 출처를 나타낼 때 사용

-figcation 설명 안에서 정확한 출처를 표현함

-blockquote의 속성으로도 사용 가능함

<figure>
    <blockquote cite="Nineteen Eighty-Four">
        <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
    </blockquote>
    <figcaption>First sentence in <cite>Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>

 

bdo

-텍스트의 쓰기 방향을 다르게 할 때 사용함

-dir로 방향을 지정함 rtl = right to left