Sublime Text 플러그인

본문 바로가기

HTML Reference

HTML Description

HTML 요소를 알파벳순으로 정리한 태그입니다.

HTML Element

HTML 요소를 기능별로 정리하면 Main Root, Metadata, Content Sectioning, Text Content, Inline Text Semantics, Image and Multimedia, Embedded Content, Scripting, Demarcating Edits, Table Content, Forms, Interactive Elements, Obsolete and Deprecated Elements 같이 분류 할 수 있습니다.

Content Element

Content Element는 HTML을 Meta, Self-closing, Block, Inline으로 분류한 요소입니다. Meta는 정보를 표현하는 메타데이터를 의미하고, Self-closing는 닫는 태그가 없는 태그를 말하

Event Attributes

Event 속성은 자바스크립의 이벤트 기능과 같은 기능으로 HTML에도 이벤트 기능이 추가되었습니다.

Global attributes

Global 속성은 모든 태그에 적용이 가능한 속성입니다.

Content Categories

HTML 태그는 컨텐츠의 종류에 따라 정의 할 수 있습니다. 이러한 요소는 콘텐츠 모델로 정의 할 수 있습니다. 컨텐츠 요소는 Metadata Content, Flow Content, Section Conetnt, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content 등으로 분류됩니다.

<a>

<a> 태그는 하이퍼 링크를 정의합니다.

<abbr>

<abbr> 태그는 생략된 글자나 머리글자를 표시하는데 사용합니다.

<acronym>

<acronym> 태그는 생략된 글자나 약어를 표시하는데 사용합니다.

<address>

<address> 태그는 페이지의 연락처 정보를 정의하는데 사용합니다.

<applet>

<applet> 태그는 애플랫 요소를 정의합니다.

<area>

<area> 태그는 이미지 맵의 영역을 정의합니다.

<article>

<article> 태그는 문서내에 독립적인 컨텐츠를 정의합니다.

<aside>

<aside> 태그는 문서내에 사이드 컨텐츠를 정의합니다.

<audio>

<audio> 태그는 오디오 파일을 정의합니다.

<b>

<b> 태그는 글씨를 두껍게 표현할 때 사용합니다.

<base>

<base> 태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정합니다.

<basefont>

<basefont> 태그는 문서의 기본 폰트, 사이즈, 종류를 설정합니다.

<bdi>

<bdi> 태그는 텍스트의 출력 방향을 브라우저가 판단해 표현합니다.

<bdo>

<bdo> 태그는 텍스트의 방향을 설정합니다.

<big>

<big> 태그는 텍스트 크기를 크게해줍니다.

<blockquote>

<blockquote> 태그는 긴 문장의 인용문을 정의합니다.

<blink>

<blink> 태그는 텍스트를 깜박이게 합니다.

<body>

<body> 태그는 문서 본문에 해당하는 콘텐츠를 포함하는 영역입니다.

<br>

<br> 태그는 텍스트를 줄바꿈 할 때 사용합니다.

<button>

<button> 태그는 클릭 할 수 있는 버튼을 설정합니다.

<canvas>

<canvas> 태그는 그림을 그리는 비트맵을 정의합니다.

<caption>

<caption> 태그는 table 요소의 제목을 설정합니다.

<center>

<center> 태그는 텍스트를 가운데 정렬합니다.

<cite>

<cite> 태그는 작품의 제목을 정의합니다.

<code>

<code> 태그는 컴퓨터 코드를 정의합니다.

<col>

<col> 태그는 테이블 요소의 행을 나타냅니다.

<colgroup>

<colgroup> 태그는 테이블 요소의 행을 그룹화합니다.

<data>

<data> 태그는 주어진 내용을 기계가 읽을 수 있도록 설정합니다.

<datalist>

<datalist> 태그는 미리 정의된 옵션의 리스트를 보여줍니다.

<dd>

<dd> 태그는 설명 목록 요소의 설명을 정의합니다.

<del>

<del> 태그는 문서 내에 삭제된 텍스트를 설정합니다.

<details>

<details> 태그는 추가정인 정보를 보여주거나 숨기게 할 수 있습니다.

<dfn>

<dfn> 태그는 전문적인 용어를 정의할 때 사용합니다.

<dialog>

<dialog> 태그는 추가정인 정보를 팝업(박스) 형식으로 보여줍니다.

<dir>

<dir> 태그는 디렉토리 제목을 나열하는데 사용합니다.

