Internet/CSS34

CSS z-index z-index 속성은 position 속성을 가진 요소에 z 축을 정의 합니다. z-index:value 기본값:auto, 상속:안됨, 버전:CSS2 요소끼리 겹칠 경우 어느 요소가 맨 앞으로 위치할 것인지 결정하여 z-index 값을 주며 수치가 높을수록 상위에 놓이게 됩니다. 티스토리 티에디션의 경우 z-index값이 10으로 설정 되어 있으므로 티에디션 보다 앞으로 사기 위해선 z-index 값을 11이상으로 정의해 주면 됩니다. 값은 px 또는 %가 아닌 단지 숫자입니다. CSS position z-index 0 z-index 1 z-index 2 z-index 3 z-index 0 z-index 1 z-index 2 z-index 3 2014. 2. 11.
CSS opacity opacity 속성은 요소의 투명도를 설정해 줍니다. 값의 1은 100%이고 IE8이하 버전은 100입니다. opacity:value filter:Alpha(opacity=value) /* IE8 이하 버전 */ 기본값:1, 상속:안됨, 버전:CSS3 opacity:1; filter:Alpha(opacity=100) opacity:0.5; filter:Alpha(opacity=50) opacity:0.5;filter:Alpha(opacity=50) opacity:1;filter:Alpha(opacity=100) 2014. 2. 9.
CSS float float 속성을 요소를 상위 요소를 기준으로 왼쪽과 오른쪽으로 레이아웃을 정렬하는데 많이 활용됩니다. float: left; float: right; float: none; 기본값:없음, 상속:안됨, 버전:CSS1 float:none 영화 회사원 평범한 삶을 꿈꾼 순간, 모두의 표적이 된 남자! 2012년 가을, 그의 마지막 출근이 시작된다! 겉으로는 평범한 금속 제조 회사지만 알고 보면 '살인'이 곧 실적인, 살인청부회사 내 영업 2부 과장 지형도(소지섭 분). 한치의 실수도 범하지 않는 냉정함과 차분함으로 유능함을 인정받으며 회사에서 시키는 대로 앞만 보고 달려온 10년, 어렸을 적 자신의 모습과 닮은 알바생 훈(김동준 분)을 만나게 된다. 훈과의 임무 수행 중, 순간의 망설임을 느낀 그는 집이고 .. 2014. 2. 9.
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.

티스토리툴바