티스토리 뷰

TIL(Today I Learn)

HTML, CSS 기본기 다지기(CSS)(5)

MinsoftK 2021. 9. 29. 20:35

728x90

21.10.26 오타, 코드 블록 수정

CSS

12. 레이아웃

12.1. display - inline, block, inline-block

inline

영역의 크기가 내부 콘텐츠 크기로 정해진다. width, height로 크기를 변경할 수 없다. margin, padding의 top과 bottom을 지정할 수 없다.
여러 요소가 가로 배치가 된다.

block

영역의 크기를 width, height로 지정할 수 있다.
width를 지정하지 않으면 가로 전체를 차지한다.
여러 요소가 세로 배치가 된다.

inline-block : ex) input

inline과 block의 성질을 둘 다 가진다.
영역의 크기를 width, height로 지정할 수 있다.
여러 요소가 가로 배치가 된다. 즉, inline 블록으로 가로 배치를 하면서 크기를 조절할 수 있다.

12. 2. 요소를 없애는 방법 - display none, visibility hidden

visibility:hidden 적용

display:none 은 레이아웃 자체에서 삭제를 해버리지만, visibility:hidden은 레이아웃은 변경하지 않고, 눈에만 보이지 않게 만든다. 즉 아래 예시에서 box2에 display:none을 넣으면 아예 요소 자체가 없던 것처럼 box1, box3 순서로 나열이 된다. 하지만 visibility:hidden을 적용하면, box2 자리가 빈 공간으로 남게 되고 위 그림과 같이 box1, box3가 box2 공간을 남겨두고 나열이 된다.

HTML 파트

<div class="box1">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ex necessitatibus a cum, incidunt quas expedita iste hic rerum iusto velit fugit sapiente commodi doloribus quam suscipit optio. Autem, debitis.
</div>
<div class="box2">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ex necessitatibus a cum, incidunt quas expedita iste hic rerum iusto velit fugit sapiente commodi doloribus quam suscipit optio. Autem, debitis.
</div>
<div class="box3">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ex necessitatibus a cum, incidunt quas expedita iste hic rerum iusto velit fugit sapiente commodi doloribus quam suscipit optio. Autem, debitis.
</div>

CSS 파트

div {
    height:200px;
    border:solid;
}

/* 코드상으론 존재하지만 아예 요소 자체를 사라지게 만든다. */
.box2{
    display:none;
}

.box1 {
    background-color:darkorange;
}
.box2 {
    background-color:greenyellow;
}
.box3 {
    background-color:dodgerblue;
}

12.3. float

한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우축을 따라 배치되어야 함을 지정한다. MDN의 예시를 확인해보면 명확하게 이해할 수 있다.
flex box가 등장하고나서부터 많이 사용되고 있지는 않다.
개발자 도구에서 확인해보면 float 적용시 p 태그가 image를 포함해서 영역을 나타내고 있다. p태그가 image를 포함한 영역까지 차지하고 있지만, 그 위에 image가 떠 있는 것이라고 생각하면 된다.

만약 container로 감싸준 뒤, float 속성을 적용하면 어떻게 될까?
container로 감싸진 부분까지 이동한다. 각각 갈 수 있는 최대치만을 이동한다.

HTML 파트

    <div class="image">
    </div>
    <p class="box2">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ex necessitatibus a cum, incidunt quas expedita iste hic rerum iusto velit fugit sapiente commodi doloribus quam suscipit optio. Autem, debitis.
    </p>

CSS 파트

.image {
    width:100px;
    height:100px;

    background-color:blue;
    border: 5px solid red;

    /* 요소가 차지하고 있는 영역외에 다른 컨텐츠가 차지할 수 있다. */
    float:left;
}

12.4. position

