Float ~ Grid

Float

• flex의 등장으로 수직, 수평 레이아웃을 담당하는 역할이 약해짐.

• 다만 기존에 있는 수평 정렬 레이아웃 코드를 수정할 경우를 대비해야 할 필요가 있음.

float을 이용한 수평 정렬

• clear 속성을 이용해 float을 해제시켜야 함

• 단 우리가 사용하지 않을 요소(4)를 구조적으로 만들어줬기 때문에 해당 방법은 좋지 않음.

• container CSS에overflow: hidden을 사용하면 float 속성이 정상적으로 해제됨을 볼 수 있음.

• 다만 overflow: hidden 속성은 float과 어떠한 관계를 가지지 않기 때문에 의도치 않게 container 레이아웃에 영향을 미치게 됨.

/*해결법 - 별도의 clear CSS를 만들어 container의 class로 추가함.*/
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

⚠️

float을 사용한 container 내부엔 float를 사용한 요소들만 들어있어야 함.

/*해결법 - 섹션을 나눔.*/
<div class="container">
    <div class="clearfix">
        <div class="item float">1</div>
        <div class="item float">2</div>
        <div class="item float">3</div>
    </div>
    <div class="item four">4</div>
</div

left, right 실습

<div class="container clearfix">
    <div class="item float--left">1</div>
    <div class="item float--left">2</div>
		
		/*3다음 4가 나오기 위함.*/
    <div class="float--right clearfix">
        <div class="item float--left">3</div>
        <div class="item float--left">4</div>
    </div>
</div>

추가 정보

• float 사용시 display 값이 block으로 변경됨 → inline으로 변경할 수 없음.

• float이 있어도 grid 또는 flex값이 있다면 block으로 바뀌지 않음.

Position

• absolute는 조상 요소 중 position 값을 가진 요소를 기준으로 움직이게 만듦. 만약 없다면 뷰포트 기준으로 위치함.

• fixed의 경우 요소의 조상 중 하나가 transform, perspective, filter 의 값을 가진다면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼음 → 해당 속성들이 위치의 영향을 줄 수 있음을 기억하기.

/*display로 inline 값이 지정됐지만 absolute로 인해 block 처리됨. fixed 마찬가지.*/
.item {
    display: inline;
    position: absolute;
}

쌓임 맥락(Stacking Context)

• 요소가 쌓이는 순서를 결정함. 가상의 Z축을 사용한 HTML 요소의 3차원 개념화.

• 별도의 속성 지정없이 3개의 요소를 나란히 배치했을 때, 가운데에 있는 요소의 크기를 transform으로 1.5배 크게 했을 땐 다른 요소를 가리는 반면, 나머지 요소에 opacity를 지정하면 보이지 않았던 부분이 보이는 것을 볼 수 있음.

• z-index를 사용하지 않더라도 요소를 쌓을 수 있는 것임.

• z-index는 static을 제외한 나머지 position 속성이 있을 때 사용 가능함. 기본값은 auto임.

• z-index는 flex와 grid에서도 사용할 수 있음.

Flex

• 1차원(수평, 수직) 레이아웃 구조 작업 시 사용함.

• flex container(부모) flex item(자식)로 구성됨.

Flex container 속성

• inline-flex는 inline과 유사한 특성을 가짐 → 콘텐츠 크기만큼 범위가 줄어듬.

• 다만 inline은 글자를 다룰 때 사용하는 속성이기 때문에 띄어쓰기 등의 영향을 받음. 웬만하면 block 요소를 사용하는 것이 좋음.

• flex-direction으로 주축과 교차축을 결정할 수 있음.

• flex-start, flex-end는 상대적으로 바뀔 수 있음. container의 끝부분이 flex가 끝나는 지점임.

• flex-warp은 요소의 줄바꿈 처리를 지정함. 기본값은 nowrap으로 줄바꿈 처리를 하지 않음. 만약 줄바꿈을 희망한다면 warp을 추가할 수 있음. wrap-reverse로 반대방향으로 줄바꿈할 수 있음.

• justify-content, align-items로 축 정렬을 할 수 있음.

• align-items의 경우 height 지정이 없다면 stretch를 기본값으로 가짐.

⚠️

wrap으로 지정한 속성에 공백이 생기는 이유? → align-items에 stretch 속성이 기본으로 들어가 있기 때문에 사각형을 반절로 나눈 상태에서 stretch 속성이 적용된 것임. 따라서 align-content에 flex-start 등의 속성을 넣으면 해결됨. align-items는 1줄, align-content는 2줄을 담당함.

Flex Items 속성

• flex-grow : 증가 너비 비율을 설정함. 기본값은 0. 만약 숫자를 준다면 해당 값만큼 비율을 만듦. ex) 1을 설정하면 1:1:1의 비율로 item의 크기를 결정함. 만약 nth-child로 특정 선택자만 증가너비를 지정한다면 1:2:1 등 자유롭게 설정할 수 있음. 이때, item이 가진 크기를 제외한 비율을 결정하는 것이기 때문에 item 전체 크기가 균등한 비율은 아님. 균등하길 원하면 item의 width값을 지정하지 않으면 됨. auto가 default.



추가로 하나의 item에만 flex-grow을 1이상의 값으로 지정하면 화면 비율이 변할 때 flex-grow를 지정한 요소만 가변적으로 변할 수 있음.

• flex-shrink : 감소 너비 비율을 설정함. 기본값은 1이지만 0으로 설정할 경우 item이 container의 너비를 초과할 경우 줄지 않고 자신의 크기를 유지함. 숫자가 크면 클수록 더 많이 감소함.

• flex-basis : 요소의 기본 너비를 설정함. 기본값은 auto. auto일 경우 해당 스코프 내에 지정한 width, height 값대로 출력함. 만약 px값을 입력하면 별도로 설정한 width 값은 사용하지 못함.

