나디아 성장 일기

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

📌 Grid : 2차원 레이아웃 시스템 🔸 그리드 셀 (Grid Cell) : Grid의 한 칸 그리드 셀(Grid Cell)은 기본적으로하나의 열과 하나의 행을 사용한다! 🔸 그리드 라인 (Grid Line) : Grid 셀을 구분하는 선 🔸 그리드 번호 (Grid Number) : Grid 라인의 각 번호 🔸 크롬 개발자 도구에서 grid 버튼 이용 📌 display: grid; 부모 요소에 적용 grid 사용 시 display: grid;를설정 후 사용해야 함 ✨ grid 사용하는 법 1. display: grid; 선언 display: grid; 2. grid 템플릿 정하기 grid-template-columns / grid-template-rows grid-template-columns: rep..

📌 flex-grow: container 내부에서 요소가 남은 공간을 얼만큼 차지할 수 있는지 비율로 설정 기본값 = 0 flex-grow: 0; 👉 딱 컨텐츠 크기만큼만 공간을 차지함0보다 큰 값을 설정하면 남은 여백을 최대한 메우는 속성 width 설정 X 자식 요소에 부여 반응형 웹 만들 때 유용      📌 flex-shrink: container가 작아질수록 어떤 요소가 얼마나 축소될 지 비율로 설정 ↔ flex-grow 줄어들 순서 설정 가능 ⭕자식 요소에 부여 기본값 = 1  flex-shrink: 0; 👉 아이템 축소 ❌1 이상의 값 👉 남은 공간에 따라 비례적으로 축소 ⭕ 값이 클수록 빨리 축소됨     📌 flex-basis: flex 박스의 초기 크기(기본값)를 설정    ..

✨ flex의 자식 요소에만 적용되는 속성 📌 order : container 안에서 요소의 배치 순서를 지정 자식 요소에 직접 적용 상대적인 속성 order을 설정하지 않으면 기본적으로 order: 0;이 설정된다. 음수도 지정 가능 (ex. order: -1;) 반응형 웹 제작 시 유용하다. 📌 aline-self : 교차축을 기준으로 정렬 출처 노마드코더 CSS Layout 마스터클래스

📌 align-content : 요소를 여러 줄로 정렬할 때, 요소의 라인 설정 요소 라인의 위치를 변경할 때 사용 다중 라인일 때만 동작 O 항목 이동 X, 라인을 움직임 O center space-between space-around space-evenly 🔶 row-gap : 요소가 여러 줄 일때, 행(가로) 간격 🔶 column-gap : 열(세로) 간격 출처 노마드코더 CSS Layout 마스터클래스

기본적으로 flexbox는 flex container 안의 요소들을 한 줄로 표시하려고 한다. 👉 그래서 요소의 너비(width)를 무시할 때도 있음 👉 flex-wrap를 사용하면 해결 ⭕ 📌 flex-wrap 부모 요소에 적용 요소 한 줄 / 여러 줄 배치를 제어 nowrap: 줄 바꿈 없이 한 줄 배치 - 기본값 - 요소의 너비(width) 무시 / 압축 warp: 요소의 너비(width) 보존 + 줄 바꿈해서 배치 wrap-reverse: 왼쪽 아래부터 오른쪽으로 시작 - 잘 안씀 📌 flex-flow 단축 속성: flex-direction + flex-wrap body { flex-flow: row wrap; = /* flex-direction: row; flex-wrap: wrap; */ } ..

📌 flex직속 부모 요소에 설정 👉 flex container로 바꿔줌 (자식 요소에 설정 X) 자식 요소도 flex container가 될 수 있음 (내부 글자 이동) display: flex; 요소 가로 배치 inline 요소로 변경됨 (크기가 자기 컨텐츠만큼만 설정)   📍 gap: 요소 간 간격 조정직속 부모 요소에 설정 row-gap: 요소가 여러 줄 일때, 행(가로) 간격 column-gap: 열(세로) 간격  📌 flex-direction: 요소들이 움직이는 방향 row: 가로 배치 - 기본값 (굳이 적지 않아도 됨)row-reverse: 가로 + 주축 (오른쪽 👉 왼쪽) column: 세로 배치 column-reverse: 세로 + 주축 (아래 👉 위)  📌 Main and ..

HTML (Hypertext Markup Language): 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드 마크업(markup) 언어: 자료 구조를 표현하기 위한 언어    CSS selector 문법>: .class 태그 안에 있는 직계 자식.navbar>li { display: inline-block;} 공백: .class 태그 안에 있는 모든 자식.navbar li { display: inline-block;}   CSS selector 우선순위style=""   (1000점) #id            (100점) .class       (10점)             (1점)       요소 가로 배치하기..

블럭 요소 vs 인라인 요소 vs 인라인블럭 요소 블럭요소 (block element) 태그가 좌우공간을 다 차지하는 요소 기본 너비값이 100% ☞ 각 요소가 수직으로 쌓인다. 너비값( width), 높이값(height) ⭕ 상하좌우 마진, 패딩 모두 ⭕ 내부에 블럭요소와 인라인요소를 포함 가능⭕ 인라인요소 (inline element) 태그가 실제로 코딩된 그 영역만 차지하는 요소 기본 너비값 == 컨텐츠 너비값 나란히 위치 가능 ⭕ 너비값( width), 높이값(height) ❌ 위아래 마진 ❌ (좌우 마진, 상하좌우 패딩은 ⭕) 내부에 블럭요소 포함 불가능 ❌ 인라인블럭 요소 (inline-block element) 수평으로 배치⭕ + 크기값 & 상하좌우 마진⭕ 기본 너비값 == 컨텐츠 너비값 ⭐..

속성 값을 사칙 연산으로 정하는 함수 calc( ) 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해준다. 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다. slideContainer.style.transform = `translateX(calc(${e.clientX - 시작좌표}px + (${offsetX}vw)))`; 참고 https://www.codingfactory.net/10373