Web/CSS10 09. CSS Transform, Transition, Animation 1. CSS Transform - 2차원 좌표에서 요소를 변형시키는 속성 translate: 이동 rotate: 회전 scale: 확대, 축소 skew: 경사, 비틀기 Transform _ 적용예시 p { margin: 0 auto; width: 600px; padding: 20px; border: 3px solid rgba(0, 0, 0, 0.5); } #translate { transform: translate(30px, 50px); background-color: deeppink; } #rotate { transform: rotate(60deg); background-color: gold; } #scale { transform: scale(1.5, 1.2); background-color: oran.. 2024. 4. 12. 08. CSS 우선순위, Custom Properties 1. css 우선순위 계산 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용 우선순위 계산식 inline: 1,000점 id 속성: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0순위 #id-style { background-color: deeppink; } #id-style2 { background-color: deepskyblue; } div { display: block; padding: 30px; margin: 30px; background-color: gold; } .class-style3 { backg.. 2024. 4. 11. 07. 미디어쿼리 1. 미디어 쿼리(media query) 반응형 웹 하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 body {background-color: deeppink;} @media screen and (min-width: 800px) { body {background-color: deeppink;} } 800px 이하일 때 800px 이상일 때 매체 유형 - all: 모든 유형 - screen: 컴퓨터, 태블릿, 스마트폰 ... - print: 프린터 적용예시(1) * {margin:0; padding:0; box-sizing: border-box;} header { width: 100%; background-color:.. 2024. 4. 11. 06. flex Flex 레이아웃 수평 정렬을 하기 위한 속성 display: flex 1. flex-wrap 라인에 여유가 없을 때 위치를 결정하는 속성 flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 - nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 - wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 - wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래가 아닌 위쪽으로 넘김) #container { width: 1000px; height: 500px; margin: 0 auto; border: 3px solid red; display: flex; /*기본값: nowrap;*/ /*fle.. 2024. 4. 9. 이전 1 2 3 다음 LIST
