※ <table> 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의합니다.

테이블은 <table> 요소와 자식 요소인 하나 이상의 <tr>, <th>, <td> 요소들로 구성됩니다.

<tr> 요소는 테이블의 각 행(row), <th> 요소는 각 열의 제목, <td> 요소는 하나의 테이블 셀(cell)을 정의합니다.

또한, <caption>, <col>, <colgroup>, <thead>, <tfoot>, <tbody>과 같은 요소들을 사용하여 좀 더 복잡한 테이블을 정의할 수도 있습니다.

목차

1. 속성

2. 기본 구조

 

1. 속성

@속성명 속성값설명

table table전체를 감싸는 태그
caption table의 제목이나 설명을 작성하는 태그. 테이블 가로폭의 가운데 오는 것이 기본
tr 테이블의 행을 의미하는 태그. 자손으로 th td가 반드시 있어야 한다.
th 테이블의 제목 셀()을 의미하는 태그. 부모인 tr안에 있어야 한다.
css기본값은 글자가 굵게 처리되고 셀에서 가로 가운데 정렬.
td 테이블의 일반 셀()을 의미하는 태그. 부모인 tr안에 있어야 한다.
css기본값: 왼쪽정렬

 

align   left
center
right
주변 텍스트에 따른 테이블의 정렬 방법을 명시함.

background-color
bgcolor


rgb(x,x,x)
#xxxxxx
색상명
테이블의 배경색을 명시함.

border

1
0
테이블의 레이아웃 용도로 사용되는 테두리를 사용할지 않을지를 명시함.

cellpadding

픽셀 셀(cell)에서 콘텐츠와 셀 경계 사이의 공간을 명시함.

cellspacing

픽셀 셀(cell)과 셀 사이의 공간을 명시함.

frame

void
above
below
hsides
lhs
rhs
vsides
box
border
테이블에서 보이는 바깥쪽 테두리 부분을 명시함.

rules

none
groups
rows
cols
all
테이블에서 보이는 안쪽 테두리 부분을 명시함.

summary

텍스트 테이블 콘텐츠의 개요를 명시함.

width

픽셀
%
테이블의 너비를 명시함.

 

colspan 같은 행의 칸들을 병합할 때 사용. ex) <td colspan="칸수">
rowspan 다른 행의 칸들을 병합할 때 사용. ex)<td rowspan="칸수">

 

colgroup 열을 그룹으로 묶을 수 있도록 해주는 태그
col colgroup의 자손으로 열단위를 나눌 수 있다.
span속성을 사용하여 몇 열을 그룹으로 묶을지 설정
ex) <col span="3"> => 3열을 그룹으로 묶음

 

2. 기본 구조

@코드로 보기

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>board</title>
    <style>
        table {
            border: 1px solid black;/* 표 테두리 (1px의 굵기 / 실선 / 검정색 )*/
            border-collapse: collapse;/*테두리 1줄만 표시*/
        }
        th, td {
            border: 1px solid black;
            padding: 10px;/*셀 안쪽의 여백(패딩)*/
            text-align: center;/*가운데 정렬*/
            font-size: 10px;/*폰트 사이즈*/
        }
        th {
            background-color: gray;/*th 열만 배경색 지정*/
        }
    </style>
</head>
<body>
    <table>
        <caption>테이블 만들기</caption> <!--테이블 이름-->
        <tr> <!--첫번째 행-->
            <th>제목1</th><!--첫번쨰 열 th를 사용하여 제목 셀로 지정-->
            <th>제목2</th><!--두번쨰 열-->
            <th>제목3</th><!--세번쨰 열-->
        </tr>
        <tr><!--두번째 행-->
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
        </tr>
        <tr><!--세번째 행-->
            <td>내용4</td>
            <td>내용5</td>
           <td bgcolor="gray">내용6</td> <!--인라인 스타일로 직접 스타일 적용-->
        </tr>
    </table>
   
</body>
</html>

 

@결과

 

위에 같이 기본적으로는 <style></style> 탭 내에 테이블에 대한 기본 속성 값을 지정하여 주고 , <body></body> 탭에서는 테이블의 구조와 내용만 작성하는 형식을 주로 사용하며 '내용 6' 셀과 같이 인라인 스타일로 직접 속성값을 지정하여 주는 방식도 있습니다. CSS파일로 속성 값들을 따로 관리하는 방법은 나중에 따로 정리하도록 하겠습니다. 

