[Css] 레이아웃 - UI, 다중 컬럼, 반응형 웹디자인, 플렉서블 박스

사용자 인터페이스(user interface, UI)

• CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해준다.

resize 속성

• resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생겨, 사용자가 직접 해당 요소의 높이나 너비를 변경할 수 있게 해준다.

#width { resize: horizontal; }
#height { resize: vertical; }
#both { resize: both; }

outline-offset 속성

• outline-offset 속성은 해당 요소의 테두리와 아웃라인 사이에 공간(offset)을 추가해 준다.
• 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인으로, HTML 요소의 크기에 포함되지 않으며, 사각형이 아닐 수도 있다.

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 20px;
}

 

다중 칼럼(multi-column)

• 신문과 같이 여러 개의 칼럼으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있다.

#origin { 
    column-count: 3;              /* 몇 개의 컬럼으로 나눌지 */
    column-gap: 70px;             /* 컬럼 사이의 간격 */
    column-width: 150px;          /* 컬럼 너비 */
    column-span: all;             /* 몇 개의 컬럼 병합할지 */
    column-fill: balance-all;     /* 컬럼 어떻게 채울지 */
    column-rule-style: solid;     /* 컬럼 사이 라인 스타일 */
    column-rule-width: 5px;       /* 컬럼 사이 라인 두께 */
    column-rule-color: #6495ED;   /* 컬럼 사이 라인 색상 */
}

column-rule 속성

• column-rule 속성은 모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정한다.

#line {
    column-rule: 5px solid #6495ED;
}

 

반응형 웹디자인(Responsive Web Design)

• 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 구조다.

뷰포트 메타 태그(viewport meta tag)

https://velog.io/@ken1204/viewport%EB%9E%80

• 메타 태그는 브라우저 혹은 검색엔진최적화(SEO)를 위해 검색엔진에게 전달하기 위해 사용된다.
• 일반적으로 뷰포트 메타 태그는 모바일 디바이스에서만 적용되며, px단위를 사용하나 단위 표현은 생략되며, 복수개의 속성을 사용할 때는 쉼표 , 로 구분한다.
  
  • width와 height : viewport의 넓이와 높이로, 넓이 기본값은 980px이다.
  • initial-scale : viewport의 초기 배율
  • user-scale : 확대 축소 가능 여부
  • minimum-scale과 maximum-scale : viewport의 최소 및 최대 배율

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

플렉서블 박스(flexible box)

• 플렉서블 박스는 CSS3에서 처음 소개된 레이아웃 모델로 플렉스 박스(flex box)라고도 불리며, 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다.
• 플렉서블 박스의 장점은 1줄의 코드 추가로 수평 정렬이 가능하고, 요소의 상하좌우 정렬, 순서 변경, 간격 조절이 간단하다. 또한 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.

https://poiemaweb.com/css3-flexbox

• 플렉스 박스는 부모 요소인 플렉스 컨테이너(flex container)와 자식 요소인 플렉스 요소(flex item)로 구성되며, 플렉스 컨테이너는 언제나 하나 이상의 플렉스 요소를 포함해야 한다.
• 플렉스 요소는 플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 위치하며, 기본적으로 하나의 플렉스 컨테이너는 오직 단 하나의 플렉스 라인만을 가지고 있다.

/* direction 속성을 이용하여 플렉스 라인 방향 변경 */
body {
  direction: rtl;          /* rtl(right-to-left): 오른쪽에서 왼쪽 */
}

.flex-container {
  display: flex;           /* 블록 타입일 때 */
  display: inline-flex;    /* 인라인 타입일 때 */
}

 

플렉스 요소(flex item)의 속성들

• float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다.

.flex-item {
  order: 정수값;         /* 플렉스 요소들의 순서를 설정 - 기본값 0 */
  margin: auto;        /* auto 설정시 수평 방향 여유 공간 없앰 */
  align-self: center;  /* align-items 속성보다 우선 적용. 플렉스 요소별 정렬 */
  flex: 1;             /* 같은 플렉스 컨테이너 안의 플렉스 요소 넓이 상대적 설정 */
}

flex-direction 속성

• flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정한다.

.flex-container {
  flex-direction: row;            /* 좌우 위아래로 배치 (기본) */
  flex-direction: row-reverse;    /* direction 속성값 반대로 */
  flex-direction: column;         /* 위에서 아래로 수직 배치 */
  flex-direction: column-reverse; /* 아래에서 위로 수직 배치 */
}

flex-wrap 속성

• flex-wrap 속성은 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소의 위치를 다음 줄로 넘길지를 설정한다.

.flex-container {
  flex-wrap: nowrap;   /* 플렉스 요소 너비를 줄여서 한 줄에 모두 배치 (기본) */
  flex-wrap: wrap;     /* 플렉스 요소 여유 공간이 없으면 다음 줄로 넘어가 배치 */
  flex-wrap: wrap-reverse; /* wrap과 동일하나 아래에서 위로 배치 */
}

flex-flow 속성 축약 표현

• flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 축약 표현이며, 기본값은 row nowrap이다.

.flex-container {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content 속성

• justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정한다.

.flex-container {
  justify-content: flex-start; /* 플렉스 컨테이너 앞쪽부터 배치 (기본값) */
  justify-content: flex-end;   /* 플렉스 컨테이너 뒤쪽부터 배치 */
  justify-content: center;     /* 플렉스 컨테이너 중앙부터 배치 */
  justify-content: space-between; /* 플렉스 요소 사이에 여유 공간 두고 배치 */
  justify-content: space-around;  /* 플렉스 요소 모두 여유 공간 배치 */
}

align-items 속성

• align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정하며, 한 줄만을 가지는 플렉스 박스에서는 효과가 없고 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있다.

.flex-container {
  align-items: stretch; /* 플렉스 요소와 컨테이너 높이같은 후 연이어 배치(기본값) */
  align-items: flex-start; /* 플렉스 컨테이너 위쪽에 배치 */
  align-items: flex-end;   /* 플렉스 컨테이너 아래쪽에 배치 */
  align-items: center;     /* 플렉스 컨테이너 중앙에 배치 */
  align-items: baseline;   /* 플렉스 컨테이너 기준선에 배치 */
}

align-content 속성

• align-content 속성은 flex-wrap 속성의 동작을 변경할 수 있으며, align-items과 비슷하지만 플렉스 요소를 정렬하는 대신에 플렉스 라인을 정렬한다.

.flex-container {
  align-content: stretch;    /* 플렉스 라인 높이가 남는 공간 전부 차지 (기본) */
  align-content: flex-start; /* 플렉스 라인은 플렉스 컨테이너 앞쪽에 */
  align-content: flex-end;   /* 플렉스 라인은 플렉스 컨테이너 뒤쪽에 */
  align-content: center;     /* 플렉스 라인은 플렉스 컨테이너 가운데에 */
  align-content: space-between; /* 플렉스 라인은 플렉스 컨테이너 고르게 */
  align-content: space-around;  /* space-between과 같으나 양쪽끝에 공간 남김 */
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/