# box-shadow




box-shadow : 요소의 테두리를 감싼 그림자 효과

그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함, 확산 정도, 색상으로 이루어진다.

browser support : ie9 이상


offset-x : 위 아래

offset-y : 좌 우

blur-radius : 값이 클 수록 그림자가 흐려진다.

spread-radius : 양수- 그림자가 커지고 확산됨. 음수- 그림자가 줄어듬.

color : 그림자 색상

inset : 박스 내에 그림자


/* offset-x , offset-y , color */
box-shadow : 10px 10px black;

/* offset-x , offset-y , blur-radius , color */
box-shadow : 10px 10px 5px black;

/* offset-x , offset-y , blur-radius , spread-radius , color */
box-shadow : 10px 10px 5px 3px rgba(0,0,0,0.3);

/* inset , offset-x , offset-y , color */
box-shadow : inset 10px 10px black;




저작자표시

'Front-end dev > HTML || CSS' 카테고리의 다른 글

CSS 말줄임  (513) 2020.01.06
Tag  (794) 2020.01.06
ios(safari) input:disabled  (1271) 2018.09.21
CSS input [type="radio, checkbox"] custom  (588) 2018.05.23
내 입맛에 맞춘 Reset.css  (520) 2018.04.03

# 정규식표현(패스워드)



정규식 표현 정리

(?=.*[a-zA-Z])                  // 영문
(?=.*?[A-Z])                    // 최소 한개의 대문자 영문
(?=.*?[a-z])                    // 최소 한개의 소문자 영문
(?=.*?[0-9])                   // 최소 한개의 숫자
(?=.*?[#?!@$%^&*-])      // 최소 한개의 특수 문자
.{8,}                             // 최소 8자 길이





최소 8자 + 최소 한개의 영문자 + 최소 한개의 숫자

 ^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$



최소 8자 + 최소 한개의 영문자 + 최소 한개의 숫자 + 최소 한개의 특수 문자

 ^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$



최소 8자 + 최소 한개의 소문자 + 최소 한개의 대문자 + 최소 한개의 숫자

 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$



최소 8자 + 최소 한개의 소문자 + 최소 한개의 대문자 + 최소 한개의 숫자 + 최소 한개의 특수 문자

 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$



최소 8자 + 최대 10자 + 최소 한개의 소문자 + 최소 한개의 대문자 + 최소 한개의 숫자 + 최소 한개의 특수 문자

 ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$



저작자표시

'Front-end dev > JavaScript || jQuery' 카테고리의 다른 글

jQuery selector  (540) 2020.05.04
console.log 에 style 적용하기  (596) 2018.04.04

# jQuery selector



jQuery 기본적인 선택자


jQuery selector
선택자 설명
:button type이 button인 요소를 선택
:even 인덱스가 짝수인 요소를 모두 선택
:odd 인덱스가 홀수인 요소를 모두 선택
:eq(n) 인덱스가 n인 요소를 선택
:gt(n) 인덱스가 n보다 큰 요소를 모두 선택
:lt(n) 인덱스가 n보다 작은 요소를 모두 선택
:first 첫 번째 요소를 선택
:last 마지막 요소를 선택
:nth-child(an+b) 형제 요소 중 an+b번째 요소들을 선택
ex)
$('li:nth-child(3)')
$('li:nth-child(2n+1)')
:animated 애니메이션 효과가 실행 중인 요소를 모두 선택
:header h1 ~ h6 까지의 요소를 모두 선택
:contains(text) 지정한 문자열을 포함한 요소를 선택
ex)
$('p:contains("ara")')
:not(selector) 지정한 선택자를 제외한 모든 요소를 선택
:empty 내용이 없는(자식이 없는) 빈 요소를 선택
:has(selector) 지정한 요소를 포함하는 요소를 선택
ex)
$('p:has(span)')
$('div:has(.class)')
:parent 자식 요소를 가지고 있는 요소를 모두 선택


저작자표시

'Front-end dev > JavaScript || jQuery' 카테고리의 다른 글

