반응형 웹 실전 프로젝트 #21 (미디어쿼리 media query)
HTML, CSS 2020. 7. 23. 17:02뷰포트의 해상도에 따라 CSS를 분기 시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법이다
<link rel="stylesheet" type="text/css" media="all and (min-width: 1000px)" href="style_pc.css">최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일때 style_pc.css를 연결 한다는 뜻이다
테블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할수 있고 기기모델도 추가 할수 있다
블로그 기기별 모바일 화면 보는 방법(다음 트로이)
자신이 운영 중인 홈페이지나, 블로그가 모바일 기기에서는 어떻게 보일까 궁금하신 분들에게 도움되는 Daum Troy labs 서비스입니다. 데스크톱이나 핸드폰에서 주소를 입력하면 기기별 모바일 화
appstips.tistory.com
또한 다음 트로이에서는 기기별 해상도를 제공하고 실제 작동 하면을 확인 할수 있는 뷰를 제공 한다
(지금은 왜 안되는지 모르겠음...)
처음 로딩할때 성능이 저하되지 않도록 css파일을 하나로 만들어서 css내부에서 조건에 따라 분기시키는것이 일반적인 형태의 반응형웹 css다
@media all and (min-width: 1000px) {
/* 모든 기기에서 해상도가 최소 1000px인 경우 적용할 속성들... */
}
all은 Media Type을 나타낸다 and 전, 후에 띄어 쓴다
developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
미디어 쿼리 사용하기 - 웹 개발자 안내서 | MDN
미디어 쿼리 사용하기 Jump to sectionJump to section 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때
developer.mozilla.org
body {
color: red;
}
@media only screen and (max-width: 768px) {
body {
color: blue;
}
}
위 구문은 원래 글자색이 빨간색인데, 화면이 768px보다 작아졌을 경우 파란색으로 지정한다는 뜻이므로 pc에서는 글자색상이 빨간색으로 모바일에서는 파란색으로 나타나게 된다
작은 장치에서 페이지를 더 빠르게 표시되게 하려면 모바일 우선으로 설계한다
body {
color: blue;
}
@media only screen and (min-width: 768px) {
body {
color: red;
}
}
위 구문은 원래 글자색이 파란색인데 768보다 작아지면 빨간색으로 지정한다는 뜻이므로 모바일 우선으로 하면서도 같은 결과를 가져온다
미디어 쿼리를 이용하여 브라우저의 방향에 따라 다른 레이아웃을 제공할수 있다
@media only screen and (orientation: portrait) {
body {
background: skyblue;
}
}
위 구문은 모바일 기기를 세워 세로가 가로보다 긴 세로방향이 되면 배경색을 하늘색으로 지정 한다는 뜻
@media only screen and (orientation: landscape) {
body {
background: lightgreen;
}
}
위 구문은 모바일 기기를 눕혀 가로가 세로보다 긴 가로방향이 되면 배경색을 연두색으로 지정한다는 뜻
@media screen and (max-width: 900px) and (min-width: 600px),
(min-width: 1100px) {
body {
color: red;
}
}
쉼표로 구분하여 조건을 추가 할수 있다
위 구문은 가로 600px ~ 900px사이일때 그리고 1100px이상일때만 글자색을 빨간색으로 한다는 뜻이다
반응형 웹이라고 해서 LukeW의 5가지 패턴대로만 디자인 해야 하는것은 아니지만 해상도 구분은 지금까지 그대로 참고해도 될것같으니 모바일과 태블릿 그리고 PC의 경계를 768px, 1024px, 1280px로 하여 레이아웃이 달라지는 media query를 실습해보자
레이아웃 템플릿은 다음과 같이 계획 했다
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>오르셰미술관</title>
<style type="text/css"></style>
</head>
<body>
<div class="wrap">
<header>
<h1>Musee d'Orsay</h1>
</header>
<div id="container" class="clear">
<div class="lnb">
<ul>
<li><a href="#">작가의 작품</a></li>
<li><a href="#">작가의 시대</a></li>
<li><a href="#">작가의 일생</a></li>
</ul>
</div>
<div class="content">
<h2>PICTURES</h2>
<p>
<a href="#">피리부는 소년</a><br>
<a href="#">고흐의 방</a><br>
<a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
<a href="#">오페라좌의 관현악단</a><br>
<a href="#">만종</a><br>
<a href="#">제비꽃 장식을 단 베르트모리조</a><br>
</p>
</div>
<div class="aside">
<ul class="ext">
<li>
<h2>Workshop Go</h2>
<a href="#">Life drawing workshop</a>
</li>
<li>
<h2>Summer Exhibition</h2>
<a href="#">A-level Summer Exibition Online 2020</a>
</li>
<li>
<h2>
RA Collection
</h2>
<a href="#">RA Collections</a>
</li>
</ul>
</div>
</div>
<footer>
<p>©2020 Les Amis du Mesee d'Orsay. All rights reserved.</p>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>오르셰미술관</title>
<style type="text/css">
h1, h2, ul, li, p, div {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li { list-style-type: none; }
.clear:after{
content: "";
display: block;
clear: both;
}
a {
line-height: 1.5;
color: #333;
}
body {
background: #f1f1f1;
font-size: 13px;
}
header{
background: coral;
}
h1{
font-size: 25px;
color: #cc0;
padding: 10px;
color: #fff;
}
.lnb li {
margin: 10px;
padding: 10px;
background: lightgreen;
}
.content {
padding: 20px;
}
h2 {
font-size: 20px;
}
.ext {
margin: 10px;
padding: 20px;
background: lightgreen;
}
footer {
padding: 10px;
background: #aaaaaa;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>Musee d'Orsay</h1>
</header>
<div id="container" class="clear">
<div class="lnb">
<ul>
<li><a href="#">작가의 작품</a></li>
<li><a href="#">작가의 시대</a></li>
<li><a href="#">작가의 일생</a></li>
</ul>
</div>
<div class="content">
<h2>PICTURES</h2>
<p>
<a href="#">피리부는 소년</a><br>
<a href="#">고흐의 방</a><br>
<a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
<a href="#">오페라좌의 관현악단</a><br>
<a href="#">만종</a><br>
<a href="#">제비꽃 장식을 단 베르트모리조</a><br>
</p>
</div>
<div class="aside">
<ul class="ext">
<li>
<h2>Workshop Go</h2>
<a href="#">Life drawing workshop</a>
</li>
<li>
<h2>Summer Exhibition</h2>
<a href="#">A-level Summer Exibition Online 2020</a>
</li>
<li>
<h2>
RA Collection
</h2>
<a href="#">RA Collections</a>
</li>
</ul>
</div>
</div>
<footer>
<p>©2020 Les Amis du Mesee d'Orsay. All rights reserved.</p>
</footer>
</div>
</body>
</html>
@media all and (min-width: 768px) and (max-width: 1024px){
.lnb{
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
.aside {
clear: both;
}
}
@media all and (min-width: 1025px){
.wrap {
max-width: 1280px;
margin: 0 auto;
}
.lnb {
float: left;
width: 20%;
}
.content{
float: left;
width: 50%;
}
.aside {
float: right;
width: 30%;
}
}
최종
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>오르셰미술관</title>
<style type="text/css">
h1, h2, ul, li, p, div {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li { list-style-type: none; }
.clear:after{
content: "";
display: block;
clear: both;
}
a {
line-height: 1.5;
color: #333;
}
body {
background: #f1f1f1;
font-size: 13px;
}
header{
background: coral;
}
h1{
font-size: 25px;
color: #cc0;
padding: 10px;
color: #fff;
}
.lnb li {
margin: 10px;
padding: 10px;
background: lightgreen;
}
.content {
padding: 20px;
}
h2 {
font-size: 20px;
}
.ext {
margin: 10px;
padding: 20px;
background: lightgreen;
}
footer {
padding: 10px;
background: #aaaaaa;
}
@media all and (min-width: 768px) and (max-width: 1024px){
.lnb{
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
.aside {
clear: both;
}
}
@media all and (min-width: 1025px){
.wrap {
max-width: 1280px;
margin: 0 auto;
}
.lnb {
float: left;
width: 20%;
}
.content{
float: left;
width: 50%;
}
.aside {
float: right;
width: 30%;
}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>Musee d'Orsay</h1>
</header>
<div id="container" class="clear">
<div class="lnb">
<ul>
<li><a href="#">작가의 작품</a></li>
<li><a href="#">작가의 시대</a></li>
<li><a href="#">작가의 일생</a></li>
</ul>
</div>
<div class="content">
<h2>PICTURES</h2>
<p>
<a href="#">피리부는 소년</a><br>
<a href="#">고흐의 방</a><br>
<a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
<a href="#">오페라좌의 관현악단</a><br>
<a href="#">만종</a><br>
<a href="#">제비꽃 장식을 단 베르트모리조</a><br>
</p>
</div>
<div class="aside">
<ul class="ext">
<li>
<h2>Workshop Go</h2>
<a href="#">Life drawing workshop</a>
</li>
<li>
<h2>Summer Exhibition</h2>
<a href="#">A-level Summer Exibition Online 2020</a>
</li>
<li>
<h2>
RA Collection
</h2>
<a href="#">RA Collections</a>
</li>
</ul>
</div>
</div>
<footer>
<p>©2020 Les Amis du Mesee d'Orsay. All rights reserved.</p>
</footer>
</div>
</body>
</html>
media query를 흉내내는 script
function initLayout() {
var widthWin = $(window).width();
if (widthWin < 1000) $("body").addClass("mob").removeClass("pc");
else $("body").removeClass("mob").addClass("pc");
}
창의 가로 크기를 재고 1000px보다 좁으면 body에 mob클래스를 붙이고 pc클래스는 제거 하고, 1000px이상이면 body에 pc클래스를 붙이고, mob클래스를 제거 한다는 뜻
$(window).resize(function () {
initLayout();
});
미리 만들어둔 스크립트를 창 크기가 바뀔때마다 실행된다
body.mob { max-width: 720px; }css에서 body.mob 속성을 추가하면 모바일 일때 속성이 등록되는것이다
NOTE
IE10부터는 조건 주석문을 지원하지 않는다
아직 IE9는 사용중이기에 잠시 언급한다면 과거 IE버전별 이슈가 많았을때는 조건 주석문을 종종 사용했었다
<!-- [if lte IE9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endof]-->
그밖의 layout
지금은 레이아웃을 구성할때 float이나 position을 사용하지만 앞으로는 브라우저 이슈들이 좀더 개선되는 가까운 미래에 flexbox또는 grid layout 방식도 즐겨 쓰는 날이 오게 될것이다
아직은 최신브라우저들에서만 실행되는등 많이 활성화 되어 있지는 않지만 곧 일어날 변화를 위해 간단히 소개 한다
flex layout은 요소들이 포함된 큰박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치 하는 속성들을 부여하여 레이아웃을 잡는것이다
display: flex;
display: -webkit-flex;
display: -ms-flexbox;위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻이다
사파리 낮은 버전을 위해 vendor prefix를 사용했고 IE10에서는 vendor prefix를 사용해야 할 뿐 아니라 flexbox라고 써야 한다 IE9는 flex 속성을 지원하지 않는다
flex
지금은 float으로 세개의 요소를 가로로 나열할수 있다
flex로 구현한다면 다음과 같이 표현 한다
flex: 1;<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
height: 200px;
background: #cccccc;
}
.flexbox > div {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
background: darkcyan;
margin: 10px;
}
</style>
</head>
<body>
<div class="flexbox">
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
</div>
</body>
</html>
이렇게만 했는데도 가로로 나열된다
flex: 1; 은 원래 flex: 1 1 0;의 줄인 표현이다
지금은 1 1 auto와도 같다
또 1 1 100px과도 같다
앞이 1이면 뒤가 뭐든같은데, 이 세 값은 flex-grow, flex-shrink, flex-basis다
flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN
일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주
developer.mozilla.org
| 속성 값 | 속성 설명 |
| flex: 1 0 100px; | 1 : flex-grow (생략 불가능) -> 1 |
| 0 : flex-shrink (생략 가능) -> 2 | |
| 100px : flex-basis (생략 가능) -> 3 |
flex-grow
자식 요소가 적거나 그 크기가 작아 공간이 남을때 항목의 크기를 늘려 채워주는 방법을 정의 한다
| 속성 값 | 속성 설명 |
| 0 | (기본값) |
| 1 | 항목들이 모두 1이면 같은 크기 |
| 양수 | 값을 높게 줄수록 더 늘어남 공간이 부족할때는 어떤값도 무의미 |
앞에서 살펴본 예제 ex2-76.html에서 flex자식 요소 셋이 width도 없이 모두 1/3씩 차지한것이 신기하다
이게 바로 셋이 모두 1을 가졌으니 가로 크기가 1:1:1이라는 뜻이다
만약 1:2:1이면 가운데 요소만 두배 크기였을것이다
flex-shrink
자식 요소가 많거나 그 크기가 커서 공간이 부족할때 각 항목의 크기를 줄여 채워주는 방법을 정의한다
| 속성 값 | 속성 설명 |
| 0 | 공간이 부족해도 항목의 크기를 줄일수 없음 |
| 1 | (기본값) - 자식 요소들이 많아서 컨테이너를 넘치면 안넘치게 알아서 좁아짐 |
| 양수 | 값을 높게 줄수록 더 좁아짐(내부적으로 수축지수가 자동계산됨) 공간이 남을때는 어떤값도 무의미 |
flex-shrink속성의 기본값은 1이기때문에 자식 요소는 기본적으로 좁아진다
자식 요소에 width: 200px을 추가 하고 자식요소를 10개로 늘려도 각자 사이즈를 좁혀 한줄로 들어간다
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
height: 200px;
background: #cccccc;
}
.flexbox > div {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
width: 200px;
background: darkcyan;
margin: 10px;
}
</style>
</head>
<body>
<div class="flexbox">
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
</div>
</body>
</html>
flex: 1은 flex: 1 1과 같고 두번째 1이 flex-shrink값이다
그래서 7개로 늘어난 자식 요소들이 가로 크기를 200px이나 지정했는데도 무시하고 알아서 줄어들었다
flex-basis
flex자식요소들의 초기 길이를 지정하는 속성이다
flex에서는 앞의 예제처럼 width속성을 주지 않고 대신 flex-basis를 사용한다
| 속성 값 | 속성 설명 |
| auto | (기본값) |
| 50px, 100px ... | 원하는 가로 크기를 부여함 |
자식 요소들이 늘어나지도 줄어들지도 않고 원래 크기(100px)를 가지기 원한다면 flex:0 0 100px로 지정한다
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
height: 200px;
background: #cccccc;
}
.flexbox > div {
flex: 0 0 100px;
-webkit-flex: 0 0 100px;
-ms-flex: 0 0 100px;
background: darkcyan;
margin: 10px;
}
</style>
</head>
<body>
<div class="flexbox">
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
<div><img src="logo.png" alt="unity logo"></div>
</div>
</body>
</html>
flex: <flex-grow> <flex-shrink> <flex-basis>의 생략은 다음과 같다
| 속성 값 | 생략 속성 | 속성 설명 |
| flex: none; | 모두 생략 | flex: 0 0 auto; |
| flex: 1; | flex-shrink, flex-basis 생략 | flex: 1 1 0; |
| flex: 100px; | flex-grow, flex-shrink 생략 | flex: 1 1 100px; |
| flex: 1 1; | flex-basis 생략 | flex: 1 1 0; |
| flex: 1 100px | flex-shrink 생략 | flex: 1 1 100px |
flex-grow: 1;을 이용하면 공간이 남아도 한줄 가득 꽉 채울수 있다
flex-shrink: 1; 을 이용하면 공간이 넘쳐도 한줄로 줄여서 채울수 있다
flex-direction
자식 요소를 나열하는 방향을 지정하는 속성이다
부모 요소에게 지정한다
| 속성 값 | 속성 설명 |
| column | 위에서 아래로 나열 |
| column-reverse | 아래에서 위로 나열 |
| row(기본값) | 좌에서 우로 나열 |
| row-reverse | 우에서 좌로 나열 |
이전 예제에서는 이 속성이 없었음으로 기본값, 즉, flex-direction: row;가 지정되어 가로로 나열되었던것이다
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
height: 200px;
background: #cccccc;
}
.flexbox > div {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
background: darkcyan;
margin: 10px;
font-size: 30px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="flexbox">
<div>child-1</div>
<div>child-2</div>
<div>child-3</div>
</div>
</body>
</html>
부모요소에게 flex-direction: column-reverse;를 지정하여 자식 요소들이 아래에서 위 방향으로 나열되었다
flex: 1; 로 인해 세로로 꽉차게 배치 하였다
justify-content
공간이 남을때, 즉 flex-grow: 0;일때 자식 요소들을 가로 정렬하는 속성이다
| 속성 값 | 속성 설명 |
| flex-start(기본값) | 시작쪽으로 정렬(보통 왼쪽, flex-direction: row-reverse일때 오른쪽) |
| flex-end | 끝쪽으로 정렬(보통 오른쪽, flex-direction: row-reverse일때 왼쪽) |
| center | 중앙 정렬 |
| space-between | 양쪽 정렬 |
| space-around | 요소 좌우 동일 간격 |
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
height: 200px;
background: #cccccc;
}
.flexbox > div {
flex: 0 0 100px;
-webkit-flex: 0 0 100px;
background: darkcyan;
margin: 10px;
font-size: 30px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="flexbox">
<div>child-1</div>
<div>child-2</div>
<div>child-3</div>
</div>
</body>
</html>
flex-basis를 100px로 하고 justify-content: space-between; 했음으로 text-align: justify;처럼 양쪽 정렬된다
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
justify-content: space-around;
-webkit-justify-content: space-around;
height: 200px;
background: #cccccc;
}
.flexbox > div {
flex: 0 0 100px;
-webkit-flex: 0 0 100px;
background: darkcyan;
margin: 10px;
font-size: 30px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="flexbox">
<div>child-1</div>
<div>child-2</div>
<div>child-3</div>
</div>
</body>
</html>justify-content: space-between;를 justify-content: space-around로 변경해보면 다음과 같이 요소의 좌우 여백이 같아진다
IE10은 justify-content 속성을 지원하지 않는다
지금까지 나온 속성을 사용하여 반응형 주메뉴를 flex로 구현해보자
모바일에서는 메뉴들이 세로로 나열되고, 테블릿에서는 가로로 양쪽 정렬되고, PC에서는 좌측 정렬되도록 할것이다
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
h1 {
padding: 10px 20px;
background: darkblue;
color: #ffffff;
font-size: 20px;
}
.gnb {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
.gnb > li {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
margin: 2px;
}
.gnb li a {
display: block;
padding: 10px;
text-decoration: none;
background: lightblue;
color: darkblue
}
</style>
</head>
<body>
<header>
<h1>캠핑중고장터</h1>
<ul class="gnb">
<li><a href="#">company</a></li>
<li><a href="#">service</a></li>
<li><a href="#">custommer</a></li>
<li><a href="#">community</a></li>
</ul>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
h1 {
padding: 10px 20px;
background: darkblue;
color: #ffffff;
font-size: 20px;
}
.gnb {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
.gnb > li {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
margin: 2px;
}
.gnb li a {
display: block;
padding: 10px;
text-decoration: none;
background: lightblue;
color: darkblue
}
@media all and (min-width: 768px){
.gnb {
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
justify-content: space-around;
-webkit-justify-content: space-around;
background: lightblue;
}
.gnb > li {
flex: 0 0 80px;
-webkit-flex: 0 0 80px;
-ms-flex: 0 0 80px;
margin: 10px;
}
.gnb li a {
padding: 0;
}
}
</style>
</head>
<body>
<header>
<h1>캠핑중고장터</h1>
<ul class="gnb">
<li><a href="#">company</a></li>
<li><a href="#">service</a></li>
<li><a href="#">custommer</a></li>
<li><a href="#">community</a></li>
</ul>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
h1 {
padding: 10px 20px;
background: darkblue;
color: #ffffff;
font-size: 20px;
}
.gnb {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
.gnb > li {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
margin: 2px;
}
.gnb li a {
display: block;
padding: 10px;
text-decoration: none;
background: lightblue;
color: darkblue
}
@media all and (min-width: 768px){
.gnb {
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
justify-content: space-around;
-webkit-justify-content: space-around;
background: lightblue;
}
.gnb > li {
flex: 0 0 80px;
-webkit-flex: 0 0 80px;
-ms-flex: 0 0 80px;
margin: 10px;
}
.gnb li a {
padding: 0;
}
}
@media all and (min-width:1025px){
.gnb{
justify-content: flex-start;
-webkit-justify-content: flex-start;
}
}
</style>
</head>
<body>
<header>
<h1>캠핑중고장터</h1>
<ul class="gnb">
<li><a href="#">company</a></li>
<li><a href="#">service</a></li>
<li><a href="#">custommer</a></li>
<li><a href="#">community</a></li>
</ul>
</header>
</body>
</html>
flex-wrap
flex자식 요소들의 줄바꿈 방식을 지정하는 속성이다
| 속성 값 | 속성 설명 |
| wrap | 자식 요소들이 많으면 다음줄로 넘침 |
| nowrap(기본값) | 자식 요소들이 많아도 한줄안에 배치 |
| wrap-reverse | 자식 요소들이 많으면 다음 위줄로 넘침 |
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
width: 750px;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
height: 200px;
background: #ccc;
}
.flexbox > div {
flex: 0 1 100px;
-webkit-flex: 0 1 100px;
-ms-flex: 0 1 100px;
background: darkblue;
margin: 10px;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="flexbox">
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
<div>child 4</div>
<div>child 5</div>
<div>child 6</div>
<div>child 7</div>
<div>child 8</div>
</div>
</body>
</html>
flex-wrap: wrap; 이 추가 됨으로써 한줄에 좁게 들어있던 자식 요소들이 원래의 초기값 100px로 퍼져 두줄로 나타났다
flex: 0 1 100px; /*팽창하지 말것, 수축해도 됨, 기본 가로폭 100px */flex: wrap; 이 없었다면 어떻게 되었을까?
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
width: 750px;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
/* flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
*/
height: 200px;
background: #ccc;
}
.flexbox > div {
flex: 0 1 100px;
-webkit-flex: 0 1 100px;
-ms-flex: 0 1 100px;
background: darkblue;
margin: 10px;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="flexbox">
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
<div>child 4</div>
<div>child 5</div>
<div>child 6</div>
<div>child 7</div>
<div>child 8</div>
</div>
</body>
</html>
flex: 0 1 100px을 팽창 허용하도록 flex: 1 1 100px;로 변경해보자
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
width: 750px;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
height: 200px;
background: #ccc;
}
.flexbox > div {
flex: 1 1 100px;
-webkit-flex: 1 1 100px;
-ms-flex: 1 1 100px;
background: darkblue;
margin: 10px;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="flexbox">
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
<div>child 4</div>
<div>child 5</div>
<div>child 6</div>
<div>child 7</div>
<div>child 8</div>
</div>
</body>
</html>
flex-flow
flex-direction과 flex-wrap을 나란히 붙여 하나의 속성처럼 쓸수 있다
기본값은 아래와 같다
flex-flow: row nowrap;
align-items
자식 요소들을 세로로 정렬 하는 속성이다
| 속성 값 | 속성 설명 |
| flex-start | 시작쪽으로 정렬(보통 위쪽, flex-direction: column-reverse일때 아래쪽) |
| flex-end | 끝쪽으로 정렬 (보통 아래쪽, flex-direction: column-reverse일때 위쪽) |
| center | 세로 중앙 |
| baseline | 글자의 baseline 기준으로 정렬 |
| stretch (기본값) | 부모 요소의 세로 크기를 따라 확장 |
지금 까지 자식 요소들이 height도 없이 부모의 세로 영역을 다 차지 한것이 바로 stretch가 기본값이기 때문이였다
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
align-items: flex-start;
-webkit-align-items: flex-start;
height: 200px;
background: #ccc;
}
.flexbox > div {
flex: 1 1 100px;
-webkit-flex: 1 1 100px;
background: darkblue;
margin: 10px;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="flexbox">
<div>child 1</div>
<div><h2>child 2</h2></div>
<div>child 3</div>
</div>
</body>
</html>
align-items: flex-start;의 결과 세로 위쪽으로 정렬됨
IE10은 align-items속성을 지원하지 않는다
order
자식들의 순서를 바꿔주는 속성이다
몇번째에 배치할지 순서를 지정한다
| 속성 값 | 속성 설명 |
| 0 (기본값) | 순서를 바꾸지 않음 |
| 양수 | 원하는 순서를 지정 |
| 음수 | 좌측으로 자리를 바꾸는 횟수 |
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
align-items: stretch;
-webkit-align-items: stretch;
height: 200px;
background: #ccc;
}
.flexbox > div {
flex: 1 1 100px;
-webkit-flex: 1 1 100px;
background: darkblue;
margin: 10px;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="flexbox">
<div style="order: 3;">child 1</div>
<div style="order: 4;"><h2>child 2</h2></div>
<div style="order: 2;">child 3</div>
<div style="order: 5;">child 4</div>
<div style="order: 1;">child 5</div>
</div>
</body>
</html>
IE10은 order속성을 지원하지 않음
align-self
자식 요소중 선택된 항목에 대해서만 세로로 다시 정렬 하는 속성
속성들은 align-items의 속성들과 같다
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
display: flex;
display: -webkit-flex;
align-items: stretch;
-webkit-align-items: stretch;
height: 200px;
background: #ccc;
}
.flexbox > div:nth-child(3) {
align-self: flex-end;
-webkit-align-self: flex-end;
}
</style>
</head>
<body>
<div class="flexbox">
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
</div>
</body>
</html>
IE10은 aligh-self를 지원하지 않음
align-content
flex-wrap: wrap; 일경우 여러줄을 세로로 정렬 하는 속성임
속성들은 align-items의 속성들과 같음
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>flexbox</title>
<style type="text/css">
.flexbox{
max-width: 750px;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
height: 270px;
background: #ccc;
align-content: flex-start;
-webkit-align-content: flex-start;
}
.flexbox > div {
flex: 0 0 100px;
-webkit-flex: 0 0 100px;
background: darkblue;
margin: 10px;
font-size: 20px;
color: #ffffff;
}
</style>
</head>
<body>
<div class="flexbox">
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
<div><img src="./logo.png" alt="unity logo"></div>
</div>
</body>
</html>
flex:wrap: wrap;으로 여러줄로 나타나게 하고
align-content: flex-start; 하면 상단으로 정렬된다
만약 align-content: flex-start;가 없으면 어떻게 될까?
그렇다 기본값인 stretch로 나타난다
IE10은 align-content 속성을 지원하지 않는다
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #23 (자바스크립트 기본 형식 및 적용방법) (0) | 2020.07.23 |
|---|---|
| 반응형 웹 실전 프로젝트 #22 (그 밖의 layout) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #20 (레이아웃: position) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #19 (레이아웃: float) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #18 (기타 CSS3 속성) (0) | 2020.07.23 |