Chikaka 개발새발

자동완성으로 text input이 채워지면 설정한 배경색이 아닌 다른색으로 변경되는것을 볼 수 있다. 그럴 때 사용하는 autofill 옵션이다. 그냥 autofill은 적용되지 않고 -webkit-autofill을 이용해야한다. 그리고 배경색이 아니라 그림자를 조정해야한다. input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset;} 그리고 사용은 이렇게! 저기 색깔(white) 넣은 부분에 원하는 색을 넣어주면 된다. -webkit으로 했지만 엣지에서도 잘 작동된다.

1. 말줄임 - 한줄일 때 .box { overflow: hidden;/* 넘치는 부분 안보이게 처리 */ white-space: nowrap;/* 줄바꿈 없애기 */ text-overflow: ellipsis;/* 말줄임 효과(...) */ } 안될 때 - width 지정됐는지, display:bolck 인지 확인하기 2. 말줄임 - 여러줄 일 때 .box { display: -webkit-box; /* 해당 영역을 box 형태로 관리되도록 */ -webkit-box-orient:vertical;/* 영역 박스의 내의 정렬을 수직으로 */ -webkit-line-clamp:3;/* 영역 내의 컨텐츠의 최대 라인수 */ overflow: hidden; word-break: keep-all; /* 단어 단..

vw는 viewport width로 브라우저 화면 크기를 말한다. 100vw로 하면 화면 크기 100%를 width로 지정하겠다는 뜻이다.\ 근데 이게 수직 스크롤이 생기면 거기까지가 100%라서 수평 스크롤이 생겨버린다. 수평 스크롤을 없애기 위한 방법으로 html,body { overflow-x:hidden; } 이걸 추가해주면 된다.

Youtube API 연동하여 영상 최신순으로 업로드 하기 1. 먼저 API KEY를 할당 받아야한다. https://console.cloud.google.com/apis/credentials Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 사용자 인증정보 탭에서 API KEY를 할당받는다. 사용자 인증정보 만들기 2. API 사용을 눌러줘야한다. 이는 ERROR 창에서 URL을 확인하여 접속할 수도 있다. 3. 파라미터 정보는 아래 홈페이지에서 확인할 수 있다. https://developers.google.com/youtube/v3/docs/videos/list Videos: list | YouTube Data API | Google Dev..

클릭하면 원하는 페이지의 원하는 위치로 이동시키는 방법 ① 목적지태그에 id를 추가해준다. name이라고들 해서 name으로 했는데 안되고 id로 하니 됐다. ② a 태그를 이용하여 href를 입력해준다 여기서 #name 써주면 되는데 같은 페이지면 "#name"만 써주면 되고 다른 페이지면 "이동할주소#name"을 적어주면된다. 이동하기 이동하기 주의) 주소/#here 하면 404 에러가 날 수도 있다.

갑자기 $(this)가 작동하지 않았다. 하루종일 이걸 어떻게 해야하나 싶었는데... 알고보니 arrow function에서는 작동하지 않는다. arrow function 다 수정해주니 다시 잘된다..ㅎㅎㅎㅎㅎㅎㅎ

models에서 이미지 파일 업로드 컬럼을 추가했었다면 파일 업로드 폴더 변경하고 싶을 때! 먼저 models.py에서 폴더 지정하는 코드를 수정해준다 images = models.ImageField(blank=True, upload_to="image", null=True) 여기서 upload_to에 원하는 폴더명 적어주기 그리고나서 makemigrations -> migrate 잊지말고 해주기! 보통 장고라면 이렇게하고나면 자동으로 폴더가 생긴다. --------------------------------------------------------------------------------------------------------------------------------------- 하지만 나는 보..

Aos 는 스크롤시 화면에 요소를 나왔다 안나왔다 하게 해주는 라이브러리이다. 사용하려면 먼저 에 라이브러리 추가해주기 그리고 그리고 애니메이션 원하는 요소에 data-aos 추가하기 관련 내용은 아래에서 참고하기 https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 여기에서도 정리를 잘해놓으셨다! https://inpa.tistory.com/entry/AOS-%F0%9F%93%9A-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-Animate-O..