원인은 table에 border-collapse: collapse;라는 속성이 있었는데, 이것은 흔히 CSS초기화 코드에서 볼 수 있습니다.
border-collapse: collapse; 삭제 또는 해당 input에 border-collapse: separate; 속성을 주는 방법이 있습니다.
input {
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}
여기서 포인트는 border-collapse입니다.
collapse는 테이블의 경계를 붙이고, separate는 붙어있는 경계선을 떨어트리는 역활을 하는데,
적용 후 아래와 같이 원하는 모습을 확인할 수 있었습니다.
(아래는 input:focus 에 속성을 주어 마우스 포커스가 위치할때 나옵니다. )
1. 암호:
조건1. 6~20 영문 대소문자
조건2. 최소 1개의 숫자 혹은 특수 문자를 포함해야 함
/^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/
2. 전자우편 주소:
/^[a-z0-9_+.-]+@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/
3. URL:
/^(file|gopher|news|nntp|telnet|https?|ftps?|sftp):\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/
4. HTML 태그 – HTML tags:
/\<(/?[^\>]+)\>/
5. 전화 번호 – 예, 123-123-2344 혹은 123-1234-1234:
/(\d{3}).*(\d{3}).*(\d{4})/
6. 날짜 – 예, 3/28/2007 혹은 3/28/07:
/^\d{1,2}\/\d{1,2}\/\d{2,4}$/
7. jpg, gif 또는 png 확장자를 가진 그림 파일명:
/([^\s]+(?=\.(jpg|gif|png))\.\2)/
8. 1부터 50 사이의 번호 – 1과 50 포함:
/^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$/
9. 16 진수로 된 색깔 번호:
/#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?/
과거에 IE이외에 별도 처리를 하여야 가능했던 CSS text-overflow속성의 ellipsis(말줄임표)를
모든 Majon브라우저에서 지원하는 모습을 테스트 중 발견하여 글을 남깁니다.
아래는 Major브라우저에서 동작되는 모습입니다.
.ellipsis {
width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
국제 표준 날짜 형식은 숫자로 날짜를 표현할 때 모호함이 없도록 하기 위한 표준 방식이다.
예를 들어, 북미에서는 보통 월을 날짜 앞에 쓴다.
그러나, 유럽사람들은 월 앞에 날짜를 쓰는데 1998년 3월 30일을 30.3.1998과 같이 표현한다.
숫자 사이를 구분하는 구분자들도 나라마다 모두 다르다. 그 외에도 서기 1년 1월 1일 이전 시대의 날짜는 숫자로 어떻게 표현하는가, 즉 B.C. 날짜들의 표현에 관한 문제가 남게된다.
ISO 8601은 나라에 무관하게 날짜 표기 형식의 표준 방식을 제공한다.
그러므로, 1998년 3월 30일은 1998-03-30 이 된다.
쥴리안 달력이나 그레고리안 달력을 날짜를 반영하려는 경우, 날짜 앞에 “J” 또는 “G”를 붙인다.
[관련된 사이트]