<style></style> 탭의 속성값들은 '1. 속성'에 정리해 놓은 속성 값 외에도 폰트사이즈나 컬러 등 기본적인 속성 값들도 지정하고 셀 내용은 텍스트뿐만 아니라 이미지나 링크 등도 삽입하여 사용할 수 있습니다.

※이번 시간에는 비주얼스튜디오코드(Visual Studio Code)의 기본적인 구조와 태그들에 대해서 알아보겠습니다.

우선 전체적인 태그들과 해당하는 옵션들을 파악해 보면서 사용방법과 활용에 대해서는 다음 시간에 정리하도록 하겠습니다.

목차

1. 기본 구조

2. 블록 레벨 요소

3. 기본 태그

1. 기본 구조

 

@코드로 확인
<!-- --> 이 부분은 주석입니다.
<!DOCTYPE html> <!--웹 문서의 첫부분, 문서의 형식을 선언-->
<html lang="ko"> <!--언어 설정-->
<head<!--<head>구간 : 웹 페이지의 정보를 저장-->

 

    <meta charset="UTF-8"> <!--<meta> 웹 문서와 관련된 정보를 지정(문자세트,글자를 표시, 어떤 인코딩 사용)-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> <!--문서 제목, 웹 브라우저의 제목표시줄에 표시-->
</head>
<body<!--<body>구간 : 웹 페이지의 본문내용 정보, 브라우저에 출력되는 부분-->
</body>
</html>

 

2. 블록 레벨 요소

<header> : 1.HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색등의 내용들을 포함할 수 있다.
                   2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있지만 < header >, < footer > 태그는 포함할 수 없음.

<section> : 1.HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화해 주는 태그이며, 섹션 주제에 대한 제목 요소를

                   포함하는 것이 좋다.
                   2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<footer> : 1.HTML문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보 관련된 문서의 링크를 포함할 수 있다.
                 2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있지만 < header >, < footer > 태그는 포함할 수 없음.

<nav> : 1.HTML문서의 메인 메뉴나 목차 등을 정의해 주는 태그
             2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<alticle> : 1.HTML문서에서 독립적으로 배포 또는 재사용이 가능한 게시물, 블로그 포스팅 등을 의미하는 태그.
                 2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<aside> : 1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며, HTML문서의 오른쪽이나 왼쪽의 사이드메뉴나 광고등의 영역으로 사용.
                2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

 

 

3. 기본 태그

<h></h> 태그(heading) : <h1>~<h6>까지 존재하며 제목태그로 사용된다. 숫자가 작을수록 폰트 사이즈가 크고 굵게

                                          표현된다.

<p></p> 태그(pargraph) : 하나의 문단을 만들 때 사용. 문단은 새로운 줄에서 시작되며 문단 사이에는 공백이 생긴다.

<br> 태그(break) : 엔터를 입력하여 줄 바꿈을 하더라도 실제로는 줄 바꿈이 적용되지 않는다. <br> 태그를 이용하여

                               엔터 효과를 가지게 한다.

<hr> 태그(horizontal rules) : 단순히 웹 페이지에 수평선을 그어주는 태그. 

<pre></pre> 태그 : 입력한 내용 그대로를 출력한다. 엔터, 스페이스, 탭 등이 적용된 형태로 출력된다.

<q></q> 태그(quote) : 짧은 문장을 인용할 때 쓰이는 태그, 브라우저에서는 큰따옴표로 출력된다.

<blockquote></blockquote> 태그 : 긴 문장을 인용할 때 쓰이는 태그. 브라우저에서는 들여 쓰기로 출력된다.

<abbr></abbr> 태그(abbreviation) : 축약 텍스트를 표시하는 태그. 밑줄이 그어진 축약 텍스트에 마우스를 올리면

                                                            말풍선으로 텍스트의 뜻이 표시된다. 

 

 

 

@텍스트 포매팅(text formatting) 태그 : 텍스트에 효과를 주는 태그들을 의미한다.

<b></b> : 텍스트를 굵게 출력

