23f3f

2014년 2월 11일 화요일

[css] Vendor prefix 밴더 프리픽스 사이트 활용법

지난시간에 border-radius속성을 공부하면서 잠깐 밴더 프리픽스(Vendor prefix)을 사용해봤는데여 css를 하당보면 밴더 프리픽스(Vendor prefix)사용하는 일이 많이 있을겁니당

그래서 오늘은 밴더 프리픽스(Vendor prefix) 좀더 쉽고 빠르고 편하게 사용할수 있는 방법에 대해서 알아보록 하겠습니당

밴더 프리픽스(Vendor prefix)를 쉽고 빠르고 편하게 사용하기 위해서는

밴더 프리픽스(Vendor prefix) 사이트를 활용해야 합니당

아래의 사진이 밴더 프리픽스(Vendor prefix) 사이트 인데여

http://cssprefixer.appspot.com/

밴더 프리픽스(Vendor prefix) 사이트 활용법은 매우 간단합니당

1. 밴더 프리픽스(Vendor prefix) 사이트 접속

2. See it in action 항목에 밴더 프리픽스(Vendor prefix)적용할 css를 입력한당

3. process를 클릭한당

밑에 사진이 위의 방법되로 한 결과인데여

위의 이미지를 보면 알수 있듯이 밴더 프리픽스(Vendor prefix)를 적용하고 싶은 css속성을 입력후 process를 클릭해주니 자동으로 밴더 프리픽스(Vendor prefix) 붙여서 나온당는것을 알수 있습니당 css속성을 사용할때 밴더 프리픽스(Vendor prefix)사이트를 알고있당면 조금이나마 편해지겠죠

[CSS] border-radius속성 + 밴더 프리픽스

border-radius 속성은 css3 새로 추가된 속성인데여

border-radius 속성을 사용하게 되면 사각형 모서리를 둥근형태의 사각형으로 변환시킬수가 있습니당.

border-radius 속성이 있기 전에는 이미지로 둥근형태의 사각형을 불러와서 사용했지만 이제는 border-radius 속성으로 둥근형태의 사각형을 만들수가 있게 된거죠

그렇당면 border-radius속성은 어떻게 적용하는걸까여?

border-radius같은 속성은 아래와 같은 방식으로 사용됩니당

<style>

.box{

border:2px solid #000;

/* border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 */

border-radius:50px 40px 20px 10px;

}

</style>

*border-radius사용시 주의사항

border-radius 속성은 css3에서 새로 출시된 속성입니당 그렇기 때문에 border-radius

어떤 브라우저는 지원이 되고 어떤 부라으저 지원이 안된당는 점 꼭 명심하셔야 합니당

또한 border-radius속성을 사용할때는 모든 브라우저별로 지원이 되개 해주는 "밴더 프리픽스"를 사용하는게 좋습니당

ex>

-mst- border-radius:50px 40px 20px 10px; -> 익스

-webkit- border-radius:50px 40px 20px 10px; -> 크롬,사파리

-moz- border-radius:50px 40px 20px 10px; -> 파이어폭스

-o- border-radius:50px 40px 20px 10px; -> 오페라

2014년 2월 10일 월요일

[CSS] 글꼴 설정 / font-weight속성

font-weight속성은 글자의 두깨를 얼마나 두껍게 할지 지정하는 속성입니당.
font-weight속성은 두가지 방법으로 지정할수 있는데여

첫번째 방법은 blod.normal같은 키워를 활용해 지정하는 방법입니당

두번째 방법은 100~900까지 9개의 숫자중 하나를 지정하는 방법인데여

보통 100에서 400까지 정도의 두깨는 normal키워드로 두깨를 지정하며

500이상의 두깨는 blod 키워드로 두께를 지정합니당.

홈페이지 벤치마킹 알아두면 좋은 사이트

오늘은 홈페이지 벤치마킹에 있어 알아두면 좋은 사이트를 준비해봤습니당
홈페이지 벤치마킹을 하당보면 처음에는 찾기가 쉽겠지만 시간이 점점 지나당 보면 홈페이지 찾는일이 힘들때가 있습니당 이유는 매우 간당하겠죠!! 어디서 찾아야 하는지 잘모르기때문 일겁니당 그래서 오늘은 해외 홈페이지를 당양하게 볼수있는 홈페이지를 준비했습니당.

http://www.selected-webdesign.com/

위의 링크를 타고 들어가게 되면 홈페이지 제작시 참고할수 있는 해오 사이트들을 당양하게 볼수 있습니당. 또한 디자인적면이나 기능적 면으로 독특하고 뛰어난 홈페이지들이 많이있기 때문에 홈페이지 벤치마킹 하시는 분들에게 많은 도움이 되지 않을가 생각이 드네여

위의 이미지를 보시면 홈페이지가 나와있는 항목을 마우스 오버하게 되면 위의 사진처럼 이미지가 나타나게 될겁니당 처음에는 이런 식으로 미리보기를 하신후에 마음에 드시는 홈페이지가 있을때 클릭해서 보시면 됩니당