<div>

<div> 태그는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다.

<dl>

<dl> 태그는 설명 목록을 정의합니다.

<dt>

<dt> 태그는 설명 목록의 용어 및 이름을 정의합니다.

<em>

<em> 태그는 텍스트를 강조하는데 사용합니다.

<embed>

<embed> 태그는 외부 어플리케이션을 연결합니다.

<fieldset>

<fieldset> 태그는 폼 요소의 그룹 내부 영역을 설정합니다.

<figcaption>

<figcaption> 태그는 <figure> 요소의 제목을 정의합니다.

<figure>

<figure> 태그는 그림, 도표, 사진, 코드등의 주석으로 표시합니다.

<font>

<font> 태그는 폰트의 크기, 색, 종류를 설정합니다.

<footer>

<footer> 태그는 사이트 푸터부분을 정의합니다.

<form>

<form> 태그는 웹 서버에 정보를 제공하는 폼 컨트롤 유형을 정의합니다.

<frame>

<frame> 태그는 HTML문서가 표시 될 수 있는 특정 영역을 설정합니다.

<frameset>

<frameset> 태그는 프레임을 정의합니다.

<h1>~<h6>

<h1>~<h6> 태그는 섹션의 제목을 정의합니다.

<head>

<head> 태그는 사이트의 헤더 요소들을 정의합니다.

<header>

<header> 태그는 소개 컨텐츠 및 네비게이션 링크를 포함한 섹션입니다.

<hgroup>

<hgroup> 태그는 제목 요소 그룹화를 정의합니다.

<hr>

<hr> 태그는 문서의 주제를 분리할 때 사용합니다.

<html>

<html> 태그는 HTML 문서의 루트를 나타냅니다.

<i>

<i> 태그는 음성이나 분위기 등의 텍스트를 정의합니다.

<iframe>

<iframe> 태그는 HTML문서 내에 다른 문서를 포함하는데 사용합니다.

<img>

<img> 태그는 문서에 이미지를 표현할 때 사용합니다.

<input>

<input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다.

<ins>

<ins> 태그는 문서 내에 추가된 텍스트를 정의합니다

<kbd>

<kbd> 태그는 키보드 입력을 정의합니다.

<keygen>

<keygen> 태그는 보안키를 생성하고 컨트롤합니다.

<label>

<label> 태그는 <input> 요소의 라벨을 지정합니다.

<legend>

<legend> 태그는 <fieldset> 요소의 영역 제목을 정의합니다.

<li>

<li> 태그는 목록의 항목을 정의합니다.

<link>

<link> 태그는 문서와 외부 파일 연결을 정의합니다.

<main>

<main> 태그는 문서의 주요 콘텐츠를 정의합니다.

<map>

<map> 태그는 이미지 맵을 정의합니다.

<mark>

<mark> 태그는 참고 표시를 정의합니다.

<marquee>

<marquee> 태그는 텍스트의 스크롤과 움직임을 정의합니다.

<menu>

<menu> 태그는 메뉴 리스트를 정의합니다.

<menuitem>

<menuitem> 태그는 메뉴 리스트를 항목을 정의합니다.

<meta>

<meta> 태그는 문서에 대한 정보를 제공합니다.

<meter>

<meter> 태그는 범위를 측정하는 게이지 정보를 정의합니다.

<nav>

<nav> 태그는 네비게이션 링크를 정의합니다.

<noframes>

<noframes> 태그는 프레임을 지원하지 않는 브라우저를 위한 대체 태그입니다.

<noscript>

<noscript> 태그는 스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다.

<object>

<object> 태그는 문서내에 포함된 멀티미디어 요소를 정의합니다.

<ol>

<ol> 태그는 순서가 있는 목록을 정의합니다.

<optgroup>

<optgroup> 태그는 <option> 리스트를 그룹화합니다.

<option>

<option> 태그는 <select> 요소의 항목을 정의합니다.

<output>

<output> 태그는 계산의 결과를 보여줍니다.

<p>

<p> 태그는 문단을 정의합니다.

<param>

<param> 태그는 <object> 의 매개변수를 정의합니다.

<pre>

<pre> 태그는 텍스트의 포맷을 정의합니다.

<pregress>

<pregress> 태그는 작업의 진행상태를 정의합니다.

<q>

<q> 태그는 짧은 인용을 정의합니다

<rp>