요소를 내가 원하는 위치로 가게 만들 수 있다. 처음에는 CSS를 기본적인 것만 공부하다가 직접 쳐보면서 내가 원하는 UI를 만들었다. 하지만 그렇게 하다 보니 조금만 CSS가 복잡해져도 왜 이렇게 동작하는지 이해도가 낮았다. 따라서 정확한 개념을 숙지하고 있어야 한다. 계산 법칙을 정확하게 이해하자. Normal Flow에 대한 이해가 선행되어야 한다.
- 자기 자신이 static(아무런 변경이 없을 때)일 때, 자기 자신을 기준으로 이동한다. 만약 반대방향이 겹치게 사용이 될 경우엔 top, left가 우선적으로 적용이 된다.

12.4.1. relative

HTML 파트

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

CSS 파트

.box1 { 
background-color: darkorange; 
} 

.box2 { 
background-color: greenyellow; 
position: relative; 
/* absolute */ 
right: 20px; 
top: 50px; 
} 

.box3 { 
background-color: dodgerblue; 
}

12.4.2. absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 즉, normal flow를 없앤다. 자기만의 흐름을 가진다. 가장 가까운 위치의 조상의 위치를 기준으로 배치된다. 위의 float 속성을 다뤘던 것처럼 레이아웃에서 해당 위치 기준으로 한층 위로 올라가는 효과가 발생한다. 그래서 원래 있던 위치에 다른 normal flow에 따라 다른 요소들이 그 자리를 채우고 해당 위치에 뜬 상태로 존재한다.
조상중에 position이 static이 아닌 요소를 찾아 올라가면서 기준점을 삼는다. 만약 조상중에 그 어떤 것도 static이 아니라면 body를 기준으로 삼는다.
HTML 파트

<div id="parent"> 
	<div id="box">
    </div> 
</div>

CSS 파트

div { 
width:200px; 
height:200px; 
border: solid 1px red; 
} 

/* 일반적으로 absolute를 줄 부모에게 relative를 준다. relative가 자기 자신이 기준이기 때문.*/ 

#parent { 
position:relative; 
} 

#box { 
width:100px; 
 height:100px; 
 border-color:darkblue; 
 border-radius:30px; 
 position:absolute; 
 }

12.4.3. fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 즉, normal flow를 없앤다. 자기만의 흐름을 가진다. 대신 뷰포트를 기준으로 삼는다!
HTML 파트

<div></div>
<div id="parent">
    <div id="box"></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS 파트

div {
	width: 200px;
	height: 200px;
	border: solid 1px red;
}
/* 일반적으로 absolute를 줄 부모에게 relative를 준다. relative가 자기 자신이 기준이기 때문! */
#parent {
	position: relative;
}
#box {
	width: 100px;
	height: 100px;
	border-color: darkblue;
	border-radius: 30px; /* 블로그 같은 곳에서 클릭시 맨 위로 올라가게 만드는 기능에 쓰인다. */
	position: fixed;
	bottom: 40px;
	right: 40px;
}

12.4.4. sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운 스크롤 되는 조상을 기준으로 삼는다.
스크롤 하는 대상의 바로 자식이어야 한다. 즉 아래 box에 sticky를 적용 시키면 해당 부모의 스크롤에서만 동작한다.
HTML 파트

<div></div>
<div id="parent"><div id="box"></div></div>
<div></div>

CSS 파트

div {
	width: 200px;
	height: 200px;
	border: solid 1px red;
} /* 일반적으로 absolute를 줄 부모에게 relative를 준다. relative가 자기 자신이 기준이기 떄문! */
#parent {
	position: sticky;
	top: 100px;
	left: 100px; /* top을 설정해도 동작하지 않아 이해가 안갈 수도 있지만 스크롤을 해보면 알게 된다. top, left 100px이 되면 그 위치에 고정된다.*/
} /* 이곳에 sticky를 주게 되면 부모에서만 sticky로 동작하게 된다. */
#box {
	width: 100px;
	height: 100px;
	border-color: darkblue;
	border-radius: 30px;
}

12.5. overflow

visible, hidden, scroll, auto

넘쳐 흐르는 부분은 레이아웃 공간에 배정되지 않는다. 따라서 다른 내용이 추가적으로 있을 경우에, 넘쳐흐르는 부분에 겹쳐서 보일 수도 있다.
auto로 설정을 하게 되면 공간이 충분하면 visible, 공간에 넘쳐 흐르게 되면 자동으로 scroll을 적용해준다.

