modern CSS margin, border, padding, background

강정우·2022년 12월 20일
2

HTML, CSS

목록 보기
15/27
post-thumbnail

주요 property

1. margin, border, padding, content

1. width / height

  • box-sizing property는 default로 content-box가 지정되어있다.
  • box-sizing property를 border-box로 바꾼다면 content+padding+border영역의 너비와 높이가 된다.

    특히 mordern web에서는 box-sizing을 border-box로 설정한다!

*,
*::before,
*::after {
	box-sizing : border-box;
}
  • width/height 포함 모든 boxmodel property는 상속되지 않는다.

max-width / max-height

  • 요소 너비가 브라우저 너비보다 클 경우, 가로 스크롤바가 만들어질 수 있다.
    이때 max-width를 적용하면 요소 너비가 브라우저 너비보다 클 경우 자동으로 요소 너비가 줄어듬

2. margin / padding

  • margin 또는 padding에 -top, -right, -bottom, -left를 붙여서 각 방향의 margin, padding 지정가능.
  • margain, padding property에 ⬆ ➡ ⬇ ⬅ 처럼 시계방향으로 순서대로 작성한다.
  • 3개 (⬆, ⬅➡, ⬇), 2개 (⬆⬇, ⬅➡)

block 특성의 margin을 이용한 중앙정렬

width : 100px /* 명시적으로 지정해야 함 */
margin-left : auto;
margin-right : auto;

/* 한줄로 */
margin : 10px auto;

3. border

  • border-style 설정 이때 웹 표준 사이트 이용
  • border-width 1px 단위로도 설정가능하고, thin, medium, thick의 키워드로 설정 가능
  • border-width는 border-style과 함께 설정되어야 한다.
  • 한줄로 쓰겠다면 border : 굵기, 스타일, 컬러 순으로 표기한다.

2. background

1. repeat

시멘틱 웹 태그 설명
repeat 요소의 배경 영역을 채울때까지
no-repeat 반복X
space 양 끝에 설정하고 남은 여백을 채워넣음
reound 요소 사이즈가 늘어나면 반복하여 채움, 이미지가 짤리지 않도록 전체 반복 이미지 사이즈 재조정
* 이때 가로와 세로의 설정을 따로 줄 수 있다. * 또한 여러개의 이미지를 넣는다면 순서대로 property를 설정해줄 수 있다.

2. size

  • auto : 이미지 크기 유지
  • length : 값이 2개일때 (가로, 세로) 값이 1개일때 (가로) 이때 세로는 원본 이미지의 가로세로 비율에 맞춰 설정됨
  • cover : 가로세로 비율을 유지하면서 요소 사이즈를 다 채움 단, 잘릴 수 있다.
  • contain : 가로세로 배율을 유지하면서 요소 사이즈를 벗어나지 않는 최대 키기로 확대
  • initial : 기본값
  • 도움이 되는 사이트

3. attachment

  • 브라우저를 스크롤하면 배경이 사라지는데 고정할 때
background-attchment: fixed;

4. 단축 property

background : color image repeat attachment position
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글