개발

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 Document #wrapper{ background-image: url(../images/room.jpg); background-size: cover; width: 900px; height: 622px; margin: auto; position: relative; } #wrapper img{ width: 35px; position: absolute; top: 0px; } #surface{ background-color: black; width: 100%; height: 100..

1. 산술 연산자 + 더하기 - 빼기 * 곱하기 / 나누기 % 나누고 난 나머지 2. 증감 연산자 ++ 더하기 1 ex) x++, ++x -- 빼기 1 ex) x--, --x 3. 대입연산자 (바로 변수에 대입) = 같다 ex) var x = 2; += n더하기 ex) x += 2; -= n빼기 ex) x -= 2; *= n곱하기 ex) x *= 2; /= n나누기 ex) x /= 2; %= %나머지 ex) x %= 2; 4. 논리연산자 && and ex) x

간단한 카운터기능과 자동으로 그 기능을 반복해주는 기능을 만들어 봅시다! 1 2 3 4 5 6 7 8 9 10 11 12 13 카운터 카운터 증가 자동 증가 Colored by Color Scripter cs 버튼을 먼저 만들어 주고 onClick 기능에 함수명을 각각 setCount()와 auto()로 줍니다! 자동버튼은 한번만 클릭되고 비활성화 시키기 위해 뒤에 this.disable=true 옵션도 넣어줍니다. 눌렀을 때 비황성화 되는지도 잘 확인 해 주세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 카운터 input{ height: 500px; width: 600px; background-color: dodgerblue;..

상기 이미지의 굴곡도를 올려서 원형으로 만드는 옵션을 적용 해 볼 겁니다! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Document #pic{ width: 300px; height: 300px; } #wrapper{ margin: auto; width: 320px; height: 320px; text-align: center; } Colored by Color Scripter cs 전체 코드구요. border-radius: 10%; pic 스타일시트에 옵션을 적용 해 봅시다 모서리에 굴곡이 생기는 것을 볼 수 있죠 퍼센트로 50%를 주게 되면 완벽한 원형이 됩니다. 여기서 하나 느낄 수 있는 단점은.. 사이즈를 ..

상기 이미지처럼 회전하는 애니메이션 효과를 CSS로 적용해보도록 하겠습니다! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Document #ball{ animation-name: ball-rotate; animation-duration: 8s; animation-iteration-count: infinite; animation-delay:0ms; animation-timing-function: linear; } @keyframes ball-rotate{ from{transform: rotate(0deg);} to{transform: rotate(720deg);} } Colored by Color Scripter cs..

보편적으로 블로그에서 많이들 쓰는 상기 모양으로 레이아웃을 만들어 보겠습니다. HTML은 inline과 block 그리고 inline-block 총 세가지 속성으로 나뉘어집니다. inline 형식은 일반적인 줄글형식처럼 옆으로 쭉 써지는 방식이며 width, height등 사이즈를 조절할 수 없습니다. block 형식은 자동으로 전, 후 줄바꿈이 들어가 같은 줄에 다른 어떠한 컨텐츠도 용납하지 않습니다. inline-block 형식은 inline형식과 동일하게 줄글형식으로 사용이 가능하며 block 형식처럼 사이즈 조절이 가능합니다. 기본적으로 div 태그는 block형식을 취하고 있어 따로 속성을 주지 않을 시 이런식으로 이루어지게 됩니다. 이 모양으로 만들기위해 제일 외부에 wrapper 라는 클래스..