솔솔

어느 날 프로젝트를 하던 중 아이콘 이미지를 변경해야 되서 css파일을 열어보니 해당 아이콘 이미지 파일은 background: url(data:image/png;base64,) 이렇게 되어있었고 변경해달라고 받은 파일은 png파일이였다. 당황해서 다른 아이콘이미지를 찾아보니 background: url("@/assets/images/.svg") 내가 알고 있는 방법인 파일경로를 작성해주는 방법이였다. 여기서 궁금증이 생겼다. 보기에 똑같이 이미지를 불러오는건데 위에랑 밑에랑 무슨 차이인지 상대경로 상대경로 : 현재 작성하는 문서를 기준으로 자원의 경로를 지정 background: url("@/assets/images/.svg") 파일 시스템에서 해당 경로에 있는 이미지를 참조함 - 이미지 파일 요청시 ..

❗ 팀프로젝트를 준비하면서 아래의 사진에 마우스를 올렸을 때 뻐끔뻐끔 되는 오징어가 움직이면 좋겠다라는 생각이 들길래 한번 도전해 봤습니닷. 🔍 해결방법 1. 연속적인 동작을 표현할 사진을 여러장 준비합니다. (저는 아이패드로 집적 그려서 4장 만들었습니닷) 2. html에 이미지를 넣을 코드 작성. 3. css에 'squidImg1'에 대한 css지정과 @keyframs을 작성해줍니다. (@keyframs과 animation에 대해 : https://solsolhane.tistory.com/10?category=1255094) .squidImg1 { width: 150px; height: 225px; background-size: 150px; background-image: url("../img/오징어..

1. 사이트 들어가기 (https://fonts.google.com/) Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 검색조건 없이 쭈욱 내려서 봐도 되고 아래 그림처럼 검색조건을 선택해서 봐도 됨. 3. 원하는 선택 후 글씨체 페이지에서 + Select this style을 클릭한다. 4. 상단의 오른쪽에 이 버튼을 누른다. 5. 그러면 + Select this style로 추가한 글씨체가 적용되서 팝업창이 하나 나옴. 6. 팝업창에 나온 링크를 복사합니다. 7. 작업하는 곳에 링크를 붙여넣습니다. 8. 아래의 코드를 복사한다. 9. 적용시키고 싶은곳에 코드를 붙여..

💡 플렉스 박스를 자유자재로 쓰기위해 레츠고! 🔍 flexbox란? flexbox를 통해 박스와 아이템들을 행 또는 열로 자유자재로 배치시킬 수 있습니다. flexbox는 컨테이너(container)와 아이템(item) 있습니다. 자세히 보려면 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ◎ container속성 * display (기본값:flex) * flex-direction (기본값:row) * flex-wrap (기본값:nowrap) < nowrap:랩핑안함 ..

이전에 유튜브 보면서 keyframes만들어서 글씨에 animation효과를 준적이 있는데 좀 더 상세하게 공부하고 싶어서 공부 해봤습니닷! 💡@keyframes 과 animation에 대해 알아보자! ◎ keyframes 과 transition 차이 transition : 변화하는 속성값이 있어야 작동함.(:hover /:checked ) keyframes : 변화값 작동, 스스로 작동, 반복가능, 순방향진행, 역방향진행, 양방향진행 가능 ◎ [keyframes]시작과 끝을 지정해서 움직이게함 @keyframs 이름 { from{} to{} } @keyframs 이름 { 0%{} ... 100%{} } ◎ [keyframes]을 사용하기 위해서는 animaion속성을 알아야함 animation-name..

HTML 삽입 미리보기할 수 없는 소스