Ella 프론트엔드일지

0. font-awesome 좋은 점 이미지처럼 보이지만, 폰트라서 css로 색깔 크기도 제어할 수 있다. 1. font-awesome 방법 여기로 접속해서 로그인 하자 https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com account 클릭 -> Kits 의 settings 클릭 체크 한 후에 저장함 Set Up 에 보면 script 태그 복붙해서 html head 안에 넣는다. 그리고 나서 내가 사용하고 싶은 아이콘..

✅position:sticky 아래 예제를 살펴보자. 이미지가 3개가 세로로 나란히 있는데, 모든 이미지를 뷰포트에서 200px 위치에서 고정시키고 싶다면, position:sticky를 써보자 스크롤이 없을땐 3장의 이미지들이 나란히 보인다. (화면 비율을 30%까지 줄여서 억지로 스크롤을 없앴다) 스크롤을 다 내렸더니 3장의 이미지가 합쳐지고 뷰포트 기준으로 위에서 200px만큼 떨어진 위치에서 고정이 되있는 걸 볼수가 있다. 바로 position:sticky 속성 때문이다. //html //css .container{ margin:200px 0; height:2000px; text-align:center; background:yellow; } .card-box{ position:sticky; top..

✅transform 예시 AB transform을 적용하기 전에는 박스가 서로 겹쳐있었다. transform:rotate(45deg);를 적용하고 나니 파란색 박스가 보인다. deg: 각도를 뜻한다. tranform:ratate(45deg) scale(1.3); 을 하고나니 아래와같이 item박스가 기존보다 1.3배가 더 커졌다. ✅transform 은 단축속성이다. transform : 변환함수1 변환함수2 변환함수3 ...; transform: 원근법 이동 크기 회전 기울임; 밑에 사용예시를 보고 위 코드로 실습해보세요~! 1️⃣2D 변환함수 함수이름 뜻 사용 예시 translate(x,y) 이동(x축,y축) transform:translate(40px,40px); translateX(x) 이동(x축..

Sass 변수 문법은 계속 써야하는데 외우기 힘든 거를 반복해서 쓰면 아주 편리하고 좋음!! 예를 들면 색깔같은것들 ??#3D6AFF 요런 색깔 코드 언제 외워서 지정해놓고있누!!! 아무튼 나같은 빡대가리들도 변수 하나 지정해놓으면 아주 개꾸울~~~! ✅$ 표시를 이용해서 변수를 지정한다. $변수명 : 값; 을 맨 위에 지정해두고 아래 스타일에서 변수명을 넣어서 입력하면 된다. scss파일에 이렇게 저장을 해놓으면 아래와 같은 비쥬얼스튜디오 확장프로그램을 통해서 CSS 파일로 컴파일(변환)해준다. 왜 굳이 변환해줘?? Sass 파일을 html 파일에 연결시키면 안됨? 하고 의문점이 들수 있지만... 브라우저는 ...아쉽게도 css 파일만 읽을수있다. 그래서 css파일로 변환해줘야한다. 아무튼 Live S..

출처 : https://designer-ej.tistory.com/entry/CSS-background-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%ACcolor-image-position-repeat-%EB%93%B1

📝참고자료 :https://www.youtube.com/watch?v=nvdgIsqEegQ&t=1s ✅가상요소란? - HTML 상에서 코드를 만들지않고, CSS에서 스타일로만 요소를 추가하거나 제어할 수 있는 속성 :::before 와 ::after을 css에 넣으려면 필수로 {content:""; } 이 들어가야함 문자를 표시할 때는 따옴표 안에 문자를 넣으면 됨. 다른 기능을 하면서 문자가 없을 경우 빈따옴표만 넣으면 된다. 그리고 inline 속성을 가지고 있으므로 크기 값을 주려면 {display: inline-block; }이나 {display: block; }속성을 넣어줘야한다. ✅코드펜 예시 See the Pen Untitled by EllaSEON (@ellaseon) on CodePen...