씹어먹는 블로그

min-width 와 max-width 에 대해 알아보자. - min-width브라우저의 크기가 줄어들어도, min-width 크기의 이하로는 해당 오브젝트가 줄어들지 않게 설정한다. 예제 ) 위 소스를 실행해보면 아래와 같이 500px 에 맞춰서 red line 이 생성될 것이다. 위 이미지를 보면, 브라우저 크기가 해당 오브젝트 크기보다 크기 때문에 스크롤이 생기지 않는다. 위 이미지처럼 브라우저 크기를 줄이게 되면, 해당 오브젝트 크기보다 작아지는 시점부터 스크롤이 생긴다. - max-width해당 오브젝트 안에 들어있는 내용들의 크기가 max-width를 벗어나지 않도록 설정한다. 예제 ) The maximum width of this paragraph is set to 100px.... 위 처럼..

CSS3 에서는 마스크기능도 지원한다.mask속성에 대해 알아보자. -webkit-mask (background)-webkit-mask-attachment (background-attachment)-webkit-mask-box-image-webkit-mask-clip (background-clip)-webkit-mask-composite-webkit-mask-image (background-image)-webkit-mask-origin (background-origin)-webkit-mask-position (background-position)-webkit-mask-position-x-webkit-mask-position-y-webkit-mask-repeat (background-repeat)-webk..

CSS 커서 종류별 모음 cursor: auto (uses what is set by user) cursor: crosshair (should produce a cross) cursor: default (cursor remains as it is) cursor: e-resize (arrow pointing right) cursor: hand (the traditional pointing hand) cursor: help (a Question Mark should appear) cursor: move (a cross with arrows on the tips) cursor: n-resize (an arrow pointing north or up) cursor: ne-resize (an arrow point..

웹폰트에 대해 알아보자. 웹폰트는 말 그대로 웹에 font를 올려놓고 사용하는 것이다. 웹폰트의 장점은, 아래 표에 나와있듯이 거의 모든 브라우저에서 사용 가능하다는 것이다. 웹폰트는 브라우저에 따라 확장자가 다르다.1. IE 6~8 : eot2. 옛표준(파이어폭스,크롬,사파리,오페라) : ttf, otf3. 최신버전의 브라우저들 : woff (web open font format)4. 모바일 : svg 웹폰트를 사용하는 방법에는 세 가지가 있다.1. 클라우드(cdn)2. 직접 만들어서 사용3. 다운 받아서 사용 웹폰트를 제공하는 곳 구글 : https://developers.google.com/fonts/docs/getting_started?hl=ko-KR 1. 클라우드(cdn)위 구글폰트 사이트에 나..

CSS3에 아주 간편하고 유용하게 쓸 수 있는 많은 기능들이 추가되었지만, IE6,7,8 에서는 먹히질 않는다 ㅠㅠ 이를 해결하기 위한 방법을 소개한다. 참고사이트 : http://css3pie.com/ index.html =========================================================== Test Text 빨간색 부분만 경로를 잘 맞춰서 넣어주면 된다.PIE.js 파일을 먼저 불러오고, css3 를 적용해야 할 요소의 css에 behavior:url(js/PIE.htc); 를 포함해준다. border-radius, box-shadow, gradient, border-image 등등 사용 가능하다.

CSS3 에서 새로 추가된 box-shadow 와 text-shadow 를 알아보자. 그동안 그림자 효과를 주려면 대부분 이미지로 만들어 사용했었다. 하지만 css3 로 접어들면서 box-shadow 와 text-shadow 를 이용해 간단하게 css로 구현할 수 있게 되었다. 사용방법 )#box {width:100px;height:100px;background-color:rgba(255,100,150,.6);box-shadow:10px 20px 5px #bbbbbb} #text {text-shadow:1px 2px 2px green} box-shadow 와 text-shadow 의 인자값예 ) box-shadow:1px 2px 3px #000첫번째 1px 은 그림자의 가로위치두번째 2px 은 그림자의 ..

기존 rgb 로 사용되었던 색상 적용 방법이 CSS3에서 a(alpha, 투명도)가 추가되어서 rgba로 사용 가능하다. 사용법 )div {background-color : rgba(0,100,150,0.5);color : rgba(255,0,0,.6); } 비슷한 기능을 하는 opacity 속성을 알아보자.opacity 속성도 CSS3에서 추가된 속성이다. 사용법 )div {width:100px;height:100px;opacity:.6;} * rgba와 opacity의 차이점rgba로 알파값을 지정해주면 해당 컬러에만 적용이 된다. (div 내에 텍스트가 있다면, 텍스트는 투명해지지 않고 배경 컬러만 투명해짐)반면, opacity는 해당 객체 내에 있는 모든 요소들이 함께 투명해진다. - rgba만 ..

먼저 기준이 될 width 값을 지정해준다.그리고나서 1. word-break:break-all 을 사용 하여 자동줄바꿈이 되게 해야 한다.2. 파폭, 오페라는 이 속성이 적용되지 않기 때문에 word-break:break-word 를 사용하여야 한다.3. table 안에 td에 적용 할러면 table-layout:fixed;를 사용한다. 골라서 적용.안드로이드 폰에서는 2번을 사용해야 함.

CSS에는 구체성이라는게 존재한다.많은곳에 무조건 스타일시트에 코딩되는 순서에따라 실행되는 우선순위가 정해진다고 나와있다.물론 이도 틀린말은 아니지만 정확하다고도 할 수 없다.왜냐하면, CSS에는 구체성이라는 것이 있는데, 이 구체성에 따라 우선순위가 정해지는 것이다. 자 그럼 살펴보자.. 기본 0 0 0 0 으로 되어있다면 (여기서 각 숫자는 갯수를 의미)첫번째는 inline두번째는 id세번째는 클래스(가상클래스 포함)네번째는 요소(가상요소 포함) 예를 들어보자.선택자가 span 일때는 구체성이 어떻게 나올까? - 0 0 0 1 (요소 1개)#id>div - 0 1 0 1 (id 1개, 요소 1개) #id:hover - 0 1 1 0 (id 1개, 가상클래스 1개) 이런식으로 된다. 몇몇 책에는 '숫자..

css3로 넘어오면서, 이전에는 스크립트로 구현해야 했던 동작들을 css로 아주 쉽고 간편하게 구현할 수 있다. transition-delay : 해당시간 후에 동작transition-duration : 동작되는 총 시간transition-timing-function : 움직임의 가속도 설정 (ease, linear, ease-in, ease-out, cubic-bezier) 참고 : http://www.w3.org/TR/css3-transitions/#transition-timing-function 사용방법 : ease 그런데 여기서 눈여겨 봐야 할 곳이 있다.지금은 transition을 #ease 에 주었다.실행을 해보면 마우스를 올렸을 때와 뗐을 때 모두 트랜지션이 적용 된다. 자, 그럼 이번엔 트..