<strong></strong> : 텍스트를 굵게, 강조하여 출력 (중요함을 의미)

<i></i> : 텍스트를 이탤릭체로 출력

<em></em> : 텍스트를 이탤릭체로, 강조하여 출력 (중요함을 의미)

<small></small> : 텍스트를 작게 출력

<sub></sub> : 아래첨자

<sup></sup> : 위첨자

<ins></ins> : 삽입된 텍스트에 밑줄 출력

<del></del> : 삽입된 텍스트에 취소선 출력

<mark></mark> : 삽입된 텍스트에 형광펜처럼 강조 표시

 

@목록 관련 태그

<ol></ol> : 순서 있는 목록의 시작과 끝을 나타낸다.

<ul></ul> : 순서 없는 목록의 시작과 끝을 나타낸다.

<li></li> : 목록의 각 항목을 나타낸다.

<dl></dl> : 설명 목록의 시작과 끝을 나타낸다.

<dt></dt> : 설명 목록의 이름(제목)을 나타낸다.

<dd></dd> : 설명 목록의 값(설명)을 나타낸다.

※비주얼스튜디오 코드(Visual Studio Code)의 유용한 설정들과 단축키들을 알아보도록 하겠습니다.

이제 시작하는 단계이기 때문에 전문적인 세팅보다는 사용하기 편리한 기능들 위주로 정리해 두었습니다.

목차

1. 기본 설정

2. 확장(Extensions) or 플러그인 or 패키지 설치

3. 단축키

 

1. 기본 설정

[파일]→[기본설정]→[설정]으로 들어가거나 cmd + , 를 누른다.

 

@Auto Save

옵션을 onFocusChange로 바꾸어 에디터에서 포커스가 벗어나는 순간 작성내용이 자동으로 저장되도록 하는 기능.

- cmd + S를 누르지 않아도 터미널에서 바로 변경된 내용으로 컴파일을 할 수 있다.

 

@Tab Size

- 탭을 눌렀을 때 입력 될 공백 수 설정이다. 기본값 4로 설정되어 있다. 

 

@Font Size

cmd +,- 로 View의 전체 배율을 변경하는 것과 달리 코드의 폰트 크기만 조절한다. 기본값 12로 설정되어 있다.

 

@format on save

- 저장할 때 자동으로 포맷을 정리해 주는 기능.

 

 

 

 

2. 확장(Extensions) or 플러그인 or 패키지 설치

ftp-simple FTP를 탐색기 패널에서 트리 구조로 볼 수 있습니다. 리스트를 동기화하는 방식이라서 처음 불러오거나 갱신할 때 시간이 조금 걸립니다.
ftp-sync 프로젝트 개념으로 FTP를 사용하려고 하니 ftp-simple에 비해 더 편하네요. 다만 아직 Sublime Text의 SFTP에 비할 정도는 아니고, 보완할 부분이 많은 것 같습니다.
HTML Snippets HTML 코드를 편하게 입력할 수 있도록 돕는 기능
View in Browser HTML 문서를 디폴트 브라우저로 띄워주는 기능입니다. 설치 후 Ctrl+F1 키를 누르면 브라우저로 뜨게 됩니다. HTML 문서만 지원하며 저장되지 않은 문서나 다른 종류의 문서는 지원되지 않는 것 같습니다.
Live HTML Previewer HTML 문서를 편집하며 실시간으로 미리보기할 수 있습니다.
Syncing 확장 기능 및 에디터 환경 설정 등을 여러 디바이스와 동기화시켜주는 기능입니다. Github의 gist에 업로드하는 방식이라서 Private하게 올릴 수가 있습니다.
Guides 여는 코드와 닫는 코드 사이에 가이드 세로선을 표시합니다.
Markdown Shortcuts 마크다운 문법을 단축키 혹은 마우스로 쉽게 할 수 있도록 기능을 제공합니다.
markdownlint 마크다운 문법을 체크합니다.
Beutify 지저분하게 정렬돼 있는 코드를 예쁘게 정렬해줍니다.
Auto Rename Tag HTML/XML에서 한쪽 태그를 수정하면 나머지 반대쪽 상응하는 태그를 함께 수정해 줍니다.
VS Color Picker 컬러를 선택할 때 팔레트에서 고르거나 스포이트 툴로 색상 코드를 가져올 수 있습니다.
vscode-open-project 프로젝트 기능에 비해서는 부족하지만, 작업 폴더를 프로젝트 리스트로 만들어서 쉽게 폴더 전환을 할 수 있습니다.
Paste Image 클립보드의 이미지를 바로 마크다운 코드로 붙여넣을 수 있습니다. 붙여 넣은 이미지는 자동으로 지정된 폴더에 저장됩니다.

 

 

 

