브라켓(Brackets) - 빠른편집 + 외부스타일시트(CSS)

브라켓(Brackets)

빠른편집 + 외부스타일시트(CSS)

ㆍ 이번에는 Brackets에서 빠른편집을 사용하는

    방법에 대해 알아보도록 하겠습니다.

ㆍ 빠른편집을 하기 위해서 CSS파일을 외부스타일시트로

    추가 한 후에 작업을 진행해보도록 하겠습니다.

일단 CSS 파일을 만든다

Ctrl+N을 누르시거나

[파일] - [새 파일]을

눌러서 파일을 하나 만든후

.css로 저장을 합니다.

HTML 파일에서 CSS 파일을 연결한다

직접 작성하셔도 되고

아니면

HTML>HEAD+BODY 이렇게 쓰고 탭키

(HTML 밑에 HEAD와 BODY를 추가)

(Emmet 연결해야 가능)

하고 HEAD에

<link rel="stylesheet" type="text/css" href="study_ex.css">

를 추가하면 됩니다.

테스트를 위해 body에 div 하나 추가 하고 아이디 부여

어쨋든 빠른편집을 테스트

해봐야 하기 때문에

body에 hi라는 문자열을

출력해보겠습니다.

<div id="ex">hi</div>

이렇게 써보겠습니다.

그 다음 빠른편집으로 CSS 편집!

오늘의 하이라이트입니다.

HTML파일을 열은 상태에서

CSS 파일을 따로 열어보지 않고

즉석에서 빠른편집기능으로

CSS를 편집해보도록 하겠습니다.

div태그 위에 커서를 올려놓고 빠른편집 실행

(단축키는 Ctrl+E, 아니면

마우스 우클릭 후 빠른편집)

그리고 원하는 스타일대로

꾸미면 바로 적용됩니다

최종확인차 CSS 파일을

한번 열어서 제대로 적용됬는지

확인하면서 마치도록 하겠습니다.

gif가 이건 좀 기네요 42초정도..

(42초라 프레임이 낮아서 끊기는 느낌이 있습니다)

끝!