WEBDIR

CSS3 이면가시성(backface-visibility) 속성

괜스레 우리말로 번역한다고 더 어려워진 단어 같군요. backface-visibility 속성을 이용하면 어색한 CSS 효과를 수정할 수 있습니다. backface-visibility 속성 소개 이 속성은 3D transform(변형)과 연관되어 있으며, 입체적인 모습의 뒷면의 가시성을 결정하는 속성이다. 즉, 변형이 가해져 요소의 뒷면이 보여지게 될때, 이 속성으로 숨기거나 보여지게 할 수 있다. 대부분 어색한 번쩍이는 효과로 인해 이를 숨기고 싶어할 것이다. div { -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden; } backface-visibility 속성값 hidden : 이면..

웹코딩/CSS 2015. 7. 29. 11:00

CSS3 외형(Appearance) 속성

조금은 생소할 수도 있는 appearance 속성에 대하여 설명합니다. 이 속성은 크로스브라우징을 할때, 알아두면 곤란함을 줄일수 있습니다. appearance 속성 소개 이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다. 즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다. div { appearance: button; -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Safari and Chrome */ } 예를 들면 iOS의 폼 요소들에 부여되어 있는 둥근 테두리값이나 그림자 효과를 제거할때 사용할 수 있다. webit 계열의 브라우저의 type="sear..

웹코딩/CSS 2015. 7. 28. 10:00

폼 필드(input type="file") 디자인 #4

폼 필드 디자인중 마지막을 장식할 파일 필드에 대한 내용입니다. 이 또한 브라우저 호환에 어려움을 겪곤 하는데, 관련해서 대안책들을 알아봅니다. 파일 필드 디자인 현황 파일 필드의 디자인은 브라우저마다 제 각각이며, 선택한 파일의 이름을 표시하는 부분과 업로드 버튼이 한데 묶여 있어 이를 각자 컨트롤할 수 있는 방법이 없다. 또한 스타일링을 위해 CSS를 적용해보면 어떤 것은 내부 박스에 영향을 주고 어떤것은 외부를 감싼 박스에만 영향을 미친다. 이미 기능과 디자인을 향상시킨 파일 업로드 관련 플러그인들이 많이 존재하니 가능하다면 그것들을 사용하길 바란다. 아래에서는 기본적인 파일 필드 디자인과 기능을 흉내내는 것에 대하여 다루어 본다. 파일 필드 버튼형 디자인 기본 구조는 아래와 같다. 업로드 상호작용..

웹개발론/크로스브라우징 2015. 7. 27. 16:00

폼필드(체크박스, 라디오) 디자인 #3

체크박스와 라디오버튼의 정렬과 디자인은 예전부터 골치를 아프게 하는 작업이였습니다. 관련하여 현재 애용되는 디자인 방법과 브라우저 호환성을 확보하는 방법에 대하여 알아봅니다. 체크박스와 라디오버튼 디자인 현황 모던 브라우저들과 IE11은 체크박스와 라디오버튼의 크기정도는 조정할 수 있다. 모바일 브라우저에서는 기본으로 제공되는 체크박스와 라디오버튼의 선택영역이 매우 작게 표시되어 선택의 불편함이 가중되기에 이 크기를 변경하는 것이 추천된다. webkit 브라우저들에서는 -webkit-appearance: none 과 같이 네이티브 속성값을 제거하여 좀 더 다른 디자인을 구현할 수 있지만, 브라우저 호환이 되지 않는 단점이 있다. 이를 극복하기 위해 checked 속성을 이용하여 체크박스와 라디오를 꾸미는..

웹개발론/크로스브라우징 2015. 7. 27. 11:00

폼 필드(select 박스) 디자인 #2

폼 필드들 중에 가장 디자인하기 까다로운 것이 select 박스입니다. 이에 대한 현실을 파악하고 대체방안들을 모색해 봅니다. Select 디자인의 현황 네이티브 select 박스의 디자인상의 한계로 인해 많은 플러그인들에서 select 박스의 구조를 div 와 ul 요소등으로 치환하여 사용한다. 물론 근래의 대부분의 플러그인이 그렇듯이 구버전의 IE에 대한 지원이 부족하다. 그나마 오래전에 개발된 jQuery Selectbox plugin 정도가 구형 IE를 지원한다. 이 플러그인의 CSS를 수정하여 원하는 디자인을 구축하는게 손쉬운 방법일 터이다. 다만, 이와 같이 select 박스를 div와 ul 요소로 치환하는 방법들은 모바일상에서 각각의 기기들이 네이티브로 지원하는 효과를 받을 수 없게된다. 작..

웹개발론/크로스브라우징 2015. 7. 24. 06:00

폼 필드(input type="text") 디자인 #1

