RX/XE 팁
XE FAQ 는 제가 XE공홈 '묻고 답하기'에 답변한 내용들 중 일부를 정리한 내용입니다. (대부분이 제가 한 답변이죠)
XE Tips 는 제가 XE 공홈에 쓴 XE 관련 유용한 팁들입니다. 기능개선은 공홈에 안 적어둔 XE 유용 개선팁들입니다.
유용정보는 외부 검색을 통해 알아낸 소스등을 기재해둔 곳입니다.
버그 신고내역들은 XE 사용하다가 발견한 버그 패치방법들로, Core Issue 에 기록해뒀기에 XE 에 적용이 되었을 가능성이 있겠죠

제가 쓴 글들에 대해 퍼가실때는 꼭 출처를남겨주시고.. (다만 플래시뷰 기반이기에 퍼가기는조금 힘들 수 있겠죠 ^^;)
타회원의 글들도 적혀있는 출처를 같이 꼭 기재해주세요
출처 clearboth 
출처URL http://www.clearboth.org/how_to_use_placeholer/ 

placeholder 속성은 한 단어나 짧은 구로 이루어진 ‘힌트’를 나타냅니다. 이러한 힌트는 사용자가 입력 상자에 데이터를 입력하는데 도움을 줍니다. 보통 아이디나 비밀번호를 입력하는 UI에서 ‘아이디를 입력하세요’나 ‘영어와 숫자로 이루어진 비밀번호를 입력하세요.’와 같은 메시지를 입력 영역의 자리에서 제공하는 경우에 사용됩니다.

다음과 같이 마크업합니다.

  1. <label>비밀번호: <input type="password" name="password"></label>

브라우저에서는 다음과 같이 나타납니다.

Placeholder 1

그리고 입력 상자에 커서가 위치하게 되면 다음과 같이 placeholder 속성의 값으로 작성된 문자열이 사라지는 것을 볼 수 있습니다.

Placeholder 2

placeholder 속성을 사용하지 않았을 경우에는 추가적인 마크업이 필요했습니다.

  1. <label>비밀번호: <span class="placeholder">비밀번호를 입력하세요</span> <input type="password" name="password" ></label>

또한, 이것만으로는 placeholder 메시지가 입력 상자 위에 위치한 것처럼 보이도록 만들수 없기 때문에 CSS를 함께 적용해야만 했습니다.

  1. label{position:relative;}
  2. label .placeholder{position:absolute;top:4px;left:50px;z-index:2;}

위와 같이 .placeholder 클래스를 갖는 span 요소를 절대 위치로 정의하여 입력 상자 위에 떠 있는 것처럼 보이도록 스타일링을 해야 했습니다. 여기서 입력 상자에 포커스가 위치한 경우 placeholder 메시지를 감추어야 하기 때문에 추가적인 스타일과 자바스크립트 함수가 필요하게 됩니다. 이것만 보더라도 HTML5의 placeholder 속성이 얼마나 유용한지 알 수 있습니다. 하지만 안탑깝게도 모든 브라우저에서 이 속성을 사용할 수는 없습니다. 예상하겠지만 IE는 6~9사이의 어떤 브라우저도 HTML5의 placeholder 속성을 지원하지 않습니다. 방법은 있습니다. 부담스럽다고 느낄수 있겠지만 Nikita Vasilyev가 만든 placeholder.js 스크립트를 사용하면 IE에서도 동일한 효과를 얻을 수 있습니다. IE6에서조차도 작동하는 것을 볼 수 있습니다. https://github.com/NV/placeholder.js 에서 소스를 구할 수 있습니다.

Placeholder 3

다만, IE에서는 password 타입의 입력 상자에서는 placeholder 텍스트를 제대로 보여주지 못합니다. 또 한가지 고민이 있습니다. 현재 개별 브라우저는 placeholder 텍스트에 대한 스타일 지원이 미흡합니다. 때문에 디자이너가 사용자가 입력하는 텍스트와 placeholder 텍스트를 구분하여 색상과 글꼴을 디자인했다면 우리는 이를 해결할 필요가 있습니다.

