KatiaSoft

Display 요소의 표시 방식을 지정하기 위해 사용한다. 기본값 : 요소에 따라 다름 속성값 block : 플로우 컨텐츠(한줄을 다 차지) inline : 구문 컨텐츠(글자 취급) inline-block : 구문 컨텐츠. inline 속성값을 가지는 요소의 크기를 조정할 수 없음으로 inline을 속성을 갖되 크기 조정을 가능하게 하기 위해 사용한다. none : 요소가 없는 것으로 지정한다. 형식 [Tag] or [.class] or [#id]{ display : [속성값]; }

Overflow 요소의 범위를 벗어난 자손 요소들에 대한 처리를 위해 사용한다. 기본값 : visible 속성구조 [x] : 가로/세로축에 대한 설정을 [x] 로 한다. [x] [y] : 가로축에 대한 설정을 [x] 로, 세로축에 대한 설정을 [y] 로 한다. 속성값 auto : 범위를 벗어난 경우에만 스크롤 바를 보인다. hidden : 범위를 벗어난 요소를 보이지 않게 한다. scroll : 범위를 벗어난 것에 대한 여부와 관계없이 스크롤 바를 보이게 한다. visible : 범위를 벗어난 요소를 보이게 한다. Overflow-x 가로축으로 범위를 벗어난 자손요소들에 대한 처리를 위해 사용한다. 속성값은 하나만 가지며 그 값은 overflow의 값과 같다 Overflow-y 세로축으로 범위를 벗어난 ..

Border 요소의 테두리를 지정하기위해 사용한다. 속성구조 [x] [y] [z] : 테두리의 굵기로 x를, 모양으로 y를, 색상으로 z를 사용한다. 기본값 : none 속성값 굵기에 대해 [크기] 모양에 대해 dashed : 긴 점선 dotted : 점선 double : 이중 실선 solid : 실선 색상에 대해 [색상] Border-top 위쪽 테두리를 지정하기 위해 사용한다. 용법은 border 와 동일함. Border-right 오른쪽 테두리를 지정하기 위해 사용한다. 용법은 border 와 동일함. Border-bottom 아래쪽 테두리를 지정하기 위해 사용한다. 용법은 border 와 동일함. Border-left 왼쪽 테두리를 지정하기 위해 사용한다. 용법은 border 와 동일함. Bord..

Filter 요소에 (이미지) 필터효과를 적용하기 위해 사용한다. 기본값 : none 속성구조 [x] : 단일 값 적용 사용 가능한 속성값 none : 필터를 적용하지 않는다. [x_....] : 띄우기로 구분하여 여러값 적용 사용 가능한 속성 filter용 함수 속성값 blur(x) : x[크기] 만큼 흐리게 한다. brightness(x) : 0 이상의 실수(혹은 0% 이상)로, 밝기를 지정한다. 0 일때 완전히 어두우며, 1(100%)일때 본래 밝기를 가진다. contrast(x) : 0 이상의 실수(혹은 0% 이상)로, 대비를 지정한다. 값이 낮을 수록 저대비, 높을수록 고대비이며, 1 (100%)일때 본래 대비를 가진다. grayscale(x) : 0 이상 1이하의 실수 (혹은 0% 이상 100..

Width 요소의 가로 크기를 지정하기 위해 사용한다. 기본값 : auto 속성값 : [크기] Height 요소의 세로 크기를 지정하기 위해 사용한다. 기본값 : auto 속성값 : [크기] [Tag] or [.class] or [#id] { width : [크기]; height : [크기]; }

Cursor 마우스 커서의 모양을 변경하기 위해 사용한다. 기본값 : auto 속성값 default : 일반적인 마우스 커서 none : 마우스 커서를 그리지 않는다. pointer : 클릭할 수 있는 형태의 커서 progress : 작업이 진행중인 형태의 커서 text : 텍스트 형태의 커서 wait : 응답이 없거나 대기해야하는 형태의 커서 ew-resize : 가로 방향의 크기 변경 형태의 커서 ns-resize : 세로 방향의 크기 변경 형태의 커서 nesw-resize : 북동/남서 방향의 크기를 변경 형태의 커서 nwse-resize : 북서/남동 방향의 크기를 변경 형태의 커서 형식 /* 아래의 선언한 영역 안에서 마우스 커서 모양 변경*/ [Tag] or [.class] or [#id]{ ..

Background-color 요소의 배경 색상을 지정하기 위해 사용한다. 속성 값 : [색상] 형식 [태그] or [.class] or [#id]{ background-color : [색상]; } Background-image 요소의 배경이미지를 지정하기위해 사용한다. 일반 이미지(img태그)와의 차이점은 선택이 불가능하고 우측 마우스 클릭으로 저장이 안되며, 자리를 차지 하지않는다는 점 등이 있다. 기본값 : none 속성값 url함수 호출 linear-gradient함수 호출 : 선형 그라데이션 이미지를 지정한다. radial-gradient함수 호출 : 방사형 그라데이션 이미지를 지정한다. 형식 [태그] or [.class] or [#id]{ background-image : url("[Local..

Color 텍스트의 색상을 지정하기 위해서 사용한다. 속성 값 : [색상] 형식 [태그명] or [.클래스명] or [#id]{ color : [색상]; }

시간 s : 초(=1000ms) ms : 밀리초 크기 px : 픽셀 단위. em : 부모가 가진 font-size 와 1:1로 비례되는 크기. rem : 브라우저가 가진 font-size롸 1:1로 비례되는 크기(기본 값으로 1rem은 16px과 동일하다.) vw : 현재 브라우저 창의 가로 크기에 대한 비율. (브라우저 가로 크기는 100vw) vh : 현재 브라우저 창의 세로 크기에 대한 비율. (브라우저 세로 크기는 100vh) % : (크기를 가지는 가장 가까운)부모의 크기에 대한 비율.

색상 css 에서 색을 표현하는 방법은 아래와 같다. 리터널 : 리터널 색상은 별도의 코드를 활용 하지않고 약속되어 있는 색상을 지칭하는 단어를 사용하는 것이다. 가령 빨간색은 red, 파란색은 blue, 초록색은 green 등으로 사용할 수 있다. rgb(r, g, b) : RGB 를 나타낼 수 있는 각 값 r, g, b를 통해 색상을 표현한다. 각 값은 0부터 255까지이고, 값이 높을수록 밝은 색이다. r은 빨간색, g는 초록색, b는 파란색을 담당한다. rgb(0,0,0) 은 아무색도 들어가지 않는 검은색 rgb(255,255,255) 은 모든색이 최대한 들어간 흰색 rgb(255,0,0) 은 빨간색만 들어가는 빨간색 rgba(r, g, b, a) : 위 rgb함수와 동일하나 알파값(a)을 주어 ..