자동완성을 만들기 위해선 다운로드를 받을 것이 있다.
Brackets 상단 메뉴에 [파일] - [확장기능 관리자]를 눌러서
검색창에 'beautify'를 검색하여 두번째 아무 수식어 없는 Beautify 를 설치한다.
다음 'emmet'을 검색하여 두번째에 있는 Emmet을 설치한다.
다양한 것들이 나오지만 다운로드 100만회가 넘는 기능을 설치해주면 된다.
다운 받은 후 새 파일을 만들어서
!를 입력하고 Tab키를 누르면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
이와같은 식이 자동완성되는 것을 볼 수 있다. 신세계다~,,
여기서 설명을 해보자면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> -> meta는 정보다. 그리고 창에서 초록색은 옵션이다. 여기선 lang, charset정도이다.
<title>Document</title>
</head>
<body>
</body>
</html>
charset은 문자를 세팅하는건데 UTF-8을 사용하겠다는 것이다.
html태그에서 lang이라는 옵션을 주겠다는것이고, "en"은 영어를 쓰겠다는 것이고, 굳이 "ko"로 한글로 바꿀 필요는 없다. 맨날 바꿔줄 것이 아니기때문에 말이다.
자, beautify 를 다운 받은 이유중 하나는
커서를 늘릴 수 있는 기능이 있다.
커서를 깜빡인 상태에서 Ctrl을 누르고 마우스를 찍으면 커서가 여러개가 함께 사용할 수 있도록 된다.
여러 문구를 한번에 작성할 수 있다. 다시 커서를 누르면 원래대로 돌아온다.
또는 Alt 를 누르고 쭉 내리면 한번에 커서를 늘릴 수도 있다.
상단 메뉴 편집에 가면 beautify가 아래에 생성되어 있을 것이다. 누르면 깔끔하게 정렬이되고,
그 아래 beautify on save를 누르면 정렬 후 저장이 된다.
'HTML' 카테고리의 다른 글
| [HTML#05] HTML IMG태그 (0) | 2020.12.04 |
|---|---|
| [HTML#04] HTML FONT 태그 (0) | 2020.12.04 |
| [HTML#03]HTML 템플릿 만들기 (0) | 2020.12.04 |
| [HTML#02] HTML페이지 생성 (0) | 2020.12.03 |
| [HTML#01] 도구 설치(brackets), 기본 페이지 작성 (0) | 2020.12.03 |