3. 단축키

@기본 편집 단축키

Ctrl + X
커서 위치 행 삭제(잘라내기)
커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + X로 행을 삭제(잘라내기)합니다. editor.action.clipboardCutAction
Ctrl + Shift + K
커서 위치 행 삭제
커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + Shift + K로 행을 삭제합니다. editor.action.deleteLines
Ctrl + C
커서 위치 행 복사
커서 행 코드를 반복해서 사용해야 할 경우, 해당 행에 커서를 놓고 Ctrl + C로 행을 복사합니다. editor.action.clipboardCopyAction
Ctrl + Enter
커서 아래 행 빈줄 생성
커서를 맨 뒤로 보낸 후 Enter를 쳐서 빈 행을 생성할 수 있지만,
행의 코드 중간 부분에서도 Ctrl + Enter 단축키를 사용할 경우 더욱 쉽게 커서 아래에 빈 행을 생성 후 이동 가능합니다.
editor.action.insertLineAfter
Ctrl + Shift + Enter
커서 위 행 빈줄 생성
행의 코드 중간 부분에서도 Ctrl + Shift + Enter단축키를 사용할 경우 더욱 쉽게 커서 위에 빈 행을 생성 후 이동 가능합니다. editor.action.insertLineBefore
alt + (↑)화살표
행을 위로 이동
커서가 있는 현재 행을 윗줄로 옮길때 alt + (↑)화살표를 할 경우 쉽게 행의 코드 윗줄과 순서를 바꿀 수 있습니다. editor.action.moveLinesUpAction
alt + (↓)화살표
행을 아래로 이동
커서가 있는 현재 행을 아래로 옮길때 alt + (↓)화살표를 할 경우 쉽게 행의 코드 아랫줄과 순서를 바꿀 수 있습니다. editor.action.moveLinesDownAction
Ctrl + alt + (↑)화살표
커서를 위에 추가(다중선택) ()
동일하게 문자열을 수정시 Ctrl + alt + (↑)화살표로 윗행을 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. editor.action.insertCursorAbove
Ctrl + alt + (↓)화살표
커서를 아래에 추가(다중선택) ()
동일하게 문자열을 수정시 Ctrl + alt + (↓)화살표로 아래행 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다. editor.action.insertCursorBelow
Ctrl + /
한줄 주석처리 ()
코드에 대한 설명 또는 필요에 의해 코드를 삭제하지 않고 브라우저에서 보여주고 싶지 않을 경우 Ctrl + / 단축키를 사용하면 됩니다.
퍼블리싱 작업시 자주 사용하는 단축키입니다.
해당 주석을 풀고 싶을 경우 Ctrl + / 단축키를 한번 더 누르면 됩니다.
editor.action.commentLine
Ctrl + K → Ctrl + C
블럭 주석 처리 ()
한줄 주석(//)을 여러 행 한꺼번에 처리하는 블럭주석으로 Ctrl + K → Ctrl + C 단축키를 사용하면 됩니다. editor.action.addCommentLine
Ctrl + K → Ctrl + U
주석 삭제 ()
주석 처리한 부분을 해제 하고 싶을 경우 Ctrl + K → Ctrl + U 단축키를 사용하면 됩니다. editor.action.removeCommentLine
Alt + Shift + A
블럭 주석 처리 ()
커서 위치에서 /* */ 또는 드래그 하여 선택된 부분을 블럭 주석 처리 하고 싶을 경우 Alt + Shift + A 단축키를 사용하면 됩니다. editor.action.blockComment
Ctrl + Shift + [
커서 영역 접기
퍼블리싱 작업시 해당 블럭의 코딩을 완료 후 코드의 양이 많아서 코드가 보기 힘들 경우 가독성을 위해 커서 위치에서 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 접을 수 있습니다. editor.foldRecursively
Ctrl + Shift + ]
커서 영역 펼치기
퍼블리싱 작업시 접었던 부분의 코드를 다시 수정하거나 보고 싶을 경우 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 펼칠수 있습니다. editor.unfoldRecursively

 

@편집 단축키

Ctrl + G
행(라인 번호)으로 이동 ()
퍼블리싱 작업시 특정 줄 번호로 빠르기 이동하고 싶을 경우 Ctrl + G 단축키를 사용하면 빠르게 원하는 행으로 이동 가능합니다. workbench.action.gotoLine
Ctrl + P
빠른 파일 열기 ()
프로젝트 파일 폴더에서 일일이 클릭해서 파일을 찾는 수고로움을 피하고, 빠르게 파일을 찾고 싶을 경우 Ctrl + P 단축키를 사용하면 됩니다. workbench.action.quickOpen
Ctrl + F
찾기
현재 파일에서 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 빠르게 찾아아서 이동 가능합니다. actions.find
Ctrl + Shift + F
전체 파일에서 찾기
폴더에서 파일을 전체 검색하여 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 검색한 문자열이 있는 모든 파일을 찾을 수 있습니다.
그러나 전체 검색이다 보니, 파일이 많을 경우 시간이 오래 걸릴 수 있습니다.
workbench.view.search
Ctrl + H
현재페이지 문자열 수정하기 ()
현재 퍼블리싱 중인 페이지에서 여러개의 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다.
한 개씩 확인하면서 바꾸고 싶을경우 Enter 하면 한 개씩 변경 가능하며, Ctrl + Alt + Enter 하면 모두 수정이 가능합니다.
editor.action.startFindReplaceAction
Ctrl + Shift + H
폴더 모든 페이지 문자열 수정하기 ()
프로젝트 폴더 전체 페이지에서 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다. workbench.action.replaceInFiles
F8
오류 또는 경고 찾기
HTML, JS, CSS 파일에서 오타로 인해서 오류를 확인하고자 할 경우 F8 단축키를 사용하면 쉽게 찾아서 수정할 수 있습니다. editor.action.marker.next

 

@파일 관리 편집 단축키

Ctrl + N
새로운 편집 탭 열기
퍼블리싱을 하다보면 새로운 파일(HTML, CSS, JS)을 생성해야 할때가 있습니다.
이럴 경우 Ctrl + N 단축키를 사용하여 파일 탭을 생성합니다.
workbench.action.files.newUntitledFile
Ctrl + Shift + N
새로운 창 열기
VS Code 에디터에서 새로운 프로젝트 폴더를 생성한 후 열고 싶을 때 Ctrl + Shift + N 단축키를 사용합니다.
현재 작업중인 프로젝트에서 종류가 다른 프로젝트의 수행을 위해 새로운 창을 열고 싶을 때 사용하는 단축키 입니다.
workbench.action.newWindow
Ctrl + O
파일 열기
새로운 파일을 만드는 것이 아닌 프로젝트 폴더내에 이미 생성된 파일을 열고자 할 경우 Ctrl + O 단축키를 사용합니다. workbench.action.files.openFile
Ctrl + W
파일 창 닫기 ()
퍼블리싱 작업을 하다보면, 여러개의 창을 열어 놓을 경우가 있습니다.
해당 파일을 더이상 열어 놓을 필요가 없거나, 파일창이 너무 많아 일부분 닫아야 할 경우 Ctrl + W 단축키로 파일을 닫아 줍니다.
workbench.action.closeWindow
Ctrl + Shift + T
이전에 닫힌 편집파일 다시 열기 ()
현재 파일에서 퍼블리싱 작업중, 이전에 닫았던 창을 다시 열어야 할 경우 Ctrl + Shift + T 단축키로 사용하면 됩니다. workbench.action.reopenClosedEditor
Ctrl + S
파일 저장
신규 파일 저장이 아닌 현재 파일을 저장해야 할 경우 Ctrl + S 단축키로 파일을 저장하면 됩니다. workbench.action.files.save
Ctrl + Shift + S
다른 이름으로 파일 저장
현재 파일을 새로운 이름의 파일로 생성하여 저장해야 할 경우 Ctrl + Shift + S 단축키로 파일을 저장하면 됩니다. workbench.action.files.saveAs
Ctrl + \
파일 화면 창 분할 ()
한 개 이상의 파일 화면을 동시에 보면서 퍼블리싱 해야 할 경우 Ctrl + \ 단축키를 사용하여 화면 창을 분할하여 보면 편리합니다.
Ctrl + \ 단축키를 누른 횟 수 만큼 화면 창이 분할 됩니다.
workbench.action.splitEditor
Ctrl + N(숫자)
화면 분할 창 위치 포커싱 ()
화면을 여러 개 분할 후, 퍼블리싱 작업시 원하는 위치의 분할 창으로 이동해야 할 경우 Ctrl + N(숫자) 단축키를 사용하여 원하는 파일 분할창으로 쉽게 이동할 수 있습니다.
예를 들어 Ctrl + 2 단축키를 누르면 2번 파일 분할창으로 이동합니다.
마우스로 매번 분할창 클릭을 하지 않아도 됩니다.

 

@언어 편집 단축키

Ctrl + ← /
Ctrl + →

단어별 커서 이동
한글자씩 커서 이동이 아닌, 단어별로 커서를 이동해야 할 경우 Ctrl + ← / Ctrl + → 단축키를 사용하여 좌우로 쉽게 이동할 수 있습니다.  
Ctrl + Shift + ← /
Ctrl + Shift + →

단어 선택
단어를 선택해야 할 경우 Ctrl + Shift + ← / Ctrl + Shift + → 단축키를 사용하면 됩니다.  
Alt + Shift + →
선택 확장
문단 또는 태그 단위로 확장 선택을 해야 할 경우 Alt + Shift + → 단축키를 사용하면 됩니다. editor.action.smartSelect.grow
Alt + Shift + ←
선택 축소
문단 또는 태그 단위로 축소 선택을 해야 할 경우 Alt + Shift + ← 단축키를 사용하면 됩니다. editor.action.smartSelect.shrink
alt + 마우스 클릭
필요한 문자열을 골라서 커서 추가(다중선택) ()
동일하지 않은 다양한 문자열을 수정시 alt + 마우스 클릭으로 작업자가 원하는 문자열을 선택하여, 한번에 여러개를 수정할 수 있습니다.  
Ctrl + K → Ctrl + F
자동 정렬()
들여쓰기를 제대로 정리하지 못했을 경우 Ctrl + A 후 Ctrl + K → Ctrl + F 단축키를 사용하면 한번에 코드 자동정렬을 할 수 있다.
여러명의 퍼블리셔가 한개의 프로젝트를 진행할 경우 코드 정렬의 통일성 문제를 해결할 수 있기 때문에, 없어서는 안될 단축키 입니다.
editor.action.formatSelection
Ctrl + D
특정 문자열 여러개 찾기()
동일한 문자열 여러개를 한번에 수정해야 할 경우 Ctrl + D 단축키를 사용하여 한번에 수정할 수 있다.
다중 선택 방법은 Ctrl + D 를 누른 횟 수 만큼 동일한 문자열이 선택 된다.
예를 들어 AA라는 문자열 2개를 BB로 수정이 필요할 경우, AA에 커서를 두고 Ctrl + D 단축키를 2번 눌러 AA 문자열 2개를 선택한 후 BB로 문자를 수정하면 된다.
editor.action.addSelectionToNextFindMatch
Ctrl + Shift + L
특정 문자열 모두 선택
Ctrl + D는 동일한 문자열을 누르는 횟 수 만큼 선택 갯수가 확장되는 방식이라면 Ctrl + Shift + L 단축키를 사용하면 한번에 동일한 문자열을 선택하여 편집할 수 있습니다.
찾아야 할 문자열을 블럭선택 한 후 Ctrl + Shift + L 단축키를 누른 후 수정하면 됩니다.

 

@확장프로그램 단축키

Live Server 라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다.
사용방법은 확장프로그램을 설치한 후 , Alt + L → O 단축키를 사용하면 브라우저에서 실시간으로 코딩 상황를 확인 가능합니다.
Alt + L → O
Live Server 실행 ()
Live Server 라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다.
사용방법은 확장프로그램을 설치한 후 , Alt + L → C 단축키를 사용하면 가상 서버를 종료 합니다.
Alt + L → C
Live Server 종료 ()

 

※웹 개발을 시작하기 위해 우선 비주얼 스튜디오 코드(Visual Studio Code)를 다운로드 및 설치하는 방법부터 설명하려 합니다. 그 외에 단축키 및 기본 설정들에 대해서도 천천히 알아보도록 하겠습니다.

목차

1. 비주얼스튜디오 코드란?

2. 비주얼 스튜디오 코드 다운로드

3. 비주얼 스튜디오 코드 실행 및 기본설정

 

1. 비주얼스튜디오 코드란?

비주얼 스튜디오 코드(Visual Studio Code)는 마이크로소프트에서 오픈소스로 개발하고 있는 소스 코드 에디터입니다. 웹 기반으로 기술들로 데스크톱 애플리케이션을 만들 수 있는 깃허브(GitHub)의 일렉트론(Electron)을 기반으로 만들어져 맥 OS(macOS), 리눅스(Linux), 윈도(Windows) 등 메이저 운영체제를 모두 지원하고 있습니다. 마이크로소프트의 통합 개발 환경(IDE) 비주얼 스튜디오(Visual Studio)와 이름이 비슷하지만 따로 개발되고 있으며 IDE보다는 코드 에디터에 가깝습니다. MIT 라이선스로 오픈소스로 공개되어 있으며, 무료로 사용할 수 있습니다.

 

@주요 기능

  • 맥 OS, 리눅스, 윈도 등 메이저 운영체제들을 지원
  • 인텔리센스: 코드 자동 완성, 변수 타입, 함수 정의, 모듈 임포트 등
  • 디버깅, 리팩토링, 빌트인 깃, Diff 뷰어, 스니펫 등 기본 포함
  • 다양한 확장을 지원하며, 이를 통해 100개 이상의 언어 지원
  • 웹 기반 기술로 만들어져 있으며, 타입스크립트로 확장 개발 가능
  • 마켓플레이스에 15,000개 이상의 확장이 공개되어 있음. 대부분 무료
  • 모든 기능에 대한 키 바인딩(단축키)을 자유롭게 변경 가능
  • 커맨드 팔레트(Command + Shift + P)로 사용 가능한 기능을 증분검색으로 검색 및 실행 가능

2. 비주얼 스튜디오 코드 다운로드

 1) 공식 사이트 https://code.visualstudio.com/

 

