🎨 [UIUX] 1202 CSS Coding, 코딩 기초 4

✏️ 2024. 12월 02일 / CSS 언어, 코딩 기초 4

☁️ 이전 학습 활용 실습

📁 CSS 언어 기초 - display 속성
✖️
오늘은 박스를 배치하거나 고유의 속성을 바꿔 사용할 수 있도록 해주는 속성에 대해 알아보려 합니다.
⭐ display : 박스를 배치하거나 고유의 속성을 바꿔주는 속성
display는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을 바꿀 때 사용합니다.
🔥 - display : block; ⭐
해당 요소를 block 속성으로 바꾸거나 none으로 숨긴 요소를 다시 나타낼 때에도 사용합니다.
🔥 - display : inline;
해당 요소를 inline 속성으로 바꿉니다.
🔥 - display : inline-block;
해당 요소를 inline-block 속성으로 바꿉니다.
🔥 - displat : none; ⭐
해당 요소를 화면에서 영역까지 모두 숨깁니다.

📁 CSS 언어 기초 - visibillity 속성
✖️
⭐ visibillity : 영역은 남겨둔 채 요소만 숨기는 속성
display : none을 사용하면 해당 요소가 차지하고 있던 공간과 해당 요소를 모두 숨겨줍니다.
하지만 영역은 남겨둔채 요소의 모양만 숨기고 싶다면 visibillity를 사용할 수 있습니다.
🔥 - visibillity : hidden; ⭐
요소가 차지하고 있던 공간은 그대로 둔 채 요소만 숨깁니다.
🔥 - visibillity : visible;
기본 값으로 요소와 공간을 그대로 보여줍니다.

⭐ 이건 꼭 기억합시다! 너무 중요한 속성 flex 속성!
✖️
⭐⭐⭐display:flex⭐⭐⭐
부모박스(container)안에 자식박스(item)를 정렬하는 속성입니다.
flex를 적용하는 순간부터 자식박스는 가로로 정렬됩니다.
이때 자식박스의 가로 넓이의 총 합이 부모 박스의 넓이를 넘게 되면
자식 박스의 사이즈가 자동으로 줄어들며 부모 박스를 채웁니다.
컨테이너에 flex가 적용되면 자식들을 다양하게 정렬하는 하위 정렬 속성들을 함께 사용할 수 있습니다.
⭐ 중요! display:flex 속성은 부모박스에 적용해야 하며,
이에 따른 하위 정렬 속성 또한 부모박스에 적용하여야 합니다.
<하위 정렬 속성>
⭐ 1. justify-content
부모 박스 안에 자식 박스들을 가로로 정렬할 때 사용하는 속성입니다.
🔥 - justify-content : flex-start;
: 기본 값으로 부모박스 안에 자식 박스들을 왼쪽에서 오른쪽으로 정렬합니다.
🔥 - justify-content : flex-end;
: 부모박스 안에 자식 박스들을 오른쪽에서 왼쪽으로 정렬합니다.
🔥 - justify-content : flex-center;
: 부모박스 안에 자식 박스들을 가운데로 정렬합니다.
🔥 - justify-content : space-between;
: 부모박스 안에 자식박스들을 동일한 여백으로 양쪽 정렬합니다.
🔥 - justify-content : space-around;
: 자식박스에 양 옆으로 동일한 간격을 주어 정렬합니다.
🔥 - justify-content : space-evenly;
: 부모박스 안에 자식박스들을 고르게 동일한 간격으로 정렬합니다.


⭐ 2. align-items
부모 박스 안에 있는 자식 박스들을 세로로 정렬하는 속성입니다.
부모 박스를 기준으로 top/middle/bottom 쪽으로 정렬합니다.
🔥 - align-items: flex-start;
: 부모 박스의 top 위치로 자식박스들을 정렬합니다.
🔥 - align-items: flex-end;
: 부모 박스의 bottom 위치로 자식 박스들을 정렬합니다.
🔥 - align-items: center;
: 부모 박스의 middle 위치로 자식 박스들을 정렬합니다.
🔥 - align-items: baseline;
: 자식 박스들을 부모 박스의 시작 위치에 정렬합니다.
(=flex-start와 동일한 결과값)
🔥 - align-items: stretch;
: 자식 박스를 부모 박스의 높이에 맞춰 늘립니다.
이때, 자식 박스에는 heigh 속성이 없어야 합니다.

⭐ 3. flex-direction
자식 박스의 나열 방향을 정하는 속성입니다.
자식 박스를 block 속성 처럼 세로로 나열하거나
flex의 기본값처럼 가로를 나열할 때 주로 사용합니다.
속성값이 -reverse가 붙으면 start와 end의 자리가 바뀌게 됩니다.
🔥 - flex-direction: row;
: 기본값으로 flex를 적용한 기본 모습과 같이 가로로 자식 박스들을 나열합니다.
🔥 - flex-direction: row-reverse;
: 자식 박스들을 가로로 반전 시킵니다.
🔥 - flex-direction: column;
: 자식 박스들을 위에서 아래로 나열합니다.
🔥 - flex-direction: column-reverse;
: 자식 박스들을 세로로 반전 시킵니다.
⭐ 4. flex-wrap
flex를 적용하게 되면 자식 요소들이 부모 박스의 넓이보다 넓을 때
자동으로 자식의 넓이를 무시하고 1줄에 걸쳐 컨텐츠를 작게 찌그러트립니다.
이때 만약 자식의 넓이와 높이를 그대로 유지하고 싶다면 flex-wrap을 사용합니다.
🔥 - flex-wrap: nowrap;
: 기본 값으로 모든 자식 요소들을 한 줄에 걸쳐 부모 박스에 맞춰 정렬합니다.
🔥 - flex-wrap: wrap;
: 자식 요소들의 넓이 높이를 유지하며 여러 줄에 걸쳐 정렬합니다.
🔥 - flex-wrap: wrap-reverse;
: 자식 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
⭐ 5. gap : 컨텐츠 사이 여백
gap을 사용하면 flex가 적용된 자식 요소 사이에 간격을 만들 수 있습니다.
gap은 컨텐츠 사이에 생기며, 이것을 gutter라고 표현하기도 합니다.
값을 1개만 쓰면 row, column방향으로 동일한 간격을 만들어주고,
값을 2개로 나누어 쓰면 앞자리가 column방향, 뒷자리가 row방향입니다.
ㄴ> flex가 설정되어 있어야 적용할 수 있습니다.
⭐ 6. flex-flow : 나열방향 + 감싸기 속성
flex-direction(나열 속성) + flex-wrap(감싸기 속성)을 한꺼번에 선언할 때 사용합니다.
두 속성의 조합은 많이 사용되기 때문에 한 번에 선언하고 싶을 때 flex-flow를 사용할 수 있습니다.
두 속성의 속성값을 공백으로 구분하여 한 번에 씁니다.
🔥 - flex-flow: 나열방향 감싸기;
ex) flex-flow: cloumn wrap;
-> 세로 방향으로 나열하고, 자식 요소 넓이를 유지합니다.
ex) flex-flow: row wrap-reverse;
-> 가로 방향으로 나열하고, 자식 요소 넓이를 유지하며 뒤집습니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)