단위, 배경, 박스모델

DONI·2021년 10월 31일
0

CSS

목록 보기
3/4
post-thumbnail

🏹 단위 속성

  • 절대 길이 : 다른 요소의 크기에 의해 영향을 받지 않는 고정된 크기 단위
단위설명
px여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있음
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장
pt웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용
사용하는 기기의 해상도에 따라 차이가 있어 권장하지 않음

  • 상대 길이 : 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라
                   상대적으로 값이 변하는 크기 단위
단위설명
%부모의 값에 대해서 백분율로 환산한 크기
emfont-size를 기준으로 값을 환산, 소수점 3자리까지 표현 가능
remroot의 font-size를 기준으로 값을 환산
vwviewport의 width 값을 기준으로 1%의 값으로 계산

🏹 background 속성

속성명설명
background-image배경으로 사용할 이미지의 경로를 지정
절대 경로, 상대 경로 모두 가능
background-repeat이미지의 반복 여부와 방향을 지정
background-position요소에서 배경 이미지의 위치를 지정

* background-repeat 속성 값

  • repeat : x축, y축 방향으로 반복 (기본 값)
  • repeat-x : x축 방향으로만 반복
  • repeat-y : y축 방향으로만 반복
  • no-repeat : 반복하지 않음

* background-position 속성 값

%, px, top, bottom, left, right, center


🏹 border 속성 기본 값

속성명기본 값
border-widthmedium
border-stylenone
border-colorcurrentColor

🏹 margin과 padding의 비교

두 속성 모두 여백을 지정하는 속성이기 때문에 border의 경계가 명확하지 않을 때 어떤 속성으로 여백을 표현할지 헷갈릴 수 있다. 이때 자신이 원하는 속성을 이용해도 상관은 없지만, 엄연히 다른 속성이므로 두 속성의 차이를 명확히 알고 적절한 속성을 사용할 수 있어야 한다.

양수음수auto
marginOOO
paddingOXX

  ⭐ -top, -bottom 속성도 width 값을 기준으로 값이 결정된다!

profile
틀린 내용이 있다면 댓글 또는 이메일로 알려주세요 ❤ꔛ❜

0개의 댓글