퍼블리셔/에디터
에디트플러스 editplus 자동완성파일 CSS 소개
demun
2012. 1. 6. 06:00
이미지상에서 클릭이라고 표시한것을 수정합니다.
클릭이 아니라 엔터입니다.
그런데 에디트플러스에서 불편한 점중 하나가 바로 자동완성파일입니다.
홈페이지에 가면 자동완성파일이 있습니다.
그중에 acp 확장자로 끝나는 파일이 자동완성파일입니다.
오늘 소개하는 파일은 CSS 자동완성파일 입니다.
홈페이지에 있는 CSS 자동완성파일을 사용해본결과 제가 사용하던것하고 차이가 있어 많이 불편했습니다.
저번에 에디트플러스에 대해서 소개도 해서 얼렁뚱땅 CSS 자동완성 파일을 만들어 봤습니다.
제가 티스토리를 많이 사용하다보니 어는정도 티스토리에 편리하도록 추가한 구문도 있습니다.
적용하는 방법.
demun_css.acp 를 다운로드 받으후에 기본설정 - 설정 & 구문강조 - CSS 선택후 열기를 선택한 다음 다운받은 자동완성 파일을 지정해주면 됩니다.
자 이제 CSS 자동완성파일을 소개합니다. 바로 아래의 열기 닫기 태그가 두가지 경우가 있습니다. 이것만 다르고 나머지는 전부 같습니다.
열기 태그 , 닫기 태그.
다른 에디터에서 가장 편리한 점이 바로 { 을 적고 엔터를 누르면 자동으로 } 는 태그가 나오고 들여쓰기가 되는 기능이 있는데요. 이것이 아주 편리합니다.
이걸 적용한 파일
demun_css1.acp아래 이미지를 보면 사용전과 후 를 알수 있습니다.
바로 윗것으로 적용된 파일
아래 이미지를 보시면 어떻게 변하는지 알 수 있습니다.
이거 하나만 적용되도 무척 편리합니다.
위의 사항만 다르고 아래는 모두 같습니다.
주석 처리.
이것도 제가 하드코딩을 하다보니 약 3가지의 경우가 필요해서 이렇게 지정했습니다.주석은 - 로 표시하는데 2개,3개,4개 이렇게 사용합니다.
이렇게 3가지의 경우를 만들어 놓고 사용합니다. 이것도 경우에 따라 무척 편리합니다.
속성 자동완성.
속성의 주요 특징은 3글자 입니다.예를들어 border 를 표시할 경우 bor 한다음 스페이스바를 클릭하면 border: 여기까지 완성됩니다.
border-color 를 표시할 경우는 borc 한다음 스페이스바를 클릭하면 border-color:# 까지 완성됩니다.
즉 모든 속성은 3자리까지가 속성이름이고 그 다음 - 시작되는 속성이나 값입니다.
즉 3가지 까지는 속성이 확실하나 속성이름이 긴경우는 4자리까지도 될수도 있고 짧은 경우는 속성값까지 모두 완성이 됩니다.
아래 그림을 보시면 주석으로 dis 이렇게 나오고 1 자리나 2자리가 포함될수 있다는 뜻입니다.
disb 를 보시면 display 의 dis 이고, 뒤의 b 는 block 를 의미합니다. 그래서 붙여서 disb 를 쓴후 스페이스바를 클릭하면 속성과 값까지 모두 완성이 됩니다.
usability 유용성, 편리성.
이왕이면 편리하려고 자동완성 사용하는데 몇가지 편리하려고 넣어봤습니다.이왕이면 CSS3까지 지원하도록 할려고 했는데 속성과 값중에서 값에 해당하는 경우가 워낙 많아서 적용하기가 힘들었습니다.
CSS3 코드는 몇개만 입력했습니다. 요건 좀더 사용해보고 업데이트를 해야겠습니다. 연구가 필요해서요....
많이 사용하는 border 의 경우 bor1 하면 border:1px solid # 까지 완성되면 bor5 , bor10 이렇게 두개더 추가했습니다.
또 제가 스킨을 제작하다보니 def 하면 css 초기화 코드가 자동으로 입력이 되고 , tisdef 하면 티스토리 기본태그 디폴트가 입력이 됩니다.
참고로 아직 더 업데이트 해야 하는데 css 완성파일이 많이 없습니다. 일단 사용하시고 나중에 다시 업데이트 하면 알려드릴려고 먼저 소개하고 배포합니다.
html5자동완성도 있는데 이것도 좀더 가다듬어야 할것으로 생각되서 일단 보류합니다.
소소하지만 없는것보다는 무척 편리할겁니다. 사용해보세요.
문의 사항이 이나 업데이트 됐으면 하는 것이 있으면 알려주시길 바랍니다.