나디아 성장 일기

📌 @mixin일종의 function@include와 함께 사용한다.값을 인자(argument)로 전달하여 태그마다 값을 다르게 지정할 수 있음 🔺 선언하기 @mixin 변수명($인자) { 공통 코드 }인자는 여러 개 전달 가능 O 🔺 사용하기selector { @include 변수명(인자값); }@include를 사용하여 인자(argument)를 보내고 function을 불러온다.인자는 다르게 부여할 수 있음@mixin alert($bgColor, $borderColor) { background-color: $bgColor; margin: 10px; padding: 10px 20px; border-radius: 10px; border: 1px dashed $borderColor; } .success {..

@extend : 하나의 componenet를 만들고 여러 곳에서 공유할 수 있다. 공통적인 디자인을 부여할 때 유용함 📌 선언하기 %변수명 { 공통 코드 } 📌 사용하기 selector { @extend %변수명; } %alert { margin: 10px; padding: 10px 20px; border-radius: 10px; border: 1px dashed black; } .success { @extend %alert; background-color: green; } .error { @extend %alert; background-color: tomato } .warning { @extend %alert; background-color: yellow; } 출처 노마드코더 CSS Layout 마스..

📌 Nesting (중첩): CSS를 중첩해서 사용할 수 있다. body 태그에는 사용하지 않는게 좋다.참조 중인 태그의 개체를 가리킬 수 있다. 👉 & 사용 출처노마드코더 CSS Layout 마스터클래스

SCSS : CSS를 확장시킨 도구 브라우저는 SCSS를 이해하지 못함 👉 SASS로 SCSS 코드를 처리해서 CSS로 만듦 📌 SCSS & SASS 설치 npm add -D sass CSS 파일 확장자 .SCSS로 변경 html의 CSS 파일 주소 변경 📌 Vite의 Auto reload 기능 프로젝트 배포 시 해야할 일 변경 사항이 있으면 reload 콘솔에서 작업 중지: Ctrl + C npm run build - 배포를 위한 dist 폴더가 생성됨 - dist 폴더의 index.html에 SCSS를 변환한 CSS로 코드가 있음 출처 노마드코더 CSS Layout 마스터클래스

📌 반응형 grid 레이아웃 📌 페이지의 크기에 따라 열의 갯수를 동적으로 만들기auto-fill / auto-fit페이지 크기에 따라 grid 배치가 자동으로 변경된다. 지정한 최솟값에 도달하면 배열이 바뀐다!!!.father { display: grid; gap: 10px; height: 100vh; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } 📌 auto-fill: 지정한 크기에 맞는 최대한 많은 아이템을 배치하고, 남은 공간은 빈 공간으로 둔다. grid-template-columns: repeat(auto-fill, minmax());과 함께 사용지정한 크기의 열을 최대한 많이 만든다. 👉 그 열이 비어있어도 📌 auto-fit..

📌 max-content : 콘텐츠 크기만큼 열(세로)의 크기를 조절한다. 보통 grid-template-columns와 함께 쓰임 텍스트가 한 줄에 표시될 수 있을만한 너비(width) .father { grid-template-columns: 1fr max-content 1fr; } 📌 min-content : 콘텐츠의 최소 크기만큼 열(세로)의 크기를 조절한다. 열의 최소 길이 = 가장 긴 단어의 길이에 따라 정해짐 .father { grid-template-columns: 1fr min-content 1fr; } 📌 minmax(최솟값, 최댓값) : 행이나 열의 최소 크기를 설정하는 함수 최솟값과 최댓값이 있는 열과 행을 만들 수 있다. 페이지 크기를 줄일 때, 가운데 열이 400px 미만으로 줄..

📌 justify-content : 셀을 그룹으로 묶어서 가로 방향으로 정렬 grid container에 여분의 공간이 있는 경우에만 작용 ✨ 부모 요소에 적용 start - 기본값 end center space-around space-evenly space-between grid container에 여분의 공간이 있는 경우에만 작용 ✨ - grid-template-columns를 1fr로 설정하면 셀이 화면에 가득차서 여분의 공간이 없으므로 작동하지 않는다. .father { display: grid; gap: 10px; height: 100vh; height: 100vh; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(2, 1..

📌 justify-items : grid 셀 안의 내용물을 가로 방향으로 정렬 부모 요소에 적용 width가 지정되었다면 내용물을 가로로 이동시킴 stretch : 내용물을 가로 방향으로 늘림 - 기본값 - 자식 요소에 너비(width)가 없을 때만 적용⭕ start: 주축의 시작 부분(왼쪽)으로 정렬 end: 주축의 끝 부분(오른쪽)으로 정렬 📌 align-items : grid 셀 안의 내용물을 세로 방향으로 정렬 부모 요소에 적용 stretch : 내용물을 세로 방향으로 늘림 - 기본값 - 자식 요소에 높이(height)가 없을 때만 적용 ⭕ start: 주축의 시작 부분(위쪽)으로 정렬 end: 주축의 끝 부분(아래쪽)으로 정렬 center: 가운데 정렬 justify-items: stretch;..

📌 grid-auto-columns/rows: 컨텐츠가 추가되면 자동으로 사이즈에 맞춰 추가하는 속성행/열의 갯수는 컨텐츠 갯수만큼 자동으로 생성grid container에 행이 추가로 생기는 상황이 오면, 자동으로 사이즈에 맞춰 추가해준다. 동적 데이터를 다룰 때 유용 grid-auto-rows: 1fr;  grid-auto-columns: 1fr;   📌 grid-auto-flow: 새로 추가되는 요소의 자동 배치 방향 설정 row: 열(세로)로 배치 - 기본값 column: 행(가로)로 배치 dense: 배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치  1, 2번째 div까지는 repeat(2, 1fr)가 적용3번째 div부터는 grid-auto-..

📌 Grid Template 🔶 body 태그는 기본적으로 뷰포트의 너비를 쓴다.   body의 높이는 기본값이 없음 👉 100vh를 설정해야 함body { height: 100vh;}   📌 grid-template-areas: "작명": grid의 템플릿을 디자인할 수 있는 속성 꼭 태그명을 사용할 필요 ❌👉 임의로 작명 후 해당 태그에 grid-area를 선언해서 템플릿과 연결시키기body { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 2fr 1fr; grid-template-areas: "header header header header" "content content co..