ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Chapter 04 새로운 웹 기술, 플렉서블 박스_2(기술 익히기2)
      Do it! 반응형 웹 페이지 만들기 2022. 12. 1. 13:18

      주축 방향으로 다양하게 플렉스 아이템 배치하기

      플렉스 아이템은 플렉서블 박스 주축의 시작점부터 배치됩니다. 만약 주축 방향으로 박스를 다양하게 배치하고 싶다면 다음의 속성과 속성값을 사용하세요.

      속성명 속성값 적용 요소
      justify-content flex-start(기본값),
      flex-end,
      center,
      space-between,
      space-around      		 플렉서블 박스
      속성값명 속성값 설명
      flex-start 자식 박스를 부모 박스 주축의 시작점으로 배치하며, 기본값입니다.
      flex-end 자식 박스를 부모 박스 주축의 끝점으로 배치합니다.
      center 자식 박스를 부모 박스의 중앙으로 배치합니다.
      space-between 플렉서블 박스에 빈 공간이 있을 때 사용합니다. 첫 번째 박스와 마지막 박스는 양쪽 끝으로 붙이고, 나머지 박스는 동일한 간격으로 정렬됩니다.
      space-around 플렉서블 박스에 빈 공간이 있을 때 사용합니다. 단, 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬됩니다. 
      <head>
...
<style>
...

#wrap{
display:flex;
width:90%;
justify-content:space-around;
/* 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동 정렬하는 값인 space-around로 설정합니다. */
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:20%;
}

#wrap div:first-child{
background:#eb4a24;
}

#wrap div:nth-child(2){
background:#1488c8;
}

#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

       

       

       

      교차축 방향으로 다양하게 플렉스 아이템 배치하기

      주축뿐만 아니라 교차축 방향으로도 박스를 다양하게 배치할 수 있습니다. 교차축 방향으로 박스를 다양하게 배치하고 싶다면 다음의 속성과 속성값을 사용하세요.

      속성명 속성값 적용 요소
      align-items stretch(기본값),
      flex-start,
      flex-end,
      center,
      baseline      		 플렉서블 박스

       

      속성값명 속성값 설명
      stretch 박스를 확장해서 배치하며, 기본값입니다.
      flex-start 박스를 교차축의 시작점에 배치합니다.
      flex-end 박스를 교차축의 끝점에 배치합니다.
      center 박스를 교차축의 중앙에 배치합니다.
      baseline 자식 박스들을 교차축의 시작점에 배치되는 자식 박스의 글자 베이스라인에 맞춰 배치합니다. 시작점에 배치되는 자식 박스는 교차축의 시작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치됩니다. 
      <head>
...
<style>
...

#wrap{
display:flex;
width:90%;
align-items:center;
/* 플렉스 아이템을 교차축 방향의 중앙으로 배치하는 속성값인 center로 설정합니다. */
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:33.33%;
height:200px;
}

#wrap div:first-child{
background:#eb4a24;
}

#wrap div:nth-child(2){
background:#1488c8;
}

#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

       

       

       

      교차축 방향으로 플렉스 아이템을 개별적으로 배치하기

      앞에서는 교차축 방향으로 박스를 다양하게 배치하는 방법에 대해 알아보았습니다. 그런데 필요에 따라서는 교차축 방향으로 박스를 개별적으로 배치해야 하는 경우가 생길 수 있습니다. 다음의 속성과 속성값을 사용하면 교차축 방향으로 박스를 개별적으로 배치할 수 있습니다.

      (속성값 설명은 align-items 속성값 설명과 동일하므로 추가된 auto 속성값을 제외한 자세한 설명은 생략합니다.)

      속성명 속성값 적용 요소
      align-self auto,
      stretch,
      flex-start,
      flex-end,
      center,
      baseline      		 플렉스 아이템
      속성값명 속성값 설명
      auto 플렉서블 박스(플렉스 아이템의 부모 박스)의 align-items 속성값을 상속받습니다. 부모 박스에 적용된 속성값이 없는 경우에는 stretch 속성값이 적용됩니다. 
      <head>
...
<style>
...

#wrap{
display:flex;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:33.33%;
height:200px;
}

