음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2015.06.08 18:00 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

SVG Stroke Properties

SVG는 다양한 범위의 선긋기 속성을 제공한다. 

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray
모든 선긋기 속성은 어떤 종류의 선이든 텍스트 그리고 원같은 요소의 테두리에 적용이 가능하다.

SVG stroke Property
stroke 속성은 색상을 결정한다.
Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>


SVG stroke-width Property

stroke-width 속성은 선의 두께를 결정한다.

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
<>


SVG stroke-dasharray Property
stroke-dasharray 속성은 점선을 표현할 때 사용한다.
Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>


출처 W3School.com - SVG - Stroking

http://www.w3schools.com/svg/svg_stroking.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Blur Effects  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08
SVG Path  (0) 2015.06.08
SVG Polyline  (0) 2015.06.08
준돌 Jundol / 2015.06.08 16:32 / CSS/Lib



브라우저의 종류는 여러가지가 있다.

IE , Chrome , FF , Opera , Safari 등 많은 브라우저가 있는데

브라우저마다 CSS속성의 기본값이 전부 제각각이다.

때문에 크로스 브라우징 할 때 퍼블리셔들은 CSS의 늪에 빠지기 쉽다.

그리하여 전부 똑같은 CSS 초기값을 주기 위해 css reset 초기화 라이브러리가 생겨났다.

사용법은 css소스코드를 자신의 프로젝트의 main.css 의 최상단에 넣거나 css를 불러올때 맨 처음 불러오면 된다.


1. Eric Meyer's 의 "Reset CSS" 2.0

출처 : http://meyerweb.com/eric/tools/css/reset/

reset.css


2. HTML5 Doctor CSS Reset

출처 : http://html5doctor.com/html-5-reset-stylesheet/

HTML5doctor_Reset.css


3. Yahoo! (YUI 3) Reset CSS

출처 : http://yui.yahooapis.com/3.18.1/build/cssreset-context/cssreset-context-min.css

yui3_reset.css


4. Universal Selector '*' Reset

출처 : http://cssreset.com/scripts/universal-selector-css-reset/#code-examples

Universal SelectorReset.css


5. normalize.css

출처 : http://necolas.github.io/normalize.css/

normalize3.0.2.css


다섯가지 중 가장 유명한건 1번의 Eric Meyer's 의 Reset.css 와 5번의 normalize.css 이다.

특히 5번의 normalize.css 는 트위터, 깃헙 , 사운드클라우드 , 부트스트랩 등등 다양한 곳에서 검증받고 사용되고있으므로 믿고쓰는 reset.css 이다.


참조 

1. cssreset.com 2015's most popular CSS Reset scripts, all in one place

http://cssreset.com/

2. image 참조

http://123cuss.blogspot.kr/2012/08/collection-css-reset.html

'CSS > Lib' 카테고리의 다른 글

CSS 초기화 도구 5가지  (0) 2015.06.08
준돌 Jundol / 2015.06.08 12:14 / HTML5/SVG





현재 캔버스로 개발되어있는 편집기가 하나하나의 객체가 많아지다보니 렌더링 시간이 꽤나 오래 걸리기 시작했다.

또한 캔버스 기반 편집기는 렌더링시마다 서버와 통신을 해서 바뀐 정보를 하나하나 보낸 뒤 다시 받는 형식으로 개발되어있다.

SVG로 변경하게 되면 서버와의 통신을 줄일 수 있고, 좀더 클라이언트 기반으로 편집기 엔진이 변경될 것 같아 SVG 스터디를 시작하려 한다.


SVG 의 위키백과부터 살펴보았다.


SVG(Scalable Vetor Graphics) 는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화,목록화,스크립트화가 가능하며 필요하다면 압축도 가능하다.

SVG 형식의 파일은 SVG기반의 전문 그래픽 편집 프로그램을 사용하여 편집이 가능하다. 물론 XML 파일로 되어 있으므로 문서 편집기로도 편집이 가능하다.

현재 MS의 IE8 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원한다. 인터넷 익스플로러에서는 SVG파일을 보기 위해 별도의 플러그인을 수동으로 설치하여야 하며, 그렇지 않은 경우에는 웹 페이지 제작자가 구글 코드에서 개발중인 JS 라이브러리, SVG Web을 웹 페이지 코드에 포함시켜야 한다.


웹 브라우저에서의 SVG 지원

  • IE에서는 IE9부터 SVG를 지원한다.
    IE를 위한 플러그인이 어도비 사에서 나왔으나, 09년 1월 1일부터 지원을 중단.
  • 오페라는 8.0 beta3부터 SVG 1.1 Tiny 를 지원한다.
  • FF(1.5베타 1 이후) 는 SVG 1.1 의 지원을 위한 기능을 개발 중이다.


W3School SVG

SVG는 스케일러블 벡터 그래픽스 기반이다.

SVG는 XML형식의 벡터기반 그래픽으로 정의되어있다.


선행되어야 할 학습

  • HTML
  • 기본 XML
