[HTML/CSS] 알아두면 유용한 Site

출처 : http://onasaju.tistory.com/219

HTML 과 CSS 그리고 블로그 입문자를 위한 유용한 사이트 모음! - 2

이전 포스트에서는 블로그를 위한 블로그와 블로그를 위한 플러그인을 제공하는 사이트 및 블로그에 대해서 소개 했었습니다.

이번 포스트에서는 html 과 css 배우기에 유용한 사이트를 소개하려고 합니다.

html 과 css 입문자를 위한 사이트 모음과 웹 디자이너를 위한 툴 사이트 모음으로 구성되어 있습니다.

HTML 과 CSS 입문자를 위한 사이트

오픈 튜토리얼스

오픈 튜토리얼스는 프로그래밍 관련 오픈 강좌 컨텐츠들이 주를 이루는 곳이며, 공동공부를 통해서 온라인 공부에 대한 집중도와 지속성을 높여주는 매우 유용한 사이트 입니다. 모두 무료로 제공 되고 있으며, 프로그래밍이 아닌 기타 일반적인 생활 강좌들도 다수 포함되어 있으니 한번 방문 해 보시길 권장 합니다.

Link: 오픈튜토리얼스 리뷰 바로가기

Link: 오픈튜토리얼스 바로가기

Learn CSS Layout

CSS 로 만들 수 있는 레이아웃에 대해서 기본적인 개념을 배울 수 있는 곳 입니다. 한국어를 지원하고 있어서 이해하기 수월 합니다.

Link: http://ko.learnlayout.com

W3SCHOOL

HTML, CSS, JAVASCRIPT, JQUERY, PHL, SQL 를 초급 입문자 부터 고급 사용자까지 다양한 예제와 함께 누구나 쉽게 배울 수 있도록 도와주는 최고의 사이트가 아닌가 싶습니다.

LINK : http://www.w3schools.com

CSS-TRICKs

W3SCHOOL 과 유사한 사이트이지만, CSS에 중점을 두고, 각종 활용방법, 예제 등을 제공 합니다. 이곳에서 알게된 다른 유용한 사이트들도 많아서, CSS 활용 방법등에 대해서는 해당 사이트에서 대부분을 배우고 있습니다.

초급과정은 W3SCHOOL 에서 배우고, 활용방법은 CSS-TRICK 에서 배우면 좋습니다.

LINK : http://css-tricks.com

BASICUSE

초급자에게는 다소 어려울 수 있는 팁과 툴을 제공하는 곳일수도 있지만, 웹 프로그래밍, 웹 디자인 관련 정보들을 상세하게 설명하고 있습니다.

LINK : http://basicuse.net

홈짱 닷컴

HTML 과 CSS 를 배우는데 있어서 홈페이지가 한글로 되어있어서 이용하기가 수월하며, 쉽게 이해할 수 있습니다. 하지만 다양한 예제와 툴을 제공하지 않아서, 깊게 배우기에는 무리가 있어 보입니다.

HTML 과 CSS를 배우기에 앞서서 이해하는 목적으로 이용하면 좋을 것 같습니다.

LINK : http://www.homejjang.com

Red Design Team

html, css, javascript, 등을 활용해서 블로그에서 사용할만한 예제들을 제공 합니다.

Link : http://www.red-team-design.com

CSS Drive

CSS 를 활용해서 블로그의 스킨을 꾸미는데 필요한 예제를 제공 합니다. CSS 를 활용해서 블로그의 메뉴를 구성하는데 필요한 예제와 샘플들을 제공하고 있습니다.

Link : http://www.cssdrive.com

HTML 과 CSS 웹디자이너(블로그)를 위한 TOOL

HTML COLOR CODES

RGB 컬러 코드, 이미지 파일의 컬러 코드, 온라인 HTML 에디터, 등을 제공 합니다. 웹 사이트에서 사용할 수 있는 색상 코드표 등을 사용하기 쉽게 제공하고 있어서 색상 코드표가 필요할 때 유용하게 사용할 수 있습니다.

LINK : http://html-color-codes.info

CSS Matic

컬러 그래디언트 생성기, 경계선 반지름(라운딩), 노이즈 텍스처, 박스 쉐도우를 간단한 값을 입력해서 자동으로 css 코드를 생성해 주는 툴을 제공하는 사이트 입니다.

