Jade_o.o

Transform (전환) 2D 변환 함수 3D 변환 함수 perspective :: 하위 요소를 관찰하는 원근 거리를 지정 backface-visibility :: 3D 변환으로 회전된 요소의 뒷면 숨김 여부 Transition (전환) transition : 속성명 지속시간 타이밍 함수 대기시간 transition-property :: 전환 효과를 사용할 속성 이름을 지정 transition-duration :: 전환 효과의 지속시간을 지정 transition-timing-function :: 전환 효과의 타이밍(Easing) 함수를 지정 transition-delay :: 전환 효과과 몇 초 뒤에 시작할지 대기시간을 지정 Animation @keyframes • CSS의 애니메이션 효과를 개발자가 ..

Flex flex-wrap :: 묶음(줄 바꿈) 여부 justify-content :: 주 축의 정렬 방법 align-items :: 교차 축의 한 줄 정렬 방법 align-content :: 교차 축의 여러줄 정렬 방법

position relative absolute fixed 요소 쌓임 순서(Stack order) :: 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 요소가 display가 변경됨 배경 background-color :: 요소의 배경 색상 background 그라데이션 넣기! • 그라데이션 컬러를 백그라운드 요소로 삽입 가능 • background : linear-gradient() • 색상1 | 색상2 : 상하로 색 2개 지정 • 방향 | 색상1 | 색상2 : 해당 방향으로 색상 2개 지정(ex, 90deg blue red) • 방향 | 색상1 | 색상1의 비중 | 색상2 : 색상 1의 비중을 % 로 지정 • 방향 | 색상1 | 색상2 | 색상3 : 색상 3개 사용

박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 Font font-weight => 글자의 두께(가중치) font-size => 글자의 크기 line-height => 한줄의 높이, 행간과 유사 문자에 대한 속성 박스 모델(중요) Inline 요소 Block 요소 Inline-bloc 이란? • Block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념 • 디자인이 중요시 되면서 블록을 가로로 나열 하는 경우가 많이 생겼는데, span 태그는 inline 요소라서 해당 구역을 꾸미기가 어려움! • 따라서, 둘의 특징을 합쳐서 만든 inlineblock! margin & padding margin : 다른 요소와의 거리, 바깥쪽 여백 padding: bo..