I'm sw engineer!

grid-column, grid-row에서 몇 칸까지 설정 가능한지는 결국 **그리드를 몇 칸으로 나눴느냐 (grid-template-columns, grid-template-rows)**에 따라 달라져요.1. 칸(셀)의 기준 = grid line (격자선)칸 자체가 아니라 **칸을 구분하는 선(line)**을 기준으로 번호가 매겨집니다.예를 들어 grid-template-columns: repeat(3, 100px); → 3개의 열이 생기면, 선은 4개가 생겨요. 즉, grid-column은 선 번호를 기준으로 "어디서 시작해서 어디까지"를 지정하는 거예요.2. 사용자가 칸 개수 설정몇 칸으로 나눌지는 개발자가 grid-template-columns(가로), grid-template-rows(세로)로 ..

grid-column과 grid-row는 CSS Grid Layout에서 아이템이 어느 열(column), 어느 행(row)에 위치할지 제어하는 속성이에요.1. 기본 개념CSS Grid는 행(row)과 열(column)로 나뉜 2차원 레이아웃 시스템.각 셀은 **격자선(Grid line)**으로 구분돼요.grid-column과 grid-row는 아이템이 어느 선부터 어느 선까지 차지할지 지정하는 속성이에요.2. grid-column .item { grid-column: 1 / 3; }➡️ 1번 선부터 3번 선 직전까지 차지 → 즉, 2칸을 가로로 점유.세부 속성grid-column-start: 시작하는 선 번호grid-column-end: 끝나는 선 번호단축형: grid-column: start / en..

기본 동작flex-wrap: nowrap; (기본값)→ 아이템들이 한 줄에만 배치되고, 넘치면 그대로 삐져나옴.flex-wrap: wrap;→ 부모의 가로 공간이 부족하면 다음 줄로 자동 줄바꿈.flex-wrap: wrap-reverse;→ 줄바꿈은 되지만, 새 줄이 위쪽으로 쌓임.

핵심 개념메인축(main axis) → justify-content교차축(cross axis) → align-items보통 flex-direction: row(가로 방향)일 때:justify-content: space-between; → 좌우 끝으로 배치align-items: flex-start / center / flex-end → 세로 기준 정렬 가로배치는 양끝으로,세로배치는 맨 아래로. 좌우 끝으로 배치 → justify-content: space-between;세로 아래로 붙이기 → align-items: flex-end;

pointer-events는 CSS 속성 중 하나로, 마우스 클릭이나 터치 같은 "포인터 이벤트"를 해당 요소에 전달할지 여부를 결정합니다.🔍 쉽게 말해:pointer-events: none;을 주면,해당 요소는 클릭되지 않으며, hover, active 등도 무시됩니다.🧪 예시클릭 안 됨클릭 됨 none → 클릭해도 아무 일도 안 생김auto → 기본 동작 (클릭 가능) 이 버튼도 클릭 안됨 부모인 에 pointer-events: none을 줘도, 자식인 버튼도 클릭 안 됩니다. 값설명auto기본값, 포인터 이벤트 정상 처리none포인터 이벤트 무시 (클릭, hover 모두 무시)inherit부모 요소의 값을 상속

.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}🔧 구성 요소 설명✅ grid-template-columnsCSS Grid의 열 너비를 설정하는 속성입니다.✅ repeat(3, 1fr)repeat() 함수는 같은 값을 반복할 때 사용하는 축약 문법입니다.repeat(3, 1fr)는 1fr 1fr 1fr와 동일한 의미입니다.여기서 fr은 **fractional unit (비율 단위)**로, 남은 공간을 균등하게 나누는 단위입니다.🎯 의미 정리그리드를 3개의 열로 나누되,각 열의 너비를 동일하게 (1fr) 설정하겠다는 뜻입니다. 1 2 3이렇게 하면 3개의 칸이 수평으로 균등하게 배치됩니다.필요하다면 r..

.wrap-type1 { padding: 1.6rem; } 안에 요소를 하나만 제외시키고 싶을땐?  방법 1: margin을 이용한 보정.wrap-type1 { padding: 1.6rem;}.wrap-type1 .exclude-padding { margin: -1.6rem;}  방법 2: position: absolute 사용 (상황에 따라).wrap-type1 { position: relative; padding: 1.6rem;}.wrap-type1 .exclude-padding { position: absolute; top: 0; left: 0; right: 0;}  방법 3: padding을 특정 요소에만 적용.wrap-type1 { display:..

📌 동일한 z-index일 때 위로 표시되는 요소 순서HTML에서 나중에 선언된 요소가 위로 표시됨DOM(Document Object Model) 구조에서 뒤쪽(later in the DOM)에 있는 요소가 위에 표시됩니다.Box 1Box 22. 요소의 부모(stacking context)가 높은 z-index를 가지면 그 안의 요소도 영향을 받음부모 요소의 z-index가 높은 요소 안의 자식 요소는, z-index가 같더라도 다른 부모 아래에 있는 요소보다 위에 올 수 있음. A B 3. position: relative | absolute | fixed | sticky가 적용된 요소가 position: static인 요소보다 위에 표시됨position이 설정되지 않은(static) 요소..

rem(root em) 단위는 CSS에서 글꼴 크기 및 레이아웃을 상대적으로 설정하기 위해 사용되는 단위입니다. rem은 "root em"의 줄임말로, 이는 문서의 루트 요소()의 글꼴 크기와 관련이 있습니다.기본적으로, 1rem은 루트 요소의 글꼴 크기와 동일합니다. 예를 들어, 브라우저의 기본 설정에서 루트 요소의 기본 글꼴 크기는 16px입니다. 이 경우 1rem은 16px을 의미합니다. 따라서, font-size: 1rem;은 16px 크기의 글꼴을 설정하는 것입니다. 만약 루트 요소의 글꼴 크기가 변경되면, rem 단위로 설정된 요소들의 크기도 이에 따라 자동으로 조정됩니다.예를 들어, 루트 요소의 글꼴 크기를 20px로 설정하면 1rem은 20px을 의미하게 됩니다. 이 방식은 전체 레이아웃을..

style="display:none;"으로 설정했는데 해당 영역의 높이만큼 자리차지는 하게 해주고 싶으면 어떻게 해야될까? Visibility를 활용하는 방법:내용visibility:hidden; 속성은 요소를 보이지 않게 하지만, 공간은 그대로 유지합니다. style="visibility:hidden;" 을 해제하는 jquery 코드 $('#myElement').css('visibility', 'visible'); 이 영역은 처음에 보이지 않습니다. Show Element