정규식표현(패스워드)  (502) 2020.05.25
console.log 에 style 적용하기  (596) 2018.04.04

# Visual Studio Code Git 연동하기



우선 vscode와 git을 설치해준다.

Download Visual Studio CodeDownload Git





Git 설치가 완료되면 Git bash 또는 cmd창을 열어서 Git 계정 정보를 입력해준다.
 - Git 설치 시 특이사항이 없다면 그냥 기본으로 두고 Next를 눌러 진행해 주면 된다.

 - Window10 에서는 powerShall 을 이용하여 계정 정보를 등록해도 된다.


git config --global user.name username
git config --global user.email user@email.mail




Git 계정을 연결했으면 

Visuasl Studio Code를 새로 열어서 작업 할 폴더를 연다.




폴더 연결 후, 소스 제어 편집에 들어가서 + 버튼을 클릭하여 폴더를 선택하면




이렇게 연결되었음을 확인 할 수 있다.




test로 신규 파일을 하나 만들어 보면, 소스제어 아이콘에 1이라고 뜨고 내용을 확인 할 수 있다.

+를 눌러 변경된 내용을 스테이징 한다.




체크 아이콘을 누르면 커밋(commit) 메시지를 입력할 수 있고 입력하면 커밋이 완료된다.




추가로, 더 많은 기능을 확인 할 수 있는데 필자에게는 마지막 커밋 실행 취소 가 너무 신세계였다... 세상에




이제 push 명령을 실행하기 위한 작업을 해야한다.


일단 github에서 새로운 원격 저장소를 만들어 준다.

레파지토리를 생성하면 아래 화면을 볼 수 있고, 우측에 아이콘을 누르면 카피된다.



vscode에서  ctrl + `  을 누르면 터미널을 실행할 수 있고, 아래 이미지에서

 - 1번을 누르고 '기본 셸 선택'을 누르면 2번이 뜨고

 - 2번에서 원하는 셸을 선택 후

 - 3번을 클릭하면 추가할 수 있다.



선택한 셸에서 아까 복사한 링크를 입력하면 (Git 계정 로그인이 화면이 나올 수 있음) 연동이 완료되고 push를 실행 할 수 있다.



저작자표시

'Front-end dev > Etc.' 카테고리의 다른 글

codepen 불러오기  (587) 2020.07.08
모델-뷰-컨트롤러(Model-View-Controller, MVC)  (580) 2020.01.07
[Node.js] listen EADDRINUSE Error  (514) 2020.01.06
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

# 빈태그 사용 시 웹접근성



<div class="boxHeight"></div>


간혹 위와 같은 빈 태그들을 발견 할 수 있다.
이런 빈 태그는 웹접근성에 위반 되는것일까?


웹접근성에서 문법오류는 아래의 내용에서만 평가된다고 한다.


 1. 태그의 열고닫음 오류
 2. 태그의 중첩오류
 3. 태그의 중복 속성 선언오류, 중복 id 선언오류

그러므로 위와 같은 빈 div 태그의 경우 웹접근성 오류에 해당되지 않는다.

(참고 : 빈 링크 <a href="#"></a>로 제공되는 경우 키보드 이동 및 초점의 이동이 의미없는 곳으로 이동되어 스크린리더 또는 키보드를 사용하는 분들에게 혼란을 줄수 있기 때문에 웹접근성에서 오류로 평가될 수 있다.)



웹표준 검사(https://validator.w3.org/)에서 확인해 본 결과, 웹표준 오류로 발견되지 않는다.

따라서 빈 태그의 사용은 웹접근성, 웹표준에 위배되지 않는다고 보여진다.



저작자표시

'Front-end dev > 웹표준ㆍ웹접근성' 카테고리의 다른 글

(웹표준/웹접근성) table  (484) 2018.11.28
(웹접근성) PC 심사 환경/기준  (865) 2018.11.27
웹접근성 swiper  (1119) 2018.09.21

+ Recent posts

티스토리툴바