주요 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