계속해서 이어지는 폼관련 요소들에 대한 이야기입니다. 폼의 각 필드들을 디자인하면서 고민했던 점들과 대안책들을 순차적으로 다루어 봅니다. label 요소와 placeholder 속성 구분 label 요소는 for 속성과 연결된 필드들(input, select, textarea, checkbox, radio)를 가르키는 요소이다. 즉 입력필드들의 제목과 같은 역할을 하며, 때로는 이 요소를 이용해서 상호작용을 대신할 수 있다. placeholder 속성은 텍스트 필드에 힌트를 제공하는 예제와 같은 역할을 한다. 이를 label 요소를 대체할 목적으로 작성하는 것은 원칙적으론 잘못된 것이다. 게다가 placeholder 속성은 IE9 이하에서는 지원하지 않기때문에 폴리필(대체방안)을 필요로 하게 된다. 모바..

웹개발론/크로스브라우징 2015. 7. 21. 10:00

input 이벤트 감지 크로스브라우징

폼 검증을 위해 값의 변경을 감지한 후, 이벤트를 수신하여 유효성 검증을 하고 오류 메세지를 표시하는 작업에 열을 올리고 있었습니다. 실시간으로 변경되는 값을 수신하고 싶었고 관련하여 이벤트의 종류와 기능을 살펴보다가 어느정도 결론에 도달하여 내용을 공유합니다. 폼 검증시 사용되는 이벤트 기본적으로 폼 검증시에는 해당 input 필드에 값이 입력되고 포커스가 해제되면 발생하는 blur이벤트를 많이 사용한다. 대부분의 경우 유효한 방법이지만, 작성이 완료된 필드에 다시 돌아가는 일은 사용자 입장에서 여간 귀찮은 일이 아닐수 없다. 경우에 따라서는 키가 입력되는 순간 순간에 유효성을 검증해야 하는 경우도 생긴다. 아래의 예처럼 말이다. 실시간 이벤트 감지 사례 회원가입 폼에 대한 유효성 검증중에 비밀번호와 ..

웹개발론/크로스브라우징 2015. 7. 20. 14:42

Parsley validator(폼유효성 검증) remote와 extra #5

파슬리가 추가로 제공하는 ajax를 이용한 원격 유효성 검증과 기타 검증기들을 소개합니다. Parsley Remote Parsley remote는 고유한 ajax 비동기 검증을 추가하는 편리한 플러그인이다. 이 플러그인의 사용은 parsley.js가 로딩되기 전에 parsley.remote.js를 로드하거나 직접적으로 parsley.remote.js를 로드한다. 옵션들 Name API Description Remote validator data-parsley-remote #2.0 입력된 내용을 검증하기 위해 호출되는 URL을 정의한다. 예: data-parsley-remote="http://url.ext" Reverse data-parsley-remote-reverse #2.0 기본적으로 모든 2xx a..

웹코딩/App,Plugin 2015. 7. 17. 11:00

Parsley validator(폼유효성 검증) UI와 이벤트 #4

파슬리의 UI들의 작동 방식과 클래스들, 그리고 이벤트에 대하여 알아봅니다. Parsley UI/UX 파슬리는 클래스들, 오류 메시지, 포커스 혹은 페이지를 변경하는 트리거 이벤트들에 응답하는 UI/UX 컴포넌트를 포함한다. UX 친화적이기 위해 노력하고 있으며, 파슬리 UI의 모토는 아래와 같다. 최소화된 문자 검증 : 파슬리는 3글자보다 적은 입력에선 기본적으로 검증을 진행하지 않는다. 너무 빠른 검증으로 오류 메세지를 출력하여 사용자를 불편하게 하지 말자. 한번에 한가지 오류 : 필드의 몇몇이 검증을 통과하지 못하면 가장 중요한 하나를 보여주게 되며, 그것은 파슬리의 우선순위에 따른다. 빠른 오류 제거 : 필드가 유효하지 않음을 감지했을때, 각각의 키입력(keypress)을 확인하여 필드가 유효화되..

웹코딩/App,Plugin 2015. 7. 16. 02:42

Parsley validator(폼유효성 검증) 내장된 유효성 검증기 #3

파슬리에는 미리 제작되어 포함하고 있는 유효성 검증기들이 마련되어 있습니다. 간단한 검증은 이것들을 이용해서 검증을 하게 되니 이 내장된 검증기들에 대하여 알아봅니다. Parsley 내장된 검사기 파슬리 2.x는 일반적으로 사용되는 유효성검증기이고 그룹과 우선순위 검증을 단순화한 validator.js를 기반으로 한다. 그러므로 파슬리는 validator.js와 검증을 공유하고 Callback Assert를 사용하여 새로운 것을 정의할 수 있다. 파슬리 프로젝트에 validator.js를 사용하라 파슬리는 window.ParsleyValidator.Validator 로 validator.js를 사용할 수 있다. Parsley 검증기 목록 Name API Description Required #2.0 HT..

