스터디일지/CSS11 [CSS] 기본 익히기 PART 10 Flexbox html 요소를 정렬 및 배치하는 CSS3의 새로운 레이아웃 방법 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치해준다. 복잡한 계산없이 요소의 크기와 순서를 유연하게 배치 할 수 있다. Flexbox 구성 flex container - flex item을 감싸는 부모 요소 flex item - flex container 안에 있는 여러개의 자식 요소 Flexbox 만들기 display: flex 속성을 지정하여 만들 수 있다. 위의 요소가 지정되면 flex-container가 되고 자식요소는 flex-item이 된다. 부모 요소가 inline이면 inline-flex를 지정한다. .flex-container { background-color: green; .. 2024. 3. 15. [CSS] 기본 익히기 PART 9 Animation 요소에 적용된 스타일을 다른 스타일로 부드럽게 전환 시켜 준다. @keyframes를 사용하여 지정할 수 있다. - 애니메이션의 중간상태를 말한다고 한다. transition보다 더 정밀한 효과를 구현할 수 있다. keyframes 정의하기 from ~ to로 지정하기 @keyframes shape { from { border: 1px solid transparent; } to { border: 1px solid #000; border-radius: 50%; } } from ~ percent ~ to로 지정하기 @keyframes background { from { background-color: red; } 50% { background-color: green; } /* percent.. 2024. 3. 15. [CSS] 기본 익히기 PART 8 Transform html 요소를 회전, 크기 조절, 기울이기, 이동효과를 나타낼 때 사용한다 특수한 함수를 사용해서 나타낼수 있다. /* x축(가로)으로 20px 이동 */ transform: translateX(20px); /* y축(세로)으로 40px 이동 */ transform: translateY(40px); /* x축(가로)으로 20px, y축(세로)으로 40px 이동 */ transform: translate(20px, 40px); Transform 함수 translate - 이동하기 translate(tx, ty) - 지정한 크기 만큼 x축, y축으로 이동한다. traslateX - 지정한 크기 만큼 x축으로 이동한다. traslateY - 지정한 크기 만큼 y축으로 이동한다. .box1 .. 2024. 3. 15. [CSS] 기본 익히기 PART 7 Pseudo Class - 가상 클래스 html의 요소에서 특별한 상태를 명시할 때 사용한다. 선택자:가상클래스이름 {속성: 속성값;} 형식으로 사용한다. a:visited { color: red; } a:hover { color: blue; font-weight: 900px; } 대표적으로 많이 쓰이는 가상 클래스 :link - href 속성을 가진 a, area, link 중에 방문하지 않은 모든 요소를 선택한다. :visited - 사용자가 방문한 적이 있는 링크를 나타낸다. :active - 사용자가 활성화한 요소를 나타낸다(버튼 같은거) :hover - 사용자의 마우스 포인터가 요소위에 올라가 있으면 선택된다. :focus - 양식의 입력 칸 등 포커스를 받은 요소를 나타낸다. 보통 요소를 클릭.. 2024. 3. 15. 이전 1 2 3 다음
