box-sizing이란?요소의 크기를 계산하는 방식을 결정하는 방식이다.즉, 요소의 width(너비)와 height(높이)를 어떤 기준으로 계산할지를 정하는 방식이다. 박스 사이징이라는 말처럼 요소의 콘텐츠 영역을 비롯해서 패딩(내부 여백)과 보더(테두리)를 기준으로 요소의 크기를 결정하게 된다.단 마진(외부 여백)은 계산에 포함되지 않는다.계산 포함 (O)콘텐츠 크기, 패딩, 테두리계산 제외 (X)마진box-sizing 속성content-box (기본값)요소의 width와 height 속성은 콘텐츠 영역의 크기를 나타낸다.padding과 border는 요소의 전체 크기에 추가된다.예를 들어, width: 100px; padding: 20px; border: 10px;인 요소의 실제 너비는 160px(1..

z-index란?CSS 레이아웃을 만들다보면 동일한 위치에 여러 레이아웃이 겹치는 경우가 발생한다.이럴 때 사용하는 것이 바로 z-index 속성이다. z-index는 겹치는 요소가 있을 때 어떤 요소가 위에 표시되고 어떤 요소가 아래에 표시될지 제어할 수 있다. 음식으로 예를 들자 샌드위치의 재료를 어떤 순서로 쌓을 지 정하는 방법이라고 할 수 있다.샌드위치는 빵, 햄, 치즈, 야채 등을 순서대로 쌓는데 만약에 빵 대신 야채를 가장 밑에 둔다면 어떻게 되겠는가?이처럼 z-index는 각각의 레이아웃들을 적정한 위치에 배치해서 제작자가 의도한 대로 웹페이지가 동작하도록 만드는데 도움을 준다. 그림을 예로 들면 레이어를 쌓는 순서이다. 디지털 프로그램을 사용해서 그림을 그릴 때 여러개의 레이어를 쌓아 올려..

position위치, 자리CSS position이란?css에서 포지션이란 HTML 요소의 위치를 결정하는 데 사용되는 속성이다. 포지션은 요소가 문서 내에서 어떻게 배치될지 정의한다.position 속성의 주요 값static (기본값):요소가 일반적인 문서 흐름에 따라 배치됩니다.top, right, bottom, left 속성이 적용되지 않습니다.특별한 위치 조절이 필요 없는 경우에 사용됩니다.relative:요소가 원래 위치를 기준으로 상대적으로 이동합니다.top, right, bottom, left 속성을 사용하여 이동 거리를 지정할 수 있습니다.다른 요소와의 상대적인 위치 조절에 유용합니다.absolute:요소가 가장 가까운 위치가 지정된(positioned) 조상 요소를 기준으로 절대적으로 배치..

플렉스 박스에서 플렉스 컨테이너와 플렉스 아이템으로 나뉜 것처럼그리드 또한 컨테이너와 아이템이 있다. 그중 아이템의 위치와 크기를 정밀하게 제어하는 방법이 있는데 그것이 바로 grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성이다. grid-row-start, grid-row-end, grid-column-start, grid-column-end 그리드 컨테이너에 위치할 아이템의 위치를 정하는 속성이다. 예를 들어 그리드 컨테이너가 체스 판이라고 한다면 그리드 아이템은 체스 말이다.해당 속성은 체스 말을 체스판의 어느 위치에, 어떤 크기로 놓을지 결정하는 역할을 한다. 때문에 해당 속성을 사용할 경우 좀 더 유연하게 레이아웃을 배치할 ..

1. gap그리드 셀 사이의 간격을 설정하는 데 사용된다.gap 속성은 row-gap과 column-gap의 단축 속성으로, 행과 열 사이의 간격을 한 번에 설정할 수 있다.더보기 1 2 3 4 5 6 7 8 9 .grid-container { display: grid; grid-template-columns: repeat(3, 100px); gap: 20px 10px; /* 행 간격: 20px, 열 간격: 10px */ } .grid-item { background-color: #eee; padding: 20px; text-align: ..

플렉스 박스 VS 그리드 플렉스 박스의 경우 주축(행 혹은 열)을 기준으로 아이템을 배치하고 정렬하는 1차원 레이아웃 시스템이었다.그리드는 행과 열을 사용해서 아이템을 배치하고 정렬하는 2차원 레이아웃 시스템이다. 말하자면 그리드 CSS는 행렬(matrix)과 유사한 구조를 사용하여 레이아웃을 구성한다고 할 수 있다. 플렉스 박스가 방을 1자로 늘어놓는다고 치면그리드는 ㄱ자 ㄴ자 ㄷ자 식으로 좀 더 자유롭게 구성이 가능하다. 그리드의 주요 특징2차원 레이아웃행(row)과 열(column)을 사용하여 콘텐츠를 배치한다.플렉스박스가 1차원 레이아웃에 특화된 것과 달리, 그리드는 2차원 레이아웃을 자유롭게 구성할 수 있다.유연한 레이아웃 구성다양한 단위(픽셀, 퍼센트, fr 등)를 사용하여 행과 열의 크기를 ..

flex 속성flex 속성은 플렉스 아이템의 크기 조절 방식을 한 번에 설정하는 축약 속성이다.flex-grow, flex-shrink, flex-basis 세 가지 속성을 결합하여 사용한다.flex 속성의 구성 요소flex-grow:플렉스 컨테이너 안에 남는 공간이 있을 때 플렉스 아이템이 얼마나 늘어날지를 결정합니다.값이 0이면 아이템이 늘어나지 않고, 양수이면 해당 비율만큼 늘어납니다.flex-shrink:플렉스 컨테이너 안에 공간이 부족할 때 플렉스 아이템이 얼마나 줄어들지를 결정합니다.값이 0이면 아이템이 줄어들지 않고, 양수이면 해당 비율만큼 줄어듭니다.flex-basis:플렉스 아이템의 초기 크기를 설정합니다.auto 또는 길이 단위(px, %, em 등)를 사용하여 설정할 수 있습니다.fl..

basis기준 (단위), 기반, 기초flex-basis란?이름에서 알 수 있듯이 CSS 플렉스 박스 레이아웃에서 플렉스 아이템의 초기(기초) 크기를 설정하는 속성이다.즉 아이템의 기본 크기를 결정한다. flex-basis의 기본 개념기본값: flex-basis의 기본값은 auto이다. 즉 아이템의 크기가 내용물의 크기에 따라 자동으로 결정된다는 의미이다.주축 방향 크기flex-direction 속성에 따라 주축(main axis) 방향의 크기를 설정한다.flex-direction: row; (기본값)에서는 아이템의 너비를 설정한다.flex-direction: column;에서는 아이템의 높이를 설정한다.flex-basis의 속성 값auto : 아이템의 크기가 내용물의 크기에 따라 자동으로 결정된다.con..

shrink(규모·양이[을]) 줄어들다[줄어들게 하다]플렉스 컨테이너에 담겨있는 아이템의 크기가 컨테이너를 초과할 경우 아이템이 컨테이너 밖으로 삐져나온다. flex-shrink는 플렉스 아이템들의 크기를 조정해서 이렇게 삐져나온 것들을 컨테이너 안으로 밀어 넣는 방법이다. 인테리어로 비유 하자면 가구를 여유롭게 배치했더니 방 밖으로까지 가구가 삐져나온 상황인데이렇게 이렇게 삐져나온 가구를 방 안으로 넣기 위해서 가구가 차지하는 공간을 줄이는 방법이라고 할 수 있다. flex-shrinkflex-grow가 남는 공간을 분배하는 것과 반대로, flex-shrink는 부족한 공간을 분배하는 속성이다.즉, flex-shrink는 플렉스 컨테이너의 공간이 부족할 때 플렉스 아이템의 크기가 얼마나 줄어들지를 결..

플렉스 박스를 사용하다 보면 콘테이너의 크기 대비 아이템의 크기가 작아서 여유 공간이 많이 남는 경우가 있다.이럴 경우 플렉스 아이템의 크기를 컨테이너에 맞게 채우고 싶을 수가 있는데 그럴 경우 사용하는 것이 바로 flex-grow이다.flex-grow CSS Flexbox 레이아웃에서 사용되는 속성으로, 플렉스 컨테이너 내에서 플렉스 아이템이 사용 가능한 공간을 어떻게 분배할지 결정한다. flex-grow에 할당된 값은 플렉스 아이템이 얼마나 늘어날 수 있는지를 나타내는 비율이다.인테리어로 비유하자면 가구가 차지하는 공간을 여유 공간 만큼 더 늘리는 것이다. flex-grow의 속성기본값 : flex-grow의 기본값은 0이다. 즉, 기본적으로 플렉스 아이템은 컨테이너 내에서 남는 공간을 채우기 위해 ..