css 스크롤바 숨기기

3 years ago a few seconds read (About 5 words)

1
2
3

#element::-webkit-scrollbar {
    display: none;
}

Css opacity 적용하기

3 years ago a few seconds read (About 87 words)

rgb를 이용하는 방법

제일 뒷자리가 투명도를 조절하는 부분이다.

1	rgba(0, 0, 0, 0.5)

hexo code를 이용하는 방식

숫자 앞에 투명도를 붙여준다.

for 50% white you'd use #80FFFFFF.

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

css 애니메이션의 활용

3 years ago a few seconds read (About 20 words)

transition을 활용한 사이즈 애니메이션

1 2	transition: height 2s; -webkit-transition: height 2s;

css 기본 개념

3 years ago a few seconds read (About 59 words)

선택자

선택자

// 아이디 선택자
#id_of_the_element{
  //contents
}

//클래스 선택자
.class_of_the_element{
  //contents
}

// 속성 선택자
input[type=text]{
  // contents
}

// 자손 선택자
header>h1{
  
}

// 반응, 상태, 구조 선택자
div:first-child{
  
}

선택자:active{
  
}

css dev note

3 years ago a minute read (About 122 words)

배경 설정하기
배경 그라디언트
커서 모양 만들기

배경 설정하기

배경을 전체로 설정하고 가운데를 보이게 할 수 있다.
가장 일반적인 배경 설정이다.

1
2
3

background-position: center;
background-repeat: no-repeat;
background-size: cover;

배경 그라디언트

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}

커서 모양 만들기

1	li { cursor: pointer; cursor: hand; }

#css