12.6. z-index

포지션이 static이 아닌 애들이 static인 애들보다 앞에 존재하게 된다.
z-index 설정으로 z축 값을 정할 수 있다. z-index 값이 작을 수록 뒤에 존재한다.
auto를 줬을 경우엔 0이라고 생각하면 된다.

13. 색상과 배경

16진수나 rgb, rgba를 이용해서 색상을 표현할 수 있다.

13.1. opacity

투명도를 주는 속성
요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다.
자식 요소는 불투명하게 유지하고 싶다면 background 속성을 사용해야 한다.

background: rgba(0,0,0,0.4);

13.2. background-color, background-image

image가 color 보다 위에 뜬다. z-index가 더 크다.
image의 기본값은 none
color, image 설정시 image의 투명한 부분이 있으면 color가 보이게 된다.

/* 상대경로 or url 주소 */
background-image:url('../../~~')

13.3. background-repeat

요소의 배경 영역을 채울 때까지 이미지를 반복한다. 마지막 반복 이미지가 넘칠 경우 잘라낸다.
가로축과 세로축을 설정 가능하다.

/* 가로축으론 반복이 되는데 세로축은 반복되지 않는다. */
background-repeat: repeat-x;

/* 세로축으로만 반복. */
background-repeat: repeat-y;

/* 반복하지 않는다. */
background-repeat: no-repeat;

13.4 background-position

css는 왼쪽 상단에서부터 (0,0) 기준이다.

/* 배경의 시작점을 변경 시킨다. x축으로부터 150px y축으로부터 200px  */
background-position: 150px 200px;

/* repeat 명령어도 position 위치에서부터 실행 */
/* 위치로도 가능. 순서가 상관이 없다. */
background-position: right top;

/* 하나가 생략이 되면 무조건 center -> 오른쪽 가운데 */
background-position: right ;

13.5 background-origin

배경의 원점을 테두리 시작점, 테두리(border) 내부, 안쪽(padding) 여백 내부중 하나로 지정한다.

/* 각각의 박스를 기준으로 origin으로 만든다. */background-origin: border-box;background-origin: padding-box;background-origin: content-box;

13.6 background-size

요소 배경 이미지의 크기를 설정한다. 늘리고 줄이거나 공간에 맞출 수 있다. 기본값은 auto : 배경이미지의 원본 크기를 유지.
이미지가 찌그러지지 않게 조절하는 법background-size: 100px; , 하나만 크기를 줬을 때 이미지 비율이 유지가 되면서 width 값에 맞춰서 비율이 늘어난다.
%를 줬을때?
- cover와 100%와는 다르다. 100%로 하면 width 값만 100%로 맞춘다.
HTML 파트

<div class="box"></div>

CSS 파트

.box {
    /* 이미지의 본연의 값보다 작기에 잘린다. */
    height: 400px;
    border: blue 5px solid;
    background-image: url('https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTA2MzBfNjMg%2FMDAxNjI1MDE5NzUxNTk4.vdX4AU6AhbWGuzSuMDDNTYNJ5gqweKhEU7_XojlO65sg.DfEOqyQnJsImCSPqQkIetdsJtxZ2GAwm9jENxL0RZSMg.PNG.gurigurikei%2F87.png&type=sc960_832');
    background-repeat: no-repeat;
    background-size: auto;



    /* cotain/cover : 이미지의 비율을 유지하며 요소의 크기에 맞춰진다. */

    /* 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. */
    /* 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정한다.  */
    /* 뒤에 배경이 보이지 않게 설정 가능함. */
    background-size: cover;

    /* cotainer 크기에 맞게 이미지가 쏙 들어감.  */
    background-size: contain;

    /* 직접 지정할 수 있다. */
    background-size: 100px 100px; 
}

13.7 background (단축 속성)

/* <background-color> 사용 */
background: green;

/* <bg-image>와 <repeat-style> 사용 */
background: url("test.jpg") repeat-y;

/* <box>와 <background-color> 사용 */
background: border-box red;

