| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- 반응형
- dependabot
- createRoot
- .eslintrc
- react18
- aws-sdk
- qoddi
- Web Storage
- 배포
- naver api
- CSS
- multer-s3
- hooks
- php
- fly.io
- dependencies
- GitHub
- 클린코드
- Next.js
- react
- package.json
- bucket
- touch event
- node.js
- npm-check-updates
- s3
- Github Pages
- gh-pages
- heroku
- AWS
- Today
- Total
목록CSS (2)
Ann's log
[CSS] 웹페이지에 반응형 YouTube 동영상 삽입하기
이 글에서 정리하는 내용: 웹페이지에 YouTube 동영상을 삽입하는 방법 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하는 방법 웹페이지에 YouTube 동영상 삽입하기 YouTube 동영상 아래의 공유 버튼을 클릭한다. 퍼가기 버튼 클릭. 그러면 동영상 퍼가기 창이 뜨는데, 원하는 조건을 선택한 다음에 복사 버튼을 클릭하면 태그 전체가 복사 된다. 이제 복사된 태그를 HTML 문서 안의 원하는 곳에 붙여넣기 하면 YouTube 동영상 삽입 완료! HTML 나는 CSS를 이용하여 반응형으로 만들기 위해 div로 iframe 태그를 감싸주고 player 라는 class 이름을 붙여줬다. 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하기 비율이 유지되는 반응형 동영상을 위해서는 동영상의 종횡비를..
[CSS] 반응형 정사각형 만들기
예전에 프로젝트 만들다가 알게 된 반응형 사각형 만드는 법. 예를들어, 이렇게 div 안에 들어있는 img의 크기를 화면 크기가 달라져도 정사각형으로 유지하고 싶을때 사용할 수 있다. HTML CSS div { width: 40%; position: relative; } div::after { content: ""; display: block; padding-bottom: 100%; } div img { width: 100%; height: 100%; position: absolute; } 반응형 정사각형을 만들기 위해서 div에 after 요소를 만들어 주고 padding-bottom을 100%로 설정해 줬다. 그리고 img의 width와 height은 100%로 설정하고, position을 absol..