<rp> 태그는 루비 주석을 괄호로 표현하기 위해서 사용합니다.

<rt>

<rt> 태그는 루비 주석에 대한 설명이나 발음을 정의합니다.

<rtc>

<rtc> 태그는 루비 주석에 대한 설명이나 발음을 정의합니다.

<ruby>

<ruby> 태그는 루비 주석을 정의합니다.

<s>

<s> 태그는 정확하지 않거나 올바르지 않은 텍스트를 정의합니다.

<samp>

<samp> 태그는 컴퓨터 프로그램의 샘플 출력을 식별하기위한 요소입니다.

<script>

<script> 태그는 스크립트를 정의하는데 사용합니다.

<section>

<section> 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다.

<select>

<select> 태그는 선택 목록을 정의합니다.

<small>

<small> 태그는 저작권 또는 법적인 텍스트를 정의합니다.

<source>

<source> 태그는 미디어 요소에 대한 소스를 지정하는데 사용합니다.

<span>

<span> 태그는 인라인 요소 그룹화를 정의합니다.

<saong>

<saong> 태그는 중요한 의미를 갖는 텍스트를 정의합니다.

<style>

<style> 태그는 문서에 대한 스타일 정보를 정의합니다.

<sub>

<sub> 태그는 텍스트 아래첨자를 정의합니다.

<summary>

<summary> 태그는 <details>요소 내용에 대한 요약 또는 제목을 정의합니다.

<sup>

<sup> 태그는 텍스트 위첨자를 정의합니다.

<table>

<table> 태그는 표를 정의합니다.

<tbody>

<tbody> 태그는 표의 본문을 그룹화합니다.

<td>

<td> 태그는 표의 셀을 정의합니다.

<textarea>

<textarea> 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다.

<tfoot>

<tfoot> 태그는 표의 푸터를 그룹화합니다.

<th>

<th> 태그는 표의 행이나 열에 머리말을 정의합니다.

<thead>

<thead> 태그는 표의 헤더를 그룹화합니다.

<time>

<time> 태그는 날자와 시간을 정의합니다.

<title>

<title> 태그는 HTML문서의 타이틀을 정의합니다.

<a>

<a> 태그는 표의 행을 정의합니다.

<aack>

<aack> 태그는 미디어 요소의 트랙을 지정합니다.

<tt>

<tt> 태그는 타자모양의 텍스트를 정의합니다.

<u>

<u> 태그는 밑줄을 표시할 때 사용합니다.

<ul>

<ul> 태그는 순서가 없는 목록을 정의합니다.

<var>

<var> 태그는 프로그램 코드에서 변수를 정의합니다.

<video>

<video> 태그는 미디어 영상을 재생합니다.

<wbr>

<wbr> 태그는 줄바꿈 할 위치를 정의합니다.

CSS Reference

CSS Description

CSS를 알파벳순으로 정리한 태그입니다.

CSS Properites

HTML 요소를 속성별로 정리한 태그입니다. Font 속성 설명 font font 속성은 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정합니다.

CSS Selector

