CSS

포토샵과 letter-spacing 자간 비교

빽짱구 — Mon, 24 Dec 2018 09:56:08 +0900

자간과 커닝은 모두 현재 문자 크기에 상대적인 측정 단위인 1/1000em으로 측정됩니다. 6포인트 글꼴에서 1em은 6포인트에 해당하고, 10포인트 글꼴에서 1em은 10포인트에 해당합니다. 커닝 및 자간은 현재 문자 크기에 정확하게 비례합니다.

출처 : http://slowalk.tistory.com/2194

css3 애니메이션 속성

빽짱구 — Tue, 30 Oct 2018 10:56:44 +0900

animation-name : 선언된 애니메이션 이름

animation-duration : ms 단위로 실행되는 시간을 지정

animation-timing-function : linear, ease 등의 시간에 따른 변화 가감속 속도를 지정

animation-iteration-count : 애니메이션의 반복 효과 횟수 지정(기본값은 1로 지정되어 있음)

animation-direction : 애니메이션이 반복되는 동안 실행되는 순서(기본은 normal, 반대라면 alternate)

animation-delay : 애니메이션 실행 시작 전에 실행 지연(유예) 시간을 지정

animation-fill-mode : 애니메이션의 적용 후에 대상의 상태를 지정(backward, forward, both, none)

animation-play-state : 애니메이션 실행 중에 중지되었을 때 계속 진행하거나 멈추게 할 것인지를 지정

@keyframes 'animation-name' {

keyframe {

property : value;

}

출처 : http://webclub.tistory.com/482

아이폰(ios) input 박스안에 그림자 및 라운드 제거하기

빽짱구 — Sun, 28 Oct 2018 21:15:37 +0900

아이폰에서 input 박스에 그림자 or 라운드를 없애는 방법입니다.

-webkit-appearance:none; /* 그림자 제거 */

-webkit-border-radius:0; /* 라운드 제거 */

적용예)

input{border:1px solid #ddd;background:#fff;color:#333;font-size:12px;-webkit-appearance:none;-webkit-border-radius:0;}

sass 기초 개념이 잘정리되어 있네요.

빽짱구 — Thu, 25 Oct 2018 10:36:49 +0900

https://sass.urbanzakapa.kr/

참고하시면 도움이 많이 될듯하네요.

CSS Transition 옵션

빽짱구 — Sun, 30 Sep 2018 22:01:08 +0900

i. linear

; linear는 시작 시점과 종료시점까지 동일한 속도로 변화가 일어남

ii. ease

; ease의 경우 초반 서서히 움직이다 빠르게 이동하고 종료시점에 다시 느리게 변화됨

iii. ease-in

; ease-in은 시작 시점에서 서서히 진행함

iv. ease-out

; ease-out은 종료되는 시점에서 서서히 진행함

v. ease-in-out

; ease-in-out의 경우 시작 시점, 종료 시점 모두 서서히 진행됨

vi. cubic-bezier(a,b,c,d)

; 벤지에 곡선을 적용함

아이폰에서 textarea 그림자 제거

빽짱구 — Tue, 25 Sep 2018 03:39:02 +0900

아이폰 사파리에서 textarea 박스에 그림자가 기본으로 적용되어있습니다.

그 그림자를 없애는 방법입니다.

-webkit-appearance: none;

ex) textarea{-webkit-appearance: none;}

box-shadow:none !important;

위에 방법으로도 가능합니다.

크롬 input 박스 노란색 제거 하기

빽짱구 — Sun, 23 Sep 2018 11:07:09 +0900

크롬 브라우저에서 input 박스에 아이디나 텍스트를 넣었을때 노란색이 자동으로 입히는걸 없애는 방법입니다.

css에 아래 내용을 삽입해주세요.

input:-webkit-autofill{ -webkit-box-shadow: 0 0 0 30px none inset ; -webkit-text-fill-color: #000; }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ transition: background-color 5000s ease-in-out 0s; }

IOS 박스 스크롤 부드럽게 하기 -webkit-overflow-scrolling: touch

빽짱구 — Tue, 16 Feb 2016 13:15:54 +0900

아이폰에서 스크롤이 있는 박스를 스크롤할때 부드럽지 않을때가 있습니다.

-webkit-overflow-scrolling: touch 를 해당 박스안에 추가해주면 스크롤이 부드러워집니다. (IOS5 이상부터적용)

ex)

스크롤 박스

CSS3 box-sizing:border-box

빽짱구 — Tue, 16 Feb 2016 13:10:30 +0900

box-sizing:border-box

CSS3 이며 width:100% 했을때 border 와 padding을 줘도 사이즈가 width안에 포함이 됩니다.

모바일 제작시 유용하게 사용됩니다.

[반응형웹]해상도에 따른 CSS호출하기(미디어쿼리)

빽짱구 — Tue, 20 May 2014 13:07:22 +0900

반응형웹을 제작하면서 해상도에 따른 CSS를 호출하는 두가지 방법입니다.

해상도 따라 CSS 호출하기 (작성하신 수치에 따라 해당 CSS를 호출합니다.)

phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />

tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />

pc.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />

해상도에 따라 해당 소스를 우선적으로 읽혀드립니다.

@media (max-width:320px){

}

@media (min-width:321px) and (max-width:768px){

}

@media (min-width:769px){

}

참고로 익스9미만 버전에서는 미디어쿼리를 지원하지 않기때문에 그이하 버전에서는 PC버전으로 CSS를 호출하시면됩니다.

css 패턴

빽짱구 — Wed, 14 May 2014 14:21:17 +0900

http://lea.verou.me/css3patterns/

이미지가 없이 CSS3로만으로 만든 패턴 갤러리 사이트입니다.

아이폰 모바일에서 숫자 색상스타일

빽짱구 — Thu, 02 Jan 2014 16:54:14 +0900

모바일코딩시 아이폰에서 숫자를 전화번호로 인식해서 폰트색상이 아이폰 기본 색상스타일로 적용이 될경우가 있다.

010-1111-1234

당연히 색상코드 #999로 적용이 되야하지만, 아이폰 자체에서 숫자를 전화번호로 인식하는 경우가 있어 a 태그에 기본색상이 적용되게 된다.

즉 010-1111-1234

뭐 이런식으로 아이폰에서는 위처럼 적용이 된다고 보면될것이다.

다시말해 아이폰에서 전화번호 a태그에 자체 지정한 스타일이나 class 가 적용된다는 얘기다.

이럴경우에는 010-1111-1234 이런식으로 class를 주고 .num a{color:#999} 이렇게 a태그에 색상을 적용하면 해결된다.

다른방법 (상단에 메타태그 추가)

[출처] 아이폰에서만 다르게 보입니다 ㅠㅠ (하드코딩하는사람들) |작성자 dohoons

모바일 가로버전 @media

빽짱구 — Mon, 23 Dec 2013 12:39:04 +0900

모바일 가로버전일때 @media 속성입니다.

@media screen and (orientation : landscape) {

}

모바일 코딩시 메뉴가 3개일때 해결방법

빽짱구 — Wed, 18 Dec 2013 11:32:36 +0900

모바일 코딩시 width 100%기준일때 메뉴가 3개일때는 딱 떨어지지 않는데, 그럴때 해결방법입니다.

li{width:33%}

li:last-child {width:34%}

33%로는 딱떨어지지 않아서 맨마지막 li에는 34%로 주시면됩니다.

크롬,사파리,익스 스크롤바 바꾸기

UI — Thu, 08 Aug 2013 13:16:51 +0900

http://circlash.tistory.com/610

위에 상세하게 설명이 되어있네요.~