2014/0227

CSS transition transition 속성은 요소에 정의해두고 마우스 오버시 효과를 다양하게 낼 수 있습니다. IE9 이하버전은 지원하지 않습니다. a { color:#222; transition: color 2s; } a:hover { color:#f40; } 색상에 효과를 주는 예제 입니다. 색상에 효과를 줄려면 요소와 호버에 색상이 지정되어 있어야 합니다. transition-property: Value; transition-duration: Value; transition-timing-function: Value; transition-delay: Value; transition: property duration timing-function delay 기본값:all 0 ease 0, 상속:안됨, 버전:CSS3 mou.. 2014. 2. 7.
CSS word-spacing letter-spacing은 자간 거리를 조절 하지만 word-spacing 문단 거리를 조절해 줍니다. word-spacing: value; 기본값:없음, 상속:됨, 버전:CSS1 문단 거리 조절하는 word-spacing:normal 문단 거리 조절하는 word-spacing:1px 문단 거리 조절하는 word-spacing:5px 문단 거리 조절하는 word-spacing:-5px 문단 거리 조절하는 word-spacing:-10px 문단 거리 조절하는 word-spacing:normal 문단 거리 조절하는 word-spacing:1px 문단 거리 조절하는 word-spacing:5px 문단 거리 조절하는 word-spacing:-5px 문단 거리 조절하는 word-spacing:-10px CSS .. 2014. 2. 7.
CSS letter-spacing letter-spacing는 자간 거리를 지정 할 수 있습니다. letter-spacing:value 기본값:없음, 상속:됨, 버전:CSS1 자간거리 없음 letter-spacing:normal 자간거리 letter-spacing:1px 자간거리 letter-spacing:5px 자간거리 letter-spacing:-1px 자간거리 없음 letter-spacing:normal 자간거리 letter-spacing:1px 자간거리 letter-spacing:5px 자간거리 letter-spacing:-1px CSS word-spacing 2014. 2. 7.
CSS display display 속성은 요소들에 박스 형태의 유형을 설정 합니다.span 태그는 인라인 속성을 가지고 있는데 그걸 블록으로 바꿔주고 p 태그 처럼 줄 바꿈을 하는 태그를 인라인 속성을 부여하여 줄 바꿈을 하지 않고 붙여주는 기능을 합니다.display:inline display:block display:inline-block display:none주로 사용하는 속성들 입니다. display:none 속성은 화면에서 노출에서 제외 시켜버립니다. 기본값:inline, 상속:안됨, 버전:CSS1 span span span span span span span span span span span span span span span span 태그들은 인라인 속성을 가지고 있기 때문에 오른쪽에 자연스럽게 배치 됩니다... 2014. 2. 5.
CSS text-transform Text-transform는 영문 글자를 대문자,소문자 등으로 변환해주는 속성입니다. 한글은 적용이 안되고 알파벳에만 적용이 가능합니다. text-transform:capitalize text-transform:uppercase text-transform:lowercase 기본값:없음, 상속:됨, 버전:CSS1 HELLO text Transform This example demonstrates different text-transforms. HELLO Text Transform This example demonstrates different text-transforms.text-transform:capitalize 단어들의 첫자들을 대문자로 변경합니다. HELLO Text Transform This ex.. 2014. 2. 5.
CSS box-shadow text-shadow와 같이 요소의 그림자 효과을 주는 속성으로 배경을 기준으로 그림자 효과를 부여 합니다. 가로 세로 값은 필수입니다. CSS text-shadowbox-shadow: h-shadow v-shadow blur spread color inset h-shadow : 가로 v-shadow : 세로 blur : 번짐 spread : 그림자 크기 color : 색상 inset : 안쪽그림자 (기본 바같쪽)기본값:없음, 상속:안됨, 버전:CSS3 box-shadow:10px 10px; box-shadow:50px 50px 5px black; box-shadow:50px 50px 50px 5px black; box-shadow:10px 10px black inset; box-shadow:10px 1.. 2014. 2. 4.
CSS cursor cursor는 요소위에 마우스를 가지고 가면 커서의 모양을 변형 시켜주는 역할을 합니다. 보통 cursor:default, cursor:pointer 두 가지 속성을 많이 사용하며, body 커서 이미지를 적용하여 사이트나 블로그 전체에 커서를 적용할 수도 있습니다. 커서 모양만 바꾸어질 뿐 역할을 기본으로 합니다. 기본값:default, 상속:됨, 버전:CSS2 cursor:alias cursor:all-scroll cursor:auto cursor:cell cursor:context-menu cursor:col-resize cursor:copy cursor:crosshair cursor:default cursor:e-resize cursor:ew-resize cursor:help cursor:move.. 2014. 2. 3.
CSS border-radius border-radius 속성은 요소들이 4각형의 모서리를 둥글게 처리해주는 역할을 합니다. 모든 태그에 적용이 가능하며 Ie는 9이상 버전에서만 호환 됩니다. 기본값:없음, 상속:안됨, 버전:CSS3 border-radius:25px border-radius:10px 20px 30px 40px border-radius: 좌상 우상 우하 좌하 border-radius:20px 40px border-radius: 좌상우하 우상좌하 border-radius:25px 2014. 2. 3.
CSS border border는 각요소들의 윤곽선을 설정해 줍니다.두께와 모양은 필수이고 색상은 지정하지 않으면 기본 븍랙이고 상속 받은 색상이 있으면 그 색상으로 설정이 됩니다.border:width style color기본값:black, 상속:안됨, CSS1 border-width: 스타일속성은 필수입니다. border:2px solid #000 border:5px solid #000 border-bottom:5px solid #000 border-style:solid; border-bottom:10px solid border-style:solid; border-width:1px 5px 10px 20px ＊border-width:1px 5px 10px 20px - 위 오른쪽 아래 왼쪽＊border-width:1px 5.. 2014. 2. 1.
CSS text-shadow text-shadow는 글자에 그림자 효과를 표현 할수있는 속성입니다. CSS box-shadowtext-shadow : h-shadow v-shadow blur color h-shadow : 가로 v-shadow : 세로 blur : 번짐 color : 색상가로세로 지정은 필수입니다. 색상을 지정하지 않을 경우 폰트의 색상을 따라 갑니다. 기본값:없음, 상속:됨, 버전:CSS3 ie 9 이하 버전에서는 표현이 되지 않습니다. text-shadow: h-shadow v-shadow blur colortext-shadow:5px 5px text-shadow: h-shadow v-shadow blur color text-shadow:5px 5px #f40 text-shadow: h-shadow v-shado.. 2014. 2. 1.
CSS overflow overflow는 일정 법위를 넘어선 글을 어떻게 처리할지 설정을 합니다. overflow:visible overflow:hidden overflow:scroll overflow:auto 기본값:visible, 상속:안됨, 버전:CSS2 overflow:visible 북한의 남파특수공작 5446 부대. 20000:1의 경쟁률을 뚫은 최고 엘리트 요원 원류환, 공화국 최고위층 간부의 아들이자 류환 못지 않은 실력자 리해랑, 공화국 사상 최연소 남파간첩 리해진. 세 사람은 5446부대의 전설 같은 존재이다. overflow:hidden북한의 남파특수공작 5446 부대. 20000:1의 경쟁률을 뚫은 최고 엘리트 요원 원류환, 공화국 최고위층 간부의 아들이자 류환 못지 않은 실력자 리해랑, 공화국 사상 최연소.. 2014. 2. 1.
CSS font font: 속성은 폰트에 관련된 속성 값을 한번에 여러개를 적용할 수 있습니다. font-style: Value; font-variant: Value; font-weight: Value; font-size/line-height: Value; font-family: Value;폰트 속성은 { font:14px Georgia }와 반드시 같이 크기와 글꼴을 필수로 포함하여야만 합니다.기본값 : 없음, 상속 : 됨, 버전 : CSS1 가나다라마바사아자차카타파하ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyzTil this house feels like it did before Feels like insomnia ah ahfont:italic small-caps b.. 2014. 2. 1.

티스토리툴바