Frontend23 [CSS] space-between, space-around, space-evenly space-between: element 사이에 균일한 여백(between) space-around: element의 수대로 container를 분할한다음 좌우여백을 동일하게 줌 space-evenly: element 를 제외한 여백을 동일하게 나눔 더 자세한 설명: https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 2021. 7. 20. [CSS] box-shadow Box-shadow - 그림자 효과 - 3개의 value /* x축 | y축 | 색상 */ box-shadow: 60px -16px teal; - 4개의 value /* x축 | y축 | blur-radius | 색상 */ box-shadow: 10px 5px 5px black; (blur-radius 값이 클수록 크기는 커지면서 테두리는 흐려지고 색은 옅어짐) - x축과 y축의 값이 모두 0일 때 /* x축 | y축 | blur-radius | 색상 */ box-shadow: 0px 0px 15px #orange; 2021. 7. 18. [CSS] transition, transformation, animation Transition : 전환, 다른 상태로의 이행 - state가 아닌 root에 사용(hover을 예로 들자면, hover가 정의되지 않은 곳에 써야 함) - 변화된 모든 값을 선택할 때는 'all' 을 사용 img{ background-color: black; color: blue; transition: background-color 10s ease-in-out, color 4s ease-in-out; } img:hover { background-color: white; color: white; } Tranformation : 변형 - 변형하고 싶은 선택자의 css안에 작성 - transition 과 함께 사용 가능 img { transition: transform 5s ease-in-out; } i.. 2021. 7. 14. 이전 1 2 3 다음
