Ella 프론트엔드일지

✅프로그래밍 언어는 보통 숫자형 - 숫자형만 계산이 가능하지만 자바스크립트는 5-'3' 도 가능해 왜냐하면 Dynamic Typing이 가능해서 프로젝트가 크면 자유도가 높은거, 유연성이 단점임. 타입스크립트를 가져다가 쓰면 저건 에러라고 알려줌. ✅ 에러메세지가 퀄리티가 좋음. 엄격하게 타입 체크하는걸 알아서 해줌 ✅타입스크립트 간단한 문법 이름이라는 변수를 넣고 그 오른쪽에 :string 문자열이라는 타입을 나타내고 문자열의 값을 넣어준다. 즉, 이름은 string 타입만 들어올수있다고 지정해주는 것이다. 이름에다가 숫자 들어오면 바로 에러가 나온다. 타입 명칭에는 아래와 같이 있음. array 자료인데 array안에는 string 밖에 못들어간다. 이름이라는 변수에는 글자가 가득찬 array만 들어..

✅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...

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