[CSS] 속성 정리(1) 박스모델

CSS 속성에는 박스모델, 글꼴/문자, 배경, 배치, 플렉스(정렬), 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터 등이 있다. 속성 정리 (1) ~ (n)으로 정리 예정

박스모델

1. 내용(content): 텍스트나 이미지가 들어있는 박스
2. 패딩(padding): 요소의 내부 여백
3. 테두리(border): 내용과 패딩 주변을 감싸는 테두리
4. 마진(margin): 요소의 외부 여백

---

• width, height 기본값: auto / 단위로 지정
  width: 요소의 가로 넓이 , height: 요소의 세로 넓이
• max-width, max-height 기본값: 최대 너비 제한 없음 / 단위로 지정
• min-width, min-height 기본값: 0 / 단위로 지정
• HTML 폰트 사이즈 기본값 = 16px

단위: px, em, vw 등 --> px % 를 가장 많이 사용함
px: 픽셀
%: 상대적 백분율
em: 요소의 글꼴 크기 (기준이 폰트사이즈여서 10em이면 기본픽셀 16 * 10 = 160px)
rem: 루트(최상위) 요소(html)의 글꼴 크기

margin

• margin 기본값: 외부 여백 없음 / auto: 브라우저가 여백 계산(가운데 정렬), 음수 사용 가능
• margin-top/right/bottom/left: 크기 지정
• OR 사이즈 입력 ex) margin: 10px 20px, margin: 10px 20px 30px
  

padding

• padding 기본값: 내부 여백 없음 / %: 부모 요소의 가로 너비에 대한 비율로 지정
• padding-top/right/bottom/left: 크기 지정
• margin과 동일한 여백 순서로 top -> right -> bottom -> left 순서
  

border

• border-width 요소 테두리 선의 두께, 위치 지정도 가능
  border-top/bottom/left/right
• border-style solid 실선, dashed 파선, 단축 명시 가능
  border-top-style --> top, bottom, left, right 모두 가능
• border-color 기본 값: 검정 / 선 색상 지정 transparent도 가능
  border-right-color --> top, bottom, left, right 모두 가능

#box{
	border: 4px dotted green;
	border-bottom: 5px solid blue;
}

• border-radius 요소의 모서리를 둥글게 깎음

#box{
	border-radius: 0 10px 0 0;  <-- 오른쪽 위만 둥글게
}

box-sizing

• content-box 요소의 내용(content)만 크기 계산
• border-box 요소의 내용 + padding + border로 크기 계산
  요소의 명시한 그대로 수치 사용하고 싶고 요소 커지는 것 원치않을 때 사용

#box{
	box-sizing: border-box; --> padding, border있어도 지정한 크기로 계산해서 화면에 나타앰
}

overflow

• 요소가 크기 이상으로 내용이 넘쳤을 때 어떻게 보여질지 제어하는 단축 속성
• visible 기본값으로 넘친 내용을 그대로 보여줌
• hidden 넘친 내용을 잘라냄
• auto 넘친 내용이 있는 경우만 잘라내고 스크롤바 생성
• overflow-x, overflow-y 요렇게 개별 속성으로 제어 가능
  

display

• 화면에 어떻게 보여지는지 출력의 특성
  <기본값>
• 상자요소: block, 글자요소 inline, 글자+상자 요소 inline-block
• 인라인 요소에 display: block 넣으면 블록 요소로 바꿔 사용 가능
  <지정해서 사용하는 값>
• flex 플렉스 박스 (1차원 레이아웃) x축이던 y축이던 하나의 축만 사용
• grid 그리드 (2차원 레이아웃) x,y축 행렬 2가지 차원 사용
• none 보여짐 특성 없음, 화면에서 사라짐

opacity

• 요소 투명도로 기본값은 1(불투명)이며 0~1 사이 소수점 숫자 지정

• opacity: 0.45;