wazac

웹의 기술이 발전하면서 점차 많은 효과를 스크립트와 CSS로 처리하고 있습니다. 이를위해 기본적으로 가장 많이 사용하는 효과를 간단하게 구현해 보도록 할께요. 진짜 초초초초초초초초초 간단한거라서 뭐 .. 도움이 될까 싶지많은 입문자들에게는 또 필요할 수 있잖아요?????????! 아무튼 제가 구현할 효과는 이런거예요. 진짜 간단하쥬? 특히 CSS에 관련된 내용은 아니므로 스타일은 배제했습니다. 물론 그렇다고 CSS를 아예작성하지 않는 것은 아니예요 - html 1 2 3 4 5 6 7 Javascript React Angular Vue JQuery Colored by Color Scripter cs 그리고 css는 우리가 어떤 효과를 줄것인지 잘 생각해보고 작성해봅니다. 디폴트는 처음 액션 그리고 act..

첫 playground 게시글이네요. 알고있는 지식으로 충분히 재밌는 것들을 만들어볼 수 있다는 것을 목표로 만든 게시글입니다. 최초로 게시하게될 글은 바로 랜덤숫자맞추기 게임입니다. * 결과화면 결과화면을 보고 유추하여 먼저 직접 만들어 보시고 나중에 비교해보는것을 추천드려요. 제 코드가 똥코드일수도있잖아요 * 기능설계 간단하게 화면, 기능에서 해야할 일을 나열해보도록 하겠습니다. 1. 시작버튼 클릭 1-1. 화면 - "내가생각하는 숫자를 맞춰 보세요(1부터 100까지)" 문구 출력 - 일력Input, 제출Button, 기회cnt(maxCnt)번 남았어요 출력 1-2. 기능 - 맞춰야할 랜덤 숫자 생성 - input clear, input disabled=false, input에 focus - 기회cn..

모바일개발시 알아주면 좋은 HTML/CSS이 있습니다. 기본적인것도 있고 자주사용하는 것들입니다. 모바일 개발을 처음 하게된다면 거의 필수적으로 사용하게 될 것들입니다. 1. viewport meta 태그 2. @media query 사용하기 3. 해상도별로 css 적용하기 4. 모바일 상단 화면 색 바꾸기 5. 해상도별 사이즈 자동화! vw단위 1. viewport meta 태그 content 에 width=device-width 로 브라우저 너비를 장치 너비에 맞추어 표시하게됩니다. initial-scale로 기본 확대너비를 사용한다던지 (1.0 = 100%), use-scalable=no 를 설정하면 모바일에서 확대를 강제로 막을수도 있습니다. 사용예시) 1 cs 만약 viewport meta태그를..

javascript나 jquery를 사용하지 않고 CSS 만으로도 순서대로 값을 넣어줄수 있습니다. counter-reset 속성으로 적용할 counter의 이름을 지정해 준후 counter-increment를 사용하면 자동으로 증가하여 숫자가 나타납니다. 주의할 점은 counter의 이름으로 "none", "inherit" 등의 기본적으로 사용되는 속성값을 사용하면 안됩니다. 1. 일반 카운터 - HTML 1 2 3 4 5 6 7 8 Javascript CSS JQuery Colored by Color Scripter cs - CSS 반복되는 요소의 부모에 counter-reset을 걸어주고 반복되는 요소에 counter-increment를 사용하면 자동으로 값이 증가합니다. 그리고 content 안에..