안녕하세요.
꼬부기입니다 ^^
이번포스팅에서는 CSS 입문 하시는 분에게 가장 중요한!
CSS Style을 시작하는 방법에 대해 포스팅해보려고합니다.^^
자 들어가볼까요?
먼저 꼬부기가 사용하는 HTML 편집기 Sublime Text를 실행합니다.
그럼 이런 화면이 뜨겠죠?
HTML을 입력 한 후 키보드에 Tab을 누르시면
이렇게 HTML 기본 셋팅이 자동으로 됩니다.
저는 체크해드린 title 부분에 " Sublme Text 기초 사용법 " 이라고 입력하였습니다.
그렇다면 저 title 부분에 입력하면 어떤 효과를 볼 수 있을 까요?
title에 입력 한 내용은 인터넷 창의 탭부분에 노출됩니다.
*저는 웹브라우저를 크롬(Chrom)을 사용합니다.
익스플로러에 비해 장점이 많고 기능들이 편하기 때문에 사용 하는 것입니다.
제가 포스팅하고 캡쳐해서 보여드리는 부분들과 다른 웹브라우저를 사용 하시는 분들과는
다르게 표현 될 수 있으니 크롬으로 따라해주해주세요.
그리고 이제 어떤 문자코드를 사용 할 것인지에 대해서 선언을 해주셔야합니다.
<head>와 </head>사이 title 위쪽부분에 선언을 해주셔야 합니다.
선언 명령은 " <meta charset="utf-8" /> " 를 입력해 주시면 됩니다.
캡쳐 한 사진에는 /을 입력하지 않았지만 해당 내용을 끝내겠다는 의미의 " / " 를 꼭 입력해주세요:D
그렇지만 Sublime Text의 기능 중 하나인 키보드의 tab을 입력하면 자동 완성 기능을 활용 할 수 있습니다.
위 사진에서 보시는 것처럼 " meta cha " 이렇게 일정 부분 이상만 입력하면 입력하는 라인 하단에
자동완성을 할 태그 혹은 속성이 팝업됩니다.
방향키로 이동해서 Enter를 누르셔도 되고 하나밖에 없다면 바로 Enter를 누르시면 자동완성이 됩니다.
입력이 완료되면 이렇게 됩니다.
HTML이 작성 되어야 할 공간을 안내해 드리기위해 입력해 보았습니다.
입력 된 부분에는 HTML을 입력 하는 부분입니다.
이번에는 CSS style 을 입력할 부분을 만들어 줘야겠죠?
title 아래 부분에 " style " 이라고 입력합니다.
위에서 안내해드린 tab을 이용해서 자동 완성기능을 이용합니다.
자동완성 기능을 이용하면 이렇게 입력되구요.
저는 CSS style 을 보기 좋게 하기위하여 체크해드린 부분처럼 들여쓰기를 활용합니다.
HTML / CSS 를 코딩 할 때 들여쓰기를 이용하여
코딩한다면 눈에 보기 편하게 코딩을 하실 수 있습니다.
" 마지막으로 CSS style 입력 공간 " 을 표시해 드렸습니다.
다음 포스팅 부터는 CSS style 속성에 대해 하나하나 알아보도록 하겠습니다 ^^
'Publisher > Mark Up' 카테고리의 다른 글
| 반응형 테이블 데모 모음 링크 (0) | 2018.07.26 |
|---|---|
| [CSS STYLE 태그선택자] CSS 기초 CSS 입문. Sublime Text 사용. HTML 편집기 프로그램 써브라임 텍스트 (0) | 2016.09.28 |
| [CSS STYLE 전체선택자] CSS 기초 CSS 입문. Sublime Text 사용. HTML 편집기 프로그램 써브라임 텍스트 (0) | 2016.09.28 |
| HTML5 기본 용어정리 및 사용법! (2) | 2016.09.08 |
| HTML/CSS 입문 사용 할 HTML 편집기 프로그램 선택하기. 써브라임 텍스트 (0) | 2016.09.06 |