SVG란 무엇인가
  • SVG 는 스케일러블 벡터 그래픽 기반이다.
  • SVG 는 줌인/아웃 , 리사이즈 했을 때 화질이 떨어지지 않는다.
  • SVG내의 모든 요소와 모든 속성들은 animate가 가능하다.





'HTML5 > SVG' 카테고리의 다른 글

SVG Line  (0) 2015.06.08
SVG Ellipse  (0) 2015.06.08
SVG Circle  (0) 2015.06.08
SVG rect  (0) 2015.06.08
SVG in HTML  (0) 2015.06.08
웹기반 편집기 개발을 위한 SVG 정리  (0) 2015.06.08
준돌 Jundol / 2015.05.13 11:34 / CSS/Framework


부트스트랩은 트위터에서 만든 오픈소스 웹 디자인 프레임워크이며 무료로 다운로드를 받을 수 있고 무료로 사용이 가능해요.

부트스트랩?

  • 부트스트랩은 웹 개발에 빠르고 편리한 무료 프론트엔드 프레임워크에요
  • 부트스트랩은 HTML 과 CSS 를 기반으로 디자인한 템플릿과 타이포그래피, 양식, 버튼, 표, 네비게이션, 모달, 이미지 carousels 그리고 다른 훌륭한 자바스크립트 플러그인들을 옵션으로 갖추고 있어요.
  • 부트스트랩은 여러분에게 쉽고 강력한 반응형 웹 디자인을 제공할 거에요.

부트스트랩 역사

  • 부트스트랩은 Mark Otto 와 Jacob Thornton 이 트위터에서 개발했어요. 그리고 2011년 8월 깃헙에 오픈소스 제품으로 공개했죠.

왜 부트스트랩을 쓰나요?
부트스트랩을 썼을 때 얻는 (개)이득 :
  • 사용하기 쉬어요! : HTML 과 CSS에 기본적인 지식이 있는 누구든지 부트스트랩을 사용할 수 있어요.
  • 반응형 특징 : 부트스트랩은 반응형 CSS로 스마트폰, 태블릿 그리고 데스크탑에 적용이 가능해요
  • 휴대용기기를 일순위로 둬요 : 부트스트랩3에서는 휴대기기를 일순위로 두는 코어 프레임워크에요
  • 브라우저 호환성 : 부트스트랩은 최신 브라우저들간의 호환성이 높아요. (크롬,파이어폭스,익스플로러, 사파리 그리고 오페라)

어디서 얻을 수 있나요?
부트스트랩을 얻는 방법은 두 가지가 있어요
  • getbootstrap.com 에서 다운로드 받은 후 직접 제공하는 방법
    만약 직접 다운로드해서 부트스트랩을 직접 호스트하여 제공하려면 위 url에 접속해서 다운받으면 되요.
  • CDN 으로 링크를 포함하는 방법
    부트스트랩은 압축된 CSS와 자바스크립트 파일을 제공하고 있어요. 또한 제이쿼리를 기반으로 개발하였기 때문에 사용하기 위해선 제이쿼리를 써야해요











자 그럼 이제 부트스트랩을 적용한 첫 번째 웹 페이지를 만들어 봅시다.

1. HTML5 문서타입을 추가해주세요.

부트스트랩은 HTML 요소와 CSS 속성들이 HTML5 문서타입을 요구해요.

항상 HTML5 문서타입을 웹페이지의 시작부분에 추가해주세요. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>


2. 부트스트랩3는 휴대기기를 우선으로 둡니다.

 부트스트랩3 는 모바일기기에 반응형으로 적용되도록 설계되었습니다. 휴대기기를 우선 하는 스타일은 코어 프레임워크의 한 부분입니다. 렌더링과 터치 확대를 제공하기 위해서는 <head> 태그 안에 <meta> 태그를 아래와 같이 입력하여야 해요.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 는 페이지의 폭을 휴대기기의 스크린 폭에 맞추도록 하는 부분입니다.

initial-scale=1 는 브라우저에서 처음 웹 페이지를 로딩하였을 때 초기 확대 레벨을 지정하는 부분입니다.


3. 컨테이너(Containers)

부트스트랩은 보통 사이트의 내용들을 컨테이너를 이용하여 감싸 놓습니다.

컨테이너에는 보통 두 개의 컨테이너가 있어요.

(1). .container 클래스는 컨테이너의 폭이 고정되어서 반응하는 클래스 지정자에요

(2). .container-fluid 클래스는 컨테이너의 폭이 페이지의 전체 폭에 맞춰서 반응형으로 제공되요.

주의 : 컨테이너는 중복해서 넣을 수 없어요. 컨테이너 안에 컨테이너를 또 넣을 수 없어요.


두 개의 예제를 보고 차이점이 어떤지 느껴보세요.

1. .container 를 사용한 경우

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container&stacked=h

2. .container-fluid 를 사용한 경우

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container-fluid&stacked=h


출처 : 

1. w3schools.com

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

2. 엔하위키미러 부트스트랩

https://mirror.enha.kr/wiki/Bootstrap

3. 부트스트랩 공식 홈페이지

http://bootstrapk.com/

© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
97 / 48 / 93,398