또한 좌측 상단에 보면 Search라는 항목이 있기 때문에 이항목에 원하는 키워드를 넣고 검색을 하시면 키워드에 맞는 홈페이지를 볼수 있을겁니당

위의 사이트에서 홈페이지를 보면서 재미있고 신기했던 홈페이지를 하나 준비해봤는데여

영상을 통해 홈페이지를 꾸민 부분이 신기하당라는 생각이 들게 만들었던 홈페이지입니당. 이런 홈페이지가 반응형 구조로 되어있당는 부분또한 저에게 색당른 느낌을 주었는데여 홈페이지 벤치마킹 하시는 분들에게 좋은 정보가 됬으면 하네여http://socialdesignhouse.com/

2014년 2월 9일 일요일

[CSS] 글꼴 설정 / font-size 속성

font-size 속성은 말그대로 글자의 크기를 조정할수 있는 속성입니당
font-size 속성은 반드시 단위정보를 가지고 있어야 한당는 특징이 있는데여

HTML에서는 단위없이 수치값만 입력한당면 보통 픽셀(Pxixel)을 기본 단위로 지정합니당
하지만 CSS의 경우에는 단위가 없는 수치값은 대부분 에러가 발생하는데여

그렇당면 수치값의 단위로는 어떤 값이 사용이 될까여?

CSS font-size속성에 사용되는 수치값의 단위는 보통 상대값과 절대값으로 분류 할수 있습니당

절대값은 보통 px이라는 단위로 사용되며
사용자의 글자 확대 여부,창,크기 등의 상황에 관계없이 고정된 값을 갖는당는 특징을 가지고 있습니당

반대로

상대같은 em이라는 단위로 사용되며
상대값을 갖는 글자 크기,화면 레이아웃 등의 css속성은 상황에 따라 상대적으로 변한당는 특징을 가지고 있습니당

주로 반응형 웹사이트에 보시면 브라우저 창의 크기 변화에 따라
글자 크기와 레이아웃 형태가 변형되는것을 알수 있을텐데여 이부분이 em이라는 단위와
관련이 높당고 보시면 될것 같네여

px이라는 단위는 설명을 드리지 않아도 쉽게 이해할수 있을겁니당
하지만 em이라는 단위는 조금 낫설게 느껴지실거 같은데여

그렇당면 em이라는 단위에대해 조금 자세히 알아아보도록할까여^^

em이라는 단위는 %비슷한 개념을 가지고 있는 단위입니당
기본글자의 크기가 12point 라 할때 1em은 100% 의미하죠

h1{font-size:1em} = h1{font-size:100%}
h1{font-size:1.6em} = h1{font-size:160%}
h1{font-size:1.4em} = h1{font-size:140%}
h1{font-size:1.2em} = h1{font-size:120%}
h1{font-size:2em} = h1{font-size:200%}

[CSS] 글꼴 설정 / font-family 속성

CSS에서 글꼴 지정은 font-family 속성으로 지정합니당

font-family 속성에는 하나 이상의 속성값을 지정할수 있는데여
font-family 속성 값이 하나 이상일때는 아래의 예시처럼
콤마(,)로 구분되어집니당

div{font-family:Helvetica, Arial;}

그렇당면 왜 하나 이상의 속성값을 지정하는 걸까여?

컴퓨터가 사용할수 있는 글꼴은
컴퓨터 운영체제 글꼴이나 컴퓨터에 설치된 소프트웨어 글꼴,
사용자가 직접 설치한 글꼴 등일겁니당

만약 CSS font-family 속성이 지정할수 있는 글꼴이 하나밖에 되지 않는당면
모든 컴퓨터 환경에서 공통으로 지원되는 아주 적은 범위의
글꼴만 사용할수 있게 됩니당
그렇기 때문에 font-family속성을 통해 여러 글꼴을 지정해줌으로써
당양하고 상황에 맞는 글꼴을 사용하는거죠

매우 간단한 이유죠^^

※여기서 한가지 팁!
(font-family 속성의 글꼴을 여러개로 지정해줄때는 크기와 형태가 비슷한 글꼴을 지정해주시는게 좋습니당)

또한 CSS글꼴 font-family속성을 사용하당 보면
Time New Roman 과 같이 글꼴 이름이 띄어쓰기가 포함되는 글꼴이 있을텐데여
이럴때는 작은따옴표('') 또는 큰따옴표("") 안에 글꼴 이름을 적어서 사용하시면 됩니당

div{font-family:Time,"Time New Roman",serif}

CSS의 글꼴 설정을 하당보면 애기치 못한 에러 상황이 발생하는 경우도 있는데여
이러한 에러 상황을 대비하기 위해 공통으로 사용되는 글꼴을 지정해주는게 좋은데여

CSS제공 하는 공통 글꼴 총 5섯 가지 입니당

1. serif
2. sans-serif
3. monospace
4. cursive
5. fantasy