코드노트

animation 여러 스타일을 전환하는 애니메이션을 적용. ex ) transition = A -> B / animation = A -> B -> C -> ... animation - CSS: Cascading Style Sheets | MDN The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animati dev..

transform - 요소의 회전, 크기조절, 기울이기, 이동 효과를 부여할 수 있다. * scale : 크기에 대비해서 크기 조절 * rotate : 방향을 회전 시킴 / deg, turn * translate : 기준점에서 이동 * skew : 각도를 기울이는 효과 * transform-origin : 기준점을 변경할 수 있다. /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5tu..

레이아웃 Layout display - inline, block, inline-block inline요소 : ex ) span.. - 영역의 크기가 내부 콘텐츠 크기로 정해진다. - margin, padding 의 top/bottom은 제외하고 지정할 수 있다. ( 위, 아래 는 지정 불가) - 여러 요소가 가로 배치가 된다. block요소 : ex ) div.. - 영역의 크기를 width, height 를 지정할 수 있다. - width를 지정하지 않으면 가로 전체를 차지한다. - 여러 요소가 세로 배치가 된다. inline - block요소 : ex ) input... - 영역의 크기를 width, height 를 지정할 수 있다. - 여러 요소가 가로 배치가 된다. display : block; ..

박스모델(Box Model) 크기 - width, heigth width : 요소의 너비 설정 heigth : 요소의 높이 설정 - 초기값 : auto - 상속되지 않음 - 인라인요소에서는 지정되지 않음, display속성으로 block을 지정해주어야함 max - width, min - width, max - heigth, min - heigth -최대, 최소 크기를 지정 margin - 네 방향 바깥 여백 영역을 설정 /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0..

CSS에 사용되는 모든 속성에는 해당 속성에 허용되는 값이 있다. 절대 길이 단위 - 일반적으로 항상 동일한 크기로 나타낸다. cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 길이 단위 - 다른 요소와 관련이 있다. 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정된다. em 요소의 글꼴 크기. ex 요소 글꼴의 x-height. ch 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다. re..

font-size 폰트의 크기를 지정합니다. 폰트 크기를 바꾸면 em 과 ex 단위로 계산된 다른 항목들의 크기를 바꿉니다. /* 값 */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; /* 값 */ font-size: larger; font-size: smaller; /* 값 */ font-size: 12px; font-size: 0.8em; /* 값 */ font-size: 80%; /* 전역 값 */ font-size: inherit; font-size: initial; font-size: unset; ..

주요 선택자 - Selector Type, Class, Id See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. - Type Slector / 전체 선택자 - ID Selector / 중복없이 하나만 사용 - Class Selector / 여러가지에 사용가능. 공백으로 다른 class도 추가 가능. 두 개 이상 class 추가 시 뒤에 있는 class가 적용 속성 선택자 - [attr], [attr=value] See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. 1. [arrt] / 속성을 지정하여 선택 2.[attr=value] / 속성과 value값을 지정하여 선택 3. [attr^=value] /..