/* 단일 이미지, 중앙 배치 및 크기 조절 */
/* 단축에서 bg-size값은 position 뒤에만 올 수 있으며, '/' 문자로 구분해야 한다. */
/* center/80% */
background: no-repeat center/80% url("../img/image.png");

14. 변형 : Transform

Transform : 원래의 형태가 있는 그대로의 요소를 크게 만들거나 작게 만들거나 혹은 돌리게 만들 수 있음.
변형 함수는 왼쪽에서 오른쪽으로 곱해진다. 즉, 요소에 변형을 오른쪽 부터 왼쪽으로 하나씩 순서대로 적용.

/* 다중 함수 값 */transform: translateX(10px) rotate(10deg) translateY(5px);transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

14.1. 크기 (scale)

html에서 width:400px로 주고, scale(0.5)를 적용했을 때, 개발자 도구에서는 400 그대로 나오지만
렌더링 된 것을 확인해보면 200으로 나타난다. 따라서 이미지 다음에문단이 연결된 상태에서 scale을 사용해서 이미지를 줄였다면, 이미지와태그 사이에 공백이 나타나게 된다. 반대로 늘리게 된다면의 내용을 가리게 된다. (width를 조절하는 것과는 다르다)

/* 크기를 2D로 조절할 수 있는 친구 */
#box {
    transform: scale(0.5);
    /* X축 , Y축으로 크기 조절 */
    transform: scaleX(0.5);
    transform: scaleY(0.5);

    /* X축 Y축 동시에 조절 */
    transform: scaleY(1.5, 0.5);
}

14.2. 회전 (rotate)

45도 회전 -> 45deg
1바퀴 반 회전 -> 1.5turn
음수는 반시계 방향

14.3. 이동 (translate)

웹에서의 x축 y축은 그림과 같다. 맨 왼쪽 상단이 (0, 0)이다.

/* x축으로 100px y축으로 200px */
transform: translate(100px, 200px);

/* 한가지 값만 입력하게되면 x축으로만 이동한다.scale과는 다르다 */
/* scale에서는 x축 y축 모두 한가지 값으로 설정된다. */
transform: translate(100px);

/* css 설정하는 컨테이너의 50% 크기만큼 이동한다. */
transform: translate(50%);

14.4. 기울이기 (skew)

값을 하나만 입력하면 x축으로만 움직인다.

/* 모두 동일한 코드  */

transform: skew(20deg, 0);

transform: skewX(20deg);

14.5. 기준점 (transform-origin)

기본값은 (50%, 50%) : center이다.

transform: scale(1.3);

transform-origin:bottom right;

15. 전환 : Transition

A가 B상태로 전환되기까지 어느 정도 시간을 가지게 만드는 것.

15.1. transition-property, transition-duration

transition-property : 바꿀 속성을 정의한다.
transition-duration : 바꾸기까지 걸리는 시간을 정의한다.
바꿀 항목중 하나만 선택하면 해당 CSS만 시간을 가지고 변한다. 나머지는 바로 바뀌어 버림. 헷갈리지 말것.

/* margin-right, color를 바꾸는데 각각 3초와 1초 시간을 가지고 변경하겠다. */
transition-property : margin-right, color;

transition-duration : 3s, 1s
/* 0.5s === 500ms */

15.2. transition-delay, transition-timing-function, shorthand

앞쪽에 있는 시간이 duration, 뒤에 나오는 시간이 delay.

/* 요소들이 여러개 있을 때 delay로 조절할 수 있다. */
transition-delay:1s  

/* 기본값 ease */
transition-timing-function: ease



/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

15.3. transition 활용 예제

HTML 파트

<div class="box">hover me!</div>

CSS 파트

.box {
    width: 100px;
    height: 100px;
    border: 10px solid seagreen;
    background-color: rgb(204, 253, 225);
    border-radius: 30px;
    transition: transform 1s ease-in-out;
    transform-origin: bottom right;
}

.box:hover {
    transform: rotate(360deg) translateY(30px);
}

16. Animation