#wrap div:first-child{
align-self:flex-end;
/* 플렉스 아이템 중 첫 번째를 선택하여 교차축 방향의 끝점에 배치하는 속성값인 flex-end로 설정합니다. */
background:#eb4a24;
}

#wrap div:nth-child(2){
background:#1488c8;
}

#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

       

       

       

      여러 줄인 플렉스 아이템을 교차축 방향으로 다양하게 배치하기

      앞에서 교차축 방향으로 박스를 배치하는 방법들을 살펴봤는데, 이외에도 한 가지 방법이 더 있습니다. 이 속성은 지금까지 살펴본 교차축 방향으로 박스를 배치하기 위한 속성의 확장판이라고 볼 수 있습니다. 단 박스가 여러 줄일 때만 적용되는 속성입니다.

      속성명 속성값 적용 요소
      align-content stretch(기본값),
      flex-start,
      flex-end,
      center,
      space-between,
      space-around      		 플렉서블 박스

      align-content 속성값 설명은 justify-content 속성값과 같으므로 생략합니다.

      <head>
...
<style>
...

#wrap{
display:flex;
flex-wrap:wrap;
align-content:space-between;
/* space-between은 플렉서블 박스에 빈 공간이 있을 때 사용합니다.
첫 번째 박스와 마지막 박스는 양쪽 끝으로 붙이고 나머지 박스는 동일한 간격으로 자동 정렬됩니다. */
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:100%;
height:100px;
}

#wrap div:first-child{
background:#eb4a24;
}

#wrap div:nth-child(2){
background:#1488c8;
}

#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

       

       

       

      플렉스 아이템의 배치 순서 바꾸기

      기본적으로 HTML 태그들은 작성한 순서대로 배치되는데, 지금 설명하는 플렉서블 박스의 속성을 적용하면 박스의 배치 순서를 자유롭게 바꿀 수 있습니다.

      속성명 속성값 적용 요소
      order 0(기본값),
      정숫값      		 플렉스 아이템
      속성값명 속성값 설명
      정숫값 입력된 정숫값에 따라 박스가 배치됩니다. 정숫값으로는 양숫값과 음숫값을 사용할 수 있습니다. 양숫값을 입력하면 입력된 양숫값에 따라 배치됩니다. 만약 동일한 양숫값을 입력하면 HTML 태그 순서상 뒤에 작성된 태그가 적용됩니다. 음숫값을 입력하면 기본값인 0이 됩니다. 
      <head>
...
<style>
...

#wrap{
display:flex;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
width:33.33%;
}

#wrap div:first-child{
order:3;
background:#eb4a24;
}

#wrap div:nth-child(2){
order:1;
background:#1488c8;
}

#wrap div:nth-child(3){
order:2;
background:#f7e041;
}
/* 플렉스 아이템 중 첫 번째 박스의 순서는 세 번째로, 두 번째 박스의 순서는 첫 번째로,
그리고 마지막 박스인 세 번째 박스의 순서는 두 번째로 변경합니다. */
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

       

       

       

      플렉스 아이템의 크기 늘이고 줄이기

      플렉스 아이템이 플렉서블 박스보다 작거나 클 경우 여백이 생기거나 넘치는 문제가 생길 수 있습니다. 이때 다음의 속성을 사용하면 자식 박스들의 크기를 늘이거나 줄일 수 있고 가변적인 박스로 작동하게 할 수도 있습니다.

      속성명 속성값 적용 요소
      flex [flex-grow] [flex-shrink] [flex-basis],
      0 1 auto(기본값),
      0 auto(0 1 auto와 같음),
      initial(0 1 auto와 같음),
      auto(1 1 auto와 같음),
      none(0 0 auto와 같음)      		 플렉스 아이템
      속성값명 속성값 설명
      flex-grow 플렉서블 박스에 여백이 있을 때 플렉스 아이템의 크기를 늘일 수 있는 속성입니다. 속성값은 비율로 설정합니다. 단, 음숫값은 사용할 수 없으며 width, flex-basis 속성값에 따라 늘어나는 크기가 변할 수 있습니다.
      예 : 플렉서블 박스 안에 자식 박스가 세 개 있는 상황. 각각 flex-grow 속성값을 1, 1, 2로 설정하면 남는 공간을 4등분하여 각각 1/4, 1/4, 2/4 크기만큼을 기본 크기에 더합니다.
      flex-shrink 플렉서블 박스 안의 플렉스 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성입니다. 속성값은 비율로 설정합니다. 단, 음숫값은 사용할 수 없으며 width, flex-basis 속성값에 따라 줄어드는 크기가 변할 수 있습니다.
      예 : 플렉서블 박스 안에 자식 박스가 세개 있는 상황. 각각 flex-shrink 속성값을 1, 1, 2로 설정하면 넘치는 공간을 4등분하여 각각 1/4, 1/4, 2/4 크기만큼을 기본 크기에서 뺍니다.
      flex-basis 플렉스 아이템의 기본 크기를 설정하기 위한 속성입니다. width 속성에서 사용할 수 있는 모든 값을 사용할 수 있습니다. 단, 음숫값은 사용할 수 없습니다.
      예 : 속성값을 0으로 설정할 경우 플렉스 아이템에 flex-grow, flex-shrink 속성값에서 설정한 비율이 그대로 적용됩니다. 속성값을 auto로 설정할 경우 플렉스 아이템이 기본적으로 가지고 있는 크기를 기준으로 flex-grow, flex-shrink 속성값에서 설정한 비율이 적용됩니다.      		 
      <head>
