/* All 버전 */ 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
/* Phone 버전 */ 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
/* Tablet & Desktop 버전 */ @mediaonly screen and (min-width:768px) { 사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다. }
/* Tablet 버전 */ @mediaonly screen and (min-width:768px) and (max-width:1199px) { 사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다. }
/* Desktop 버전 */ @mediaonly screen and (min-width:1200px) { 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다. }
@media tv and (min-width: 700px) and (orientation: landscape) { ... } // tv 가로에 700px 같거나 크다
700px보다 넓거나, 디스플레이가 가로 방향인 경우에만 실행
기기명
설명
all
모든 장치
print
인쇄 장치
screen
컴퓨터 화면 장치 또는 스마트 기기의 화면
tv
영상과 음성이 동시에 출력되는 장치
projection
프로젝터 장치
handheld
손에 들고 다니는 소형 장치
speech
음성 출력 장치
aural
음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치)
embossed
점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치)
tty
디스플레이 기능이 제한된 장치
braille
점자 표시 장치
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* Print 버전 */ @media print { ... }
/* Phone 가로 버전 */ @mediaonly screen and (min-width:320px) and (orientation : landscape) { ... } /* Phone 세로 버전 */ @mediaonly screen and (min-width:320px) and (orientation : portrait) { ... }
/* Tablet 가로 버전 == Desktop */ @mediaonly screen and (min-width:768px) and (orientation : landscape) { ... } /* Tablet 세로 버전 */ @mediaonly screen and (min-width:768px) and (orientation : portrait) { ... }
/* 모든 */ 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
/* Print 버전 */ @media print { ... }
/* Mobile 버전 */ 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
/* Mobile 가로 버전 */ @mediaonly screen and (min-width:320px) and (orientation : landscape) { ... }
/* Tablet & Desktop Device */ @mediaonly screen and (min-width:768px) { 사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다. }
/* Tablet 버전 */ @mediaonly screen and (min-width:768px) and (max-width:1199px) { 사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다. }
/* Tablet 세로 버전 */ @mediaonly screen and (min-width:768px) and (orientation : portrait) {
}
/* Desktop 버전 */ @mediaonly screen and (min-width:1200px) { 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크탑에 대응하는 코드를 작성한다. }
주요내용 대체공휴일제의 도입 (안 제3조) 설날, 추석 연휴가 다른 공휴일과 겹치는 경우 그 날 다음의 첫 번째 비공휴일을 공휴일로 함 어린이날이 토요일 또는 다른 공휴일과 겹치는 경우 그 날 다음의 첫 번째 비공휴일을 공휴일로 함 (어린이날 외의 토요일은 대체공휴일에 포함되지 않습니다)
:_N cls echo. echo. ^<1^> 전단계 이동 echo. echo. 예) hexo new 파일명 echo. echo. - 새롭게 만들 파일명은 띄어쓰기시 뒤에 것으로 입력 됩니다. echo. - 같은 파일이 있을시 (파일명-숫자)가 붙습니다. echo. set strn= set /p strn= 새롭게 만들 (파일명)을 적으세요 : if'%strn%' EQU ''set numb=%strn:null% if'%strn%' EQU '1' goto _main if'%strn%' NEQ '' goto _NN echo. "%numb%" 이것이 아닙니다. 다시 부탁합니다. pause goto _N
:_NN echo hexo new %strn% hexo new %strn% pause exit
쓸데없는 것이지만 저는 유용하게 사용하고 있습니다. 이곳에 다운로드도 넣었으니 사용하실 분은 다운해서 사용해 주세요.
경동 나비엔의 사이트에 가시면 있는 자가조치부분입니다. 이 부분을 보기 좋게 정리해 보았답니다.
자가조치
에러 코드 또는 증상에 대한 빠른 해결 방법을 알려드립니다.
보일러 > 콘덴싱 가스보일러
“보일러 > 콘덴싱 가스보일러에서 총 53개의 에러코드가 검색되었습니다.” 라고 메시지가 나옵니다. 이제 정리해보겠습니다.
단, 구동기와 온도조절기, 보일러가 타사 제품의 경우에는 이 부분이 다소 틀릴수 있고 밑의 코드는 나비엔 사이트의 코드를 정리한 것으로 현장의 코드와 다를수 있습니다.
[EXXX]확인안됨 는 인터넷 검색해서 적은 글입니다. 공식사이트에는 없지만 검색에서는 있는것 입니다.
Q [E01],[E001] [열교환기온도과열] 보일러에 과열이 발생한 경우 입니다. 즉 비등
각방 분배기가 열려 있는지 확인하세요.
만약, 각방 분배기가 열려 있다면 엔지니어 점검이 필요합니다.
경동나비엔 행복나눔 콜센터(1588-1144)로 연락 주시기 바랍니다.
비등이란? 가스보일러에서 비등이란 난방수가 제대로 회전을 못하여 보일러 내에서 온도가 급격하게 올라가면서 발생되는 현상입니다.
Q [E02], [E302] [저수위] 보일러에 물이 부족하여 발생한 경우 입니다.
단수가 되었는지 확인하세요.
보일러와 연결된 냉수배관에 밸브가 열려 있는지 확인하세요.
동절기에는 온수 수도꼭지를 열어 물이 나오는지 확인하세요.
만약, 물이 한방울도 나오지 않는다면 냉수/온수배관이 동결된 경우로 배관을 녹여 주셔야 합니다.(자세한 문의는 동절기 해빙안내 포스트로 링크)
사용하시는 제품에 모델에 따라 자동 물보충과 수동 물보충 제품으로 구분됩니다.
수동물보충 제품의 경우 물보충하는 방법 그림으로 표시
사용하시는 제품 모델명을 확인하신 후 경동나비엔 행복나눔 콜센터(1588-1144)로 연락 주시면 상담사가 자세하게 안내해 드리겠습니다.
Q [E03],[E003] [불착화] 보일러에 점화(연소)가 되지 않아 발생한 경우 입니다.
사용하시는 곳에 가스공급이 되는지 확인하세요. (가정집의 경우 가스레인지를 켜서 불꽃이 켜지는지 확인하세요.)
보일러와 연결된 가스공급배관에 중간밸브가 열려 있는지 확인하세요.
보일러에 전원코드를 뺏다 끼워서 재 가동해 주세요.
만약, 안내사항대로 조치했으나 해결되지 않는다면 엔지니어 점검이 필요합니다.
경동나비엔 행복나눔 콜센터(1588-1144)로 연락 주시기 바랍니다.
Q [E04],[E004] [의사화염] 보일러 연소 후 화염감지에 이상이 발생한 경우 입니다.
Q [E10], [E010] [풍압이상] 연통에 급/배기 상태에 이상이 발생한 경우 입니다.
동절기에 콘덴싱 제품은 응축수 호스(에어컨 물빠짐 호스)가 동결된 경우 에러가 발생됩니다.
응축수 호스가 동결이 되어 있는지 확인하세요.
만약, 응축수 호스가 동결된 경우라면 따뜻한 물(50도 이내)을 이용하여 녹여 주세요.
이외 동결상태가 아닌 경우에 해결이 되지 않는다면 엔지니어 점검이 필요합니다.
경동나비엔 행복나눔 콜센터(1588-1144)로 연락 주시기 바랍니다.
Q [E11], [E311] [수위이상] 보일러에 물 수위를 감지하는 센서에 이상이 발생한 경우 입니다.
사용하시는 가스가 LPG인 경우 가스공급에 이상이 있는지 확인하세요.
도시가스를 사용하는 경우 일시적인 현상일수 있으므로 보일러에 전원코드를 뺏다 끼워 재 가동해 주세요.
안내사항대로 조치했으나 해결되지 않는다면 엔지니어 점검이 필요합니다. 경동나비엔 행복나눔 콜센터(1588-1144)로 연락 주시기 바랍니다.
Q [E13], [E213] [흐름스위치이상] 난방에 필요한 물흐름을 감지하는 센서에 이상이 발생한 경우 입니다.
보일러 연통과 가까운 창문이 열려 있는지 확인하세요.
만약, 창문이 열려 있다면 안전을 위해 창문을 닫고 보일러를 가동하세요.
안전을 위해 보일러 가동을 중지하시고 가스공급업체에 연락을 해서 가스점검을 요청하신 후
보일러 점검을 받아보셔야 합니다. 경동나비엔 행복나눔 콜센터(1588-1144)로 연락 주시기 바랍니다.
처음 무슨 말을 해야 할까 고민하다가 이렇게 제목을 정하고 글을 적어 봅니다. 기본적으로 알아야 할 것들과 제가 경험한 요령 정도 등을 이번에 적으려고 합니다. 전 누구를 가르치는 능력이 없습니다. 이 글도 저를 위해 메모용으로 작성한 것이지 제가 많이 알고 있다고 생각은 없습니다. 이점 참고해 주시면 감사하겠습니다. 우선 반응형 웹을 적어 봅니다.
반응형 웹 디자인 Responsive Web Design
반응형 웹
요즘은 반응형 웹페이지라고 많이들 만들고 또는 사용하시는데요. 반응형이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트라고 합니다. 이때 html은 하나지만 CSS,Js는 여러 개라도 반응형이라고 합니다.
즉, naver.com과 m.naver.com이 있는 사이트는 반응형이 아니죠.
반응형 웹 고려사항
여러 사이트들이 고려사항에 대해 적은것이 많습니다. 간추리면
데스크탑은 5초
모바일은 6초
간단하게 말하면 빨리 로딩할수 있게 하라는 것입니다. 나머지는 노력하에 있는 것이고요. 또다른 것은
여러개의 컬럼을 해상도에 따라 어떻게 배치할 것인가?
내비게이션을 작은 화면에서 어떻게 처리할 것인가?
이미지 해상도를 작게 줄여도 괜찮은가?
낡은 모바일 브라우저 문제 해결
IE 6~8 버전 브라우저 문제 해결
CSS/Js 속도 개선
웹폰트 사용 여부
이미지를 얼마나 어떻게 쓸것인가
HTML5 Semantics
IE6~8 에서도 CSS3 사용
위의 예시보다 더 많이 있을 것입니다. 위의 예시를 바탕으로 해서 빨리 로딩되도록 하는 것이 좋은 반응형 웹이 아닌가 싶네요.
이중에 몇가지는 여기서 적을 것입니다. 나머지는 차차 적을 려고 합니다.
낡은 모바일 브라우저 문제 해결 - 모바일 퍼스트
여러 버전의 모바일이 있습니다. 이 브라우저가 각각의 같은 기능이 있는 것이 아닙니다. 이때 이 문제를 해결하는 방법은 모바일 우선 코드를 잡는 것입니다. 이러면 모바일 우선 처리가 먼저고 나중에 같은 코드를 덮어 버리기 때문에 모바일 코드를 먼저 잡으면 됩니다. 즉 media 지원하지 않는 모바일은 앞에 것만 해석합니다. 모바일 장치가 아닌 것은 뒤에 것이 앞에 것을 덮으므로 뒤에 것을 해석합니다.
즉, 먼저 AAA라는 클래스를 선언하고 뒤에 AAA라는 클래스를 적으면 그 내용이 같은 코드면 뒤에 것이 앞에 것을 덮습니다.
css소스 압축의 다른 의미로 압축 하기 입니다. 말 그대로 매번 테스트를 하면서 중복되고 없어도 되는 부분을 찾아 지우는 것입니다. 상위 부분을 이여받고 하위부분의 중복을 지우는 과정은 처음부터 잘 계획을 잡고 해야 하는 부분입니다. 아니면 수작업으로 찾아 지울수 밖에 없는 것이라 많은 에너지놔 시간을 소비합니다.
4. JS 파일 지연 로딩
웹에서 파일을 로딩할때 1행부터 순서대로 해석하면서 즉시 화면에 출력하는 특성이 있습니다. 그러나 js파일이 먹통이거나 오래 로딩 된다면 또는 중간에 로딩이 있다면 이때까지 출력하다가 멈추는 현상이 발생 할수 있습니다. 그래서 되도록이면 Js파일은 하단에 배치해 주세요.
우리나라처럼 인터넷 속도가 좋고 어디서나 질좋은 인터넷을 받을수 있다면 이글 또한 필요 없는 것이겠죠. 이번에는 웹폰트로 웹 페이지가 멋지게 보일수 있지만 인터넷에서 폰트를 다운로드 한다는 것을 기억하세요. 기본글꼴을 사용하면 되지만 역시 웹폰트를 버릴수 없다면 데스크탑은 사용하고 모바일은 기본으로 사용은 어떨지 생각해 봅니다. 그러게하면 조금더 로딩시간을 줄일수 있지 않을까 싶네요.
css파일
1 2 3 4 5 6 7 8 9 10
/* 모든 해상도 공용 글꼴 - 시스템 글꼴만 선언 */ body, section, article, nav, menu, aside, footer { font-family: 나눔고딕, NanumGothic, Tahoma, Sans-serif; font-size: 12px } /* 태블릿 PC와 데스크탑용 글꼴 - 시스템 글꼴 다음으로 웹 폰트를 참조하도록 선언 */ @media all and (min-width:768px) { @font-face{font-family:nGothic; src:url(NanumGothic.eot); src:local('※'), url(NanumGothic.woff) format('woff');} body, section, article, nav, menu, aside, footer {font-family:나눔고딕,NanumGothic,nGothic,Tahoma,Sans-serif} }
참고로
IE 9은 @media 규칙 내부에 @font-face 허용 안함
css파일
1 2 3 4 5 6 7
/* 모든 해상도 공용 글꼴 - 시스템 글꼴만 선언 */ @font-face{font-family:nGothic; src:url(NanumGothic.eot); src:local('※'), url(NanumGothic.woff) format('woff');}
/* 태블릿 PC와 데스크탑용 글꼴 - 시스템 글꼴 다음으로 웹 폰트를 참조하도록 선언 */ @media all and (min-width:768px) { body, section, article, nav, menu, aside, footer {font-family:나눔고딕,NanumGothic,nGothic,Tahoma,Sans-serif} }
@media 밖에 글꼴 선언하면 됩니다.
HTML5 Semantics
HTML5 Semantics
**header** : 사이트 제목, 또는 본문 헤더.
**section** : 하나의 주제로 구성된 콘텐츠 또는 애플리케이션 블럭.
**article** : 본문 콘텐츠로서 주변과 분리해도 하나의 완전한 콘텐츠가 되는 영역.
여기서 주의해야 할 점은 CSS 파일 링크는 반드시 맨 앞에 나열되어야 합니다. 즉 Css먼저 와야 합니다.
이미지를 얼마나 어떻게 쓸것인가
이미지는 가급적이면 많이 사용하는것이 좋지 않습니다.(로딩 면에서…) 그렇다고 안쓰기도 힘드니 각각의 이미지로 불러 쓰는것 보다는 모아서 한장으로 만들어 쪼개서(?) 사용하면 더 좋습니다. 밑의 간단한 사용법을 적어 봅니다. 일단 모바일의 폭에 맞추어 비율 유지되는 이미지 css입니다.
명령 프롬프트(실행 파일이름: cmd.exe)는 OS/2, 윈도우 CE 그리고 윈도우 NT (윈도우 2000/XP/2003/비스타 이상) 기반 시스템의 명령 줄 해석기이다. MS-DOS와 윈도우 9x 시스템의 COMMAND .COM 또는 유닉스 시스템에서 쓰이던 셸의 아날로그 형태이다.
얼마 전 컴퓨터 시스템을 잘못 건드렸는지 시프트 오른쪽 마우스에서 나와야 할 명령 프롬프트가 나오지 않아 고생한 적이 있습니다. 그래서 인터넷 뒤지다가 발견한 것들을 모아 적어 봅니다.
명령 프롬프트를 실행시키는 방법
[시작메뉴 - 모든 프로그램 - 보조프로그램 - 명령 프롬프트]를 클릭하거나 [윈도우키 + R]을 눌러서 cmd를 입력하고 엔터를 친다
파일 탐색기 주소창에서 명령 프롬프트 호출하기
일단 예제로 하나의 폴더를 보여 드리겠습니다.
내 음악 폴더에서 탐색기의 주소창에 cmd를 입력 합니다. cmd .을 입력해도 됩니다.(띄어쓰기 하셔야 합니다.)
입력 하셨으면 엔터를 처서 실행 시킵니다.
레지스트리 편집을 이용한 방법
실행창에 regedit를 입력하고 엔터를 칩니다. 레지스트리 편집기가 열리면 [HKEY_CLASSES_ROOT\Folder\shell]로 이동해서 마우스 오른쪽 버튼을 클릭 새로만들기 - 키를 선택하고 적당한 이름의 키를 만듭니다. (이 블로그 글에서는 “여기에 CMD창 열기”로 했습니다)
새로 만든 키에서 마우스 오른쪽 버튼을 클릭하고 새로만들기 - 키를 선택하고 command라고 입력합니다.
만들어진 키값에 (기본값) 부분을 더블클릭해서 값 데이터에 cmd.exe /k cd "%L" 을 입력합니다.
CMD 명령어중 /K는 뒤에 cd를 수행하고 “%L”의 전체 폴더를 이름을 받아 남아 있어라는 의미 입니다.
이제 원하는 폴더에서 마우스 오른쪽 버튼을 클릭하면 “여기에 CMD창 열기”라는 새로운 메뉴가 생기면서 원하는 폴더에서 곧바로 명령 프롬프트를 실행시킬 수 있습니다.
파일 탐색기에서 마우스로 명령 프롬프트를 호출하는 방법
탐색기에서 원하는 폴더 위치에서 Shift + 마우스 오른쪽 버튼을 함께 누르면 여기서 명령 창 열기(W)라는 항목이 나타나고 해당 폴더에서 명령 프롬프트가 열립니다.
마무리
이글 적으면서 조금더 원도우에 대하여 알게 된것 같습니다. 모르면 한 없이 어렵지만 알면 쉬운것이 컴퓨터로 이번 역시 하나 배워 봅니다.
전체적으로 같은 느낌을 주는 활자의 집합을 글꼴이라고 한다. 낱글자 모양뿐만 아니라 숫자, 문장부호, 특수기호 등의 모양도 포함되는 경우가 있다. 서체(書體)라고도 하는데 과거에 붓글씨로 쓴 글씨 모양을 따라 목판이나 활자를 만들었기 때문이다. 하지만 서체는 활자뿐 아니라 손으로 쓴 글씨 모양도 포함하는 좀더 광의의 개념이므로 활자의 모양만을 말하는 글꼴보다 큰 개념이다. 각 글꼴은 글꼴을 구성하는 문자, 숫자, 기호 등의 낱 활자 모두 통일된 모양, 굵기, 장평, 장식, 기울기를 유지한다.
Daum이 배포하는 모던하고 심플한 느낌의 폰트입니다. 한참 하다가 이제는 네이버에서 링크가 되어있군요. 이 글씨체는 ‘뷁’이라는 글짜가 않된다고 인터넷에 많이 올라온 글씨체 입니다. 2015년 이후 공식적인 배포 자체가 중단된 상태입니다. 영리 목적으로 사용하려면 꼭 협의를 거친 뒤에 글꼴 출처를 표시해야 된다는 제약이 있습니다.
우리가 보는 웹사이트는 대부분 글(text)로 이루어져 있습니다. 사진이나 동영상을 통해 정보를 전달 받기도 하지만 아직 대부분의 글은 눈으로 읽는 과정을 통해 정보를 전달 또는 얻고 있습니다. 책이나 잡지같은 인쇄물에서도 글꼴(font)이 중요하듯이 웹사이트에서도 내용을 잘 전달하기 위해서 글꼴은 매우 중요합니다. 이러한 글꼴중에 로컬 컴퓨터에 설지 되어 있는 폰트와 웹에서만 쓰이는 폰트가 있습니다. 이 웹에서만 쓰이는 폰트를 웹폰트라고 하고 작동 원리는 웹서버에서 임시로 받아 웹페이지에 보여지는 폰트인 것 입니다. 나머지 자세한 부분은 인터넷에 많이 있는 부분이고, 여기서 적을 내용은 제가 사용을 많이 하고 또는 관심있게 보고 있는 폰트들을 적을려고 합니다.
font-family: 'Iropke Batang', serif; 가능 굵기 (font-weight) : 400
웹폰트 영어 300i 즉 뒤에 i가 있으면 300의 이탤릭제(italic)입니다.
영어는 원체 많아서 제가 자주 사용하는것만 적었습니다.
참고 - 사용예@import url('//fonts.googleapis.com/css?family=폰트이름:굵기1,굵기2'); @import url('//fonts.googleapis.com/css?family=폰트이름1|폰트이름2'); @import url('//fonts.googleapis.com/css?family=폰트이름&subset=언어종류'); 300i 즉 뒤에 i가 있으면 300의 이탤릭제(italic)입니다.
font-family: 'Raleway', sans-serif; 가능 굵기 (font-weight) : 100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i 추가 가능 언어: Latin(기본), Latin Extended 3.67 B
font-family: 'Montserrat', sans-serif; 가능 굵기 (font-weight) : 100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i 추가 가능 언어: Latin(기본), Latin Extended, Cyrillic Extended, Cyrillic, Vietnamese 3.67 B
font-family: 'Open Sans', sans-serif; 가능 굵기 (font-weight) : 300,300i,400,400i,600,600i,700,700i,800,800i 추가 가능 언어: Cyrillic, Cyrillic Extended, Greek, Latin(기본), Latin Extended, Vietnamese, Greek Extended 26.3 B
font-family: 'Roboto', sans-serif; 가능 굵기 (font-weight) : 100,100i,300,300i,400,400i,500,500i,700,700i,900,900i 추가 가능 언어:Vietnamese, Greek, Cyrillic Extended, Latin(기본), Cyrillic, Latin Extended, Greek Extended 43.8 B
font-family: 'Saira Semi Condensed', sans-serif; 가능 굵기 (font-weight) : 100,200,300,400,500,600,700,800,900 추가 가능 언어: Latin(기본), Latin Extended, Vietnamese 7.80 M
font-family: 'Ubuntu', sans-serif; 가능 굵기 (font-weight) : 300,300i,400,400i,500,500i,700,700i 추가 가능 언어: Cyrillic, Cyrillic Extended, Greek, Greek Extended, Latin(기본), Latin Extended 1.17 B
사람들이 자기만의 작업과 편의를 위해서 각자의 방식으로 편집기를 사용하고 있습니다. 저도 2개의 편집기를 혼용해서 사용할 정도로 각각의 편집기는 사용 빈도가 다른 것 같아 한번은 정리해 봐야지 싶었는데 이렇게 적게 되었습니다.
물론 이 포스트에서는 각각의 세팅 방법은 없고 소개 위주로 가겠습니다. 또한, 필자의 생각과 주변 자료들에 의해 적은 것이라 차이가 크게 날 수도 있습니다. 개발자를 빛나게 만드는 툴의 세계로 들어가 보겠습니다.
Sublime Text
기본적으로 많은 사람이 사용하고 어떤 편집기보다 강력한 기능이 있으며 가볍기까지, 그리고 모든 운영제제에서 사용 가능한 편집기입니다. 오래되기도 했고요. (2008년) 개인에 맞춰서 다양한 plug-in (package) 들을 깔아서 사용할 수 있습니다. 아쉬운 점은 한글 입력 지원이 힘들다는 점이 아쉽네요.
2014년 초에 발표되었으며 Github에서 만들어서 마크다운은 잘되는것 같고 보기에는 더 좋은 UI인것은 같습니다. 사용해 본결과 편리한것은 맞지만 다소 서브라임보다는 무겁다 는 생각이 많이 듭니다. 이것 역시도 여러 운영체제에 설치 가능하며 한글입역에 아쉬운 점은 없는것 같습니다.
마소(Microsoft)의 비베(Visual Basic)의 작은 에디터 격인 VSCode는 시작한 지 얼마 되지 않았는데도 많은 부분을 담고 빨리 성장하는 에디터 갔습니다. 얼마 전에 포스터를 적기는 했지만, Atom을 모티브로 한 것으로 보이는 부분만 제외하면 많은 부분이 성장하고 많은 사람이 이것을 쓰는 것 같습니다. 아직 마크다운에서는 Atom에게 뒤지지만 그래도 써보니 조금만 시간이 지나면 따라잡겠다 싶더군요. 아직은 atom이 마크다운에서는 좋은 것 같습니다.
adobe에서 만든 오픈소스 에디터로 html, CSS 코딩을 하는데 최적화된 좋은 도구입니다. 아직 많이 써보지는 못했지만 웹 퍼블리셔들에게 좋다고 해서 설치는 했지만 아직. 여러 기능들 중 Live Preview, JSLint 기능 등이 주로 사용하여 검사 또는 볼 수 있어서 한번 웹 할 때 사용해 보려고 합니다.
