Hello Jay's Programming World!

HTML5 button Element의 경우, submit하는 것이 기본 동작이므로 버튼을 클릭했을 경우, form을 submit하는 동작을 시도합니다. 그래서 일반적인 버튼으로서 동작을 하게 하기 위해서는 button의 type을 명시해야합니다. Button 위와 같이 type="button" attribute를 추가하면 form submit 동작을 하지 않습니다.

HTML에 버튼을 생성하면 OS 환경에 따라 다른 모양의 버튼이 만들어집니다. 왼쪽 버튼은 button 태그를 이용하였고, 오른쪽 버튼은 input 태그를 이용하여 만들었습니다. 같은 태그를 사용해서 만들었는데, 아래와 같이 OS에 따라 다른 것을 확인할 수 있습니다. MacOS Windows iOS Android 그럼 같은 모양으로 만들기 위해 CSS를 사용해보도록 하겠습니다. 먼저 같은 모양으로 만들기 위해 appearance: none CSS를 이용했습니다. Firefox와 Safari 그리고 Chrome에서도 동작하도록 했습니다. 아래와 같이요. -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ ..

안녕하세요. Jay 입니다. 오늘은 JavaScript를 이용한 클래스 제어 방법에 대해서 알아보도록 하겠습니다. 먼저 Element.classList의 반환형은 'DOMTokenList'입니다. 이 DomTokenList의 메서드는 많은 것이 있지만, 오늘은 세가지만 살펴보려고 합니다. Element.classList.toggle toggle, 전등 스위치를 껐다 켰다 하는 행위 처럼, 0과 1이 반복되는 행위를 의미합니다. 즉, 기존 값이 0이었다면 1로 바뀌고 기존 값이 1이었다면, 0으로 바뀌게 됩니다. 그래서 toggle 메서드는 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가하는 메서드입니다. Element.classList.add 명시된 클래스를 추가하는 메서..

숫자만 입력 받을 수 있는 Input 요소를 만들기 위해 input type="number"로 지정하여 사용합니다. 안드로이드의 경우, type만 "number"로 지정하면 숫자 키보드가 뜨는데, iOS는 일반 키보드가 뜨는 것을 확인 할 수 있습니다. iOS에서도 숫자 키패드만 뜨도록 하기 위해서는 아래와 같이 패턴을 넣어주면 iOS 숫자 키보드가 뜨는 것을 확인할 수 있습니다.

Audio 태그는 웹 페이지 내에서 오디오를 내장하기 위한 기본적인 방법입니다. 크롬도 지원하고 Internet Explorer도 9.0부터 지원합니다. 아주 휼륭하죠? 기본적인 사용법은 안에 태그를 넣으면 됩니다. 아래와 같이 테스트를 해볼 수 있습니다. 테스트를 해보니 Source의 순서도 의미가 있는 것을 확인했습니다. 위쪽 Source가 우선순위를 가지고 사용됩니다. 만약 지원하지 않는 포멧이라면, 다면 다음 소스를 사용합니다. 그렇다면 Audio에 Base64 문자열을 source로 쓸 수 있을까요? 한 번 테스트를 해보았습니다. 샘플은 아래와 같습니다. Source 태그를 반드시 사용해야하는 것은 아니기 때문에 생략했습니다. Base64 문자열로도 사용할 수 있음을 확인했습니다.

block 한 줄을 모두 차지하며 엘리먼트가 배치된다.ex) div, p, form, header, footer, section 등 inline 줄 바꿈 없이 다른 엘리먼트들과 같은 줄에 엘리먼트가 배치됨. 요소를 구성하는 태그에 할당된 공간만 차지한다. 예를들어 width, height 속성을 주더라도 무시되고 자식 엘리먼트들의 공간만 차지한다.ex) span, a 등.. none 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는데 사용한다.참고) Visibility: hidden은 자리는 차지하되 모습만 감추는 것으로 display: none과는 다르다. 참조: http://ko.learnlayout.com

!important는 css 적용 순서를 무시하고, !important를 선언한 속성을 가장 높은 우선순위를 부여합니다. placeholder 색상을 지정했는데, IE에서만 제대로 적용되지 않는 현상이 있었습니다. 아래와 같이 구현을 했는데, IE에서는 Input Dom에 적용한 color의 우선순위가 높아 해당 color의 색상이 적용되고 있었습니다. 이를 해결하기 위해 !important를 사용했습니다. 해당 css가 가장 우선순위가 높도록 수정했습니다. 이 방법을 사용하면 IE에서도 동일하게 placeholder의 색상을 표현할 수 있습니다.