CSS
sass , css 등 style에 대한 기록반응형
CSS
자간과 행간
*자간 포토샵 400 (tracking) = 400/1000 =0.4em css에서는 letter-spacing으로 표현 *행간 1) fontsize + (leading(행간) / 2) = lineheight 로 계산 = 결과는 px 2) CSS Line Height (abs)로 쓸경우에는 1) / fontsize 로 계산하면됨 예) font-size: 20 leading: 30 lineheight = 20 + (30/2) = 35px *1)값 lineheight = 35(1)에서 나온값) / 20 = 1.75 *2)값 https://codepen.io/zuhloobie/full/QWLZmpz Photoshop to CSS: Line-Height and Letter-Spacing Converter .....
CSS
text-shadow와 box-shadow
text-shadow: 2px 2px 2px gray; #텍스트 그림자 효과 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 정합니다. (선택 : 값을 정하지 않으면 브라우저 기본값) none : 글림자 효과를 없앱니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동합니다. offse..
CSS
3줄이상 글자 짜르기 및 ...표시
.line-clamp { display : block; display : -webkit-box; -webkit-box-orient : vertical; position : relative; line-height : 1.2; overflow : hidden; text-overflow : ellipsis; padding : 0 !important; } /* .line-clamp:after { content : '...'; text-align : right; bottom : 0; right : 0; width : 25%; display : block; position : absolute; height : calc(1em * 1.2); background : linear-gradient(to right, rgb..
CSS
테이블
#테이블 See the Pen Untitled by Kim Mi Seon (@miseon920) on CodePen. *테이블 코딩 1.table은 기본적으로 thead,tbody,tfoot으로 구성되나 때에따라서 생략가능하다. 2.thead에는 보통 제목을 쓴다. tr은 행을 나타내며 열로는 제목을 가르키는 th태그를 사용하여 작성하면 된다. -th 태그는 자동으로 중앙정렬과 폰트를 두껍게 표편한다. 3.tbody에는 제목에관한 내용을 쓴다. 4.scope의 경우 웹접근성을 위하여 사용한다. ※웹접근성이란? 정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 ..
CSS
calc
#반응형에서 한쪽에 고정메뉴가 있을경우 See the Pen Untitled by Kim Mi Seon (@miseon920) on CodePen. #calc calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org *calc를 중첩으로 쓸경우 width:calc(100% - 24px / 3); 으로 작성하는 것이 아닌 width : calc(calc(100% - 24px) / 3); 로 작성해야 올바른 표현이다.
CSS
셀렉트박스 & 체크박스&라디오버튼 커스텀
#셀렉트박스 커스텀 select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width:140px; background: url(../img/sel_bt.jpg) no-repeat 120px 60%; } select::-ms-expand{ display:none; } #체크박스&라디오 버튼 커스텀 See the Pen Quick Tip: Easy CSS3 Checkboxes and Radio Buttons by Envato Tuts+ (@tutsplus) on CodePen.
CSS
저작권을 위한 CSS
#마우스 드래그 금지 #스크립트 추가 #CSS로 처리하기 div{ -webkit-touch-callout: none; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } oncontextmenu = "return false" : 우클릭 방지 onseletstart = "return false" : 마우스 드래그 방지 ondragstart = "return false" : 이미지 복사 드래그 방지 onkeydown = "return false" : 키보드 단축키 복사 방지
CSS
벤더 프리픽스(Vendor Prefix)
#벤더 프리픽스 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. -webkit- 구글, 사파리 브라우저 -moz- 파이어폭스 브라우저 -o- 페라 브라우저 -ms- 익스플로러 (대부분 생략함) #예시 #벤더프리픽스를 자동으로 붙여주는 사이트 확인하기 Autopref..
CSS
font-face
#폰트 페이스 문법! @font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ]; } #실제사용예시 @font-face{ font-family:'NanumGothic'; src:url('fonts/NanumGothicRegular.eot'); src:url('fonts/NanumGothicRegular.eot?#iefix') format(‘embedded-opentype’), url('fonts/NanumGothicRegular.woff') format(‘woff’), local(※), url('fonts/NanumGothicRegular.ttf') format('truetype'); font-weight: 400; font-style:..
728x90
반응형
