🎨 [UIUX] 1203 CSS Coding, 코딩 기초 5

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

☁️ 이전 학습 활용 실습

📁 CSS 언어 기초 - align-content
✖️
🌴 align-content
플렉스 된 컨테이너 안에 자식들이 매우 많을 경우 여러줄이 형성됩니다.
(flex-wrap을 사용했을 경우 입니다.)
이때 한 줄을 하나의 content라고 표현합니다.
align-content는 컨텐츠를 각각 세로로 정렬하고 요소 사이에(between), 주위에(around), 고르게(evenly)동일한 간격을 주어 배치 할 수 있습니다.
🔥 - align-content: flex-start;
: 여러 줄을 컨테이너의 top 위치에 배치합니다.
🔥 - align-content: flex-end;
: 여러 줄을 컨테이너의 bottom 위치에 배치합니다.
🔥 - align-content: center;
: 여러 줄을 컨테이너의 middle 위치에 배치합니다.
🔥 - align-content: space-between;
: 여러 줄들을 양끝에 배치하고 줄 사이에 동일한 간격을 줍니다.
🔥 - align-content: space-around;
: 여러 줄들의 양옆에 동일한 간격을 주어 배치합니다.
🔥 - align-content: space-evenly;
: 여러 줄 사이에 동일한 간격을 주어 배치합니다.
🔥 - align-content: stretch;
: 여러 줄들을 컨테이너(부모박스)에 맞도록 늘립니다.
단, height 속성이 선언되지 않아야 합니다.

🌙 자식 박스에 주는 속성들
✖️
★ 아래 속성들은 반드시 자식 박스에 적용해야 합니다. ★
이 속성들은 부모박스에 flex가 적용되어 있어야만 사용할 수 있습니다.
✨ 1. order : 순서를 변경하는 속성
order를 통하여 flex 안쪽에 자식요소의 순서를 바꿀 수 있습니다.
기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
작은 수 일수록 나열 순서가 앞으로 옵니다.
✨ 2. align-self : 개별 요소를 세로로 정렬하는 속성
자식 박스를 개별적으로 세로로 정렬할 때 사용하는 속성입니다.
align-self에 적용하는 속성값들을 모두 똑같이 사용한 값을 지정한 해당 태그에만 적용됩니다.
🔥 - align-self: flex-start;
: 해당 요소를 컨테이너의 top 위치로 정렬합니다.
🔥 - align-self: flex-end;
: 해당 요소를 컨테이너의 bottom 위치로 정렬합니다.
🔥 - align-self: center;
: 해당 요소를 컨테이너의 middle 위치로 정렬합니다.
🔥 - align-self: baseline;
: 해당 요소를 컨테이너의 시작위치로 정렬합니다.
(= 기본값인 flex-start와 동일합니다.)
🔥 - align-self: stretch;
: 해당 요소를 부모 박스의 높이나 넓이에 맞춰 늘립니다.

🎈 반응형을 만들 때 많이 사용하는 가변 단위들
✖️
✨ 1. % : 어떤 영역에서 어떤 비율만큼을 차지하는 단위입니다.
✨ 2. vw,vh : viewport width,viewport height의 약자이며,
'보이는 화면'을 기준으로 백분율(%)하여 보여줍니다.
✨ 3. vmin, vmax : viewport 최대, 최소 넓이를 설정하는 단위입니다.
✨ 4. fr : 컨텐츠를 차지하는 비율입니다.
1fr이고, 컨텐츠가 3개라면 부모 영역을 1:1:1로 채웁니다.
첫번째 컨텐츠가 2fr이고 나머지 컨텐츠가 1fr이라면 2:1:1 비율이 됩니다.

🌍 scroll 속성
✖️
🌴 overflow: scroll
웹 페이지를 비롯한 박스(block)의 내부 스크롤 바를 지정하고 싶을 때 사용합니다.
scroll에는 가로 스크롤을 지정하는 overflow-x,
세로 스크롤을 지정하는 overflow-y가 있습니다.
🔥 - overflow: scroll;
: 가로 세로 스크롤을 모두 나타냅니다.
🔥 - overflow-x: scroll / hidden;
: 가로 스크롤을 나타내거나 숨깁니다.
🔥 - overflow-y: scroll / hidden;
: 세로 스크롤을 나타내거나 숨깁니다.
scroll 속성은 가로, 세로 스크롤이 모두 나타는 것이 기본 값입니다.
만약, 특정 스크롤을 숨기고 싶다면 특정 스크롤의 값을 hidden으로 지정해야만 숨길 수 있습니다.

🌍 overflow 속성
✖️
★★★★★ overflow ★★★★★
overflow 속성은 내부 요소가 부모박스의 범위를 벗어날 때 어떻게 처리할 것인가를 정하는 속성입니다.
- ⭐ overflow: hidden;
: 영역을 벗어나는 부분은 숨깁니다.
단, 부모박스의 높이가 지정되지 않은 경우 자식 요소 만큼 부모박스가 늘어납니다.
🔥 - ⭐ overflow: scroll;
: 영역을 벗어나는 부분은 스크롤 바를 만들어 보여줍니다.
🔥 - overflow: visible;
: 기본 값으로 부모 영역을 벗어나더라도 보여줍니다.
🔥 - overflow: auto;
: 부모 영역에서 자식 요소가 넘치면 스크롤 바를 만들어주며,
넘치지 않으면 스크롤 바를 만들어주지 않습니다.
🔥 - overflow: initial;
: 기본값으로 설정하겠다는 뜻입니다. 즉, visible과 같습니다.
🔥 - overflow: inherit;
: 부모 요소의 속성을 상속 받습니다.

✈️ list-style : 목록 스타일 속성
✖️
list-style : 목록 스타일 속성
목록 스타일은 목록 태그에 스타일을 지정하는 속성으로
순서가 없는 항목이나 순서가 있는 항목의 불릿과 숫자를 변경할 수 있습니다.
🖥️ 1. list-style-type
: 불릿이나 숫자 모양을 바꿀 때 사용합니다.
[ul]
🔥 - disk : 채운 원. 기본 값
🔥 - circle : 비워진 원
🔥 - square : 채워진 사각형
🔥- none : 불릿을 없앱니다. 메뉴를 만들 때에는 불릿을 없앤 후 사용합니다.
[ol]
🔥 - demical : 기본 값으로 1로 시작하는 십진수. (1,2,3..)
🔥 - demical-leading-zero : 앞에 0이 붙는 십진수 (01,02,03..)
🔥 - lower-roman : 로마 숫자 소문자 (i, ii, iii..)
🔥 - upper-roman : 로마 숫자 대문자 (I, II, III..)
- lower-alpha 또는 lower-latin : 알파벳 소문자 (a,b,c..)
🔥 - upper-alpha 또는 upper-latin : 알파벳 대문자 (A,B,C..)
🔥 - armenian : 아르메니아 숫자
🔥 - georgian : 조지왕조 시대 숫자 (an,ban,gan..)
🖥️ 2. list-style-position
ul, ol은 기본적으로 들여쓰기 되어 표현됩니다.
들여쓰기 하거나 내어쓰기 하는 이 위치를 list-style-position으로 정할 수 있습니다.
🔥 - inside : 안쪽으로 들여쓰기
🔥 - outside : 바깥쪽으로 내어쓰기. 기본값.
🖥️ 3. list-style
list-style-position과 list-style-type을 한꺼번에 선언할 때 사용합니다.
한꺼번에 사용할 때에는 공백으로 구분합니다.
[기본형]
list-style : 숫자나 불릿모양 자리 들여쓰기나 내어쓰기;

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