data life

cubic-bezier란? cubic-bezier(x1,y1,x2,y2) 베지어 곡선이라 하며, 모델링에 사용하는 곡선모델이라 생각하면 됩니다. >> 4개 파라미터는 (x1, y1) (x2, y2) 두 좌표를 의미합니다. (x1, y1) => 베지어 곡선의 시작 곡선을 만드는데 기준이 되는 좌표 (x2, y2) => 베지어 곡선의 마지막 곡선을 만드는데 기준이 되는 좌표 .container { transition: width 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75); } 해당 엘리먼트의 width를 0.5초 동안 제어 4개의 컨트롤 포인트(0.25, 0.25, 0.75, 0.75)를 가지는 cubic-bezier curve에 의거해 효과를 주겠다 (1) Linear (0..

❓calc() 를 사용하는 이유? 반응형 웹을 구축하기 위해서는 고정 단위가 아닌 em, %와 같은 상대적인 단위를 이용하게 된다. 만약 전체 width 100wv에서 20px을 제외한 길이만큼 영역 지정을 하고 싶다면 이 경우 어떻게 해야할까? 고정된 영역에서 20px을 빼거나 더하는 것은 간단하지만 반응형 웹에서는 상대적인 단위를 사용하기 때문에 %, em 등의 수치에 px, pt를 계산해야만 한다. 이때 css의 calc()를 이용하면 손쉽게 계산해서 그 값을 나타내줄 수 있다. div { width: calc(100wv - 20px); } 화면을 최소화할 경우, 최소한 20px의 여분을 주어 안의 내용에 영향을 주지 않도록 도와준다. (화면 조정해서 확인해보세요!) HTML 삽입 미리보기할 수 없..

전환(Transition) CSS에서는 전환 속성을 이용하여 요소의 속성값을 변화시킬 수 있다. 전환 속성은 다음과 같음. transition transition-delay : 전환 효과가 나타나기 전의 지연시간 설정 transition-duration : 전환 효과가 지속할 시간 설정 transition-property : 요소에 추가할 전환 효과 설정 transition-timing-function : 전환 효과의 시간 당 속도 설정 또한, 시간을 정해주어 효과의 시간 당 속도 설정도 가능하다. 1. linear : 일정한 속도로 진행 2. ease : 기본값(default)으로 slow-fast-slow 3. ease-in : 천천히 시작 4. ease-out : 천천히 끝남 5. ease-in-o..

:active 마우스 클릭 시 : hover 마우스가 위에 있을 시 : focus 키보드로 선택 시 : visited 방문한 사이트에 효과 적용 : focus-within 부모 요소에게 적용하여 자식 요소들 중 하나에 focus되었을 때 효과 적용

box-shadow inset : 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려짐 offset-x, offset-y : 그림자의 위치를 설정 offset-x : 수평 거리를 의미하며 음수 값은 그림자를 요소의 왼쪽에 표시 offset-y : 수직 거리를 의미하며 음수 값은 그림자를 요소의 위쪽에 표시 blur-radius : 깂이 클수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아짐 spread-radius : 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듬 color : 색상 결정 Basic HTML 삽입 미리보기할 수 없는 소스 + blur-radius HTML 삽입 미리보기할 수 없는 소스 + spread-radius HTML ..

그리드 형태를 자동으로 정의 : grid-auto-columns : grid-auto-rows grid-template-columns(또는 grid-template-rows)의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성 grid-auto-colums .container { display: grid; grid-template-columns: repeat(2, 30px); grid-template-rows:repeat(2, 30px); grid-auto-flow:column; grid-auto-columns:100px; gap: 3px; } HTML 삽입 미리보기할 수 없는 소스 grid-auto-rows .container { display: grid; grid-template-columns:..

개별 아이템 세로 정렬 : align-self .item { align-self: stretch; align-self: start; align-self: center; align-self: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 개별 아이템 가로 정렬 : justify-self .item { justify-self: stretch; justify-self: start; justify-self: center; justify-self: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스..

아이템 그룹 세로 정렬 : align-content .container { align-content: stretch; align-content: start; align-content: center; align-content: end; align-content: space-between; align-content: space-around; align-content: space-evenly; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 5️⃣ space-between HTML 삽입 미리보기할 수 없는 소스 6️⃣ spac..

세로 방향 : align-items .container { align-items: stretch; /*default*/ align-items: start; align-items: center; align-items: end; } 1️⃣ stretch HTML 삽입 미리보기할 수 없는 소스 2️⃣ start HTML 삽입 미리보기할 수 없는 소스 3️⃣ center HTML 삽입 미리보기할 수 없는 소스 4️⃣ end HTML 삽입 미리보기할 수 없는 소스 가로 방향 : justify-items .container { justify-items: stretch; /*default*/ justify-items: start; justify-items: center; justify-items: end; } 1️⃣..

grid 각 셀의 영역 지정 grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row Grid 아이템(item)에 적용하는 속성으로, 각 셀의 영역을 지정 Grid 라인 번호를 이용해서 column과 row의 범위를 결정 .grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { grid-column-start: 1; grid-column-end: 5; /*grid-column: 1 / 5;*/ /*grid-column: 1 / -1;*/ } .cont..