분류 전체보기 147

Sass) $을 이용한 변수 문법

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

[FE3-5주차] To-do-list

✅9/27(화) Sass 복습 transform,애니메이션 배우기 1) licat 캐릭터 복습 121.html 파일 https://github.com/paullabkorea/licat_CSS_tutorial https://www.youtube.com/watch?v=S1_NM35LCLg https://www.youtube.com/watch?v=O1zJGvoXL-w https://www.youtube.com/watch?v=rhAKeUSxO0Y https://www.youtube.com/watch?v=ru5FGYuycwY ✅9월29일 - 캐릭터 대회 read.me 마크다운 파일로 정리하기(어려웠던 점, 개선해야할점,새롭게 배운점) - 회고록 쓰기

css) 가상요소 ::before & ::after

📝참고자료 :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...

CSS) position:absolute; 심화 과정

🙌잘못된 정보는 댓글피드백 환영입니다.🙌 출처 : 멋쟁이사자처럼 빔캠프 대표님 특강 中 수업자료 일부 발췌 position:relative; 는 자기자신을 기준으로 배치 position:relative; 는 relative 된 가장 가까운 부모요소로 배치된다는 것은 position 공부를 해본사람이라면 다 알고있는 상식일 것이다. ➡️그런데, 만약에 relative 없이 단순히 position:absolute; 만 하면 어떻게 될까???? - 아래와 같이 pos의 부모요소인 아부지 하얀색 background가 있고, 아부지의 또 부모요소인 회색 할아부지 background가 있고 진한 회색인 전체창이있다. pos 에 orange;컬러만 주면, width 값이 설정되지 않았으니 부모요소인 아버지 width..

CSS) flex 개념 정리 교안 모음집

https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com https://www.youtube.com/watch?v=7neASrWEFEM&t=1220s