목록2016/06 (252)
코드랩 레퍼런스
border-bottom-color는 테두리 아래쪽 색 속성을 설정합니다. 특징 설명 기본 값 current color 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-bottom-color는 테두리 아래쪽 색 속성을 설정합니다. Syntax border-bottom-color : color | transparent | inherit; /* 기본 색상값을 설정한 경우 */ border-bottom-color: #ff0000; /* 기본 색상값(키워드)을 설정한 경우 */ border-bottom-color: blue; /* 기본 색상값(RGB)을 설정한 경우 */ border-bottom-color: rgb(255, 255, 255); /* 기본 색상값(RGBA)을 설정한 경우 ..
border-bottom 속성은 아래쪽 테두리 속성을 설정합니다. 특징 설명 기본 값 border-bottom-width : medium border-bottom-style : none border-bottom-color : currentColor 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-bottom 속성은 아래쪽 테두리 속성을 설정합니다. Syntax border-bottom : border-bottom-color | border-bottom-style | border-bottom-width | inherit; /* 한 가지 속성만 설정한 경우 : 테두리 두께를 1px로 설정 */ border-bottom : 1px; /* 두 가지 속성을 설정한 경우 : 테두리 두께를 ..
border는 테두리 속성을 설정합니다. 특징 설명 기본 값 border-width : medium border-style : none border-color : currentColor border-image : none border-radius :0 상속 안됨 애니메이션 border-width : 가능 border-style : 안됨 border-color : 가능 border-image : 안됨 border-radius : 가능 버전 CSS1 Definition border는 테두리 속성을 설정합니다. border-width는 테두리 두께 속성을 설정합니다. border-style는 테두리 스타일 속성을 설정합니다. border-color는 테두리 색 속성을 설정합니다. border-image는 테두..
background-size은 백그라운드 이미지 사이즈를 설정합니다. 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS3 Definition background-size은 백그라운드 이미지 사이즈를 설정합니다. Syntax background-size : length | percentage | auto | cover | contain | inherit; background-size : auto auto; (기본값) background-size : 120px 100px; (length) background-size : 100% 50%; (percentage) background-size : contain; background-size : cover; Property 속성 값 설명 auto..
background-repeat은 백그라운 이미지 반복여부를 설정합니다. 특징 설명 기본 값 repeat 상속 안됨 애니메이션 안됨 버전 CSS1 Definition background-repeat은 백그라운 이미지 반복여부를 설정합니다. Syntax background-repeat : repeat | repeat-x | repeat-y | no-repeat | inherit ; background-repeat : repeat; (기본값) background-repeat : repeat-x; background-repeat : repeat-y; background-repeat : no-repeat; Property 속성 값 설명 repeat 배경 이미지의 x축과 y축으로 반복설정합니다. repeat-x ..
background-position은 백그라운 이미지의 위치 영역을 설정합니다. 특징 설명 기본 값 0% 0% 상속 안됨 애니메이션 가능 버전 CSS1 Definition background-position은 백그라운 이미지의 위치 영역을 설정합니다. Syntax background-position : left | center | right | bottom | top | percentage | length | inherit; /* left, center, right, bottom, top을 설정한 경우 */ background-position: left top; background-position: left center; background-position: left bottom; background-p..
background-origin 속성은 백그라운드 이미지의 영역 속성을 설정합니다. 특징 설명 기본 값 padding-box 상속 안됨 애니메이션 안됨 버전 CSS3 Definition background-origin 속성은 백그라운드 이미지의 영역 속성을 설정합니다. background-origin은 백그라운드 이미지의 영역 속성을 설정하는 방면, background-clip은 백그라운드 색 속성을 설정하는 방법이 유사합니다. Syntax background-origin : padding-box | border-box | content-box | inherit; background-origin: padding-box; (기본값) background-origin: border-box; background..
background-image 속성은 백그라운 이미지 속성을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 + CSS3 Definition background-image 속성은 백그라운 이미지 속성을 설정합니다. 멀티 이미지는 CSS3에서 추가되었으며, 익스플로러9 이상부터 지원됩니다. Syntax background-image : url | none | inherit; background-image : none; (기본값) background-image: url(../img/img.jpg); (이미지 경로) background-image: linear-gradient(color, color); background-image: linear-gradient(degrees..
background-color 속성은 백그라운 색을 설정합니다. 특징 설명 기본 값 transparent 상속 안됨 애니메이션 가능 버전 CSS1 Definition background-color 속성은 백그라운 색을 설정합니다. Syntax background-color : color | transparent | inherit; Property 속성 값 설명 color background-color를 설정합니다. transparent background-color를 투명하게 설정합니다. inherit background-color를 부모 요소로부터 속성을 상속받습니다. Compatibility 6 7 8 9 10 11 Sample background-color background-color : #b3e..
background-clip 속성은 백그라운드 색의 영역을 설정합니다. 특징 설명 기본 값 border-box 상속 안됨 애니메이션 안됨 버전 CSS3 Definition background-clip 속성은 백그라운드 색의 영역을 설정합니다. background-clip은 백그라운드 색 속성을 설정하는 방면, background-origin은 백그라운 이미지의 영역 속성을 설정하는 방법이 유사합니다. Syntax background-clip : border-box | padding-box | content-box | inherit; Property 속성 값 설명 border-box 백그라운드 속성이 테두리 영역까지 포함하여 표현됩니다. padding-box 백그라운드 속성이 테두리 영역을 제외하여 표현됩..
background-blend-mode 속성은 배경을 혼합했을 때의 상태를 정의합니다. 특징 설명 기본 값 normal 상속 안됨 애니메이션 안됨 버전 CSS3 Definition background-blend-mode 속성은 배경을 혼합했을 때의 상태를 정의합니다. 포토샵의 브렌드 모드와 동일합니다. Syntax background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity; Property 속성 값 설명 normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. ov..
background-attachment 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다. 특징 설명 기본 값 scroll 상속 안됨 애니메이션 안됨 버전 CSS1 Definition background-attachment 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다. multiple backgrounds 속성은 익스플로러9 버전 이상부터 지원됩니다. Syntax background-attachment : scroll | fixed | local | inherit; Property 속성 값 설명 scroll 배경이미지와 콘텐츠를 표현하는 기본값입니다. fixed 배경이미지를 고정하고, 콘텐츠만 움직입니다. local 배경이미지와 콘텐츠가 같이 움직입니다. inherit background..
background 속성은 배경 속성 값을 정의합니다. 특징 설명 기본 값 background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto auto; 상속 안됨 애니메이션 background-attachment: 안됨 background-clip: 안됨 background-color: 가능 background-image: 안됨 background-origin: 안됨 back..
backface-visibility 속성은 요소의 뒷면을 정의합니다. 특징 설명 기본 값 visible 상속 안됨 애니메이션 안됨 버전 CSS3 Definition backface-visibility 속성은 요소의 뒷면을 정의합니다. Property 속성 값 설명 visible 요소의 뒷면을 보이도록 설정합니다. hidden 요소의 뒷면을 보이지 않도록 설정합니다. inherit backface-visibility의 상태를 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 backface-visibility Sample animation backface-visibility : visible; backface-visibility : hidden;
animation-timing-function 속성은 움직임의 속도를 정의합니다. 특징 설명 기본 값 ease 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-timing-function 속성은 움직임의 속도를 정의합니다. Syntax animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | inherit; Property 속성 값 설명 linear 처음 속도와 마지막 속도가 일정합니다. ease 처음엔 천천히 시작하여 빨라지고 마지막에 다시 느려집니다. ease-i..
animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 특징 설명 기본 값 running 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-play-state 속성은 애니메이션 진행상태를 설정합니다. Syntax animation-play-state : paused | running | inherit; Property 속성 값 설명 paused 애니메이션의 움직임을 정지시킵니다. running 애니메이션을 움직이게 합니다. inherit 애니메이션 움직임을 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-direction Sample1 클릭하면 이미지가 움직이는 횟수를 확인하는 예제입니다. 애니메이션(an..
animation-name 속성은 keyframe 이름을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-name keyframe 이름을 설정합니다. Syntax animation-name: keyframename | none | inherit; Property 속성 값 설명 keyframe name 움직임을 표현한 Keyframes의 이름을 설정합니다.. none 애니메이션 움직임을 적용하지 않습니다. inherit 애니메이션 이름을 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-direction Sample animation animation-name : my1; animation..
animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 특징 설명 기본 값 1 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. Syntax animation-iteration-count : number | infinite | inherit; Property 속성 값 설명 number 애니메이션 반복 횟수를 숫자를 통해 설정합니다. infinite 애니메이션 반복 횟수를 무한으로 설정합니다. inherit 애니메이션반복 횟수를 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-iteration-count Sample1 클릭하면 이..
animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 특징 설명 기본 값 0s 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. Syntax animation-duration: time | inherit; Property 속성 값 설명 time 애니메이션의 작동 시간을 설정합니다. inherit 애니메이션 작동 시간을 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-duration Sample1 클릭하면 이미지 지속 시간을 설정하는 예제입니다. 애니메이션(Animation-duration) duration duration duration dur..
animation-direction 애니메이션 움직임 방향을 설정합니다. 특징 설명 기본 값 normal 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-direction 애니메이션 움직임 방향을 설정합니다. Syntax animation-direction : normal | reverse | alternate | alternate-reverse | inherit; Property 속성 값 설명 normal 애니메이션의 방향을 정상적(기본값)으로 설정합니다. reverse 애니메이션 움직임의 방향을 역방향으로 설정합니다. alternate 애니메이션 움직임의 방향을 순방향을 진행 후 역방향으로 설정합니다. alternate-reverse 애니메이션 움직임의 방향을 역방향을 ..
animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. 특징 설명 기본 값 0s 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. Syntax animation-delay: time | inherit; Property 속성 값 설명 time 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 설정합니다. inherit animation-delay를 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-delay Sample1 클릭하면 지정한 횟수만큼 움직이는 예제입니다. Animation-delay..
animation 속성은 움직임을 표현합니다. 특징 설명 기본 값 animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-iteration-count: 1 animation-direction: normal animation-fill-mode: none animation-play-state: running 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation 속성은 움직임을 표현합니다. Syntax animation: name | duration | timing-function | delay | iteration-count | direction | ..
all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. Syntax all : initial | inherit | unset; Property 속성 값 설명 initial 요소의 모든 속성을 초기화합니다. inherit 상위 요소의 속성을 상속받어 적용합니다. unset 요소의 원래 속성으로 설정합니다. Compatibility 6 7 8 9 10 11 all Sample all all : unset; all : inherit; all : initial;
align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. 특징 설명 기본 값 auto 상속 안됨 애니메이션 안됨 버전 CSS3 Definition align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. Syntax align-self: auto | stretch | center | flex-start | flex-end | baseline | inherit; Property 속성 값 설명 auto 요소의 정렬 상태를 기본으로 설정합니다. stretch 요소의 가로 영역 값을 최대로 설정합니다. center 요소의 정렬을 가운데로 설정합니다. flex-start 요소의 정렬을 시작점으로 설정합니다. flex-end 요소의 정렬을 끝점으로 설정합니다. baseline 요소의 정렬을 기본 값으로 설정..
align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. 특징 설명 기본 값 stretch 상속 안됨 애니메이션 안됨 버전 CSS3 Definition a lign-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. Syntax align-items : stretch | center | flex-start | flex-end | baseline | inherit; Property 속성 값 설명 stretch 요소의 정렬 상태를 기본 값으로 설정합니다. center 요소의 정렬 상태를 가운데로 설정합니다. flex-start 요소의 정렬 상태를 위쪽으로 설정합니다. flex-end 요소의 정렬 상태를 아래쪽으로 설정합니다. baseline 요소의 정렬 상태를 기본값으로 설정합니다. Comp..
align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다. 특징 설명 기본 값 stretch 상속 안됨 애니메이션 안됨 버전 CSS3 Definition align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다. align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의하고 justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. align-content 속성은 display:flex; 상태에서 적용됩니다. Syntax align-content : stretch | center | flex-start | flex-end | space-between | space-around | inherit; Property 속성 값 설명 stretc..
CSS를 알파벳순으로 정리한 태그입니다. 속성 설명 align-content align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다. align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. align-self align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. animation animation 속성은 움직임을 표현합니다. animation-delay animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. animation-direction animation-direction 애니메이션 움직임 방향을 설정합니다. animatio..
태그는 줄바꿈 할 위치를 정의할 때 사용합니다. 특징 설명 콘텐츠 카테고리 Flow content 콘텐츠 속성 Global Attributes, Event Attributes 콘텐츠 요소 Inline Element 닫는 태그 사용 버전 HTML5 시각적 표현 - Definition 태그는 줄바꿈 할 위치를 정의합니다. 태그는 단어가 너무 길거나 원하지 않는 곳에서 줄바꿈을 일어날 것을 염려한다면 이 태그를 사용합니다. Compare 텍스트 줄바꿈을 원하다면, br 태그를 사용합니다. 텍스트 줄바꿈 할 지점을 원하다면 wbr 태그를 사용합니다. Compatibility 6 7 8 9 10 11 wbr
태그는 미디어 영상을 재생합니다. 특징 설명 콘텐츠 카테고리 Flow Content, Palpable Content 콘텐츠 속성 Global Attributes, Event Attributes 콘텐츠 요소 Inline Element 닫는 태그 사용 버전 HTML5 시각적 표현 - Definition 태그는 오디오 또는 비디오 파일을 재생합니다. Property 속성 값 설명 autoplay controls height loop muted poster preload src width Compatibility 6 7 8 9 10 11 video
태그는 수학적 표현이나 프로그램 코드에서 변수를 정의합니다. 특징 설명 콘텐츠 카테고리 Flow content, Phrasing content, Palpable content. 콘텐츠 속성 Global Attributes, Event Attributes 콘텐츠 요소 Inline Element 닫는 태그 Closing ( ~ ) 버전 HTML4 시각적 표현 이탤릭체 Definition 태그는 프로그램 코드에서 변수를 정의합니다. Compare 컴퓨터 소스 코드를 사용한다면 태그를 사용합니다. 수학적인 변수나 프로그램의 변수를 나타낼 대는 태그를 사용합니다. 컴퓨터 프로그램으로 출력된 결과물은 태그를 사용합니다. 사용자가 컴퓨터에 입력하는 문자는 태그를 사용합니다. Compatibility 6 7 8 9 1..