우선 다행스러운건 Nikita Vasilyev의 스크립트가 placeholder 텍스트의 색상을 지정할 수 있도록 돕고 있다는 점입니다. Nikita Vasilyev의 스크립트를 직접 고치지 않았다면 placeholder 기능이 추가된 입력 요소들은 .text-placeholder 클래스를 갖도록 설계되어 있습니다. 따라서 다음과 같은 CSS를 추가만 해 주면 됩니다.

  1. .text-placeholder{color:blue;}

Placeholder 4

IE7에서 본 화면입니다. placeholder 텍스트가 CSS에서 정의한대로 파란색으로 나타나는 것을 볼 수 있습니다. 그런데 이번에는 크롬과 사파리 그리고 파이어폭스에서 문제를 일으킵니다. 이들 브라우저에서는 파란색으로 보이지 않습니다.

Placeholder 5

Placeholder 6

Placeholder 7

웹킷 기반의 크롬과 사파리 그리고 파이어폭스는 placeholder 텍스트를 CSS에서 처리할 수 있도록 벤더 전용 속성을 제공하고 있었습니다.

  1. ::-webkit-input-placeholder{color:blue;} /* 웹킷 전용 속성 */
  2. textarea:-moz-placeholder, input:-moz-placeholder{color:blue;} /* 파이어폭스 전용 속성 */

Placeholder 8

이제 크롬과 사파리, 파이어폭스에서도 파란색 placeholder 텍스트를 볼 수 있습니다.

[데모]

placeholder 속성은 전통적인 방식을 매우 경제적으로 만들어줍니다. 마크업을 추가하고, CSS로 포지셔닝을 하고, 자바스크립트로 사용자 클릭에 따라 보여지거나 감추어지는 동작을 구현해야 하는 과정을 마크업 속성 하나로 처리하기 때문입니다. 하지만 낡은 IE들은 속성을 지원하지 않고 있다는 것이 다시 한 번 우리를 실망스럽게 만듭니다. 그렇지만 이미 jQuery를 사용하고 있다면 Nikita Vasilyev의 스크립트를 추가하여 위와 같이 placeholder를 구현하는 것은 그렇게 나쁜 방법은 아닐겁니다. 이미 우리는 이 기능을 위해서 함수를 만들어 사용하고 있었으니까요.

솔직히 심플하게 작성된 placeholder 함수가 HTML5의 placeholder 속성에 NV의 스크립트를 추가한것보다 더 효율적일 수 있습니다. 그래서 든 생각인데 별도의 프레임워크에 기대지 않으면서 위의 몇가지 이슈를 모두 해결해주는 깔끔한 스크립트가 공개되면 사소한 고민을 털어버릴수 있지 않을까 싶습니다. :)

