개발

간단한 카운터기능과 자동으로 그 기능을 반복해주는 기능을 만들어 봅시다! 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%를 주게 되면 완벽한 원형이 됩니다. 여기서 하나 느낄 수 있는 단점은.. 사이즈를 ..

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