1. flex의 기타 속성들 정리
: 모든 내용은 Flexbox playground (codepen.io)를 참고했다.
[1] 전체 element에 적용되는 속성
1) flex-wrap
flex의 기본 설정 : 같은 row/column에 배정된 컨텐츠의 총 너비/높이의 합이 컨테이너 전체의 너비/높이의 합보다 크다면(높이가 지정된 경우), flex-direction 이 설정된 경우 그냥 한 row/column에 컨텐츠를 나타낸다.
flex-wrap에는 3가지 값이 있다
1. flex-wrap : nowrap => 기본값.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EXAMPLE</title>
<style>
body{
width:500px <!-- content 전체의 너비 지정 -->
}
.content{
display:flex ;
flex-direction : row ;
flex-wrap : nowrap
}
header{
border-bottom: 5px solid gray ; text-align : center ;
}
footer{
border-top : 5px solid gray ; text-align : center ;
}
nav{
border-right: 5px solid gray ; width:200px ; color : hotpink
}
aside{
border-left : 5px solid gray ; width:200px ; color : orange
}
main{
width:200px ; color : deepskyblue
} <!-- main+nav+aside 너비를 하면 body에서 지정한 너비보다 큼! -->
</style>
</head>
<body>
<header>Lorem ipsum dolor sit amet.</header>
<div class="content">
<nav>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, eveniet. </nav>
<main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sint quod repellendus a inventore ullam quidem cupiditate iure dolor in! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsum possimus voluptates, ipsam exercitationem assumenda labore est voluptate commodi, voluptas! </main>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, quidem. </aside>
</div>
<footer>Lorem ipsum dolor sit amet.</footer>
</body>
</html>
2. flex-wrap : wrap => 너비/높이가 초과된 컨텐츠부터 아래 row/ 오른쪽 column에 배치
flex-wrap : wrap
3. flex-wrap : wrap-reverse => 너비/높이가 초과된 컨텐츠부터 위 row / 왼쪽 column에 배치
flex-wrap : wrap-reverse
2) align-items
: 같은 row/column에 있는 컨텐츠들을 어떻게 배치할지를 결정.
flex-direction : row 인 경우 컨텐츠들의 상하정렬 ,
flex-direction : column 인 경우 컨텐츠들의 좌우정렬을 결정.
5가지 값을 가짐:
1. align-items : stretch
=> 기본값. 컨텐츠들의 너비/높이가 컨테이너에 지정된 너비/높이만큼 늘어남
2. align-items : flex-start
=> 컨텐츠들의 내용이 컨테이너의 맨 위/왼쪽부터 시작하고, 컨텐츠의 양에 따라 너비/길이가 달라짐
3. align-items : flex-end
=> 컨텐츠들의 내용이 컨테이너의 맨 아래/오른쪽부터 시작하고, 양에 따라 끝나는 지점이 달라짐
4. align-items : center
=> 컨텐츠들이 중앙에 배치됨.
5. align-items : baseline
=> 컨텐츠들이 끝나는 부분이 일직선상에 맞춰지도록 컨텐츠가 배치됨.
3) justify-content
: 같은 row / column에 있는 컨텐츠들을 어떻게 배치할지를 결정.
* 다만 align-items 와 담당하는 정렬 방향이 다름!
flex-direction : row 인 경우 컨텐츠들의 좌우정렬 ,
flex-direction : column 인 경우 컨텐츠들의 상하정렬을 결정.
4) align-content
align-content - CSS: Cascading Style Sheets | MDN (mozilla.org) 여기서 보충설명 참고함.
* align-items 와의 차이?
align-content : 본문 요소들이 많아서 multi columns/rows 상태일 때 적용된다.
align-items : 같은 row/column 안의 본문 요소들에게만 적용된다.
[2] 개별 element에 적용되는 속성
1) align-self
: align-items 의 개별 버전.
한 row/column의 item을 모두 한 방향으로 정렬했지만 일부 element만 다른 정렬 방식을 적용하고 싶을 때 사용.
align-items 에 쓰인 값들을 사용할 수 있다.
#ending{
display:flex ; align-self:flex-end ; color:forestgreen ;
}
<div id="ending">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus quasi impedit, rem consequuntur odio nulla recusandae officiis. Error voluptate aut maiores voluptates, iusto aspernatur, hic mollitia, dolorum, at sint repellendus!</div>
2) flex 축약형 버전
: border의 여러 속성들을 한 번에 나열하는 것처럼(ex. border: 1px solid gray), flex도 가능하다.
1. 형식
적용할 element {flex-shrink flex-grow flex-basis}
* flex-grow , flex-shrink 는 정수, flex-basis는 100%가 최대인 % 단위
.content:nth-child(2){
display:flex ;
flex: 1 0 50%
}3) order
flex element 사이에 보여질/배치될 순서를 지정할 수 있다.
보통은 입력된 순서대로 보여지는 것이 일반적이지만, 그렇지 않을 경우에 주로 사용한다.
ex) 검색엔진에서는 앞에 나오는 내용이 더 검색 순위에 중요하게 작용하는 경우가 많은데, 이를 대비해서 <main> 태그 안의 내용을 앞에다 입력하고 싶다. 그런데 디스플레이 상으로는 <nav>와 <aside> 사이에 보이게 하고 싶을 때.
* order 는 정수 단위로 가능. order 를 따로 제시하지 않는다면 가장 먼저 제시되는 element의 order는 0이다.
* order 값이 작을수록(음수도 가능) 먼저 배치된다.
<!DOCTYPE html>
<html>
<head>
<style>
.container{display:flex ; flex-direction:column ; text-align:center;}
.content{display:flex ; flex-direction:row}
nav{border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
order:0}
main{order:1}
header{ border-bottom : 5px solid gray ;}
aside{border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
order:2}
footer{border-top : 5px solid gray}
</style>
</head>
<body>
<div class="container">
<header><h1>KSY</h1></header>
<div class="content">
<main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
</main>
<nav><ol><li>HTML</li><li>CSS</li> <li>JavaScript</li></ol></nav>
<aside><ul><li>A</li><li>B</li><li>C</li> <li>D</li></ul></aside></div>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer> </div>
</body>
</html>
2. media query : 어떤 조건에 따라 화면의 디자인을 다르게 하는 기술
1) media query 의 형식
* @media : media query가 시작함을 알려주는 역할
<style>
@media (width:600px){
body{
background-color : red ; <!-- 너비가 600px일 때 배경색을 빨강으로 지정 -->
}
}
</style>보통은 특정 width가 되었을 때가 아니라, 특정 width 이상/이하일 때로 범위를 지정한다.
+ width, height 다 지정 가능
: max-width , min-width , max-height , min-height ... etc.
ex) max-width : 1000px => 최대 너비가 1000px일 때 = 너비가 1000px 이하일 때 서식 적용
ex) min-height : 800px => 최소 높이가 800px일 때 = 높이가 800px 이상일 때 서식 적용
2) 우선순위
<style>
@media (max-width:600px){
body{
background-color : red ; <!-- 조건1 -->
}
}
@media (max-width:1200px){
body{
background-color : green ; <!-- 조건2 -->
}
}
</style>여러 개의 media 조건이 있고, 그 조건의 범위가 중첩될 경우, CSS에서는 우선순위에 따라 처리한다.
CSS는 구체적이고 세부적인 조건일수록 높은 우선순위를 가지고,
또한 복잡성/세부적인 정도가 같다면(같은 level이라면) 아래에, 나중에 작성된 조건이 우선순위가 높다!
그래서 이 경우, 의도는 ~600 : red , 601~1200 : green 이었지만, 막상 결과는 ~1200 : green 으로 적용된다.
=> 더 우선순위를 높이고 싶은 조건이 있다면, 그 조건을 동일 level에서 가장 아래에 배치해야 한다!
3) media query 응용
: flex와 media query를 적용해서, 모바일 환경에서의 디스플레이를 따로 지정해 보기.
나의 경우, 너비 600px을 기준으로 media query를 적용하였다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>EXAMPLE</title>
<style>
.container{
display:flex ; flex-direction:column ; text-align:center;
}
.content{
display:flex ; flex-direction:row
}
nav{
border-right : 5px solid gray ; padding:20px ; flex-basis:200px ;
background-color : darkorange
}
header{
border-bottom : 5px solid gray ; background-color:lime
}
aside{
border-left : 5px solid gray ; padding:20px ; flex-basis:200px ;
background-color : deeppink
}
footer{
border-top : 5px solid gray
}
main{
background-color : lightskyblue
}
@media (max-width:600px) {
.container{
display:flex ; flex-direction:column ; text-align:center;
background-color : black
}
.content{
display:flex ; flex-direction:column
}
nav{
border-bottom : 5px solid gray ; padding:20px ; flex-basis:50px ;
border-right : 0px ; color : darkorange ; background-color : black
}
header{
border-bottom : 5px solid gray ; color:lime ; background-color : black
}
main{
border-bottom : 5px solid gray ; color:lightskyblue ; background-color : black
}
aside{
border-left : 0px ; flex-basis : 40px ; color : deeppink ; background-color : black
}
footer{color : white ; background-color : black}
}
</style>
</head>
<body>
<div class="container">
<header><h1>KSY</h1></header>
<div class="content">
<nav><ol><li>HTML</li>
<li>CSS</li>
<li>JavaScript</li></ol></nav>
<main><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum delectus repellat nihil, facere quasi cupiditate natus, dolore itaque cumque magni assumenda molestiae perferendis excepturi soluta pariatur tenetur voluptatum fugiat porro fugit dolores, vel eveniet nobis! Hic eligendi temporibus, at aspernatur accusantium necessitatibus, corporis explicabo adipisci in tempora numquam consectetur beatae eos dolorem totam magnam voluptates cupiditate autem a nulla repudiandae enim. Obcaecati atque quae rerum dicta maxime adipisci accusamus, saepe pariatur, similique, nesciunt repellat! Perspiciatis dolor, quam sint eos optio fugiat tenetur modi magni cupiditate. Esse, repellendus, eaque impedit hic incidunt cum nisi omnis perferendis labore nostrum earum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fuga, magnam voluptatem possimus soluta qui aliquid recusandae sunt repudiandae, ipsa labore laboriosam dicta! Fugiat delectus quo aliquid distinctio at eligendi accusantium esse iure, quis qui inventore voluptates porro enim, saepe, eaque, praesentium! Ducimus recusandae ex aliquam quisquam numquam possimus fugit sit, nihil, culpa vitae optio laudantium voluptatem. Suscipit sint vitae architecto, amet eligendi, modi at vel, maxime veritatis sapiente sequi! Dolorem nesciunt ipsa tempore quibusdam similique dolorum odit voluptatem reiciendis porro! Iste voluptatibus iusto ab, architecto, ipsum totam. Sapiente aliquid odit eos hic, atque laboriosam nemo eius reprehenderit! Pariatur, assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aspernatur, incidunt iste, sapiente rerum eum fugiat maxime neque praesentium, adipisci non. Doloremque recusandae, numquam aperiam non soluta illum ab, a voluptate necessitatibus porro nobis voluptatibus animi molestias alias accusantium deserunt consequatur molestiae vitae? Quam maxime distinctio minima molestias sequi laborum itaque ipsa, dolores facilis iure sed hic impedit perspiciatis, quos. Hic reiciendis eligendi cumque sunt dolorem harum, quo? Nostrum impedit dolorem et cupiditate ratione quaerat corporis ad tempora cum facere! Optio, magni iure natus consectetur est facilis maxime atque, ratione nisi qui vero voluptatem reprehenderit voluptas, minus provident omnis accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, natus tenetur voluptas minus tempore cupiditate. Totam architecto quaerat veniam consequuntur, praesentium assumenda, doloribus reiciendis qui ducimus, incidunt deleniti. Consectetur, molestias, dolorem! Enim obcaecati, necessitatibus ducimus quae a, praesentium harum nisi repellendus atque, doloremque quod ut ipsum, fugiat sit! Animi quos ratione id consequuntur ipsam unde et accusamus reprehenderit voluptatem velit, modi mollitia quasi ex, eum esse temporibus, cupiditate, quaerat rem facere eligendi pariatur iusto. Fugit error sed accusantium possimus totam id voluptate in cumque, quibusdam quidem? Laborum, consectetur nulla dolorum porro eos sed ab, sit illo molestias eaque alias distinctio!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur officiis nostrum nobis excepturi quibusdam itaque. Mollitia consectetur error suscipit ipsam obcaecati consequatur, dignissimos autem! Adipisci itaque harum dignissimos numquam corporis quod tenetur omnis aliquid reprehenderit perferendis iure ut temporibus eveniet perspiciatis beatae, iste quia eum distinctio doloremque voluptatem fuga ipsum dolores ab. Temporibus at, nostrum ipsa libero, adipisci rem nam in quod unde beatae explicabo neque quisquam dicta enim a cumque optio est eos voluptate molestiae? Quo quaerat, impedit, quia asperiores molestiae, aspernatur delectus recusandae dolorem adipisci iste natus nisi illum alias nobis accusantium voluptate animi excepturi officiis error in.</p>
</main>
<aside><ul><li>A</li>
<li>B</li>
<li>C</li>
<li>D</li></ul></aside>
</div>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut.</footer>
</div>
</body>
</html>
1. 좁은 화면(600px 미만)
2. 넓은 화면
너비가 좁을 경우는 display : flex ; flex-direction : column 으로 지정함으로써 모든 컨텐츠를 수직으로 배열하였다.
3. multi column
: 신문처럼 여러 개의 단(column)으로 구성된 배치를 하고 싶을 때 사용하는 방법/레이아웃.
1) 속성
1. column-count : column이 몇 개로 표시될지를 결정
- column의 개수를 유지하는 대신 너비는 전체 창 너비에 따라 달라진다.
2. column-width : 한 column의 width를 결정
- column의 너비를 유지하는 대신 개수는 전체 창 너비에 따라 달라진다.
3. column-gap : column과 column 사이의 간격을 결정
* column-count 와 column-width는 독립적이다!
<style>
.container{
display:flex ; flex-direction:column ; text-align:center;
}
.content{
column-count:3
column-width : 400px
}
</style>이 경우, CSS에서는 column의 개수가 3개를 초과하지 않으면서 column의 너비가 400px보다 좁아지지 않도록 조절한다.
2) 우선순위
multi column에서는 기본값으로 column 구분이 제일 우선적이다.
column이 적용된 element 안에 있다면 기본 설정으로는 column 안에 갇혀서 그 규격을 따라야 한다.
<-> 만약 제목 등의 태그를 사용하는데 특정 태그/element가 column의 제약에 갇히지 않게 하고 싶다면?
column-span:all
h2{column-span : all}
'front-side > CSS' 카테고리의 다른 글
| 9. 그래픽 fin ~ 유지보수-link와 import (0) | 2021.04.13 |
|---|---|
| 8. 그래픽 (0) | 2021.04.12 |
| 6. 레이아웃 추가(심화)내용 (0) | 2021.04.05 |
| 5. brackets ~ 레이아웃 기초 내용 (0) | 2021.04.02 |
| 4. 타이포그래피-font ~ 조화 (0) | 2021.04.01 |