전체 692건
번호 카테고리 제목 출처 등록일 조회
공지 XE 기능개선 XE 1.11.18 이후 버전의 익명 수정 버그 수정법 xetown  2023.10.07 3192
공지 XE 기능개선 XE 1.11.14 보안패치 - 타인의 쪽지 내용을 확인할 수 있는 버그 패치방법 xetown  2023.10.03 3259
공지 XE 기능개선 XE 1.11.6 이후 보안배치 #4 file rhymix  2022.07.05 3419
공지 1.11.6 XE 1.11.6 이후 보안배치 #3 rhymix  2022.04.02 3376
공지 1.11.6 XE 1.11.6 이후 보안배치 #1 xetown  2021.06.22 3770
공지 1.11.6 XE 1.11.6 이하 에서 공개댓글을 비밀댓글로 변경시 생길 수 있는 오류 수정법 sejin7940  2021.01.10 3693
공지 XE 기능개선 XE 1.11.4 이후에서 파일 업로드시 정상 작동 안 하는 현상 수정법 XE github  2019.04.02 6446
공지 XE 기능개선 php 7.1 환경에서 XE 오류 나는 경우 확인할 사항 sejin7940  2018.07.11 6360
공지 유용정보 php7.2 환경에서 XE 오류가 생기는 경우 - Object 클래스 변경 필요 XE Github  2017.11.27 9887
공지 XE 기능개선 XE 1.8.30 이하에서 반드시 수정해주셔야하는 부분입니다. XE 1.8.31  2017.02.26 7152
공지 1.8.18 XE 1.8.18 에서 사용시 반드시 수정해야할 사항들 ( XE 1.8.20 이후에서는 수정 불필요 ) xetown  2016.04.03 26273
공지 XE 기능개선 XE 1.8.12 이후부터 proc controller 일부가 작동 안 할 경우 확인할 부분 [1] XE  2015.10.16 26103
572 유용정보 트위터 좋아요 버튼 관련 유용정보 naked strength  2013.06.02 4167
571 1.7.3.X 이전 XE 1.7.3.4 에서 레이아웃 설정의 메뉴가 계속 '시작메뉴가 있는 사이트맵'으로 설정되는 버그 sejin7940  2013.06.16 3873
570 XE FAQ XE 1.7 기반에서 admin_bar 없애는 방법 XE  2013.06.16 3551
569 유용정보 php 에서 배열의 정렬 방법 Park'S의 블로그  2013.06.16 3779
» 유용정보 HTML5의 placeholder 속성 clearboth  2013.06.21 5296
567 유용정보 label 요소를 checkbox 나 radio 에 사용하면 클릭에 편의성 제공가능 신현석 블로그  2013.06.21 3482
566 유용정보 optgroup 는 option 을 그룹화하여 구분하는 ㅌ그 sejin7940  2013.06.21 3192
565 유용정보 fieldset 과 legend 태그 웹표준스터디  2013.06.21 4179
564 유용정보 파일이 길 경우 에러가 나는 경우 해결방법 [1] BNU  2013.07.08 3106
563 1.7.3.X 이전 XE 1.7 기반에서 목록 추출시 추가 변수 전달시 주의점 sejin7940  2013.07.21 2758
562 1.7.3.X 이전 XE 1.5 를 1.7 로 업데이트한 경우, 카테고리 사용여부 설정 버그 수정법 sejin7940  2013.07.21 2938
561 XE FAQ 자료실 모듈 (resource) 섬네일크기 수정하는 방법은? sejin7940  2013.07.26 2812
560 XE FAQ 에디터 쓰던 글 자동저장 기능의 시간간격 조절하는 방법은? sejin7940  2013.07.26 2841
559 1.7.3.X 이전 XE 1.7 기반으로 DB 이전 (import)시 댓글이 이전이 안 되는 경우 sejin7940  2013.07.26 2988
558 XE FAQ 도메인을 변경했는데, 사이트 링크 클릭시 예전 주소로 자꾸 연결되는데? ( +라이믹스) sejin7940  2013.07.28 3785
557 XE FAQ 기존 게시물 이동 할 때 첨부파일을 지우지 않도록 하는 방법이 있을까요? sejin7940  2013.07.30 2741
556 XE FAQ 비회원 게시판 글쓰기 비밀번호 길이 제한이 없나요? sejin7940  2013.08.01 22402
555 XE FAQ 회원가입 축하 메일 및 쪽지보내는 방법? / 가입내역 관리자에게 보내려면? sejin7940  2013.08.01 3232
554 XE FAQ 추천수가 일정수준을 넘으면 게시판 이동하고싶습니다 송동우  2013.08.01 2874
553 XE FAQ 위젯 페이지에서 위젯을 사용하면 그 위젯은 어디폴더에 저장되죠? sejin7940  2013.08.02 2939
XE Login