해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 CSS3 lesson 19~22의 내용인 반응형 레이아웃, flexbox, 수평/수직 중앙 정렬, image 요소 아래에 패딩된 여분의 공간 제거하기에 대해 알아보겠습니다.
19. 반응형 레이아웃(Responsive Web Design)
Responsive Web Design 개요
사용자가 어떤 디바이스로 웹사이트를 방문할 지 알 수 없기 때문에 layout은 방문자의 화면 해상도를 고려해야 합니다.
반응형 웹 디자인은 화면 해상도에 따라 가로폭이나 배치를 변경해 가독성을 높여줍니다.
viewport meta tag
viewport는 웹페이지의 가시영역을 의미하며 디바이스에 따라 차이가 있습니다.
이를 이용하여 디바이스의 특성과 화면 크기 등을 고려해 각종 디바이스 사용자에게 최적화된 웹페이지를 제공할 수 있습니다.
meta tag는 브라우저 or 검색 엔진 최적화(SEO)를 위해 검색엔진에 메타데이터를 전달하기 위해 사용됩니다.
viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공하며 다음과 같습니다.
width: viewport 너비(px), 기본 값 : 980px - 예 : width=device-width
height: viewport 높이(px) - 예 : width=device-height
initial-scale: viewport 초기 배율 - 예 : initial-scale=1.0
user-scale: 확대 축소 가능 여부 - 예 : user-scale=no
maximum-scale: viewport 최대 배율 - 예 : maximum-scale=2.0
minimum-scale: viewport 최소 배율 - 예 : minimum-scale=1.0
meta tag에서는 단위 표현은 생략되며, 여러 개의 프로퍼티를 사용할 때는 쉼표(,)로 구분합니다.
일반적으로 viewport meta tag는 모바일 디바이스에서만 적용됩니다.
가장 일반적인 viewport 설정은 다음과 같습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media
서로 다른 미디어 타입에 따라 각각의 styles를 지정하는 것입니다.
반응형 웹 디자인의 핵심 기술이며, 이를 사용하여 미디어 별로 style을 지정하는 것을 Media Query 라고 합니다.
디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있습니다.
다음은 사용 예시입니다.
@media screen and (min-width: 480px) {
body {
background-color: green;
}
}Media Query의 표현식에서 사용할 수 있는 프로퍼티는 다음과 같습니다.
width: viewport 너비(px)
height: viewport 높이(px)
device-width: 디바이스의 물리적 너비(px)
device-height: 디바이스의 물리적 높이(px)
orientation: 디바이스 방향 (가로 방향: landscape, 세로방향: portrait)
device-aspect-ratio: 디바이스의 물리적 width/height 비율
color: 디바이스에서 표현 가능한 최대 색상 비트 수
monochrome: 흑백 디바이스의 픽셀 당 비트수
resolution: 디바이스 해상도
orientation 을 제외한 모든 프로퍼티에는 min/max 접두사를 사용할 수 있습니다.
/* All Device, Non-Mobile First Method */
/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {
}viewport의 width 프로퍼티를 이용하여 viewport 너비에 따라 반응하는 범위(breakpoint)를 지정할 수 있습니다.
기술 순서에 의미가 있기에 스마트폰용 스타일을 태블릿용 스타일보다 먼저 기술하게 되면 최종적으로 태블릿용 스타일이 적용되는 점에 주의해야 합니다.
이에 대한 자세한 예시는 원본 블로그 참고 바랍니다.
20. 플렉스 박스 레이아웃(Flexbox Layout)
Introduction
Flexbox는 모던 웹을 위해 제안된 새로운 layout 방식입니다.
요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 제공하며, 적은 코드로 간단하게 구현할 수 있습니다.
Flexbox의 장점은 다음과 같습니다.
1줄의 코드 추가로 수평 정렬이 가능
요소의 상하좌우 정렬, 순서 변경이 간단함
요소의 간격 조절이 간단함
서로 다른 height를 갖는 요소의 수평 정렬 시, 간단히 상하중앙 정렬 가능
Usage
Flexbox는 flex item이라 불리는 여러 개의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성됩니다.
이를 사용하기 위해서는 부모 요소의 display 속성에 flex를 반드시 지정하며, 자식 요소는 자동적으로 flex item이 됩니다.
.flex-container {
display: flex;
}
/* inline 요소인 경우 */
.flex-container {
display: inline-flex;
}
Flexbox container 속성
flex-direction
해당 속성은 flex container의 주축(main axis) 방향을 설정합니다.
flex-direction: row;: 좌 → 우로 수평 배치, 기본 값임
flex-direction: row-reverse;: 우 → 좌로 수평 배치
flex-direction: column;: 위 → 아래로 수직 배치
flex-direction: column-reverse;: 아래 → 위로 수직 배치
flex-wrap
해당 속성은 flex container의 여러 개의 flex item을 1행으로 또는 여러 행으로 배치합니다.
flex container의 width < flex item들의 width의 합계가 더 큰 경우, 어떻게 구현할 것인지 지정합니다.
flex-wrap: nowrap;: 개행하지 않고 1행에 배치, 기본 값임, flex container에 들어갈 수 있는 크기로 축소됨
flex-wrap: wrap;: item들의 width의 합계가 큰 경우 복수행에 배치하며 좌 → 우, 위 → 아래로 배치
flex-wrap: wrap-reverse;:wrap;과 동일하나 아래 → 위로 배치
flex-flow
위에서 다룬 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 축약 표현이며, 기본 값은 row nowrap 입니다.
포맷은 다음과 같습니다.
.flex-container {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
flex container의 main axis를 기준으로 flex item을 수평 정렬합니다.
justify-content: flex-start;: main start(좌측)를 기준으로 정렬, 기본 값임
justify-content: flex-end;: main end(우측)를 기준으로 정렬
justify-content: center;: flex container의 중앙에 정렬
justify-content: space-between;: 첫번째와 마지막 flex item은 좌우 측면에 정렬되고 나머지와 균등한 간격으로 정렬
justify-content: space-around;: 모든 flex item이 균등한 간격으로 정렬
align-items
item을 container의 수직 방향(cross axis)으로 정렬합니다.
해당 속성은 모든 flex item에 적용됩니다.
align-items: stretch;: 모든 item은 container의 높이에 꽉찬 높이를 가짐, 기본 값임
align-items: flex-start;: 모든 item은 container의 cross start 기준으로 정렬
align-items: flex-end;: 모든 item은 container의 cross end 기준으로 정렬
align-items: center;: 모든 item은 container의 cross axis의 중앙에 정렬
align-items: baseline;: 모든 item은 container의 baseline을 기준으로 정렬
→ align-items: baseline; 를 했을 때 예시 사진입니다.
align-content
container의 cross axis를 기준으로 item을 수직 정렬합니다.
align-content: stretch;: 모든 item은 flex item의 행 이후에 균등하게 분배된 공간에 정렬, 기본 값임
align-content: flex-start;모든 item은 container의 cross start 기준으로 stack 정렬
align-content: flex-end;모든 item은 container의 cross end 기준으로 stack 정렬
align-content: center;모든 item은 container의 cross axis의 중앙에 stack 정렬
align-content: space-between첫번째 item의 행 → *container의 *상단, 마지막 item의 행 → 하단에 배치, 나머지 행 → 균등 분할된 공간b에 배치 정렬
align-content: space-around;모든 item은 균등 분할된 공간 내 배치 정렬
Flexbox item 속성
float, clear, vertical-align 속성은 item에 영향을 주지 않습니다.
order
item의 배치 순서를 지정합니다.
기본 배치 순서는 container에 추가된 순서이며, 기본 값은 0입니다. (정수값)
flex-grow
item의 너비에 대한 확대 인자(flex grow factor)를 지정합니다.
기본 값은 0이며, 양의 정수값만 해당됩니다.
flex-shrink
item의 너비에 대한 축소 인자(flex shrink factor)를 지정합니다.
기본 값은 1이고, 역시 양의 정수값만 해당됩니다.
0을 지정할 시에는 축소가 해제되며 원래의 너비를 유지하게 됩니다.
flex-basis
item의 너비 기본값을 px, % 등의 단위로 지정하며, 기본 값은 auto입니다.
flex
flex-grow, flex-shrink, flex-basis 속성의 축약 표현이며, 기본 값은 0 1 auto 입니다.
W3C에서는 개별적으로 기술하는 것을 추천하고 있습니다.
align-self
align-items 속성보다 먼저 개별 flex item을 정렬하며, 기본 값은 auto 입니다.
포맷은 다음과 같습니다.
.flex-item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
21. 수평/수직 중앙 정렬(Horizontal & Vertical Centering)
수평 정렬(Horizontal Align)
inline/inline-block 요소
정렬 대상 요소(텍스트 or 링크 등의 inline 요소 or inline-block 요소)의 부모 요소에 text-align: center;를 지정합니다.
block 요소
대상 요소에 너비를 명시적으로 지정하고 margin-right 와 margin-left 프로퍼티에 auto를 지정합니다.
여러 개의 block 요소
기본적으로 수직 정렬됩니다.
수평 정렬하기 위해서는 정렬 대상 block 요소를 inline-block 요소로 변경한 후 부모 요소에 text-align: center;를 지정합니다.
width를 지정하지 않으면 콘텐츠에 맞춰서 너비가 결정되기에 명시적으로 지정합니다.
Flexbox
flexbox를 사용할 수 있으며, 부모 요소에 아래의 룰셋을 선언합니다.
.flex-center {
display: flex;
justify-content: center;
}
수직 정렬(Vertical Align)
inline/inline-block 요소
- Single line
부모 요소에 padding-top과 padding-bottom 프로퍼티값을 동일하게 적용합니다.
padding 을 사용할 수 없는 경우, 요소의 height와 line-height 프로퍼티 값을 동일하게 적용하여 해결할 수 있지만 여러 문제가 있을 수 있습니다.
- Multiple lines
padding-top과 padding-bottom 프로퍼티값을 동일하게 적용하거나 table 속성을 사용해 vertical-align 프로퍼티를 사용 가능합니다.
.parent {
display: table;
height: 100px;
}
.child {
display: table-cell;
vertical-align: middle;
}- Flexbox
간단하게 Flexbox를 사용할 수 있습니다.
.container {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
block 요소
- 요소의 높이가 고정되어 있는 경우
부모 요소를 기준으로 절대 위치를 지정합니다.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
/*요소의 높이(100px)의 반 만큼 위로 이동*/
margin-top: -50px;
}- 요소의 높이가 불확정 상태의 경우
이 경우 역시 부모 요소를 기준으로 절대 위치를 지정합니다.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
/*요소의 높이의 반(50%) 만큼 위로 이동*/
transform: translateY(-50%);
}- Flexbox
부모 요소에 Flexbox 레이아웃을 지정합니다.
.parent {
display: flex;
/*위에서 아래로 수직 배치*/
flex-direction: column;
/*중앙 정렬*/
justify-content: center;
}
수평/수직 정렬(Horizontal & Vertical Align)
요소의 너비와 높이가 고정되어 있는 경우, 요소의 너비와 높이가 불확정 상태의 경우 모두 사용 가능한 방법입니다.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
/*요소의 높이/너비의 반(50%)만큼 위/왼쪽으로 이동*/
transform: translate(-50%, -50%);
}
Flexbox를 사용하면 더욱 간단해집니다.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
22. image 요소 아래에 패딩된 여분의 공간 제거 하기(Typography)
<container> 로 <img> 를 래핑하면 <img> 아래에 의도하지 않은 여분의 공간이 패딩됩니다.
이는 <img>가 inline 요소에 해당 되어서 텍스트로 취급되기 때문입니다.
브라우저가 요소 내의 텍스트를 렌더링할 때는 타이포그래피 방식을 따릅니다.
해당 문제에 대한 해결방법은 다음과 같습니다.
<img>를 block 요소로 전환하여 더이상 텍스트 취급 X
하지만 해당 방법은 block 요소로 전환할 수 없는 레이아웃에서는 사용이 불가합니다.
- inline 요소에 사용할 수 있는
vertical-align프로퍼티 사용
vertical-align 프로퍼티의 기본값은 baseline인데 이를 변경하여 이미지 표시 위치를 조정하면 됩니다.
여기까지 반응형 레이아웃, flexbox, 수평/수직 중앙 정렬, image 요소 아래에 패딩된 여분의 공간 제거하기를 끝으로 CSS에 대해 다 훑어보았습니다.