웹코딩/App,Plugin 2015. 7. 15. 11:00

Parsley validator(폼유효성 검증) 사용법 #2

이전 장에 이어 파슬리 유효성 검증의 사용법에 대하여 알아봅니다. 실질적으로 폼에 유효성 검증을 구현하는 부분입니다. Parsley 기본 API 파슬리는 무거운 작업을 수행할 수 있게 다른 클래스를 사용하는 분리된 라이브러리이다. 어떻게 원하는 검증에 맞게 구성할 수 있는지 살펴보자. $ API Retrun $('#existingForm').parsley(options) #2.0 parsleyFormInstance $('#existingInput').parsley(options) #2.0 parsleyFieldInstance $('#notExistingDOMElement').parsley(options) #2.0 undefined $('.multipleElements').parsley(options) #..

웹코딩/App,Plugin 2015. 7. 14. 11:00

Parsley validator(폼유효성 검증) 소개 및 설치, 구성요소 살펴보기 #1

폼의 유효성을 검증하는 플러그인들 중에 Parsley 라는 jQuery 플러그인이 있습니다. 디자인적인 면도 고려해서 클래스를 DOM에 붙여 주기 때문에 쉽게 활용할 수 있을꺼라 생각해 관련 문서를 발번역하였고, 이를 수정해서 아래의 내용을 작성하였습니다. 참고가 되시길 바랍니다. 폼(form)안에 존재하는 각각의 입력양식들, , , 와 같은 요소들을 필드(field)라고 부릅니다. Parsley 소개 여기서 설명하는 파슬리는 먹는 그 파슬리는 아니고 자바스크립트로 만든 폼 검증 라이브러리이다. 실제 검색을 하면 먹는 파슬리만 주구장창 검색되니, Parsley js로 검색하길 바란다;;. 서버로 폼을 제출하기전에 작성한 폼에 대한 피드백을 사용자에게 제공하여, 서버부하를 줄이고 폼 검증에 소모되는 사용자..

웹코딩/App,Plugin 2015. 7. 13. 11:00

XAMPP phpMyAdmin 외부 접속

XAMPP의 기본 phpMyAdmin 설정은 localhost에서만 접속이 가능합니다. 보안상의 이유이지만 필요에 의해 개방해야할 경우 이를 수정하는 법을 알아봅니다. phpMyAdmin 설정 위의 액세스 금지 이미지같이 도메인/phpmyadmin으로 접속하면 접근 권한이 없다는 메세지를 접하게 된다. xampp.conf에서 설정할 수 있다고 힌트를 주고 있는데, 정확한 주소는 xampp/apache/conf/extra/httpd-xampp.conf 에 위치하고 있다. 파일을 열어보면, 최하단에 아래와 같은 부분을 발견할 수 있다. # # New XAMPP security concept # Require local ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var

개발도구/XAMPP 2015. 7. 9. 11:00

input type="submit" vs button 비교

프로젝트를 진행하면서 로 폼의 내용을 전달하는 경우를 많이 접하게 되었습니다. 습관적으로 button 요소로 이를 대체하다가 문득 둘의 차이점이 궁금해서 검색을 해보았고 이와 관련된 내용을 정리합니다. button은 기능적으로 차이가 없을까? 폼 전송 기능을 하는 과 은 기능적으로 동일하다. 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다. 즉 폼에서 이를 대체하기 위한 목적으로는 안성맞춤이다. button 속성값 브라우저별 기본 button 요소의 기능이 상이할 수 있으니 되도록 이를 명시하도록 하자. type="submit" : 폼의 전송 기능을 담당한다. type="reset" : 폼 작성 내용을 초기화하는데 사용한다. type="button" : 흔히 자..

웹코딩/HTML 2015. 7. 8. 11:00

GitLab과 GitHub Windows 연동하기

Git을 윈도우즈에서 사용하면서 명령어를 직접 사용하는 것이 익숙치 않아 곤란한 경우가 있습니다. tortoisegit을 대용으로 사용해 왔으나 불편함이 가시지 않아 Git 자체를 멀리하게 되던 찰나에 GitHub에서 제작한 윈도우즈용 Git툴이 제작되었습니다. Git을 사용하는 GitLab과 bitbucket에서도 모두 사용가능하다는 걸 알게되어 GitLab과의 연동 내용을 정리합니다. GitLab 선택의 이유 GitHub가 많이 이용되지만 공개된 프로젝트만 무료로 제공되기에 비공개 프로젝트의 저장소로 사용하기 위해선 요금지불이 필수다. Git 사용법도 미숙한데 비용지불이 왠말이냐... 그래서 GitLab에서 비공개 프로젝트를 테스트 삼아 진행해본다. 윈도우즈에서 Git 사용환경 구축하기 msysgit..

개발도구/Git 2015. 7. 7. 11:00