jquery.countdown-2.0.4.zip
0.01MB

https://plugins.jquery.com/countdown/

 

The Final Countdown | jQuery Plugin Registry

The Final Countdown by Edson Hilios jQuery plugin to display a countdown clock on your page. Versions Version Date 2.0.4 Jun 3 2014 2.0.2 Dec 12 2013 2.0.2 Dec 12 2013 2.0.1 Nov 1 2013 1.0.2 Nov 1 2013 1.0.0 Apr 9 2013

plugins.jquery.com

jquery 카운트 다운을 사용한다 

 

<header>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="/asserts/jquery.countdown.js"></script>
    <script type="text/javascript" src="/asserts/jquery.countdown.min.js"></script>

<body>

    <div id="example1" data-countdown="01/01/2022 12:10:59"></div>
    <div id="example2" data-countdown="01/01/2022"></div>
    <div id="example3" data-countdown="2022/01/02 12:10:59"></div>
    <div id="example4" data-countdown="2022/01/02"></div>

    <script>
       $(function(){
        $('[data-countdown]').each(function() {
             var $this = $(this), finalDate = $(this).data('countdown');
             $this.countdown(finalDate, function(event) {
                $this.html(event.strftime('%D일 %H:%M:%S'))}).on('finish.countdown', function() {
                   alert("Finish"); 
                 });
            });
        });
    </script>

 

자세한 부분은 하단링크 참조

http://hilios.github.io/jQuery.countdown/documentation.html

 

Documentation - jQuery.countdown

Install We provide two installation methods: Bower bower install jquery.countdown Manual Download the files and add a script to your html: Requirements The latest versions supports jQuery from 1.7 up to >= 2.1. For legacy support (<= 1.6) please use the ve

hilios.github.io

 

 

SET GLOBAL sql_mode=(SELECT CONCAT(@@sql_mode, ',ONLY_FULL_GROUP_BY'));

 

css 의 !important는 가장 우선시해서 적용하겠다는 뜻이다 

다른 속성이있어도 !important를 따른다

웹에서 CSS를 적용할 때 webkit, moz, ms, o접두어가 속성앞에 붙은 것을 종종 보실 수 있을 겁니다. 크로싱 브라우저를 위해서 필요하기 때문이고, 주로 쓰이는 브라우저는 IE, 크롬, 파이어폭스, 오페라, 사파리가 있습니다. 우리나라에서는 크롬과 파이어폭스만 적용하면 무난하게 처리가 가능합니다.

 

브라우저 별 접두어 

  • -webkit- : 구글, 사파리 브라우저에 적용.
  • -moz- : 파이어폭스 브라우저에 적용.
  • -ms- : 익스플로러에 적용. (생략 가능)
  • -o- : 오페라 브라우저에 적용.

 

사용방법 

selecter {
    background:-webkit-linear-gradient(to bottom, skyblue, white 50%);
    background:-moz-linear-gradient(to bottom, skyblue, white 50%);
    background:-ms-linear-gradient(to bottom, skyblue, white 50%);
    background:-o-linear-gradient(to bottom, skyblue, white 50%);
    background:linear-gradient(to bottom, skyblue, white 50%);
}

브라우저 별로 적용할 스타일을 작성해 주고 맨마지막의 기본속성을 실행해 줍니다. 조금 번거롭더라도 사용자들의 편의를 위해 브라우저 별로 스타일을 지정해주는 것을 습관화 해두는게 좋습니다.

'코딩 공부 > HTML' 카테고리의 다른 글

html 체크박스 하나만 선택되게 하기  (0) 2022.01.03
CSS - !important 뜻  (0) 2021.12.02
Placeholder를 사용하지 마세요.  (0) 2021.12.02
HTML lable for  (0) 2021.12.02
HTML 인풋 타입  (0) 2021.12.01


https://ibrahimovic.tistory.com/30

 

Placeholder를 사용하지 마세요.

이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다. 자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다. 들어가면서 : placeholder 속성은 많

ibrahimovic.tistory.com

 

 

이 글은 Don’t Use The Placeholder Attribute 를 번역, 핵심 내용만 짧게 요약한 글입니다.

자세한 부가 내용을 알고 싶으신 분들은 원문을 읽어보시길 추천드립니다.

 

 

들어가면서 : 

placeholder 속성은 많은 이슈가 있다. 왜 이것을 사용하면 안되는지 알아보자.

 

HTML5 사양의 일부로 도입된 placeholder 는 input에 아무 값이 없을때 입력을 돕기 위한 간단한 힌트(단어 또는 짧은 문장)를 나타낸다. 힌트는 예제이거나 간략한 설명이 될 수 있다.

 

겉으로 보기에는 직접적인 도움이 되지만, 많은 문제점을 야기할 수 있다. 다행히 필자는 이 속성을 그만 사용할 수 있다고 확신한다.

 

 

문제점들

 

1. 번역

 

크롬과 같은 자동 번역 기능이 있는 브라우저에서 번역 요청시 속성을 건너 뛴다. 속성이 변경되면 페이지의 논리 구조를 손상시킬 수 있기 때문에 이것은 예상된 동작이다.

 