기존의 transition 같은 경우에는 user의 action이 있어야 가능했다. 하지만 애니메이션은 user의 액션이 필요없다. A->B->C->D 다수의 스타일 전환을 만들 수 있다.

16.1. `@keyframes`

HTML 파트

<div class="box">
    😁
</div>

CSS 파트

.box {
    width: 100px;
    height: 100px;
    border: 10px solid seagreen;
    border-radius: 30px;
/* 돌아올때도 유연하게 만들고 싶으면 alternate를 추가한다.*/

    animation: my-frist-animation 2s infinite;
}

@keyframes my-frist-animation {
    from {
        widt: 100px;
    }
    to {
        width: 300px;
    }
}
/*@keyframes my-frist-animation {
    0% {
        font-size: 20px;
    }
    50% {
        width: 300px;
        font-size: 80px;
    }
    100% {
        font-size: 20px;
    }
}*/

16.2. animation-name, animation-duration

animation-name: @keyframes의 이름
@keyframe 하나가 끝나는 시간을 의미한다.

16.3. animation-delay

한 사이클이 지나고 나서 지연 시간을 설정할 수 있다. (음수 값 가능. 즉시 시작되지만 주기의 도중에 시작된다. 즉, -1인 경우 시퀀스의 1초부터 시작한다.)

16.4. animatin-timing-function

transition-timing-function과 유사하다.
ease가 기본 값이다.

16.5. animation-iteration-count

infinite: 애니메이션을 무한 반복 재생시킨다.

16.6. anumation-play-state

running, paused

.box1 {
    width: 100px;
    height: 100px;
    border: 10px solid seagreen;
    border-radius: 30px;

    animation: my-frist-animation 1s infinite;
    animation-delay: 0s;
}

.box1:hover{
    /* animation-play-state:running; */
    animation-play-state:paused;
}

.box2 {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 30px;

    animation: my-frist-animation 1s infinite;
    animation-delay: 0.3s;
}

.box3 {
    width: 100px;
    height: 100px;
    border: 10px solid black;
    border-radius: 30px;

    animation: my-frist-animation 1s infinite;
    animation-delay: 0.6s;
}

@keyframes my-frist-animation {
    0% {
        font-size: 20px;
    }
    50% {
        width: 300px;
        font-size: 80px;
    }
    100% {
        font-size: 20px;
    }
}

16.7. animation-fill-mode

애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정한다.
기존 스타일 -> keyframes 첫 번째 -> 애니메이션 진행 -> keyframes의 마지막 스타일이 적용 -> 기존 스타일
forwards : keyframes 마지막에서 기존 스타일로 가지 않는다.
backwards : 기존 스타일으로 시작하지 않고 keyframes의 첫 번째부터 시작한다.
both : frowards, backwards 둘다.

/* 애니메이션은 실행되지 않을 때 스타일을 적용하지 않는다. */
animation-fill-mode: none

16.8. animation(shorthand)

/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

17. Flexbox

CSS3에 추가된 개념, 등장하기 전에는 요소를 나열하는 방법이나 정렬하는 방법이 정해져 있지 않았다.
inline을 썼을 때 html상에서 개행이나 스페이스가 여백으로 처리되기 때문에 빈틈이 생긴다. 코드를 억지로 붙이기는 어렵기 때문에, 이를 해결하기 위해서 flexbox 개념이 나오게 됐다.
flex container, flex item에 쓰이는 property들이 다른 경우들을 체크해야 된다. 중요한 부분. 행과 열이 존재하는데 flexbox는 단순히 1차원 공간에서 직선 정렬에 대한 이야기.
다른 요소들과의 관계를 의미하는 것이 아니라, 한가지의 요소 내부의 아이템들을 1차원으로 정렬할 때 사용하는 것. 우리가 기존의 알던 (block, inline, inline-block)처럼 앞 뒤와의 관계를 정의하는 개념인 display-outside 속성이다. 반면에 flex는 요소의 내부 관계를 정의하는 display-inside를 의미한다.
정렬하고 싶은 컨테이너에서 display를 정해야 한다.
Container, Items를 구별해야 한다.

17.1. Container

