2023.04.06 Today I Learned(TIL)
01. 크기 단위
- px
디바이스 해상도에 따라서 상대적인 크기를 가짐
- %
요소에 지정된 사이즈(상속된 사이즈, 디폴트 사이즈)에 비례하는 상대 단위
- viewport
디스플레이에 표시되는 영역 (ex. 750px이면 7.5vw)
💡 종류
- vw(viewport width)
-> `가로` 화면에 비례해서 상대적 크기 반환
- vh(viewprot height)
-> `세로` 화면에 비례해서 상대적 크기 반환
- vmin
-> 너비 또는 높이를 기준으로 `최소값` (더 작음)
- vmax
-> 너비 또는 높이를 기준으로 `최대값` (더 큼)
- em
해당 요소의 폰트 크기에 비례한 상대 단위
- calc()
연산자를 사용한 단위
📌 주의사항 !!!
- 0으로 나누면 오류 발생
- +나 - 연산자는 좌우 공백 필요
- 중복 괄호는 단순 괄호로 취급함
- em vs. rem
- em
해당 요소에 지정된 폰트 크기만큼 - rem
최상위 요소의 폰트 크기를 기준으로 (대부분 html 태그의 폰트 크기가 기준)
- margin
요소 주변 여백
margin-top
margin-bottom
margin-left
margin-right-> 순서는 시계방향
margin : 24px 12px
top,bottom / left,right
margin : 24px 12px 10px 5px
top right bottom left-> block 요소의 상하 margin은 다른 block 요소 margin과 상쇄됨
- padding
컨텐츠와 테두리 사이의 여백
padding-top
padding-bottom
padding-left
padding-right-> 순서는 시계방향(margin과 같음)
padding : 24px 12px
top,bottom / left,right
padding : 19px 12px 25px 10px
top right bottom left- box-sizing
- content-box :
컨텐츠 영역을 기준으로 크기를 정함 - border-box :
테두리를 기준으로 크기를 정함 - border-radius : 테두리를
둥글게만드는 속성
02. display 속성 종류
2-1. display : inline
- block 요소가 나오기 전까지 모든 inline 요소를
한 줄에 넣음 - setting한 width, height 무시
2-2. display : block
하나 당 한 줄을 차지함 (독점)- width, height를 작성하면 늘어나거나 줄어듦
2-3. display : none (또는 hidden)
- 없어짐
2-4. ⭐ display : flex
: flex 컨테이너에 flex 속성을 지정
✔ flex-direction
flex에서 정렬의 기준이 되는 메인축(아이템이 배치되는 방향)을 지정
- row : 한 줄을 글을 작성하는 방향대로
- row-reverse : row와 같지만 역방향
- column : 글 여러 줄이 쌓이는 방향대로
- column-reverse : column와 같지만 역방향
✔ justify-content
메인 축 기준의 정렬 방식 지정
- flex-start : 가장 왼쪽에 배치
- flex-end : 가장 오른쪽에 배치
- center : 중앙에 배치
- space-between : 요소 사이만 균일한 간격으로 배치
- space-around : 요소 둘레에 균일한 간격만큼 배치
- space-evenly : 요소 사이와 양 끝을 균일한 간격으로 배치
✔ align-items
여러 줄이 있을 때 각각을 기준으로 서브 축 (메인 축 수직) 기준의 정렬 방식 지정
- stretch : items를 수직 방향으로 쭉 늘림
- flex-start : items를 가장 위쪽으로 정렬
- flex-end : items를 가장 아래쪽으로 정렬
- center : items를 중앙에 정렬
- baseline : items를 텍스트 베이스라인 기준으로 정렬
✔ align-content
여러 줄이 있을 때 전체를 기준으로 정렬 방식 지정 (flex-wrap이여야지만 가능)
- flex-start : 가장 왼쪽에 배치
- flex-end : 가장 오른쪽에 배치
- center : 중앙에 배치
- space-between : 요소 사이만 균일한 간격으로 배치
- space-around : 요소 둘레에 균일한 간격만큼 배치
- space-evenly : 요소 사이와 양 끝을 균일한 간격으로 배치
📢 사진 출처 : 지원님 😊
✔ flex-wrap
줄바꿈 방식 지정
- nonwrap - 줄바꿈 x (기본값)
- wrap - 줄바꿈 o
- wrap-reverse - 줄바꿈 o, 역배치
✔ inline-flex
부모 요소인 컨테이너에 사용하는 스타일 속성
(display : inline-block;과 같음)📢 flex 부분 출처 : https://studiomeal.com/archives/197
(정말 감사함미다 💕 그림 덕분에 이해가 더 잘됐어용 💖)
03. 마무리
크기 단위 중에서 px밖에 안 써봤는데 이제 다른 것도 잘 사용할 수 있을 것 같다.
그리고 display : flex ; 를 사용할 때마다 "정말 이게 왜 이렇게 적용되는거지" 하면서 멘붕이 왔었는데 오늘 확실하게 알 수 있었다. 헤헤
(근데 또 웹 페이지 만들라고 하면 버벅댄다 ㅋ)
오늘도 알찬 공부였당 - 🌟✨⭐
