이전에 소개해드린 브라켓은 개발 버전이고 엣지 코드는 배포 버전입니다. 두 개의 에디터가 동일하지만 확장 프로그램 작동에 있어서는 차이가 나더군요. 일부는 설치를 해야 작동하는 기능도 있습니다. 엣지 코드는 크리에이티브 클라우드(Creative Cloud, 이하 CC) 형태로 사용이 가능합니다. 아래의 링크에서 CC 관리자를 내려받아 설치하세요. CC이므로 어도비 계정이 있어야합니다. http://html.adobe.com/edge/code/ Try 버튼을 클릭하면 CreativeCloudSet-Up.exe 파일을 내려받을 수 있습니다. 간혹 안되는 경우가 있는데 아래의 링크에서 직접 내려받을 수 있습니다. https://ccmdls.adobe.com/AdobeProducts/ASCT/1_1/win64/..
어도비에서 만든 브라켓(Brackets)이라는 텍스트 에디터는 2012년에 나와서 아직 개발 중이지만 안정적으로 작동하고 오픈소스로 개방돼있어서 무료로 사용할 수 있습니다. 혁신적이라 할 만큼 기존의 텍스트 에디터에서는 볼 수 없는 여러가지 새로운 기능들이 있습니다. 반면에 당연히 있어야할 기능은 없는 경우도 있습니다. 이 에디터의 특징은 웹사이트를 만드는 언어인 HTML, CSS, 자바스크립트로 만들어졌기 때문에 원할 경우 이들을 수정해서 다른 기능을 추가할 수도 있습니다. 하지만 되도록이면 확장 프로그램을 개발해서 사용할 것을 권장합니다. 대부분의 경우 이러한 프로그램을 플러그인이라고 하는데 어도비에서는 확장 프로그램(Extensions)이라고 하더군요. 브라켓 에디터가 계속 개발 중이니 첨부되거나 ..
워드프레스 플러그인 클라우드인 젯팩이 최근에 2.3 버전으로 업데이트 됐습니다. 이중에 두가지 기능에 대해 알아보겠습니다. 기타 다른 플러그인이나 설치방법에 대해서는 제 블로그에서 젯팩으로 검색하면 많이 나옵니다. 두개의 플러그인이 신규로 추가됐습니다. 옴니서치(Omnisearch)와 젯팩 디버거인데요. 옴니서치는 워드프레스 사이트 내의 모든 내용을 검색할 수 있습니다. 디버거는 젯팩 플러그인과 다른 플러그인과의 충돌을 점검할 수 있습니다. 활성화 버튼을 클릭하면 아래처럼 젯팩 메뉴에 하위 메뉴가 추가됩니다. 검색어로 검색하면 글, 페이지, 댓글, 플러그인, 피드백 등 사이트 내의 모든 것을 검색할 수 있습니다. 디버그 메뉴를 선택하면 사이트가 젯팩과 호환되는지, 다른 플러그인과 문제가 없는지 점검합니다..
웹을 돌아다니다보면 나도 몰래 설치돼서는 어느날 갑자기 이상한 배너들이 웹브라우저에 나타나서 이를 어떻게 제거해야하는지 난감하기도 합니다. 어떤 경우는 유명한 사이트에서 웹브라우저를 내려받아 설치했는데도 해당 웹브라우저를 사용하면 초기 화면이 원하지 않은 검색 프로그램으로 시작하기도 하죠. 대표적인 사이트가 softonic.com입니다. 참고--> http://martian36.tistory.com/1305 이런데서 파일을 내려받으면 속도는 빠르지만 악성코드가 삽입돼있어서 광고 배너가 뜨거나 초기화면이 Web Search 라는 검색 사이트가 나오는 등 사용하기 불편하게 합니다. 프로그램을 제거하고 구글 크롬 정식 사이트에서 내려받아 다시 설치해도 마찬가지의 악성코드가 활동합니다. 이런 악성 코드는 웹브라..
워드프레스 쇼핑몰 만들기 첨부파일 안녕하세요. 저자입니다. 책을 보면서 책의 내용과는 전혀 다른 테마를 적용하시는 경우 상당히 어렵게 배우시는 것입니다. 책 내용을 숙지한 다음 해야 다른 테마도 쉽게 적용할 수 있습니다. 갖고 있는 테마도 잘 사용을 못하는데 어떻게 쇼핑몰까지 적용을 할 수 있겠습니까. 반드시 책을 전체 읽고 따라한 다음 다른 테마를 적용해보세요. 급하더라도 이렇게 해야 쇼핑몰 만들기가 익숙해집니다. 다른 테마를 사용하면서 잘 안된다고 질문하시는 경우 저도 해당 테마를 사용해봐야 하기 때문에 답변에 상당한 시간이 걸리니 이와 관련된 질문은 사양하겠습니다. 질문 내용은 책의 범위 안에서 제한하겠습니다. 책의 내용에서 안되는 것이 있으면 아래 첨부 파일의 wordpress10을 사용해서 로컬..
부트스트랩 3.0이 최근 버그 수정이 여럿 이루어졌고 두드러진 변경은 예제로 Off Canvas라는 레이아웃이 추가됐습니다. 이는 Mobile First라는 용어를 처음 사용한 Luke Wroblewski가 그의 같은 제목의 저서에서 제안한 레이아웃입니다. 이를 Jason Weaver라는 개발자가 자바스크립트로 만들어냈는데 Github에서도 Fork가 이루어지고 있고 Brad Frost 가 만든 레이아웃을 부트스트랩 3.0에 도입했습니다. 부트스트랩 문서에는 아직 정리가 안돼서 마지막 예제 썸네일이 나오지 않지만 제가 추가했습니다. 템플릿과 예제의 마지막 썸네일입니다. 이를 클릭하면 해당 페이지가 나오는데 스마트폰에서 보면 위의 그림처럼 컨텐트 영역에 화살표 아이콘이 나타납니다. 이를 탭하면 사이드바가 ..
지난 6일간 업데이트가 있었는데 주요 부분은 그리드 시스템입니다. 이미 언급한대로 도움말 문서 부분에서 정상적으로 업데이트 됐습니다. 이전의 경우 .col 선택자와 .col-lg-* 또는 .col-sm-* 선택자를 병용해서 그리드를 만들었는데 이것이 .col 선택자를 제거하고 사용하면서 3개의 기기 형태에 따라 선택자가 다릅니다. 스마트폰인 480이하에서는 .col-숫자, 태블릿 pc인 768이하에서는 .col-sm-숫자, 데스크탑인 768 이상에서는 .col-lg-숫자 입니다. 여러가지 선택자가 있는 것은 해당 사이즈에서 다르게 표현하기 위해서입니다. 물론 하나의 선택자만 사용해도 됩니다. 스마트폰과 데스크탑, 스마트폰, 태블릿 pc, 데스크탑의 사용예입니다. examples 폴더에서 gid 폴더의 i..
그동안 나눔 고딕체를 적용하는 방법은 테마 변경에 따라서 다시 설정해줘야하는 번거로움이 있었습니다. 이번에는 웹폰트 플러그인을 사용해서 테마가 변경되더라도 항상 나눔고딕체가 적용되도록 하는 방법을 알아보겠습니다. 플러그인 추가하기에서 WP Google Fonts로 검색해서 설치합니다. 설정-->구글폰트를 선택하면 우측에 창이 나옵니다. 첫번째 폰트 선택 박스에서 아무 폰트나 선택하고 1,2,4 항목의 모든 체크박스를 선택해제합니다. 3의 입력박스에는 다음의 코드를 넣어주고 저장버튼을 클릭합니다. @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ) ;body, h1, h2, h3, h4, h5, h6, li, p { font-fa..
5월 23일 변경사항 업로드 후에 별로 변경된 것은 없고, 정리 차원에서 외부 URL이 수정됐습니다. 중요한 부분에서 수정이 진행되고 있는 부분이 그리드 시스템입니다. 아직 진행중인데 아주 어려운 부분인가 봅니다. 이전의 경우 .col 선택자와 .col-lg-* 또는 .col-sm-* 선택자를 병용해서 그리드를 만들었는데 이것이 .col 선택자를 제거하고 사용하도록 할 모양입니다. 즉 .col-lg-* 또는 .col-sm-* 만으로 그리드를 만드는 것이죠. 스타일시트에는 적용됐지만 도움말 문서에는 수정이 안됐습니다. 여러가지 웹브라우저, 특히 모바일 웹브라우저에서 나타나는 이상 증상을 해결하느라고 시간이 좀 걸리나 봅니다. 부트스트랩 3.0 6월 8일 현재 미리보기 --> http://twitter-bo..
다폰트의 경우 폰트를 만든 사람이 직접 업로드해서 폰트를 소개하는 곳이지만 이러한 작업을 원치않는 경우 좋은 무료 폰트를 만나기 어렵습니다. freetypography.com은 이러한 폰트를 찾아서 소개하는 사이트입니다. 대부분이 상업용으로 사용해도 되는 폰트이지만 전체를 확인해보지는 않았으니 상업용으로 사용할 경우 일일히 확인하시는 것이 좋습니다. http://freetypography.com 이곳의 폰트를 몇가지 알아보겠습니다. Drebeden Accent Mosaic Leaf Prosto Valentina GOTA
최근 다폰트 추천 폰트Archistico 59,333 downloads (1,784 yesterday) Free Download Archistico Simple.ttfNote of the authorFor news go to the website: www.archistico.com First seen on DaFont: May 16, 2013 개인용 상업용 무료 Essence Sans 51,180 downloads (4,001 yesterday) Free - 6 font files Download Essence Sans Light.ttfEssence Sans Light Italic.ttfNote of the authorEssence Sans Hi, thanks for downloading my font ..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. CSS3 Microsoft Modern Buttons 윈도우 8 메트로 스타일 버튼 프로그램 사이트 : http://ace-subido.github.io/css3-microsoft-metro-buttons/index.html Pixate iOS 앱 개발 프레임워크, XCODE를 이용, 개인용 무료임. 안드로이드용은 추후 발표 프로그램 사이트 : http://www.pixate.com/ HTML KickStart 부트스트랩 관련 프로젝트는 아니지만 부트스트랩과..
