# 티스토리에 code pen 불러오기




▶ code pen에 계정 생성 및 로그인 후 코드를 작성한다.

▶ 코드 작성 후 

1. save 하기

2. embed 클릭





▶   1. 테마 설정 가능

2. 사이즈 조절 가능

3. iframe을 클릭하여 나온 코드를 복사





▶ 티스토리(및 기타 블로그) 에디터의 외부컨텐츠(혹은 html)를 선택 후




▶ 위에서 복사한 소스를 붙여넣고 확인을 누른다.




▶ 간단하게 code pen의 소스를 불러올 수 있다. 끝




ex)


저작자표시

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

vscode와 Git 연동하기  (530) 2020.01.17
모델-뷰-컨트롤러(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

# 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

+ Recent posts

티스토리툴바