본문 바로가기

엘리스 AI 트랙 4기/elice AI track56

[1주차] 미디어쿼리 1월 13일 자 학습 내용 정리입니다. ✅ 미디어쿼리 기존의 웹사이트들은 pc에 맞추어 만들어지는 것이 기본적이다. 하지만 최근 휴대폰, 태블릿 등 pc보다 작은 모바일 기기들이 많이 사용되고 있는 시점에서 각 모바일 기기들에 맞추어 화면을 보여주는 것이 필요해졌다. 따라서 pc 뿐만 아니라 모바일, 태블릿 등에서도 대응되는 반응형, 적응형 웹 사이트들을 만들기 위해 미디어 쿼리의 개념이 필요해졌다. 미디어쿼리는 여러 기기에 맞추어 웹 사이트를 만들기 위해 사용하는 css 구문으로 해당 기기의 화면 크기에 맞추어 요소들의 크기, 위치 등을 조절할 때 쓰인다. 미디어 쿼리의 구문은 아래와 같다. @media (min-width) and (max-width) { ... } min-width와 max-widt.. 2022. 1. 13.
[1주차] transform, transition, animation 1월 13일 자 학습 내용 정리입니다. ✅ tramsform 특정 영역에서 object를 회전시키거나 위치 이동, 크기 변경이 필요할 때 사용한다. rotate transform: rotate(각도) object에 대해 평면적인 회전을 할 때 사용한다. 음수와 양수 모두 가능하며 양수이면 시계방향, 음수이면 반시계방향으로 회전한다. scale transform: scale(width 비율, height 비율) object의 크기를 조절할 때 사용한다. 2를 입력하면 object 기본 크기의 2배, 0.5를 입력하면 object 기본 크기의 0.5배가 된다. skew transform: skew(x축, y축) object에 대해 입체적인 회전을 할 때 사용한다. translate transform: tra.. 2022. 1. 13.