브라우저에서 건너 뛰는 속성 중 placeholder도 있다. 그래서 placeholder는 번역되지 않으며 기존 언어로 유지된다.

 

적절한 label 대신 placeholder만 사용했다면 이 언어에 익숙하지 않은 사람들은 정확히 이해하고 조작할 수 없을 가능성이 높다.

 

 

 

2. 상호 운용성(Interoperability)

 

상호 운용성은 서로 다른 시스템이 정보를 교환하고 이해하도록 하는 방법이고, 이것은 인터넷과 보조 기술의 기초가 되는 부분이다.

 

컨텐츠를 의미에 맞게 정의하면 상호 운용이 가능하다. 이것은 input과 label을 연결 시키는 방식으로 동작한다. label은 사용자로 하여금 목적에 맞게 입력할 수 있도록 설명한다. input과 label을 연결하는 방법 id와 for를 일치시켜 사용하는 것이다.

 

이 id와 for의 연결이 없으면 보조 기술은 입력내용을 알 수 없다. 스크린리더나 보이스오버를 사용하는 유저들은 이 내용을 읽거나 조작하기 힘들 수 있다.

 

 

 

필자가 이를 언급하는 이유는 label 대신 placeholder를 자주 사용한다는데 있다. 이 방식은 디자이너들에게 큰 환영을 받는 방식이다. label없이 배치된 input들은 정확한 그리드 효과를 줄 수 있기 때문이다.

 

페이스북 화면

 

 

이 현상과 밀접한 관련이 있는 '플로팅된 레이블 효과'를 통해 label을 placeholder처럼 활용할 수 있다.

 

 

 

3. 힌트가 사라짐

 

placeholder는 유저가 입력하는 순간 사라진다. 다시 힌트를 보는 유일한 방법은 입력하고 있던 모든 내용을 삭제하는 방법 뿐이다. 별로다!

 

 

 

새 암호를 만들어야 되는데 기억력이 좋지 않다면 극복하기 어려울 것이다.

 

(최소 길이 몇 자였지? 암호의 조건이 뭐였지??) 다 지우지 않는 이상 알 방법이 없다.

 

 

 

 

또한, 처음 서비스를 사용하는 사람은 이미 입력되었다고 생각할 수 있다. 필수 입력란이라면 오류를 발생 시킬 것이고, 필수 입력란이 아니라면 중요할 수 있는 보조 정보를 놓치는 위험이 있을 수 있다.

 

 

 

4. 힌트의 제한

 

placeholder는 input너비로 제한된다. 모바일웹일 경우 중요한 정보가 잘릴 수 있다.

 

(이 코드가 어디에 있는지는 절대 찾을 수 없다.)

 

 

 

 

 

 

5. 색상

 

보통 placeholder는 연한 회색으로 제공된다. 너무 작거나 옅은 색상은 접근성이 좋지 않다.

 

오히려 이 예제는 입력되어 있는것 처럼 보인다. 버튼의 체크 아이콘도 이미 체크되어 있는것 처럼 보인다..

 

 

 

고대비 모드 또한 문제가 될 수 있다. 위 이미지는 이미 값이 입력된것 처럼 보인다.

 

 

 

 

해결책

 

우선 문제점을 정리 해보면,

 

  • 자동 번역 불가
  • label대신 이용되는 사례
  • 내용 입력시 중요한 정보를 놓칠 수 있음
  • 색상/고대비등 접근성 문제
  • 제한된 스타일링
  • 미리 채워진 정보처럼 보여 건너뛸 수 있음

 

이 문제점들을 어떻게 해결할 수 있을까?

 

 

디자인

 

placeholder를 입력창 위, label아래로 이동

 

 

 

  • 시각적, 구조적 계층 구조 전달
  • 번역기능
  • 미리 채워진 정보로 보이지 않음
  • 저시력 환경에서도 구별 가능
  • 내용을 입력하면서 힌트 참고
  • 의미론적이며 CSS를 통해 스타일링 가능

 

또는 입력창에 포커스되면 도움말을 보여주는 방법도 가능하다. 하지만 소프트웨어 키보드를 사용하는 환경에서 아래쪽에 배치할 경우 가릴 수 있으니 주의.

 

 

 

 

 

 

개발

 

위의 디자인을 코드로 표현하면 아래와 같다.

 


<div class="input-wrapper">
<label for="employee-id">
Your employee ID number
</label>
<p
id="employee-id-hint"
class="input-hint">
Can be found on your employee intranet profile.
Example: <samp>a1234567-89</samp>.
</p>
<input
id="employee-id"
aria-describedby="employee-id-hint"
name="id-number"
type="text" />
</div>

 

이 코드는 input과 label이  id/for로 연결되어 있다. placeholder의 역할은 p태그가 해주고 있다. 그런데 왜 label 내부에 도움말까지 넣지 않았는지 궁금할수 있을 것이다.

대답은, 개발자의 편의가 사용성 보다 우선 되어서는 안된다는 것이다. 스크린리더를 사용하여 input의 설명으로 p태그의 도움말에 접근할 수 있다.

