...

HTML CSS

HTML CSS

[HTML / CSS] transform, @keyframes, @media 이해하기

1. transform transform 속성은 요소의 모양을 변형시키는데 사용된다 회전, 확대/축소, 기울이기, 이동 등 다양한 변형 효과를 적용할 수 있다 /* 요소를 45도로 회전 */ .rotate { transform: rotate(45deg); } /* 요소를 x축으로 50px, y축으로 100px만큼 이동 */ .translate { transform: translate(50px, 100px); } /* 요소의 크기를 조절할 수 있다 0.5가 태그의 50% 크기 */ .scale { transform: scale(2,2) } 2. @keyframes @keyframes 는 css 애니메이션을 작성할 때 사용한다 애니메이션의 시작과 끝 사이에서 어떤 스타일 변화가 일어날지 정의할수 있다 @ke..

HTML CSS

[HTML / CSS ]input 태그로 tabmenu 만들기

✏️ 목표 Input type="radio" 와 css 를 이용하여 탭메뉴를 만들어보자 🖥️ HTML 탭1 탭2 탭3 1번박스 2번박스 3번박스 🖥️ CSS body { background: #9a7dab; } .tab-menu { margin-left: calc(50% - 200px); margin-top: 30px; padding: 30px; box-sizing: border-box; width: 400px; border-radius: 10px; background: #fff; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); } .tab-menu > input { display: none; } /* 체크속성 다 꺼버림 */ /* 인접한 형제요소 선택자 */ /* t..

유도미
'HTML CSS' 카테고리의 글 목록