HTML 태그 & CSS 속성19 CSS tip 1. 소수점 표기법: css값 마지막은 세미콜론을 안넣어도 된다. ;} → } 2. 마진 곂침현상: 큰수가 먼저 표현된다. 여백은 한방향으로 준다. margin보단 padding. div{margin-bottom: 10px;} div{margin-top: 10px:} 결과: 10px만큼의 여백이 생긴다. (20px이 아니다.) div{margin-bottom: 20px;} div{margin-top: 10px:} 결과: 20px만큼의 여백이 생긴다. (30px이 아니다.) 3. Padding과 maring의 우선 순위: 무조건 padding을 준다. 하지만 배경에 색/이미지/선(border)이 있을 경우 margin을 준다.(위의 더블마진현상을 방지하기 위해) 4. 높이 100%: 첫번째 방법: posi.. 2020. 7. 20. select box 스타일링(CSS only) select 화살표 지우기: --webkit-appearance: none; appearance: none; select::-ms-expand{opacity: 0;} 2020. 7. 20. text-shadow & box-shadow text-shadow & box-shadow 축약형: text-shadow: h-shadow(수평) / v-shadow(수직) / blur-radius(흐릿한 정도) / 그림자 크기 / color(색상) box-shadow: offset-x / offset-y / blur-radius / spread-radius / (*inset) / color box-shadow sample https://getcssscan.com/css-box-shadow-examples 2020. 7. 20. vertical-align은 inline, table-cell에만 적용할 수 있다. 2020. 7. 16. background 단축 표현 + linear-gradient() background: url() / color / repeat / position(x, y) / size(width, height) 반드시 부모또는 자신에게 width, hight가 있어야 한다. ex) background: url(../경로) no-repeat center top / 100% background-size: contain 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절합니다. 단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않습니다. 따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있습니다. background-size: cover 이미지의 비율은 유지하면서, 요소의 모든 영역을.. 2020. 7. 8. box-sizing box-sizing: content-box 컨텐츠 영역을 계속 가지고 있는다. 이때 padding, border값을 더할 경우 총 너비가 늘어난다. box-sizing: border-box 컨텐츠 영역이 줄어든다. 총 너비를 유지 2020. 7. 8. 이전 1 2 3 4 다음