2024. 11. 18(월) 웹2 3일차
# 수업시간에 띄어놔야 할 창
| 사이트 이름 | 사이트 주소 |
| 수업페이지 | url |
| 코드펜 | url |
| git-hub | url |
| 피그마 예제보기 | url |
| vscode 화면 / 미리보기 화면 띄워두기 | - |
# 1교시
position속성)
- absolute : 상위태그
- body가 부모 역할을 함
- 참고 사이트
- 참고 사이트
- 참고 사이트
- 참고 사이트
ㄴ transform을 사용하여 변형→transform: translatY(-50%);/ transform: translate(-50%, -50%); / 두 가지 방법 다 사용O
# 2교시
object-fit속성)
- img태그나 video요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정
- object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있음
- 참고 사이트
object-fit: cover)
- 대체 콘텐츠의 가로, 세로비를 유지 하면서, 요소 콘텐츠 박스를 가득 채움
ㄴ 서로의 가로, 세로비가 일치하지 않으면 객체 일부가 잘려나감
overflow)
- 주어진 공간이 모자라 넘치는 컨텐츠를 어떻게 보여줄지 제어함
- 참고 사이트
overflow: hideden)
- 주어진 공간이 모자라 넘치는 컨텐츠를 어떻게 보여줄지 제어함
- 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨겨버릴 수 있음
- position_코드펜
position(2024-11-18) / 위치속성
...
codepen.io
- position: absolute와 position: relative_코드펜
position: absolute와 position: relative
...
codepen.io
- position: absolute와 position: relative( 애니메이션 아래에서 위로)_코드펜
position: absolute와 position: relative( 애니메이션 아래에서 위로)
...
codepen.io
position: absolute와 position: relative(애니메이션 위에서 아래로)_코드펜
position: absolute와 position: relative(애니메이션 위에서 아래로)
...
codepen.io
# 복습
- position 연습 1_코드펜
position 연습 1
...
codepen.io
- position 연습 2_코드펜
position 연습 2
...
codepen.io
# 과제
- z-index 연습해오기