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의 스크립트를 추가한것보다 더 효율적일 수 있습니다. 그래서 든 생각인데 별도의 프레임워크에 기대지 않으면서 위의 몇가지 이슈를 모두 해결해주는 깔끔한 스크립트가 공개되면 사소한 고민을 털어버릴수 있지 않을까 싶습니다. :)

전체 695건
번호 카테고리 제목 출처 등록일 조회
공지 XE 기능개선 XE 1.11.18 이후 버전의 익명 수정 버그 수정법 xetown  2023.10.07 3201
공지 XE 기능개선 XE 1.11.14 보안패치 - 타인의 쪽지 내용을 확인할 수 있는 버그 패치방법 xetown  2023.10.03 3267
공지 XE 기능개선 XE 1.11.6 이후 보안배치 #4 file rhymix  2022.07.05 3434
공지 1.11.6 XE 1.11.6 이후 보안배치 #3 rhymix  2022.04.02 3380
공지 1.11.6 XE 1.11.6 이후 보안배치 #1 xetown  2021.06.22 3778
공지 1.11.6 XE 1.11.6 이하 에서 공개댓글을 비밀댓글로 변경시 생길 수 있는 오류 수정법 sejin7940  2021.01.10 3698
공지 XE 기능개선 XE 1.11.4 이후에서 파일 업로드시 정상 작동 안 하는 현상 수정법 XE github  2019.04.02 6452
공지 XE 기능개선 php 7.1 환경에서 XE 오류 나는 경우 확인할 사항 sejin7940  2018.07.11 6375
공지 유용정보 php7.2 환경에서 XE 오류가 생기는 경우 - Object 클래스 변경 필요 XE Github  2017.11.27 9950
공지 XE 기능개선 XE 1.8.30 이하에서 반드시 수정해주셔야하는 부분입니다. XE 1.8.31  2017.02.26 7160
공지 1.8.18 XE 1.8.18 에서 사용시 반드시 수정해야할 사항들 ( XE 1.8.20 이후에서는 수정 불필요 ) xetown  2016.04.03 26282
공지 XE 기능개선 XE 1.8.12 이후부터 proc controller 일부가 작동 안 할 경우 확인할 부분 [1] XE  2015.10.16 26201
695 유용정보 구글 애드센스 광고가 없을때 해당 영역 숨기려면 sejin7940  2024.11.19 0
694 라이믹스 selectbox 형태를 사용시 빈값 (공백) 을 제일 앞에 추가하고 사용자정의 이름이 기본으로 출력되게 하려면 sejin7940  2024.11.06 0
693 라이믹스 라이믹스 DB 및 쿼리 query 와 XML 문법 안내 rhymix  2024.11.09 1
692 라이믹스 게시판 검색어가 40자로 제한되어있음. 이를 늘리려면 sejin7940  2024.10.25 8
691 라이믹스 라이믹스에서 글 복사, 이동, 휴지통 이동, 삭제 등시 쪽지 발송 안 되도록 sejin7940  2024.10.25 8
690 유용정보 "스팸방지 CAPTCHA 서버와 통신하는 도중 오류가 발생했습니다." 라는 에러가 뜨는 경우 sejin7940  2024.10.14 15
689 XE 기능개선 XE 1.8.3 미만에서 우리메일 ( ggmailing ) 연결방법 XE  2024.07.06 49
688 XE 기능개선 스케치북에서 임시저장 후 불러오기시 상태(공개,비밀글) 값이 선택 안 되는 현상 수정법 sejin7940  2024.05.07 52
687 유용정보 웹푸시 등을 사용할 경우 알림이 24개까지 누적이 되면 더 이상 알림이 오지 않는 현상 samsung  2024.05.14 68
686 유용정보 윈도우 화면 분할 기능 끄기 위시랜  2024.05.24 69
685 유용정보 정규식으로 img 테그만 제거 its me  2024.04.13 70
684 유용정보 css, js 파일 수정 후 적용 안될 때 jurin.log  2024.05.14 73
683 유용정보 calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수 사용시 주의할 점 sejin7940  2024.02.12 89
682 유용정보 XE에서 대표 썸네일 및 파비콘 등록 관련하여 sejin7940  2024.05.14 90
681 유용정보 스케치북 스킨에서 모바일에서 view 화면에서 사진 위에서 스크롤이 안 되는 현상이 발생할때 sejin7940  2024.02.21 91
680 유용정보 php 버전이 낮을 경우 php 서버 업데이트를 반드시 해야하는 이유 sejin7940  2024.05.13 91
679 XE 기능개선 글등록 후 페이지 이동되기 전에 alert 이나 특정한 행위를 하고픈 경우.. sejin7940  2024.02.04 92
678 유용정보 cdn 이 오류날때 임시 우회 방법 xetown  2024.05.03 92
677 다른 XE자료들 출석부(attendance) 모듈에서 특정 유저들이 출석 불가능한 경우 오류 수정법 sejin7940  2021.03.17 117
676 XE FAQ 게시판에서 등록일 기준 검색은 없나요? sejin7940  2023.03.31 120
XE Login