전체 글415

CSS Background Background 속성은 요소의 배경색과 배경이미지를 정의해 줍니다. 레이아웃 구분과 사이트의 가독성을 높이고 버튼 효과를 위해 많이 사용되는 속성입니다.background-color: Value; background-image: Value; background-repeat: Value; background-attachment: Value; background-position: Value; 기본값:없음, image:scroll,repeat, top, left, 상속:안됨, 버전:CSS1 background-color:#f40 background-image: url(http://cfile26.uf.tistory.com/image/21041C4352F4F113095F79) background-repeat:.. 2014. 2. 8.
CSS outline CSS outline 속성은 요소의 바깥 테두리를 정의 해주며, border와 달리 픽셀 값이 요소 크기를 늘리지는 않습니다. outline-color: Value; outline-style: Value; outline-width: Value; outline:color style width기본값:없음, 상속:안됨, 버전:CSS2 outline:#f40 solid 3pxoutline:color style width outline:#f40 solid 3px; border:3px solid #333; outline-width:thin, medium, thick, px..... solid hidden dotted dashed double groove ridge inset outset solid hidden do.. 2014. 2. 8.
CSS vertical-align vertical-align 속성은 요소들이 각 높이가 달라 라인을 맞추기 위해서 사용하는 속성으로 baseline, sub, super, top, text-top, middle, bottom, text-bottom 8가지이며 %와 px값으로 도 정의할 수 있습니다.vertical-align: value;기본값:baseline, 상속:안됨, 버전:CSS1 CSSimg { vertical-align:baseline; } vertical-align:baseline CSSimg { vertical-align:top; } vertical-align:top CSSimg { vertical-align:middle; } vertical-align:middle CSSimg { vertical-align:bottom; }.. 2014. 2. 7.
CSS position position 속성은 요소의 위치를 자유롭게 지정 할 수 있습니다.position: static; position: relative; position: absolute; position: fixed;기본값:static, 상속:안됨, 버전:CSS2 position:static top:50px; left:100px; position:static position:staticposition:static 포지션을 지정하지 않은 상태와 동일 합니다. position:static top:30px; left:100px; position:relative position:staticposition:relative 자신 있던 자리를 기준으로 공간을 남기고 지정 값 만큼 다른 요소들에게 영향 없이 이동하고 z-index:1.. 2014. 2. 7.
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.

티스토리툴바