인터랙티브 웹 개발 - 리스트 아이템

1. CSS grid : 세로 열과 가로 행을 기준으로 요소를 정렬하는 레이아웃

 

레이아웃 정의
grid-template-rows	행의 형태를 정의
grid-template-columns	열의 형태를 정의

 

간격 정의

gap

 

아이템의 형태를 정의
grid-column-start	그리드 항목의 시작 열 라인을 지정
grid-column-end	그리드 항목의 끝 열 라인을 지정
grid-row-start	그리드 항목의 시작 행 라인을 지정
grid-row-end	그리드 항목의 끝 행 라인을 지정

 

2. CSS transition : 속성값의 변화를 일정 기간에 걸쳐 일어나게 하는 것

transition 속성
property	트랜지션 효과를 적용할 CSS 속성을 지정
duration	트랜지션 효과가 완료되는 데 걸리는 시간을 설정
timing-function	트랜지션 효과의 속도 곡선을 정의 애니메이션의 진행 속도를 설정
delay	트랜지션 효과가 시작되기 전에 기다리는 시간을 설정

 

3. CSS transform : 요소를 변형할 수 있도록 함

transform 속성
translate	이동
scale	확대, 축소
rotate	회전
skew	기울이기

 

4. CSS position : 문서 상에 요소를 배치하는 방법

position 속성
static	일반적인 흐름, 기본값, 위치 임의 설정 불가
relative	문서 흐름에 따라 배치 원래 있던 위치를 기준으로 위치 설정
absolute	일반적인 문서 흐름에서 제거되고, 가장 가까운 위치 지정 조사상 요소를 기준으로 배치
fixed	일반적인 문서 흐름에서 제거되고, 뷰포트를 기준으로 배치
sticky	문서 흐름에 따라 배치 스크롤이 존재하는 가장 가까운 조상에 달라 붙음