분류 전체보기301 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. PSD디자인 코딩 시 주의 해야 할 점 0. CSS reset하기.- 자신이 주로 사용하는 CSS 기본 스타일을 넣어주자.- .clelarfix:after {content: ''; display: block; clear: both;} ← float으로 인한 에러 수정- img {vertical-align: top; 또는 상황에 따라 display: block;}- 공통(general)되는 부분을 먼저 파악. ㄴTypograph: h1, h2 ,h3, h4, p 등... (폰트: color, font-family, font-size, line-height) ㄴLayout: width ㄴMenu ㄴHeader ㄴMain Content ㄴFooter 1. padding / border을 사용할때 디자인의 정확한 .. 2020. 7. 8. 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 ··· 47 48 49 50 51 다음