CSS는 선택자를 통해 요소를 선택할 수 있습니다. CSS Selector 태그 유형 설명 버전 . .class {color:#fff;} 클래스 선택자 CSS1 # .id {color:#fff;} 아이디 선택자 CSS1 * * {color:#fff;} 전체 선택자 CSS2 element p {color:#fff;} 요소 선택자 CSS1 element, element p, div {color:#fff;} 그룹 선택자 CS..

CSS Size Units

CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다.

CSS Size Units

CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다.

CSS Compatibility

CSS 호환성을 확인합니다.

Javascript Reference

JavaScript Description

자바스크립트의 속성을 정리하였습니다.

자바스크립트 개요

자바스크립트(JavaScript)는 웹 브라우저에서 동작되는 스트립트 언어를 말합니다. HTML은 정적인 레이아웃을 표현한다면, 자바스트립트(JavaScript)는 동적인 기능을 표현합니다.

자바스트립트 프로그램 설치

자바스크립트를 시작하기 전에 필요한 프로그래과 실행 준비 환경을 셋팅하겠습니다.

자바스트립트 작성법

자바스크립트를 사용하기 위해 필요한 기본적인 규칙을 설명하겠습니다.

자바스트립트 - 변수

변수는 하나의 데이터를 저장하는 저장소입니다.

자바스트립트 - 데이터 타입

변수에는 여러가지의 데이터 타입을 넣을 수 있습니다.

배열

배열은 여러개의 데이터를 순차적으로 저장하는 저장소입니다.

연산자

연산자는 산술 연산, 논리 연산, 증감 연산, 비교 연산 등을 수행합니다.

- 산술 연산자

- 복합 연산자

- 증감 연산자

- 비교 연산자

- 논리 연산자

- 비트 연산자

- 문자열 연산자

조건문

조건문은 말 그대로 조건에 맞으면 실행하고, 맞지 않으면 다른 코드를 실행하도록 조건을 거는 제어문입니다.

- if문

- if ~ 문

- 다중 if문

- 비교 연산자

- 조건부 연산자

반복문

반복되는 부분을 실행할 때 사용하는 제어문입니다.

- while문

- do while문

- for문

- 다중 for문

- for in 반복문

- break문과 continue문

함수

객체

jQuery Reference

jQuery Description

제이쿼리 API

제이쿼리 개요

제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다.

제이쿼리 사용방법

제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다.

선택자

제이쿼리는 선택자를 통해 대상을 선택합니다.

- 기본 선택자

- 계층 선택자

- 속성 선택자

- 폼 선택자

- 기본 필터 선택자

- 내용 필터 선택자

- 보임 필터 선택자

- 자식 필터 선택자

속성

제이쿼리는를 통해 속성을 변경합니다.

- Attributes

- CSS

- Dimensions

- Offset

- Data

탐색

제이쿼리를 통해 탐색하여 선택합니다.

- 트리구조 탐색

- 필터링

- 기타

변경

제이쿼리는를 통해 변경합니다.

- Copying

- Insertion Around

- Insertion Inside

- Insertion Outside

- Removal

- Replacement

이벤트

제이쿼리는를 통해 속성을 변경합니다.

- 이벤트 핸들러

- 브라우저 이벤트

- 문서 이벤트

- 폼 이벤트

- 키보드 이벤트

- 마우스 이벤트

효과

제이쿼리는를 통해 속성을 변경합니다.

- Basic

- Fading

- Sliding

- Custom

jQuery UI

제이쿼리는를 통해 속성을 변경합니다.

jQuery AJAX

제이쿼리는를 통해 속성을 변경합니다.

Sample Reference

Sample Reference

Parallax

- Basic

- Basic - Menu

- Dot Menu

- Dot Menu Style - Scale

- Dot Menu Style - opacity

- Dot Menu Style - box-shoadow

- Responsive Nav

- Side Nav

- Sticky Nav

- Hidden Nav

- Scroll Hide/Show Nav

- Text Animation - transform

- Text Animation - animate

- Text Animation - letter

- Text Animation - letter2

Animation

- Animation - Tentacle

- Animation - Roket

- Animation - dog

CSS

- Rotate Bar

- Circle Loading

- Loading Ball

Modal

- basic

- Quick Scale Up

- Fold

- Runner

- James Bond

Menu

- hamburger Style

Hover Effect

- Opacity

- Left

- bottom

- Scale

- Translatey

- Rotate

- Text Rotate

JAVA Reference

자바란?

자바는 객체지향 프로그래밍 언어입니다.

자바 설치

JDK 다운로드/설치

자바 문법

자바의 기본 문법입니다.

- 클래스

- 변수

자바 연산자

JAVA 연산자

JAVA Reference

PHP

PHP는 객체지향 프로그래밍 언어입니다.

코드랩 레퍼런스

Sublime Text 플러그인 본문

ETC

Sublime Text 플러그인

webstoryboy 2017. 12. 31. 16:23

Sublime Text는 코딩, 마크업을 하기 위한 에디터입니다. Sublime Text 의 다양한 기능을 제공하는 플러그인을 알아보겠습니다. 플러그인은 프로그램에 설치하면 바로 사용 할 수 있는 확장기능을 말합니다.

Sublime Text 플러그인

Emmet : 복잡한 코드를 간단하게 만들어주는 플러그인
Sftp : 호스팅 서버와 연결해 주는 파일 전송 프로그램
SideBarEnhancements : 사이드바 기능 향상 플러그인
AutoFileName : 자동으로 주변 경로를 불러오는 플러그인입니다.
Color Picker : CSS 컬러 색을 편하게 설정할 수 있는 플러그인
AutoPrefixr : 자동으로 벤더프리픽스를 만들어주는 플러그인
Minifier : 코드를 빈칸없이 최소한으로 만들어주는 플러그인
HTML/CSS/JS Prettify : 코드를 정렬에 맞쳐 이쁘게 만들어 주는 플러그인
BracketHighlighter : 서로 일치하는 태그나 따옴표를 구분해주는 플러그인
CanIuse : CSS3의 웹 표준 상태를 알려주는 플러그인
CSSComb : 스타일시트를 보기 좋게 정리해주는 플러그인
Diffy는 두개의 파일의 틀린점을 비교해주는 플러그인입니다.
Goto-CSS-Declaration는 해당 클래스의 위치로 바로 이동시켜주는 플러그인입니다.
Alignment : 코드를 기호 : 기호를 기준으로 보기 좋게 좌우로 정렬해주는 플러그인
Trimmer : 불필요한 공백을 제거하는 플러그인
HyperlinkHelper : URL 링크를 자동으로 만들어 주는 플러그인
W3CValidators는 마크업 유효성 검사를 해주는 플러그인입니다.

Emmet https://docs.emmet.io/cheat-sheet/

Emmet은 복잡한 코드를 간단하게 만들어주는 플러그인입니다. 예전에 Zen Coding이 업데이트 되면서 기능들도 많이 업데이트 되면서 좋아졌습니다.

Sftp

Sftp 호스팅 서버와 연결해 주는 파일 전송 프로그램 플러그인입니다.

SideBarEnhancements

사이드바 기능 향상 플러그인입니다. 이 기능을 설치하면 사이드바의 기능이 다양해지고 더 편리해집니다.

AutoFileName

AutoFileName 경로를 설정할 경우 자동으로 주변 경로를 불러오는 플러그인입니다.

Color Picker

컬러 피커를 설치하면 CSS 컬러 색을 편하게 설정할 수 있습니다.

Minifier

Minifier는 코드를 빈칸 없이 한 줄로 만들어 주는 기능입니다.

AutoPrefixr

AutoPrefixr는 표준화되지 않은 CSS3의 벤더프리픽스를 자동으로 붙여주는 플러그인입니다.

HTML/CSS/JS Prettify

HTML/CSS/JS Prettify는 Minifier의 반대 역할을 해주는 기능입니다. 한 줄을 예쁘게 보기좋게 바뀌어 주는 플러그인입니다.

BracketHighlighter

BracketHighlighter는 서로 일치하는 태그나 따옴표를 구분해주는 플러그인입니다. 시작하는 태그나 끝나는 태그를 보기좋게 표현해주기 때문에 코딩하는데 도움이 됩니다.

CanIuse

CanIuse는 현재 사용되는 CSS3의 웹 표준 상태를 알려주는 플러그인입니다. 원하는 CSS요소를 선택한 후 CTRL+ALT+F를 누르면 해당 CSS정보를 caniuse.com사이트로 바로 보여줍니다.

CSSComb

CSSComb는 스타일시트를 보기 좋게 정리해주는 플러그인입니다. Ctrl+Shift+C를 누르면 자동으로 정리해줍니다.

Diffy

Diffy는 두개의 파일의 틀린점을 비교해주는 플러그인입니다. 비교하고 싶은 파일 2개를 불러들여 ‘View > Layout > Columns:2’를 선택한후 ⌘ + K, ⌘ + D순으로 누르면 다른 부분을 하이라이트 시켜줍니다

Goto-CSS-Declaration

Goto-CSS-Declaration는 해당 클래스의 위치로 바로 이동시켜주는 플러그인입니다.

Alignment

Alignment는 코드를 기호 : 기호를 기준으로 보기 좋게 좌우로 정렬해주는 플러그인입니다. Ctrl+Alt+A(Cmd+Ctrl+A)를 누르면 코드가 정리되고, CSS의 경우 세미콜론을 기준으로 좌우로 정렬됩니다.

Trimmer

Trimmer는 불필요한 공백을 제거하는 패키지입니다.

HyperlinkHelper

HyperlinkHelper는 도메인에 URL 링크를 자동으로 만들어 주는 패키지입니다.

W3CValidators

">

W3CValidators는 마크업 유효성 검사를 해주는 플러그인입니다. 몇 번째 줄이 틀렸는지 표시가 되서 더 심플하네요.

Related Articles

공유하기 링크

페이스북
카카오스토리
트위터

Ad

Comments

티스토리툴바