Link : http://www.cssmatic.com

WestCiv

CSS 관련 강좌를 제공하며, 유료 서비스와 무료 서비스로 나뉘어져 있습니다. 이곳에서 제공하는 Tool은 무료로 이용이 가능 합니다.

Gradients, Text-Shadow, Transforms, Text-Stroke 클릭 몇번으로 해당 CSS 관련 코드를 생성할 수 있습니다.

Link : http://westciv.com

CSS3 Generator

좀 더 다양한 css 툴을 제공하며, css에서 사용할 값을 지정 해 주면, 해당 css 가 적용된 박스를 보여주며 코드를 복사할 수 있도록 제공 합니다.

Link : http://css3generator.com

Dynamic Drive Dhtml

image optimizer, favicon generator, animated GIF, 등등 다양한 웹 툴을 제공 하는 사이트 입니다.

Link : http://tools.dynamicdrive.com

jsbeautifier

자바스크립트와 html 을 아름답게 바꿔주는 툴을 제공하는 곳 입니다. html 소스 코드가 문단 나누기, 부모 태그, 자식 태그 등으로 이루어지지 않아서 원하는 항목을 찾기 불편하고, 눈까지 아팠다면?

그러한 html 과 자바스크립트 소스를 해당 툴에 붙혀넣기 해서 클릭 한번만으로 아름답게 바꿀 수 있습니다.

Link : http://jsbeautifier.org

CSS Prefixer

스타일 시트(CSS)는 모든 브라우저에서 동일하게 출력이 되지는 않습니다. 모든 브라우저 및 버전에도 내 블로그에 적용한 CSS 가 적용되기를 원한다면 CSS 코드 앞에 접두사를 붙혀주어야 하는데요.

일일히 접두사를 붙히려면 매우 불편한 사항이 될 수 있습니다. 그러한 분들을 위한 툴을 제공하는 사이트라고 보시면 될 것 같습니다.

Link : http://cssprefixer.appspot.com

JSBIN.com

html, css, javascript, 기타등등 내가 만든 소스코드를 실시간으로 바로 확인할 수 있으며, 해당 소스코드의 페이지 링크를 공유할 수 있으며, embed 태그를 이용해서 내 블로그에 적용할 수도 있습니다.

html, css, javascript 강좌, 팁 관련 글을 자주 작성하시는 분들이 이용하면 좋을 것 같습니다. 내가 적용한 css 가 어떤 소스 코드들로 만들어졌는지, 또 결과 값은 어떻게 반영이 되는지를 바로 보여줘서 모든 이들이 이용하기에 좋습니다.

Link : http://jsbin.com/

JS fiddle

JS bin.com과 같은 서비스를 제공하는 곳 입니다. 공유 링크를 제공하며, embed는 iframe 방식으로 제공을 하고 있습니다. 또한 바로 페이스북 담벼락에 게시도 할 수 있습니다.

Link : http://jsfiddle.net

Code Pen

위의 두곳과 같은 툴을 제공하는 곳 입니다. 다른 사람들이 만든 코드를 보여줘서, html, css, javascript를 배우기에 매우 유용 합니다.

앞서서 배운 html과 css를 이와같은 사이트에서 연습하고 적용하고 공유하는 방식으로 이용하면 매우 유용하게 사용할 수 있으며, html과 css 배우는 속도를 높일 수 있습니다.

Link : http://codepen.io

Color Hex

RGB, HSL을 비롯한 웹에서 사용할 수 있는 다양한 색상 코드표를 검색하고 사용할 수 있도록 도와주는 툴을 제공하는 서비스를 하는 곳 입니다.

Link : http://www.colorhexa.com

본문에서 사용된 CSS

이번 포스트에서 사용된 CSS 역시 이전 포스트와 마찬가지로 두가지의 스타일 시트를 적용 했는데요. 소개하는 사이트 이름과 캡처한 이미지 파일의 경계선 스타일을 추가해서 적용 했습니다.

이번에 사용된 스타일은 다른 사이트에서 보고 마음에 들어, 서식으로 저장해뒀던건데, 어느 사이트에서 참고 했는지 기억이 나지를 않네요. ㅎㅎㅎ

관련 글

2014/02/08 - [WebSite] - 블로그를 위한 블로그(플러그인) 모음 01