• flex라는 단축속성으로 사용할 수 있음. 주의할 점은 지정하지 않은 곳은 기본 값을 명시해주어야 예상한대로 화면에 그려짐. basis는 생략시 기본값인 auto가 아닌 0이 들어가기 때문.

/* flex: grow shrink basis */
/* default: 0 1 auto */
.container .item {
    flex: 1, 1, 0;
}

• order : flex item의 순서를 지정함. 기본값은 0. 숫자가 늘어나면 순서가 밀림. 음수 사용 가능.

• align-self : item의 교차축 정렬을 개별적으로 관리할 수 있음. 기본 값 auto. 첫 번째 요소를 선택해 flex-start를 지정하면 첫 번째 요소만 해당 속성이 적용됨.

• gap : item 간의 여백을 만듦. 다만 최신 기능이라 동작하지 않는 브라우저가 있을 수 있음(하위호환성x).

Grid

• 2차원 레이아웃 구조 작업 시 사용함.

• inline-grid는 container 내부의 특성은 grid이지만 container 자체는 inline의 특성을 가짐.

• fr은 fraction의 약어로 공간 너비 비율을 의미함. 다만 container의 너비가 정의되어야 함.

Grid container 속성

• grid-template-rows, grid-template-columns 로 행열을 몇 px씩 얼마나 나눌지 결정함. repeat을 통해 간편하게 표현할 수 있음(명시적) → repeat(8, 1fr)

• grid-auto-rows, grid-auto-columns는 암시적으로 범위가 벗어난 요소의 행열 크기를 지정해줄 수 있음.

• grid-auto-flow
• dense : item이 정렬될 때 빈 공간을 채우면서 정렬됨.
• row(default) or column : 축 방향을 바꿔 지그재그로 요소가 쌓이게 함.
• row 또는 column과 동시에 띄어쓰기로 dense를 같이 사용할 수 있음.

• 만든 행열의 레이아웃을 커스텀 할 수 있음.
• grid-column, grid-row : 라인을 확장함. 기본값은 1. 입력한 숫자만큼의 라인을 확장함.

.container {
	grid-column: span 3;
}

• justify-content, align-content로 정렬을 만들 수 있음. 빈 공간이 있어야 적용됨.

• justify-items, align-items로 셀 내부의 아이템 행축을 정렬할 수 있음.

• grid-template-areas : 행열을 제어함. 제어를 위해 grid-area를 통해 이름을 지정해주어야 함. 이때 나누는 기준은 grid-template-rows, grid-template-columns에 의해 결정됨.

.container {
    border: 4px solid;
    display: grid;
    grid-template-rows: repeat(4, 100px);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "header header header"
        "main main aside"
        ". .  aside"
        "footer footer footer";
}
.container > * {
    border: 2px solid;
}

.container header {grid-area: header;}
.container main {grid-area: main;}
.container aside {grid-area: aside;}
.container footer {grid-area: footer;}

• grid-gap으로 각 영역에 간격을 줄 수 있음. 두 개를 작성하면 행과 열을 별도로 지정할 수 있음. 이는 grid-row-gap과 grid-column-gap개별적으로 나타낼 수 있음.

Grid Items 속성

• grid-row-start : 각 행 라인 번호 중 몇 번에서 시작할 것인지를 정의함. grid-row-end으로 끝점을 지정하면 어디서 끝낼지를 정의할 수 있음. grid-column-start, grid-column-end도 있음. 단순 숫자뿐만 아니라 span 2등 확장이란 의미를 가진 span과 함께 확장할 개수를 지정할 수 있음. 이를 grid-row, grid-column으로 축약할 수 있음. start와 end는 슬래시(/)로 구별함.

• justify-self, align-self: 개별적인 item의 정렬을 할 수 있음. 이때 선택자로는 개별적으로 움직이고 싶은 item을 지정해야 함.

• order: flex와 마찬가지로 0으로 출발해서 숫자가 작을수록 앞에 정렬됨(음수 가능). 이때 선택자로 order를 적용하고 싶은 item을 지정해야 함.

Grid Functions - container

• grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에 사용할 수 있음.

• repeat(횟수, 너비) : 몇 번 반복할지. 첫 번째 인자에는 반복 횟수를, 두 번째 인자에는 너비를 지정함.

• minmax(최소, 최대) : 최소(첫 번째 인자)와 최대(두 번째 인자) 길이를 지정함. 이를 초과하면 grid 형태가 깨짐. repeat의 두 번째 인수로 추가하는 단위로 사용함.

• fit-content(제한너비) : grid item이 가진 content의 크기만큼 맞춰줌. 인수로 지정한 px값만큼 최대값을 가짐. 무한정 늘어나는 건 아님.

Grid 단위

• fr : 사용가능한 공간 너비 비율.

• min-content : 콘텐츠가 가질 수 있는 최소 너비까지 줄여서 표현함. 반대는 max-content.

• word-beak: keep-all; 로 지정하면 한글도 띄어쓰기 단위로 표현할 수 있음.

• auto-fill, auto-fit : 명시적으로 행열을 지정하지 않고 화면에 맞는 최적화된 개수를 자동으로 지정해줄 수 있음. repeat의 첫 번째 인수로 추가하는 단위로 사용함.

소소한 팁

• border 속성에 color를 지정하지 않으면 글자색을 따름.

• .container>.item{$}*3의 에밋문법을 사용하면 container라는 class를 가진 부모의 자식으로 item이란 class를 가진 3개의 div 태그가 각자의 순서를 가진 상태로 코드가 완성됨.

• 전역에서 사용하는 CSS는 상단에 배치하기.

• .container > * {}를 사용하면 container class의 모든 자식을 지칭함.