17.1.1 flex-direction

주축의 위치 (수평, 수직)을 설정할 수 있다.
주축의 방향 (정방향, 역방향)을 설정할 수 있다.
HTML 파트

<div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
</div>

CSS 파트

.container {
    height: 500px;
    border: 5px dashed orange;
    display: flex;

    /* 기본값은 row
    flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;    */
}

.item {
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

17.1.2 flex-direction

1차원에 대한 정렬이기 때문에, 한줄에 모든 내용물이 들어가는 수밖에 없다. 컨테이너 내부의 item에 width, height를 설정해도 화면 크기가 작아지면 item도 줄어든다.
기본 값은 nowrap
wrap으로 설정하면 다음줄로 item을 넘겨 ,item의 width를 지켜줄 수 있다.

17.1.3. flex-flow

flex-direction, flex-wrap을 사용하는 단축 속성

flex-flow: row wrap;
flex-flow: row-reverse nowrap;

17.2. item

17.2.1. order

flex 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정한다. 컨테이너 아이템의 정렬 순서는 오름차순 order 값이다. 코드 순서를 따라간다.
기본 값은 0으로 설정 돼 있다.
HTML 파트

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

CSS 파트

.container {
    height: 500px;
    border: 5px dashed orange;
    display: flex;
    flex-wrap: nowrap;
}

.item {
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

.item:nth-child(3) {
    order: -1 ;
}

17.2.2. flex-grow(flex-item 속성)

flex-wrap : wrap, nowrap 일 경우 동작을 확인해보자.
item들이 자기가 차지할 공간을 다 차지해버린다. 하지만 item들의 width, height값 보다 작아지게 되면, 다음 줄로 아이템들을 밀어내고 해당 줄에서 요소들이 차지할 수 있는 공간을 나눠서 차지하게 된다. 위의 코드에서 flex-grow : 1을 추가해 확인해보자.
남은 공간에 대해 남은 비율로 나눠가지게 된다. 아래에서처럼 2:1 비율로 나눠가지게 된다.

.item {
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}
.item:nth-child(2) {
    flex-grow:2;
}
.item:nth-child(3) {
    flex-grow:1;
}

17.2.3. flex-shrink(flex-item 속성)

flex-grow와는 반대로 item들이 컨테이너보다 커졌을 때 사용한다.
부모가 flex로 선언이 됐을 경우, 이미 flex-shrink : 1로 적용이 돼 있다.
아래와 같이 0으로 바뀌면, 본인의 크기를 유지한다. 화면을 최대한으로 줄였을 때, items들이 컨테이너를 빠져나가는 현상까지 관찰할 수 있었다.
즉, 줄어든 공간의 비율을 2번째(기본 값 1), 3번째 자식이 각각 1:2 비율로 줄어들게 된다.

.item:nth-child(1) {
    flex-shrink: 0;
}
.item:nth-child(3) {
    flex-shrink: 2;
}

17.2.4. flex-basis (flex-item 속성. 이해가 어려운 부분.)

flex 아이템의 초기 크기를 지정한다. box-sizing을 따로 지정하지 않는다면 컨텐츠 박스의 크기를 변경한다. flex-grow와 자주 쓰일 것 같다.
flex-basis를 사용하지 않은 아래와 같은 코드의 문제는 처음에 각각의 값만큼의 영역을 차지한다. 따라서 플렉스 부분의 박스 크기가 더욱 큰 것을 볼 수 있다. 하지만 flex-grow:1 처럼 값을 1:1:1 비율을 가졌으면 좋겠을 때, flex-basis를 사용할 수 있다.
원래는 요소의 크기만큼 box 크기를 가지고 있었지만, basis를 100px 설정하게 되면 basis의 크기인 100px을 제외한 영역을 각각 1:1:1로 만든다. 다른 방법으로 basis 값을 0으로 해주면 가로 길이 자체가 1:1:1을 만들 수 있다.
HTML 파트

<div class="container">
    <div class="item">플렉스</div>
    <div class="item">!</div>
    <div class="item">!</div>
</div>

CSS 파트

.container {
    height: 500px;
    border: 5px dashed orange;
    display: flex;
}

.item {
    height: 50px;
    margin: 5px;
    background-color: rgb(146, 214, 214);
    border: 3px solid blue;
    font-size: 30px;

    flex-grow: 1;
    /* basis의 크기만큼 크기를 가진다는 의미*/
    /* flex-basis: 0 */
}  
.item:nth-child(1) {
    flex-grow: 5;
}

17.2.5. flex 단축 속성

기본 값
flex-grow: 0 flex-shrink: 1 flex-basis: auto
HTML 파트

<div class="container">
	<div class="item">플렉스</div>
	<div class="item">!</div>
	<div class="item">!</div>
</div>

CSS 파트

.container {
	height: 500px;
	border: 5px dashed orange;
	display: flex;
}
.item {
	height: 50px;
	margin: 5px;
	background-color: rgb(146, 214, 214);
	border: 3px solid blue;
	font-size: 30px; /* 값이 하나일 때*/
	flex: 1; /* flex-grow:1 와 동작이 다르다... 한개 또는 단위가 없는 숫자를 shorthand에 사용하게 되면 flex-basis의 값은 auto가 아니라 0이 된다. */ /* 값이 2개일 때 */
	flex: 1 50px;
	flex: 1 2; /* 첫번째 값은 무조건 숫자, flex-grow */ /* 두번째 값은 숫자일 경우 shrink, px일 경우 basis */ /* 값이 3개일 때 */
	flex: 1 2 50px; /* grow, shrink, basis */
}

initial

아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. flex: 0 1 auto와 동일합니다.

auto

아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. flex: 1 1 auto와 동일합니다.

none

아이템 크기가 각각의 width와 height 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. flex: 0 0 auto와 동일합니다.

17.3. Container , justify-content(주축 정렬)

flex-direction: row-reverse처럼, 주축의 방향성을 생각해야 한다.

/* 주축이 시작되는 위치로 정렬 */
justify-content: flex-start;

/* 주축이 끝나는 위치에 정렬 */
justify-content: flex-end;

/* 주축을 기준으로 가운데에 정렬 */
justify-content: flex-end;

/* 주축 시작과 끝에 item을 위치시키고 간격을 동일하게 설정 */
justify-content: space-between;

/* 각각의 앞뒤로 동일한 여백을 추가한다 */
justify-content: space-around;

between과 around의 차이

17.4. Container , align-items(교차 축 정렬)

align-items: stretch; 을 기본 값으로 가진다.
한 줄에 대한 정렬이기 때문에(여러 요소에 대한 정렬이 아니기 때문에) 요소에 대한 정렬은(space-between, space-around) 없다.
그림과 같이 한줄이 아닌 여러 줄에 교차축에 대한 정렬이 필요할 때, align-cotent를 사용한다.

17.5. Container , align-content(교차 축 정렬)

교차축에 해당하는 item들이 4개가 존재. 해당 content들에 대한 정렬을 한다. 즉, 여러 줄에 대한 정렬! 이 내용을 정확하게 몰라서 CSS 작성에 상당히 많은 어려움을 겪었었다.
justify-content에서 정렬하던 것처럼 사용이 가능하다.

17.6. Container , align-self(교차 축 정렬)

align-items에서는 한줄 밖에 읽지 못한다. 따라서 flex-wrap: wrap 사용시, 위 그림에서 분홍색 칸과 같이 총 3칸으로 인식을 하고 해당하는 부분에서 정렬을 실시한다.
item을 nth-child를 이용해 하나에만 설정을 따로 할 수 있다.
즉, 한가지 요소에만 따로 적용하고 싶을 때 사용.
HTML 파트

        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
        </div>

CSS 파트

.container {
    height: 500px;
    border: 5px dashed orange;
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    /* align-content: center; */
}

.item {
    width: 150px;
    height: 50px;
    margin: 5px;
    background-color: rgb(146, 214, 214);
    border: 3px solid blue;
    font-size: 30px;
}

.item:nth-child(4) {
    height:auto;
    align-self: flex-start;
}