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

Posted by ITPangPang
2016.11.12 00:22 웹(Web)/알아두면 좋은것


브라켓(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초라 프레임이 낮아서 끊기는 느낌이 있습니다)

끝!

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로