Ella 프론트엔드일지

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

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

🙌잘못된 정보는 댓글 피드백 환영합니다!🙌 더보기 출처 : https://kamang-it.tistory.com/entry/css%EC%A7%80%EC%98%A5%EC%97%90%EC%84%9C-%ED%83%88%EC%B6%9C%ED%95%98%EC%9E%904-display-flex%EC%99%80-margin-auto%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EA%B8%B0%EC%A1%B4%EC%9D%98-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0header%EB%82%98-nav%EC%97%90%EC%84%9C-%ED%95%9C-%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8%EB%A7%8C-%EC%A2%8C%EC..

🙌틀린 정보는 댓글 피드백 환영 합니다!🙌 더보기 출처 : https://heinafantasy.com/163 ✅margin: 0 auto; 1) 해당영역에 가로사이즈(width)값이 정해져있는지 보자! auto 는 자동으로 사이즈를 설정해주는 것, 즉 좌우의 여백을 똑같이 배분하게 되는 것 그래서 브라우저 화면 가운데에 위치하게 된다. 그런데 width값을 지정해주지 않으면 가운데 정렬이 되지 않는다. 좌우의 여백을 똑같이 나눠서 가운데 정렬이 되는 원리인데, width값을 정해주지 않으면 여백의 공간이 없으니까! 즉, 사용가능한 공간이 없어서 가운데 정렬이 되지않는것이다. 아래 예시를 보자. container 안에 item 2개를 넣어 displex:flex;값을 줘서 가로로 배치했다. 🚫과연 .co..

📝참고자료 내가 사랑하는 유노코딩 선생님 강의 참고~! https://www.youtube.com/watch?v=4pXTxo_CMJM&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=9 https://www.youtube.com/watch?v=hMJw1kFLxWU&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=10 ✅grid layout 그리드 : 2차원 레이아웃 방식 그리드를 사용할 때는 그리드 컨테이너를 만든 후 display:grid;를 지정해줘야함. 1) grid-template-columns 그리드 컨테이너 트랙(행 또는 열) 중 column트랙 내 아이템들의 크기를 지정할 수 있는 속성 2) grid-template-rows..

✅참고 동영상링크 https://www.youtube.com/watch?v=c19Mjg-ivxc&t=94s ✅margin collapsing(마진 겹침, 마진 병합현상) ➡️ margin 병합현상 조건 1. 인접해있는 Block 요소끼리만 일어남 2. 상하단만 해당사항(좌우는 X) 1)형제요소의 마진병합 현상 코드펜에서 아래와 같이 코드를 작성했다. div 박스에 margin값을 상하좌우 모두 20px을 주었다. 그러면 베이지색 박스의 margin-bottom:20px 과 핑크색 박스의 margin-top:20px 이 만나서 40px이 되어야하는게 아닐까? 했지만.. 빨간색 빗금친 부분처럼 20px만 보여지고 있다... 이것이 바로 마진겹침현상! - 왜 이런현상이 일어나지...? 의도된 부분이다. CSS..