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) / 위치속성

 

- position: absolute와 position: relative_코드펜

position: absolute와 position: relative

 

 

- position: absolute와 position: relative( 애니메이션 아래에서 위로)_코드펜

position: absolute와 position: relative( 애니메이션 아래에서 위로)

 

position: absolute와 position: relative(애니메이션 위에서 아래로)_코드펜

position: absolute와 position: relative(애니메이션 위에서 아래로)

 

---

# 복습

- position 연습 1_코드펜

position 연습 1

 

- position 연습 2_코드펜

position 연습 2

 

---

# 과제

- z-index 연습해오기