인터랙티브 웹 개발) Transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box-container{
display: flex;
}
.box{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: rgba(255, 255, 0, 0.7);
}
.box:hover{
/* transform-origin default 값: center */
/* transform-origin: bottom; */
/* transform-origin: 0% 0%; */
/* this is equal to transform-origin: left top */
transform-origin: 100% 100%;
/* this is equal to transform-origin: right bottom */
/* transform: scale(1.5); */
transform: rotate(15deg);
/* transform: skewX(30deg); */
/* transform: translate(10px, -20px); */
/* transform: translateX(10px) translateY(-20px); */
}
</style>
</head>
<body>
<h1>css transform</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="box-container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
📌 참고자료
css 의사 클래스(가상 클래스)
- 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다
- ex. :hover는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택한다
보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택된다- 의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 외부 인자와 관련된 경우에도 스타일을 적용할 수 있다
-> 탐색기 히스토리(:visited 등)
-> 콘텐츠의 상태(특정 폼 요소에 적용한 :checked 등)
-> 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 :hover 등)
Be able to be vulnerable, in search of truth