CSS 레이아웃

• Float

원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다. 현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용한다. 

 -float 속성값

• left — 왼쪽에 부유하는 블록 박스를 생성함 
• right — 오른쪽에 부유하는 블록 박스를 생성함 
• none — 요소를 부유시키지 않음
• inherit — 부유 속성의 값이 요소의 부모 요소에서 상속됨

float 속성은 기본적으로 block element에서만 사용이 가능하다. Ex) <div>, <p>, <ul>, <table>, <img>

 

float 속성을 사용하면 주변으로 컨텐츠가 흐르듯이 배치가 되는데, 이를 해제하기 위해 clear 속성을 사용한다.

-clear 속성 값

• none — 기본 값
• left — float: left 속성을 해제
• right — float: right 속성을 해제
• both — 속성을 둘 다 해제

-overflow 속성 값

• visible — 기본 값 (컨테츠가 상자보다 클 경우 밖으로 보임)
• hidden — 넘치는 부분은 잘라서 보이지 않음
• scroll — 스크롤바가 추가되어 스크롤할 수 있음
• auto — 컨텐츠 크기에 따라 스크롤바를 추가할지 자동으로 결정
• overflow-x, overflow-y — 가로, 세로를 각각 제어 시 사용

 

• Position

HTML에서 element를 배치하는 방법을 지정하는 속성이다. 

-position 속성 값

• static — 기본 값(일반적인 흐름)
• relative — 기존 위치에 비례해서 배치됨 (다른 요소들의 위치에 영향 안줌) 즉, 요소끼리 겹칠 수 있음
• absolute — 절대 좌표와 함께 위치를 지정해 줄 수 있음
• fixed — 문서의 흐름을 따르지 않고 뷰포트를 기준으로 배치 됨
• sticky — 문서의 흐름을 따르다가 뷰포트 기준에서 미리 정의된 지점에 도달한 순간 fixed처럼 배치됨

 

• Display

-display 속성 값

• none — 보이지 않음
• block — 블록 박스 (<div>,<p>,<h>,<li>) 기본적으로 가로 영역을 모두 채우고 block 요소 다음에 등장하는 태그는 줄 바꿈이 된 것처럼 보임
• inline — 인라인 박스 (<span>,<b>,<i>,<a>) block과 달리 줄 바꿈 & 크기 지정 안 됨, 글자나 문장에 효과를 주기 위해 존재하는 단위라고 보면 됨 
• inline block — block과 inline의 중간 형태 / 줄 바꿈은 안 되지만 크기 지정은 가능 

 

• Box Model

HTML 요소는 박스 모양으로 구성되어 있고 이것을 content, padding, border, margin 으로 구분한다. 

1. content : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
2. padding : 내용과 테두리 사이의 간격
3. border : 내용과 패딩 주변을 감싸는 테두리
4. margin : 테두리와 이웃하는 요소 사이의 간격

box model은 width, height 등으로 크기를 조절할 수 있다. 

 

• Grid

CSS 그리드 레이아웃은 웹용 2차원 레이아웃 시스템이다. 행과 열에 콘텐츠를 배치할 수 있으며 복잡한 레이아웃을 간단하게 구축할 수 있는 많은 기능이 있다. 그리드는 디자인 요소를 정렬할 수 있는 패턴을 생성하는 수평선과 수직선의 모음으로 우리가 페이지에서 페이지로 이동할 때 요소가 이동하거나 너비가 변경되지 않는 디자인을 만드는 데 도움이 되어 웹사이트에서 더 큰 일관성을 제공한다. 

 

그리드를 정의하기 위해서는 display 속성을 사용해야 한다.  display: grid를 선언하면 하나의 열 그리드가 제공되고 항목은 normal flow에서와 같이 계속해서 다른 하나 아래에 표시가 된다. 그리드에 열을 조정하는 방법은 다양하다. 길이(픽셀)와 백분율을 사용하여 만들 수도 있고 fr 단위를 사용하여 행과 열의 크기를 조정할 수도 있다. 그리드에 열을 조정할 때는 grid-template-columns : 원하는 개수만큼 크기 작성; 하면 된다. 

 

만약 원하는 그리드 크기가 다 같지만 1000개를 생성해야 한다면 일일이 작성할 때 시간 낭비와 고된 노동이 될 것이다. 이런 문제를 반복 표기법을 사용하여 해결할 수 있다. repeat(목록을 반복할 횟수, 반복하려 하는 트랙)으로 작성한다면 극단적인 상황에서도 편하게 그리드를 작성할 수 있다. 

 

트랙을 생성했다면 트랙 사이의 간격도 조정할 수 있다. 트랩 사이의 간격은 gap: 크기; 을 이용해 조정이 가능하다. 간격의 조정은 길이 단위 or 백분위만 가능하고 fr 단위는 적용이 불가능하다. 

 

그리드의 핵심 개념으로는 Explicit 및 Implicit 그리드가 있다. 명시적 그리드(Explicit)는 grid-template-columns 또는 grid-tempaltes-row를 사용하여 생성하는 그리드이다. 이렇게 명시적 그리드를 생성했는데 만약 해당 그리드 외부에다가 항목을 배치하려고 시도를 한다면 브라우저는 이 항목을 유지하기 위해서 암시적 그리드(Implicit)를 생성한다. 기본적으로 암시적 그리드는 자동으로 크기가 지정이 되지만 따로 크기를 지정해주려면 grid-auto-rows를 사용하면 된다. grid-auto-rows를 통해 행이 생성이 되고 여기다가 콘텐츠를 담을 수 있다. 

 

특정 크기의 트랙에다가 그 크기보다 큰 콘텐츠를 추가하고자 하면 오버플로가 발생한다. 그렇다면 이런 문제는 어떻게 해결할 수 있을까? 바로 minmax() 기능을 사용하여 해결할 수 있다. minmax() 함수는 트랙의 최소 및 최대 크기를 설정할 수 있기에 유용하다. minmax(최소 크기, 최대 크기)를 작성하면 된다. 

minmax() 함수는 다른 곳에도 사용할 수 있다. 바로 그리드가 컨테이너에 들어갈 수 있는 만큼의 열을 생성하도록 요청할 때 사용된다. 표기법은 grid-template-columns: repeat(auto-fill, minmax(최소 크기, 최대 크기)) 로 작성하면 된다. repeat가 들어가야지 반복이 되기에 들어갈 수 있는 만큼의 그리드를 생성할 수 있다. 

 

• Flex Box

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식이다. 사용하는 이유는? 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있기 때문에 사용한다. 

display: flex 속성을 선언하면 flexbox 생성 끝

flexbox 속성

부모 속성		자식 속성
flex-direction	정렬 방향 지정	flex	grow, shrink, basis 축약형
flex-wrap	자동 줄 넘김	flex-grow	아이템 늘리기(키우기)
justify-content	수평축 방향 정렬	flex-shrink	아이템 줄이기(작아지게)
align-items	수직축 방향 정렬	flex-basis	아이템 기본 크기 설정
align-content	여러 행 정렬	order	배치 순서 설정