ㅁ 초반 10분
ㅁ transition
- 이행(움직임 과정) 스타일 속성
1. transition-property : 이행 과정을 볼 css속성을 지정
2. transition-duration : 이행 시간을 지정 (3s == 3초) (3초동안 지속. 3초에 걸쳐서.)
3. transition-timing-function : 이행 과정이 동작하는 방식을 지정 ease, ease-in, ease-out, linear
ㅁ
<div class="box1">box1</div>
<style>
.box1 {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid gray;
}
.box1:hover {
width: 300px;
background: red;
}
.box1 {
transition-property: width, background;
transition-duration: 3s;
transition-timing-function: ease-in;
}
</style>
- 3초에 걸쳐서 크기가 길어지면서 빨개진다.
ㅁ
<div class="box2">회전판</div>
.box2 {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid gray;
border-radius: 100px; /* 테두리 동그랗게 */
}
- 테두리를 동그랗게 했지만 실제로는 사각형이어서 글씨가 저기있다.
.box2 {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid gray;
border-radius: 100px; /* 테두리 둥그랗게 했지만 실제로는 사각형 */
text-align: center;
}
.box2 {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid gray;
border-radius: 100px; /* 테두리 둥그랗게 했지만 실제로는 사각형 */
text-align: center;
line-height: 200px;
}
.box2 {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid gray;
border-radius: 100px; /* 테두리 둥그랗게 했지만 실제로는 사각형 */
text-align: center;
line-height: 200px;
font-size: 32px;
font-weight: 900;
cursor: pointer; /* 커서 올리면 마우스가 손모양이 됨 */
margin: 100px auto; /* 상하, 좌우다. (?) */
}
.box2:active { /* 이 요소를 어떻게 움직일건지 */
transform: rotate(3600deg); /* 360도면 한 바퀴. 10번 돌린다. */
/* 근데 이것만으로는 모름. 클릭하는 순간 순식간에 10바퀴가 돈거다. 3초에 걸쳐서 보게. */
}
.box2 { /* 클릭하는 동안만 돌아간다. */
transition-property: transform;
transition-duration: 3s;
}
- 클릭하는 동안 돌아감.
ㅁ
<div class="img-container"></div>
<div class="screen">도쿄타워</div>
.img-container {
width: 192px;
height: 128px;
background-image: url(../assets/assets/image/city2.jpg);
/* 원본 이미지보다 박스가 작아서 짤려서 보여짐. */
}
.img-container {
width: 192px;
height: 128px;
background-image: url(../assets/assets/image/city2.jpg);
/* 원본 이미지보다 박스가 작아서 짤려서 보여짐. */
background-size: 192px; /* 잘 보임 */
}
.screen {
width: 192px;
height: 128px;
background-color: rgba(255, 0, 0, 0.4); /* 마지막은 투명도. 두 요소를 겹칠 것. */
font-size: 32px;
font-weight: 900;
color: white;
text-align: center; /* 수평 가운데 정렬 */
line-height: 128px; /* 수직 가운데 정렬 */
/* 근데 이 스크린 요소를 안보이게 숨겼다가 위의 사진을 누르면 보여지고, 또 아래에서 올라오게 */
}
.screen {
width: 192px;
height: 128px;
background-color: rgba(255, 0, 0, 0.4); /* 마지막은 투명도. 두 요소를 겹칠 것. */
font-size: 32px;
font-weight: 900;
color: white;
text-align: center; /* 수평 가운데 정렬 */
line-height: 128px; /* 수직 가운데 정렬 */
/* 근데 이 스크린 요소를 안보이게 숨겼다가 위의 사진을 누르면 보여지고, 또 아래에서 올라오게 */
opacity: 0; /* 숨겨짐 */
}
.img-container:hover + .screen {
opacity: 1; /* 이미지에 커서 올리면 screen이 보여짐. 근데 단순 보여지게할뿐 아니라 올라오게할것 */
transform: translateY(-128px) /* y축으로 움직이게하는 함수. 음수면 위로. 양수면 아래로. */
/* 이미지에 hover시 보여지는데 128px만큼 위로 이동해서 보여지게 함. 박스의 세로높이만큼. */
}
- 천천히 올라오고, 천천히 불투명해지게끔 하려면,
<style>
.img-container {
width: 192px;
height: 128px;
background-image: url(../assets/assets/image/city2.jpg);
/* 원본 이미지보다 박스가 작아서 짤려서 보여짐. */
background-size: 192px; /* 잘 보임 */
}
.screen {
width: 192px;
height: 128px;
background-color: rgba(255, 0, 0, 0.4); /* 마지막은 투명도. 두 요소를 겹칠 것. */
font-size: 32px;
font-weight: 900;
color: white;
text-align: center; /* 수평 가운데 정렬 */
line-height: 128px; /* 수직 가운데 정렬 */
/* 근데 이 스크린 요소를 안보이게 숨겼다가 위의 사진을 누르면 보여지고, 또 아래에서 올라오게 */
opacity: 0; /* 숨겨짐 */
}
.img-container:hover + .screen {
opacity: 1; /* 이미지에 커서 올리면 screen이 보여짐. 근데 단순 보여지게할뿐 아니라 올라오게할것 */
transform: translateY(-128px) /* y축으로 움직이게하는 함수. 음수면 위로. 양수면 아래로. */
/* 이미지에 hover시 보여지는데 128px만큼 위로 이동해서 보여지게 함. 박스의 세로높이만큼. */
}
.screen {
transition-property: opacity, transform;
transition-duration: 1s;
/* 마우스 올리면 1초에 걸쳐서 올라오고, 불투명해진다. */
}
</style>
ㅁ <transform 종류 >
- 주석 봐야함.
'03. 웹 표준 기술 > CSS' 카테고리의 다른 글
| [CSS] 04. 레이아웃 스타일 (0) | 2024.08.07 |
|---|---|
| [CSS] 05. Flex 스타일 (0) | 2024.08.07 |
| [CSS] 04. 레이아웃 스타일 (0) | 2024.08.06 |
| [CSS] 실습문제 (0) | 2024.08.06 |
| [CSS] 테이블 관련 스타일 (0) | 2024.08.06 |