...
<style>
...

#wrap{
display:flex;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}

#wrap div:first-child{
flex:1 1 0;
background:#eb4a24;
}

#wrap div:nth-child(2){
flex:1 1 0;
background:#1488c8;
}
/* 플렉스 아이템 중 첫 번째 박스와 두 번째 박스에는 크기를 늘이는 속성인 flex-grow 속성의 값을 1로,
그리고 크기를 줄이는 flex-shrink 속성의 값을 1로 설정합니다.
플렉스 아이템의 기본 크기를 설정하기 위한 flex-basis 속성의 값은 0으로 설정합니다. */

#wrap div:nth-child(3){
flex:2 2 0;
background:#f7e041;
}
/* 마지막 박스인 세 번째 박스에는 크기를 늘이는 flex-grow 속성의 값을 2로,
크기를 줄이는 flex-shrink 속성의 값을 2로 설정합니다.
기본 크기를 설정하기 위한 flex-basis 속성의 값은 0으로 설정합니다. */
</style>
</head>
<body>
	<div id="wrap">
		<div></div><div></div><div></div>
	</div>
</body>

       

       

       

      ※ 박스 크기를 늘이고 줄이는 속성들을 개별적으로 사용할 수는 없나요?

      박스의 크기 증감을 설정하는 속성들을 개별적으로 사용할 수도 있긴 하지만 W3C 플렉서블 박스 기술 명세에 따르면 '박스의 크기 증감 속성을 개별적으로 사용하는 것'을 추천하지 않고 있습니다. 필자 또한 권하고 싶지 않은 방법이므로 꼭 사용해야 될 상황이 아니라면 사용하지 않는 것이 좋습니다.

      속성명 속성값 적용 요소
      flex-grow 0 (기본값),
      비율값      		 플렉스 아이템
      flex-shrink 1 (기본값),
      비율값      		 플렉스 아이템
      flex-basis auto (기본값),
      width 속성에서 사용할 수 있는 모든 값      		 플렉스 아이템

      속성과 속성값의 자세한 설명은 flex 속성에서 설명한 내용을 참조하세요.

       

       

       

       

       

       

       

      • 출처 : "반응형 웹 페이지 만들기"

      'Do it! 반응형 웹 페이지 만들기' 카테고리의 다른 글

      Chapter 05 반응형 웹사이트 준비 작업하기  (0) 2022.12.04
      Chapter 04 새로운 웹 기술, 플렉서블 박스_3(플렉서블 박스 이용해 목업 웹사이트 만들기)  (1) 2022.12.01
      Chapter 04 새로운 웹 기술, 플렉서블 박스_1(개념/기술 익히기1)  (0) 2022.12.01
      Chapter 03 미디어 쿼리와 뷰포트  (0) 2022.12.01
      Chapter 02 px을 %로 바꾸기 - 가변 그리드_3(가변 폰트 이용하기/멀티미디어 요소 가변적으로 만들기)  (1) 2022.11.30

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바