WEBDIR

HTML5 Boilerplate(보일러 플레이트) - main.css 파일 분석 #3

보일러 플레이트의 main.css의 구성을 살펴보고 이에 대한 해설을 덧붙였습니다. 보일러 플레이트 main.css 버전에 따라 아래의 내용은 상이할 수 있음에 유의하자. /*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ===================..

프레임워크/보일러플레이트 2015. 8. 27. 11:00

HTML5 Boilerplate(보일러 플레이트) - index.html 파일 분석 #2

보일러 플레이트의 index.html의 구조를 살펴보고 이에 대한 해설을 덧붙였습니다. 이미 전에 거론했었던 부분들은 링크로 대체했습니다. 아래에서 설명되는 내용은 Download v5.2.0을 기준으로 설명되어 있습니다. 버전별로 내용이 다를 수 있으니 유념합시다. // #1 // #2 Hello world! This is HTML5 Boilerplate. // #11 // #11 // #12 // #12 // #13 #1 문서형식 선언 브라우저에 의해 처리될 문서가 어떤 버전의 마크업 언어로 작성되었는지 알려준다. 문서형식은 HTML 문서가 표준모드(Standard mode)로 렌더링될지 비표준모드(Quirks mode)로 렌더링 될지를 결정하게 된다. DOCTYPE이 선언되지 않았다면 비표준모드로 ..

프레임워크/보일러플레이트 2015. 8. 26. 11:00

HTML5 Boilerplate(보일러 플레이트) 소개

웹에서 가장 인기있는 프런트엔드 템플릿... 소개페이지에 그렇게 문구가 적혀있습니다. HTML5 관련 자료들을 찾다보면 자주 마주치는 템플릿이기도 하고 각종 추천되는 소스들이 총집합 되어있어 처음 시작하는 사람들은 물론 체계적인 구성이 필요한 분들이라면 꼭 한 번쯤 살펴보길 권하는 템플릿입니다. 보일러 플레이트 소개 HTML5로 프로젝트를 이제 막 시작하거나 CSS의 다양한 지원을 원하는 개발자라면 HTML5 보일러 플레이트의 사용을 고려해 보자. 이것은 필수적인 스타일과 폴리필, 모더나이저 같은 툴을 포함하여 HTML5를 사용함에 있어 크로스브라우징을 좀더 쉽게 도와주는 템플릿이다. 또한, 자동으로 CSS와 JS 파일을 합치고 주석을 제거해 제품 출시가 가능한 코드를 만들어주는 툴도 포함하고 있다. 이..

프레임워크/보일러플레이트 2015. 8. 25. 11:00

Normalize.css - CSS 초기화

브라우저마다 다르게 보이는 스타일들을 하나로 통일시키기 위해 자주 사용되는 것 중에 하나입니다. 계속적으로 보완되고 있는 프로젝트라 기준으로 잡고 스타일링을 하는데 도움이 될 것입니다. Normalize.css 소개 Normalize.css는 HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS 파일이다. 이것은 Boilerplate(보일러플레이트) 및 Bootstrap(부트스트랩) 등과 같은 크고 작은 프로젝트에서도 두루두루 사용되고 있다. HOME Normalize.css Project Site REPO Normalize.css source on GitHub Normalize.css 특징 브라우저(모바일 브라우저를 포함하여)를 광범위하게 지원하며, HTML5 요소, 타이포그래피,..

웹코딩/CSS 2015. 8. 24. 11:00

IE 조건부 주석 (Conditional Comment)

어딘가에 적어뒀다고 생각했는데 찾질 못해 새로 작성하는 글입니다. 아직도 크로스 브라우징을 위해 많이 사용되고 있습니다. 조건부 주석 소개 조건부 주석은 IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용된다. 조건부 주석 기본 문법 아래와 같이 기본형에 알맞은 조건을 기입하고 이를 만족할 경우, HTML 코드를 렌더링하게 된다. 구문 처음의 조건부 사용되는 기호는 : ! : 아니다(not) - 예) [if !ie] ie가 아니라면 lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면 lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같..

웹코딩/HTML 2015. 8. 21. 11:00

Gravatar - 사용자의 아바타와 프로필을 불러오기

웹 애플리케이션을 만들때, 굳이 DB에 회원의 아바타나 프로필을 저장할 필요가 없다면(대부분 개인정보를 수집하기를 원할테지만...), 미리 입력되어 있는 해당 인물의 정보를 불러들여 가입시 회원정보를 입력하는 수고를 덜게 할 수 있는 애플리케이션들이 있습니다. 외국 웹 애플리케이션에서는 이를 연동하여 제작되는 것들을 종종 확인할 수 있습니다. Gravatar 소개 그라바타(Gravatar - Globally Recognized Avatar)는 이메일주소를 기반으로 사용자의 프로필과 아바타를 등록해두고 필요에 따라 불러들여 매번 각각의 애플리케이션마다 이를 작성해야 하는 노고를 줄여주는 애플리케이션이다. 매일 80억건 이상의 아바타 이미지가 그라바타에 의해 서비스되고 있으며, WordPress, githu..

웹코딩/App,Plugin 2015. 8. 17. 11:00

Noto Sans(본고딕) 웹폰트

Noto Sans를 웹폰트로 만들어 배포되고 있는 것들을 테스트하고 이를 소개하는 내용입니다. 웹폰트 사용을 고려하시는 분들께 도움이 되길 바랍니다. Noto Sans 웹폰트 소개 Noto Sans 웹폰트는 Noto Sans CJK를 웹폰트로 사용하기 위해 한국어 버전인 Noto Sans CJK KR에서 자주 쓰이는 완성형 한글 2,350자(KS X 1001 표준) 만 추출하여 만들어지고 있다. 이 제작과정은 한글 웹 폰트 경량화해 사용하기에 자세히 설명되어 있으며, 이를 이용해 NotoSansKR-Hestia라는 웹폰트가 공유 되고 있다(이하 Noto Sans Korean 이라고 칭함). 또한, 본고딕(Noto Sans) 웹폰트 사용하기에서도 비슷한 웹폰트를 배포(이하 notokr 이라 칭함)하고 있으..

웹코딩/CSS 2015. 8. 14. 11:41

RadarURL - 실시간 접속자 방문통계 #2

이전에 살펴본 Who's among.us 와 마찬가지로 사이트나 블로그에 실시간으로 현재 접속자를 파악할 수 있게 도와주는 위젯입니다. RadarURL 소개 레이더 위젯은 무료로 제공되는 실시간 통계 위젯이다. 위젯 홈페이지에 접속해서 실시간 데모 및 간단 사용법을 살펴 볼 수 있다. HOME RadarURL RadarURL 사용 이유 웹사이트에 얼마나 많은 방문자가 접속해있는지 확인 가능하다. 방문자들이 어떤 경로로 접속했는지, 어떤 페이지를 보고 있는지 확인 가능하다. 웹사이트 분석을 향상시키기 위해 고급진 장기간의 통계를 제공한다. 부하량과 트래픽 동향을 이해한다. 그냥 재미로 설치해보는 건 어때? RadarURL 사용법 RadarURL에 접속해서 단계별로 진행하면 된다. 1. 위젯이 표시될 위치 ..

웹코딩/App,Plugin 2015. 8. 13. 11:00

Who's among.us - 실시간 접속자 방문통계

웹사이트나 블로그에 현재 접속자를 표기하고 싶을때가 있습니다. 구글 애널리틱스나 네이버 애널리틱스는 이를 비롯해 더 많은 기능을 보유하고 있지만 간단한 기능과 위젯표기를 원한다면 아래에서 설명하는 위젯을 추천합니다. who's amung.us 소개 웹 사이트 또는 블로그에 대한 무료 실시간 통계를 제공한다. 프로 버전은 유료이고 더 많은 기능을 지원한다. 블로그나 웹사이트 페이지에 위젯 코드를 추가하면 작동하기 시작한다. 위젯은 현재 웹사이트를 탐색하는 사람의 수(현재 접속자)를 표시한다. 또한 크롬이나 파이어폭스를 위한 플러그인을 제공한다. HOME Who's among.us 위젯 기능 위젯을 클릭하면 상세한 실시간 통계 페이지를 보여준다. 방문자가 사이트에 동시에 접속한 수량을 시간 별로 확인할 수 ..

웹코딩/App,Plugin 2015. 8. 12. 11:00

TimelineJS - 시간의 흐름을 네비게이션화

이력, 연혁등 시간의 흐름을 표시하는 페이지가 필요할때 이를 좀 더 역동적으로 표현할 수 있는 도구들 중에 하나인 TimelineJS에 대해 소개합니다. 기존 버전에서 버전 3으로 업데이트 되었습니다. TimelineJS 3 소개 TimelineJS 3는 기존 버전에서 작성자와 개발자들에게 좀 더 유연함을 제공할 수 있도록 전체 재작성 되었다. 많은 부분을 비틀었는데, 유명한 도구이다보니 기존 사용자들을 위해 기존 버전을 지속적으로 제공하고 있다. HOME TimelineJS DEMO 휘트니 휘스턴 연대기 TimelineJS 3 새로운 점 유연한 행(row) 레이아웃 : 더 이상 3/6 행의 제한이 없다. 캡슐화 : 페이지당 하나 이상의 타임라인이 가능하다. 매우 거대한 시간간격을 지원 : 공룡! 빅뱅!..

웹코딩/App,Plugin 2015. 8. 11. 12:30

Highlight.js - 코드 구문 강조

코딩을 주로 다루는 분들은 이를 표기해주는 몇몇 플러그인들이나 라이브러리들을 이미 사용하고 계시거나 온라인 하이라이팅 서비스를 이용하고 계실겁니다. Highlight.js 또한 그런 라이브러리 중에 하나로 설치 경험을 서술합니다. Highlight.js 소개 Highlight.js는 자바스크립트로 쓰여진 코드 구문 강조를 위한 라이브러리이다. 브라우저뿐만 아니라 서버에서도 잘 작동한다. 어떠한 프레임워크에도 의존하지 않고, 거의 모든 마크업에서 작동하며 자동 언어 감지 기능을 가지고 있다. HOME highlight.js REPO isagalaev/highlight.js DOC documentation 130개의 언어와 65가지의 스타일을 제공한다. Live Demo 자동으로 사용된 코드 구문을 찾아 알..

웹코딩/App,Plugin 2015. 8. 7. 11:00

matchHeight - 요소간의 높이 통일화

플로트 시킨 요소들이나 여러 항목을 가진 요소들의 높이를 일치시켜야 할 때가 있습니다. 서로 다른 높이를 가진 요소들을 일관된 높이로 통일시키는 플러그인이 있어 이를 소개합니다. matchHeight 소개 matchHeight는 선택한 모든 요소의 높이를 정확히 일치시킨다. 비슷한 종류의 플러그인들이 실수하는 예외적인 경우들을 처리했다. HOME matchHeight REPO matchHeight Repository DEMO matchHeight 데모 matchHeight 특징 자동적으로 그룹의 요소들에 대한 높이를 일치시킨다. 최대 높이를 사용하거나 특정 대상 요소를 정의한다. 페이지의 어디든지, DOM 구조안의 어디든지 제약이 없다. 반응형(창 크기 조정이 될때 업데이트) 행(row) 인식(플로팅요소..

웹코딩/App,Plugin 2015. 8. 6. 11:00

Holder - 클라이언트 측에서 이미지 예제 제공

이전에 다뤘던 이미지 예제(placehold) 제공 웹서비스를 클라이언트 측에서 제공할 수 있도록 도와주는 라이브러리입니다. 웹서비스에서 제공하는 것보다 많은 것들을 설정할 수 있기에 이에 대하여 알아봅니다. Holder 소개 Holder는 지정한 자리에 이미지를 대체하는 라이브러리로, Cnavas와 SVG를 사용하여 색상, 폰트, 창의 크기 변화에 대한 동작을 설정할 수 있다. 무엇보다 유동적으로 창 크기가 변경되는 환경을 지원하기 때문에 활용도가 높다. HOME Holder 브라우저 지원 Chrome Firefox 3+ Safari 4+ IE9+ (일부 6~8지원) Opera 12+ Android(with fallback) Holder 사용법 HTML 문서에 holder.js 를 삽입한다. Holde..

웹코딩/App,Plugin 2015. 8. 5. 11:00

이미지 예제(placehold) 제공 웹서비스

웹 개발시에 초안으로 작성하는 목업에 사용될 이미지나 예제로 사용되는 이미지를 제공하는 웹서비스들이 있습니다. 이에 관하여 간단히 살펴봅니다. PLACEHOLD.IT PLACEHOLD.IT은 디자인 혹은 코드 작성시에 사용될 이미지를 빠르고 간단하게 삽입하는 서비스이다. 제공되는 URL과 지정할 이미지의 너비 및 높이를 입력하는 것으로 모든 것이 완료된다. HOME PLACEHOLD.IT lorempixel lorempixel은 디자인 혹은 코드 작성시에 사용될 이미지를 빠르고 간단하게 삽입하는 서비스이다. PLACEHOLD.IT 서비스보다 좀 더 많은 기능을 제공한다. HOME lorempixel 기본형 : 랜덤으로 지정한 크기의 이미지가 출력된다. 흑백형 : 랜덤으로 지정한 크기의 이미지가 흑백으로 ..

웹코딩/App,Plugin 2015. 8. 4. 11:00

poly-checked - :checked 의사 클래스 크로스브라우징

:checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다. poly-checked 소개 IE8과 그 이하에서 :checked 의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다. HOME poly-checked DEMO 라이브 데모 poly-checked 사용법 jQuery 1.7 이상의 버전이 필요하며, IE 조건부 주석을 이용하여 이를 삽입한다. 스크립트가 삽입되기 이전에 모든 스타일시트(CSS) 파일이 삽입되어야 한다. poly-check..

웹개발론/크로스브라우징 2015. 8. 3. 11:00