🔔 CSS
Alternative CSS Box Model
표준 CSS 박스모델에서 요소의 전체적인 크기
=
컨텐츠 박스 + 보더 박스 + 패딩 박스의 너비와 높이 값
contents-box : 기본 값 / contents 영역에 width, height 적용
border-box : border 영역까지 width, height 적용 / 따라서 padding or border의 폭이 요소의 width나 heigth를 늘릴 수 없다
CSS declarations
- 단위
절대 길이 단위
- 사용자가 선언한 고정된 크기 그대로를 화면에 그리기 때문에 직관적으로 쉽게 사용
- cm, mm, px 등
상대 길이 단위
- em
: 요소의 font-size에 따라 기준점을 세우며 기준점에 따라 크기가 달라진다
: 요소에 글자 크기가 지정되어 있지 않다면, 폰트 사이즈를 상속 받는 요소의 경우 부모 요소의 글자 크기를 기준으로
: 상속받지 않는 요소의 경우(ex. <button>) 자신의 기본 폰트 사이즈를 기준으로
: (부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값
- rem
: root em
: 최상위 요소(HTML)의 글자 크기를 기준점으로 하는 배수 단위
- %
: 부모 요소를 기준으로 하는 백분율 단위
-vw & vh
: 화면 넓이&높이를 기준으로 하는 백분율 단위
- overflow
- 요소의 콘텐츠가 너무 커다랄 경우 요소를 어떻게 처리할지 지정
visible
- overflow 속성의 기본 값 / 콘텐츠를 자르지 않음
hidden
- 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냄 / 스크롤 바를 제공하지 않음
scroll
- 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냄 / 잘려진 나머지 부분을 확인 할 수 있도록 스크롤 바를 제공
- background-image
html 요소뒤에 이미지를 배치할 때 사용
background-image
- url을 이용해 이미지의 주소에서 이미지를 불러옴
background-color
- 요소의 배경 색을 지정
background-repeat
- 배경이미지를 어떻게 반복할것인지 지정
background-position
- 배경이미지의 위치를 지정
background-size
: cover
- 이미지를 넓이와 높이에 맞게 잘라냄
: contain
- 이미지 넓이나 높이에 맞춰 자신의 이미지를 모두 다 넣고 반복
: 100%
- 이미지를 width와 height에 맞게 압축
- font
font-size
- 글꼴의 크기를 변경
font-family
- 글꼴 변경 / 여러 개 지정 가능 / 해당 서체가 없을 경우 그 다음 글꼴이 차선책으로 사용되도록 하기 위해
font-weight
- 폰트 굵기 설정
text-transform
- 텍스트를 대문자나 소문자로 표현 / uppercase는 대문자 / lowercase는 소문자 / capitalize는 각 단어의 첫 글자를 대문자로 지정
font-style
- 기울기 글꼴로 표현 / italic은 필기체 / oblique는 기울임체
text-align
- 텍스트의 정렬을 표현 / left는 왼쪽 / right는 오른쪽 / center는 가운데 / justify는 마지막 줄을 제외하고 양쪽으로 정렬
text-decoration
- text-decoration은 텍스트의 장식을 설정 / none은 효과제거 / underline은 밑줄추가
🔔 마무리
✅ 기본적으로 rem을 많이 쓰고 ex) 버튼 (large, medium, small) 등에 텍스트의 비율에 따라 달라져야 할 경우 em을 사용
✅ 주로 백엔드 개발자와 협업해야 하는 공간에는 img 태그 사용
✅ FE 혼자 작업하는 공간에는 background-image를 사용 / 스크린리더가 읽지 않아야 하는 곳에서 사용하기도 함
+ 웹 접근성을 높이기 위한 HTML 개행
- 의미적 개행 >> br
- 디자인 목적 >> span