또 label 내부에 도움말까지 포함하면 너무 장황해진다. label은 의미에 맞으면서도 간결한 것이 좋다. 너무 길면 다시 듣기 힘들고 완전히 다 안듣는 경우도 생길 수 있기 때문이다.

 

 

 

 

정리하면서

 

인터페이스가 사용자에게 요구하는것이 적을 수록 접근이 용이하다

 

placeholder가 필요한가?

좋은 카피 라이트는 목적을 명확하고 간결하게 설명할 수 있는 label을 만든다. label에 역할을 부여하자.



출처: https://ibrahimovic.tistory.com/30 [Web Standard]

'코딩 공부 > HTML' 카테고리의 다른 글

CSS - !important 뜻  (0) 2021.12.02
CSS -webkit, -moz, -ms, -o 접두어 의미  (0) 2021.12.02
HTML lable for  (0) 2021.12.02
HTML 인풋 타입  (0) 2021.12.01
HTML 새창으로 열기 속성 지정  (0) 2021.11.12

 

<label for="값">  : for = "" 에 input 또는 체크박스의 아이디를 일치해주면 레이블을 선택해도 체크가 된다 

<label for="fruititem"> <input id="fruititem" type="chkbox">

 

클릭의 유효범위의 확장해서 사용자의 편의를 높혀준다 보면된다


이렇게 lable 로 감싸주기만 해도 암묵적으로 사용이 가능하다

<label><input type="chkBox" />apple</label>

 

 

'코딩 공부 > HTML' 카테고리의 다른 글

CSS -webkit, -moz, -ms, -o 접두어 의미  (0) 2021.12.02
Placeholder를 사용하지 마세요.  (0) 2021.12.02
HTML 인풋 타입  (0) 2021.12.01
HTML 새창으로 열기 속성 지정  (0) 2021.11.12
<8> border  (0) 2021.03.09
속성설명
text 기본값으로 한 줄의 텍스트 입력 칸을 만듭니다. (기본 너비 문자는 20입니다.)
password text 속성과 같지만, 입력 문자를 별표(*)로 대체해서 표시합니다.
checkbox 선택 항목 중 여러개를 선택할 수 있는 체크박스를 만듭니다.
radio 선택 항목 중 1가지만 선택 가능한 라디오 버튼을 만듭니다.
button 누를 수 있는 기본 버튼을 만듭니다.
submit 전송 버튼을 만듭니다.
reset 재설정 버튼을 만듭니다.
file 파일 선택창을 여는 버튼을 만듭니다.
hidden 사용자에게 보이지 않는 숨김 창을 만듭니다.
image 이미지로 된 전송 버튼을 만듭니다. (src 속성을 통해 이미지 주소을 지정합니다.)

아래는 HTML5에 새로 추가된 속성값

속성설명
color 색상 선택 창을 만듭니다.
date 년, 월, 일을 입력할 수 있는 날짜 입력 창을 만듭니다.
datetime 년, 월, 일, 시, 분, 초, 초의 분할까지 입력할 수 있는 표준시간날짜시간 입력 창을 만듭니다.
datetime-local 년, 월, 일, 시, 분, 초, 초의 분할까지 입력할 수 있는 표준시간이 아닌 날짜시간 입력 창을 만듭니다.
email 이메일 주소 창을 만듭니다.
month 년, 월 입력 창을 만듭니다.
number 숫자 입력을 위한 창을 만듭니다.
range 슬라이더같은 정확한 값이 중요하지 않는 숫자를 입력하는 창을 만듭니다.
search 검색창을 만듭니다.
tel 전화번호 입력창을 만듭니다.
time 표준시간이 아닌 시간 입력 창을 만듭니다.
url 인터넷 주소 입력창을 만듭니다.
week 표준시간이 아닌 년, 주 입력 창을 만듭니다.

 

'코딩 공부 > HTML' 카테고리의 다른 글

Placeholder를 사용하지 마세요.  (0) 2021.12.02
HTML lable for  (0) 2021.12.02
HTML 새창으로 열기 속성 지정  (0) 2021.11.12
<8> border  (0) 2021.03.09
<7> 배경  (0) 2021.03.09

 

bigint -2^63(-9,223,372,036,854,775,808) ~ 2^63-1(9,223,372,036,854,775,807) 8바이트
int -2^31(-2,147,483,648) ~ 2^31-1(2,147,483,647) 4바이트
smallint -2^15(-32,768) ~ 2^15-1(32,767) 2바이트
tinyint 0 ~ 255 1바이트

 

데이터의 크기와 받아올 범위를 생각해서 효율적으로 지정하자

array_diff(배열1(기존), 배열2(새))
반환값 - 배열1 값중 배열2에 없는 값만 배열 형태로 반환.

 

<a><? echo nl2br($변수명); ?></a>

textarea에 저장한 데이터를 위와 같이 쓰면 편하게 불러올수있다

해결 방법

기존의 기본설정을 바꿔준다 

SET GLOBAL sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''));

 

echo '<pre>';
print_r($_POST);
echo '</pre>';

echo '<pre>';
print_r($_GET);
echo '</pre>';

 

+ Recent posts