Ann's log

이 글에서 정리하는 내용: 웹페이지에 YouTube 동영상을 삽입하는 방법 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하는 방법 웹페이지에 YouTube 동영상 삽입하기 YouTube 동영상 아래의 공유 버튼을 클릭한다. 퍼가기 버튼 클릭. 그러면 동영상 퍼가기 창이 뜨는데, 원하는 조건을 선택한 다음에 복사 버튼을 클릭하면 태그 전체가 복사 된다. 이제 복사된 태그를 HTML 문서 안의 원하는 곳에 붙여넣기 하면 YouTube 동영상 삽입 완료! HTML 나는 CSS를 이용하여 반응형으로 만들기 위해 div로 iframe 태그를 감싸주고 player 라는 class 이름을 붙여줬다. 동영상의 비율은 유지 하면서 크기를 반응형으로 조절하기 비율이 유지되는 반응형 동영상을 위해서는 동영상의 종횡비를..

예전에 프로젝트 만들다가 알게 된 반응형 사각형 만드는 법. 예를들어, 이렇게 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..

폰트를 적용할때 cdn을 사용하면 성능이 안 좋아진다고 해서 폰트를 직접 다운 받아 적용하는 방법에 대해 알아 보았다. 1. 적용할 폰트를 다운 받는다. 나는 눈누라는 사이트를 사용하였다. (예쁜 한글 폰트가 많아서 자주 사용함 🤩 ) https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 폰트 상세 페이지에서 다운로드 버튼을 볼 수 있다. 이 버튼을 클릭하면 다운로드 페이지로 바로 이동하여 다운 받을 수 있음. 2. 다운받은 폰트를 src 폴더 안에 넣어준다. 나는 src 폴더 안에 fonts 폴더를 먼저 만들고 그 안에 넣어줬다. 3. font-face 정의 후 원하는 곳에 적용한다. 나는 전체 페이지에 한번에 적용하기 위해 index.css 파일에서 font-face를 ..

새로 배울때마다 계속 해서 업데이트 할 예정. Git 저장소 초기화 git init Git config list 보기 (사용자 이메일, 이름 등의 정보를 볼 수 있음) git config --list 전역적으로 사용자 이름 정보 변경하기 git config --global user.name "사용자이름" 전역적으로 사용자 이메일 정보 변경하기 git config --global user.email "이메일 주소" GitHub 원격 저장소 추가하기 git remote add origin https://github.com/[github 계정 이름]/[저장소 이름].git 기존 저장소 remote 제거하기 git remote remove origin 모든 파일의 변경 사항을 git에 추가하기 (.gitign..

정리가 안 되어 있는 Github 각 저장소의 Readme 파일을 수정하기 위해 badge 만드는 방법을 찾아 보았다! Shields.io 사이트에 들어가면 다양한 형태의 badge를 만드는 법을 볼 수 있다. https://shields.io/ Shields.io: Quality metadata badges for open source projects Love Shields? Please consider donating to sustain our activitiesYour BadgeStaticUsing dash "-" separator/badge/ - - Dashes --→- DashUnderscores __→_ Underscore_ or Space → SpaceUsing query string par..

AWS IAM(AWS Identity and Access Management) AWS IAM이란? AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스. IAM을 사용하여 리소스를 사용하도록 인증(로그인) 및 권한 부여된 대상을 제어한다. AWS를 사용할 때 Root 사용자를 바로 사용하는 것이 보안상 권장되지 않기 때문에, Root 계정을 보호하기 위해 특정 권한만 부여하는 부계정을 만든다고 생각하면 될 것 같다! 더 자세한 설명은 aws-documentation에 자세히 나와있다. https://docs.aws.amazon.com/ko_kr/IAM/latest/UserGuide/introduction.html IAM이란 무엇입니까? - AWS Identity and Access Manag..

Heroku를 사용한 첫 PHP 프로젝트 배포 과정 기록! 😁 Apache, PHP, Amazon RDS(MySQL)를 사용하여 생성한 프로젝트를 배포함. 1. Heroku app 생성 Heroku 홈페이지에서 로그인 하고 create new app 버튼을 눌러서 새로운 app을 생성한다. https://www.heroku.com/ Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 2. Composer 설치 Heroku 공식문서를 읽어보니..