2) 좌측의 Download for Windows를 클릭하면 다운로드가 진행됩니다. 다운로드 완료 후 셋업파일을 실행합니다.

 

3)"동의합니다"에 체크 후 다음

 

  • "Code(으)로 열기" 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가를 하면 파일을 열 때, Code(으)로 열기를 추가해 줍니다.
  •  "Code(으)로 열기" 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가를 하면 디렉터리를 열 때,  Code(으)로 열기를 추가해 줍니다.
  • Code을(를) 지원하는 파일 형식에 대한 편집기로 등록합니다. 를 선택하면 편집기로 VIsual Studio Code를 추가해 줍니다.
  • PATH에 추가(다시 시작한 후 사용 가능)를 하면 환경 변수의 Path에 VIsual Studio Code가 추가됩니다. 당연히 PATH에 추가를 해줍니다.

4) 경로 및 추가작업사항을 상황에 맞게 설정 후 진행하시면 됩니다.

 

5) "설치"를 누르면 완료입니다.

 

3. 비주얼 스튜디오 코드 실행 및 기본설정

1) 실행 첫 화면입니다.

 

2) 우선 언어를 한국어로 바꿔주기 위해 좌측 메뉴탭 하단에 확장탭을 클릭, Korean을 검색한 후

Korean Language Pack for Visual Studio Code를 설치해 줍니다.

3) Live를 검색한 후 Live Server 도 설치 해 줍니다.

 

※여기까지 기본적인 설정이 완료되었습니다. 다음 시간에는 유용한 설정 및 기본 작동 방법 등에 대해 설명하겠습니다.

+ Recent posts