본문 바로가기

Webstoryboy

Category

Explanation

CSS

 (238)
[CSS] width width width 속성은 요소의 가로 값을 정의합니다. width width 속성은 요소의 가로 값을 정의합니다. 특징 설명 기본 값 width : auto 버전 CSS1 정의(Definition) width 속성은 요소의 가로 값을 정의합니다. 문법(Syntax) width : auto | value 속성(Property) 속성값 설명 auto width 속성의 기본 값입니다. length width 속성 값을 단위로 설정합니다. % width 속성 값을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 width 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] white-space white-space white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. white-space white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. 특징 설명 기본 값 white-space : normal 버전 CSS1 정의(Definition) white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. pre속성과 pre태그는 마크업을 그대로 보여주는 속성을 갖고 있습니다. pre 태그를 많이 사용하기 때문에 CSS 속성은 잘 사용하지 않습니다. 기본적으로 마크업을 하고 화면에 출력하면, 마크업에서 공백 한 칸은 화면에서 한 칸으로 인식합니다. 두 칸, 세 칸도 공백 한 칸으로 인식합니다. 한 줄은 한 줄 조차 인식할 수 없습니다. 이런 공백과 줄을 인식시켜주는 ..
[CSS] visibility visibility visibility 속성은 요소를 보이지 않게 정의합니다. visibility visibility 속성은 요소를 보이지 않게 정의합니다. 특징 설명 기본 값 visibility : visible 버전 CSS2 정의(Definition) visibility 속성은 요소를 보이지 않게 정의합니다. visibility : hidden;는 요소를 보이지 않게 하지만, 요소 영역은 그대로 유지됩니다. display : none;는 요소를 보이지 않게 하고, 영역도 사라지는 점이 비교됩니다. 문법(Syntax) visibility : visible | hidden | collapse 속성(Property) 속성값 설명 visible visibility 속성의 기본 값입니다. hidden 요소를 ..
[CSS] vertical-align vertical-align vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다. vertical-align vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.. 특징 설명 기본 값 vertical-align : baseline 버전 CSS1 정의(Definition) vertical-align 속성은 요소의 텍스트를 선택할 지 정의합니다. vertical-align은 인라인 요소에만 적용되기 때문에 블럭 구조에서 정렬은 적용되지 않습니다. 글씨와 이미지 및 글씨와 input의 정렬상태가 맞지 않는다면, 이미지 요소 및 input에게 vertical-align을 주어야합니다. 문법(Syntax) vertical-align : baseline | length | su..
[CSS] user-select user-select user-select 속성은 요소의 텍스트를 선택할 지 정의합니다. user-select user-select 속성은 요소의 텍스트를 선택할 지 정의합니다. 특징 설명 기본 값 user-select : auto 버전 CSS3 정의(Definition) user-select 속성은 요소의 텍스트를 선택할 지 정의합니다. 문법(Syntax) user-select : auto | none | text 속성(Property) 속성값 설명 auto 텍스트를 자동으로 설정합니다. none 선택을 설정하지 않습니다. text 텍스트를 선택으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 user-select 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨..
[CSS] unicode-bidi unicode-bidi unicode-bidi 속성은 글자의 방향 속성을 설정합니다.. unicode-bidi unicode-bidi 속성은 글자의 방향 속성을 설정합니다. 특징 설명 기본 값 unicode-bidi : normal 버전 CSS2 정의(Definition) unicode-bidi 속성은 글자의 방향 속성을 설정합니다. unicode-bidi는 문장의 방향 속성을 설정하는 diretion과 비교됩니다. 문법(Syntax) unicode-bidi : normal | embed | bidi-override 속성(Property) 속성값 설명 normal 글자의 방향을 기본값으로 설정합니다. embed 글자의 방향을 embed으로 설정합니다. bidi-override 글자의 방향을 반대방향으로 ..
[CSS] transition-timing-function transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 정의합니다. transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 정의합니다. 특징 설명 기본 값 transition-timing-function : ease 버전 CSS3 정의(Definition) transition-timing-function 속성은 요소의 움직임 기능을 정의합니다. 문법(Syntax) transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,s..
[CSS] transition-property transition-property transition-property 속성은 transition의 적용 여부를 정의합니다. transition-property transition-property 속성은 transition의 적용 여부를 정의합니다. 특징 설명 기본 값 transition-property : all 버전 CSS3 정의(Definition) transition-property 속성은 요소의 움직임 지속시간을 정의합니다. 문법(Syntax) transition-property : none | all | property 속성(Property) 속성값 설명 none transition의 효과를 적용하지 않습니다. all 모든 영역에 transition의 효과를 적용합니다. property 적용하..
[CSS] transition-duration transition-duration transition-duration 속성은 요소의 움직임 지속시간을 정의합니다. transition-duration transition-duration 속성은 요소의 움직임 지속시간을 정의합니다. 특징 설명 기본 값 transition-duration : 0s 버전 CSS3 정의(Definition) transition-duration 속성은 요소의 움직임 지속시간을 정의합니다. 문법(Syntax) transition-duration : time 속성(Property) 속성값 설명 time transition의 지연 시간을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 transition-duration 사용가능 사용가능 사용가능 사용가능 사용..
[CSS] transition-delay transition-delay transition-delay 속성은 요소의 움직임 시간을 지연합니다. transition-delay transition-delay 속성은 요소의 움직임 시간을 지연합니다. 특징 설명 기본 값 transition-delay : 0s 버전 CSS3 정의(Definition) transition-delay 속성은 요소의 움직임 시간을 지연합니다. 문법(Syntax) transition-delay : time 속성(Property) 속성값 설명 time transition의 지연 시간을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 transition-delay 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용..
[CSS] transition transition transition 속성은 요소의 움직임을 정의합니다. transition transition 속성은 요소의 움직임을 정의합니다. 특징 설명 기본 값 transition-property : all transition-duration : 0s transition-timing-function : ease transition-delay : 0s 버전 CSS3 정의(Definition) transition 속성은 요소의 움직임을 정의합니다. 문법(Syntax) transition : transition-property | transition-duration | transition-timing-function | transition-delay /* property | duration을 설정한 ..
[CSS] transform-style transform-style transform-style 속성은 요소의 움직임 스타일을 정의합니다. transform-style transform-style 속성은 요소의 움직임 스타일을 정의합니다. 특징 설명 기본 값 transform-style : flat 버전 CSS3 정의(Definition) transform-style 속성은 요소의 움직임 방향을 정의합니다. 문법(Syntax) transform-style : flat | preserve-3d 속성(Property) 속성값 설명 flat transform-style의 기본값입니다. preserve-3d transform-style를 3d로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 transform-style 사용가..
[CSS] transform-origin transform-origin transform-origin 속성은 요소의 움직임 방향 및 기준점을 설정합니다. transform 속성과 같이 설정하며 기준점에 따라 애니메이션의 방향을 설정 할 수 있습니다. transform-origin transform-origin 요소의 움직임 방향을 정의합니다. 특징 설명 기본 값 transform-origin : 50% 50% 0 적용 transform 버전 CSS3 정의(Definition) transform-origin 속성은 요소의 움직임 방향을 정의합니다. 문법(Syntax) transform-origin : x-axis | y-axis | z-axis 속성(Property) 속성값 설명 x-axis transform X축 방향을 설정합니다. - left..
[CSS] transform transform transform 속성은 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있습니다. 애니메이션 작업시 가장 많이 쓰는 요소입니다. 요소를 이동시키거나 회전 시킬 수 있으며, 원근점(perspective)를 사용하여 3D까지 구현 할 수 있습니다. transform transform 속성은 요소의 움직임을 표현합니다. 특징 설명 기본 값 transform : none 버전 CSS3 정의(Definition) transform 속성은 요소의 움직임을 표현합니다. 문법(Syntax) transform : none | matrix() | translate() | translateX() | translateY() | scal..
[CSS] top top top 속성은 위치 요소의 위쪽 속성을 설정합니다. top top 속성은 위치 요소의 위쪽 속성을 설정합니다. 특징 설명 기본 값 top : auto 버전 CSS2 정의(Definition) top 속성은 요소의 위쪽 속성을 설정합니다. 문법(Syntax) top : auto | length | percentage 속성(Property) 속성값 설명 auto 요소의 위쪽 값을 자동(기본)으로 설정합니다. length 요소의 위쪽 값을 CSS 단위를 통해 설정합니다. percentage 요소의 위쪽 값을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 top 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가..
[CSS] text-transform text-transform text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다. text-transform text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다. 특징 설명 기본 값 text-transform : none 버전 CSS1 정의(Definition) text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다. text-transform은 영어에만 해당되는 속성입니다. 문법(Syntax) text-transform : none | capitalize | uppercase | lowercase 속성(Property) 속성값 설명 none text-transform을 속성을 적용하지 않습니다. capitalize 각 단어의 첫 글자만 대문자로 변경..
[CSS] text-shadow text-shadow text-shadow 속성은 텍스트에 그림자를 설정합니다. text-shadow text-shadow 속성은 텍스트에 그림자를 설정합니다. 특징 설명 기본 값 text-shadow : none 버전 CSS3 정의(Definition) text-shadow 속성은 텍스트에 그림자를 설정합니다. 문법(Syntax) text-shadow : h-shadow | v-shadow | blur-radius | color | none /* h-shadow | v-shadow | color를 설정한 경우 */ text-shadow: 1px 1px #ccc; /* h-shadow | v-shadow | blur-radius | color를 설정한 경우 */ text-shadow: 1px 1px 2p..
[CSS] text-overflow text-overflow text-overflow 속성은 문자열 영역 속성을 설정합니다. text-overflow text-overflow 속성은 문자열 영역 속성을 설정합니다. 특징 설명 기본 값 text-overflow : clip 버전 CSS3 정의(Definition) text-overflow 속성은 문자열 영역 속성을 설정합니다. 문법(Syntax) text-overflow : clip | ellipsis | string 속성(Property) 속성값 설명 clip 문자열를 그대로 보여주는 기본값입니다. ellipsis 문자열 끝부분을 "..."으로 설정합니다. string 짤린 텍스트 영역을 string으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 text-ove..
[CSS] text-justify text-justify text-justify 속성은 텍스트의 간격을 정의합니다. text-justify text-justify 속성은 텍스트의 간격을 정의합니다. 특징 설명 기본 값 text-justify : auto 상속 안됨 애니메이션 가능 적용 - 버전 CSS3 정의(Definition) text-justify 속성은 텍스트의 간격을 정의합니다. text-align : justify; 경우에 텍스트의 간격을 조절하는 속성이지만 현재는 거의 모든 브라우저에서 지원되지 않습니다. 문법(Syntax) text-justify : auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | trim 속성(Property) 속성값 ..
[CSS] text-indent text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다. text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다. 특징 설명 기본 값 text-indent : 0 버전 CSS1 정의(Definition) text-indent 속성은 문단 들여쓰기 속성을 설정합니다. 문법(Syntax) text-indent : length | percentage 속성(Property) 속성값 설명 length 들어쓰기를 CSS 단위를 통해 설정합니다. % 들어쓰기를 % 단위를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 text-indent 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능..
[CSS] text-decoration-style text-decoration-style text-decoration-style 속성은 글자 스타일을 정의합니다. text-decoration-style text-decoration-style 속성은 글자 스타일을 정의합니다. 특징 설명 기본 값 text-decoration-style : solid 버전 CSS3 정의(Definition) text-decoration-style 속성은 글자 스타일을 정의합니다. 문법(Syntax) text-decoration-style : solid | double | dotted | dashed | wavy 속성(Property) 속성값 설명 solid 글자에 한 줄 속성을 설정합니다. double 글자에 두개의 줄을 설정합니다. dotted 글자에 점선 줄을 설정합니다..
[CSS] text-decoration-line text-decoration-line text-decoration-line 속성은 글자 라인 스타일을 설정합니다. text-decoration-line text-decoration-line 속성은 글자 라인 스타일을 설정합니다. 특징 설명 기본 값 text-decoration-line : none 버전 CSS3 정의(Definition) text-decoration-line 속성은 글자 라인 스타일을 설정합니다. 문법(Syntax) text-decoration-line : none | underline | overline | line-through 속성(Property) 속성값 설명 none 글자에 줄 속성을 주지 않습니다. underline 글자에 밑줄을 설정합니다. overline 글자에 윗줄을 설정..
[CSS] text-decoration-color text-decoration-color text-decoration-color 속성은 글자 라인 색을 설정합니다. text-decoration-color text-decoration-color 속성은 글자 라인 색을 설정합니다. 특징 설명 기본 값 text-decoration-color : 현재 색 버전 CSS1 정의(Definition) text-decoration-color 속성은 글자 라인 색을 설정합니다. 문법(Syntax) text-decoration-color : color 속성(Property) 속성값 설명 color 텍스트의 라이색을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 text-decoration-color 사용가능 사용가능 사용가능 사용가능 사용가능 사..
[CSS] text-decoration text-decoration text-decoration 속성은 글자 라인 속성을 설정합니다. text-decoration text-decoration 속성은 글자 라인 속성을 설정합니다. 특징 설명 기본 값 text-decoration : none 버전 CSS1 정의(Definition) text-decoration 속성은 글자 라인 속성을 설정합니다. 문법(Syntax) text-decoration : none | underline | overline | line-through 속성(Property) 속성값 설명 none 글자에 줄 속성을 주지 않습니다. underline 글자에 밑줄을 설정합니다. overline 글자에 윗줄을 설정합니다. line-through 글자에 가운데 줄을 설정합니다. 호환..
[CSS] text-align-last text-align-last text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다. text-align-last text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다. 특징 설명 기본 값 text-align-last : auto 버전 CSS1 정의(Definition) text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다.. 문법(Syntax) text-align-last : auto | left | right | center | justify | start | end 속성(Property) 속성값 설명 auto 문장의 마지막 텍스트 정렬 방식을 자동으로 설정합니다. left 문장의 마지막 텍스트 정렬 방식을 왼쪽으로 설정합..
[CSS] text-align text-align text-align 속성은 텍스트 정렬 방식을 설정합니다. text-align text-align 속성은 텍스트 정렬 방식을 설정합니다. 특징 설명 기본 값 text-align : left 버전 CSS1 정의(Definition) text-align 속성은 텍스트 정렬 방식을 설정합니다. 문법(Syntax) text-align : left | right | center | justify 속성(Property) 속성값 설명 left 텍스트의 정렬을 왼쪽으로 설정합니다. right 텍스트의 정렬을 오른쪽으로 설정합니다. center 텍스트의 정렬을 가운데로 설정합니다. justify 텍스트의 정렬을 양쪽으로 설정합니다. inherit 텍스트의 정렬을 상위요소한테 상속받습니다. 호환성(Co..
[CSS] table-layout table-layout table-layout 속성은 표의 레이아웃 크기를 정의합니다. table-layout table-layout 속성은 표의 레이아웃 크기를 정의합니다. 특징 설명 기본 값 table-layout : auto 버전 CSS2 정의(Definition) table-layout 속성은 글씨의 간격을 정의합니다. 문법(Syntax) table-layout : auto | fixed 속성(Property) 속성값 설명 auto 테이블 레이아웃의 크기를 자동으로 설정합니다. fixed 테이블 레이아웃의 크기를 고정으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 table-layout 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사..
[CSS] tab-size tab-size tab-size 속성은 글씨의 간격을 정의합니다. tab-size tab-size 속성은 글씨의 간격을 정의합니다. 특징 설명 기본 값 tab-size : 8 버전 CSS3 정의(Definition) tab-size 속성은 글씨의 간격을 정의합니다. 문법(Syntax) tab-size : number | length 속성(Property) 속성값 설명 number 글씨의 간격을 숫자로 설정합니다. length 글씨의 간격을 CSS 단위로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 tab-size 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능
[CSS] right right right 속성은 위치 요소의 오른쪽 속성을 설정합니다. right right 속성은 위치 요소의 오른쪽 속성을 설정합니다. 특징 설명 기본 값 right : auto 버전 CSS2 정의(Definition) right 속성은 요소의 오른쪽 속성을 설정합니다. 문법(Syntax) right : auto | length | percentage 속성(Property) 속성값 설명 auto 요소의 오른쪽 값을 자동(기본)으로 설정합니다. length 요소의 오른쪽 값을 CSS 단위를 통해 설정합니다. percentage 요소의 오른쪽 값을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 right 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사..
[CSS] resize resize resize 속성은 요소의 사이즈를 정의합니다. resize resize 속성은 요소의 사이즈를 정의합니다. 특징 설명 기본 값 resize : none 버전 CSS3 정의(Definition) resize 속성은 요소의 사이즈를 정의합니다. content : open-quote, content: close-quote;가 설정 되어 있을 때 적용되는 속성입니다. 문법(Syntax) resize: none | both | horizontal | vertical 속성(Property) 속성값 설명 none 리사이즈 값을 설정하지 않습니다. both X축과 Y축에 사이즈를 설정합니다. horizontal 가로 축 사이즈를 설정합니다. vertical 세로 축 사이즈를 설정합니다. 호환성(Compa..
1 2 3 4 5 ··· 8
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바