KatiaSoft

Grid 그리드(Grid)는 반복적인 내용을 포함하는 자식요소에 대한 정렬을 쉽게 해준다. 컨테이너 요소의 display CSS 속성 값을 grid (혹은 inline-grid)로 지정하여 해당 요소를 그리드로 만들 수 있다. 부모 속성 gap 각 자식 사의 거리를 지정하기위해 사용한다. 기본값 : 0 0 속성구조 [x] : 행 / 열간 거리를 x 로 지정한다. [row-gap 속성값] [column-gap 속성값] row-gap 행간 거리를 지정하기 위해 사용한다. 기본값 : 0 속성값 : [크기] column-gap 열간 거리를 지정하기 위해 사용한다. 기본값 : 0 속성값 : [크기] grid-template-columns 그리드의 열(Column)의 개수와 크기를(비율)에 대한 설정이다. grid..

Flax 플렉스(flex)는 이가 가지는 자식요소들에 대한 정렬을 쉽게해준다. 컨테이너 요소의 display CSS 속성 값을 flex 로 함으로써 해당 요소의 자식들에 대한 정렬을 시작할 수 있다. 부모 속성 align-content 플렉스 박스 전체에 대한 아이템들의 정렬이다. 속성값 center : 가운데 정렬 flex-start : 시작 부분 정렬 flex-end : 끝 부분 정렬 space-around : 각 줄 사이의 공간은 같으나 처음과 끝 여유 공간은 각 줄 사이 공간의 절반 space-between : 각 줄 사이의 공간을 같게 하고 처음과 끝은 여유 공간이 없음 space-evenly : 각 줄 사이의 공간과 양 끝 공간이 동일 stretch : Container의 교차 축을 채우기 위..

키프레임 키프레임은 애니메이션의 한 사이클이 진행됨에 따라 적용할 CSS 속성을 진행도에 따라 나누어 작성하는 것이다. 아래와 같이 키 프레임을 선언한다. 완성도 퍼센트 값을 작성하지않고 0% ~ 100% 까지를 form 과 to 로 대체할 수 있다. @keyframes { [완성도]% { } [완성도]% { } [완성도]% { } [완성도]% { } .... } animation-name 적용할 애니메이션(키프레임)을 지정한다. 기본값 : none 속성값 none : 애니메이션 없음 [키프레임 이름] animation-delay 애니메이션이 작동하기 까지의 지연시간을 지정한다. 기본값 : 0 속성값 : [시간] animation-duration 키프레임의 사이클이 1회 완성되는데 걸리는 시간을 지정한다..

Transform 요소의 모양세를 변경하기위해 사용한다. 기본값 : none 속성구조 [x] : 단일 값 적용 사용가능한 속성값 none : 변화를 적용하지 않는다. [x_...] : 띄우기로 구분하여 여러값 적용 사용가능한 속성값 transform 용함수 속성값 rotateX(a) : x축에 대해 a만큼 회전한다. rotateY(a) : y축에 대해 a만큼 회전한다. rotateZ(a) : z축에 대해 a만큼 회전한다. scale(a) : (2차원의 상황에서) 요소를 a 만큼 확대/축소한다. 값은 0 이상의 실수이며, 1 일때 본래의 크기를 가진다. translate(x, y) : x축에 대해 x만큼, y축에 y만큼 이동한다. 해당 값이 퍼센트 값일경우 해당요소 크기를 기준으로 하는데 x값에 대해 가로..

transition-duration transition 이 완료하기 까지의 걸리는 시간을 지정한다. 기본값 : 0 속성값 : [시간] transition-delay transition 이 발생하기 까지의 지연 시간을 지정한다. 기본값 : 0 속성값 : [시간] transition-property transition 을 적용할 속성을 제한하기위해 사용한다. 속성 구조 : [all|속성 아룸_...] 기본값 : all 속성값 all : 가용 전체 속성에 transition 을 적용한다. [속성이름] transition-timing-function transition이 발생하는데 사용할 시간대비 변화 완료율을 가지는 함수 이다. 기본값 : ease 속성값 ease ease-in ease-out ease-in-..

Text-align 텍스트의 정렬을 지정하기위해 사용한다. 속성값 left 혹은 start : 왼쪽정렬 right 혹은 end : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 Text-decoration 텍스트의 꾸밈을 지정하기위해 사용한다. 기본값 : none 속성구조 : [line 속성값] [color 속성값]? [style 속성값]? 속성값 none : 없음 underline : 밑줄 overline : 윗줄 line-through : 취소선 Text-decoration-color 텍스트의 꾸밍에서 색상을 지정하기위해 사용한다. 기본값 : black 속성값 : [색상] Text-decoration-line 택스트의 꾸밈에서 선을 지정하기위해 사용한다. 속성구조 : [속성 값..

Font-family 서체(폰트)를 지정하기위해 사용한다. 폰트 속성 값을 콤마(,)로 구분하여 여러개 작성할 수 있는데, 먼저 적은 것이 우선순위를 가진다. 속성 구조 : [폰트, ....] 속성값 폰트 이름 serif : 세리프 서체. sans-serif : 세리프가 없는 서체. monospace : 가로길이가 같거나 두 배인 서체.(개발용폰트) cursive : 필기체 Font-size 글씨의 크기를 지정하기 위해 사용한다. 속성값 : [크기] Font-style 폰트 스타일을 지정하기 위해 사용한다. 기본값 : normal 속성값 normal : 일반서체 italic : 기울임 꼴 oblique [x]deg : x도 만큼 기울인 꼴(폰트 지원 필요) Font-weight 폰트의 굵기를 지정하기위해..

Padding 요소의 내부여백을 지정하기 위해 사용한다. 속성값 : [크기] 속성구조 [x] : 상/하/좌/우 모두 x 를 부여한다. [x] [y] : 상/하에 대해 x 를, 좌/우에 대해 y를 부여한다. [a] [b] [c] [d] : 상/하/좌/우를 a,b,c,d 순으로 부여한다. 상/하/좌/우 따로 값을 줄 때 1) padding-top 위쪽의 내부여백을 지정하기 위해 사용한다. 속성값 : [크기] 2) padding-right 오른쪽의 내부여백을 지정하기 위해 사용한다. 속성값 : [크기] 3) padding-bottom 아래쪽의 내부여백을 지정하기 위해 사용한다. 속성값 : [크기] 4) padding-left 왼쪽의 내부여백을 지정하기 위해 사용한다. 속성값 : [크기] 형식 [Tag] or ..

Margin 요소의 외부여백을 지정하기 위해 사용한다. 속성값 : [크기] 속성구조 [x] : 상/하/좌/우 모두 x 를 부여한다. [x] [y] : 상/하에 대해 x 를, 좌/우에 대해 y를 부여한다. [a] [b] [c] [d] : 상/하/좌/우를 a,b,c,d 순으로 부여한다. 상/하/좌/우 따로 여백 줄 때 1) margin-top 위쪽 외부여백을 지정하기 위해 사용한다. 속성값 : [크기] 2) margin-right 오른쪽 외부여백을 지정하기 위해 사용한다. 속성값 : [크기] 3) margin-bottom 아래쪽 외부여백을 지정하기 위해 사용한다. 속성값 : [크기] 4) margin-left 왼쪽 외부여백을 지정하기 위해 사용한다. 속성값 : [크기] 형식 [Tag] or [.class] ..

Position 요소의 위치 지정을 위해 사용한다. 요소의 위치는 top, right, bottom, left 네개의 속성으로 지정할 수 있는데, 이 때 상충되는 속성(top 과 bottom 혹은 right 와 left)을 동시에 사용하여서는 안된다. 기본값 : static 속성값 static : 요소가 본래 위치해야하는 위치에 위치하며, 위치를 조정할 수 있는 속성을 모두 무시한다. relative : 요소의 position이 static 일때의 위치를 기준으로 움직인다. absolute : position 속성값이 static 이 아닌 가장 가까운 부모/선조를 기준으로 움직인다. position 속성값이 static 이 아닌 가장 가까운 부모/선조가 없을 경우 문서자체를 기준으로 한다. 다른 요소의 ..