You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[CSS] 🎨 인용문(blockquote) 디자인 스타일 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsL2cL%2FbtrRtcn6AvX%2F0z67wSoLN0B6ppU7QXVkck%2Fimg.webp)
[CSS] 🎨 인용문(blockquote) 디자인 스타일 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 인용문 버튼 디자인 스타일(style) 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. blockquote 스타일 See the Pen Blockquote by Vinh (@tranvinh) on CodePen. See the Pen Material Quotation Cards by Bharani (@bharanim) on CodePen. See the Pen Memasang Blockquote (Catatan) dengan Efek Lipatan by Deny listianto (@denylistianto) on CodePen. See the Pen C..
![[CSS] 🎨 SNS 로그인 버튼 디자인 스타일 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbsFaBb%2FbtrRpXTc2Iz%2F7Z5Uju7U3kjuVEfZUbT1pK%2Fimg.webp)
[CSS] 🎨 SNS 로그인 버튼 디자인 스타일 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 SNS 로그인 버튼 디자인 스타일(style) 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. SNS 로그인 버튼 See the Pen Social Login Button by Eswara Sai (@eswarasai) on CodePen. See the Pen Social Login Buttons by Miffy Chen (@miffychen) on CodePen. See the Pen Social Login Buttons by Mikey (@MadMikeyB) on CodePen. See the Pen Sign in / up Form by Ahmed ..
![[CSS] 🎨 그림자(box-shadow) 디자인 스타일 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIEtWy%2FbtrUSzt2Dvo%2F4kSHx9qAehbfV9vpWWkPQk%2Fimg.webp)
[CSS] 🎨 그림자(box-shadow) 디자인 스타일 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 box-shadow 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. box-shadow 생성기 css 그림자 generator 이다. 간단한 버튼 조작을 통해 box-shdaow를 구성할 수 있다. See the Pen CSS3 Generator: box-shadow by Montego (@Montego) on CodePen. box-shadow 예제 See the Pen Material Design Box Shadows by Samuel Thornton (@sdthornton) on CodePen. See the Pen CSS Box Shadow..
🎨 SVG 다루기 정리 (크기 / 색상 변경)
SVG (Scalabe Vector Graphic) SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 줄임말이다. SVG 이미지 파일은 XML 문법을 기본으로 하는 문서이며 로고나 아이콘, 그래프 등 널리 사용된다. 즉, 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어이라고 봐도 된다. 다른 png과 jpg 이미지 파일에 비해 텍스트 편집기에서 CSS나 JS로 수정이 가능하다는 점이 가장 큰 장점이라 할 수 있다. 가장 큰 특징으로는 확장이 가능하다는 점에서 확대해도 품질이 떨어지지 않는다는 특징이 있다. 예를 들어 파워포인트에서 이미지를 늘리거나 줄일때 화질이 깨지지 않는 것도 바로 이 원리를 이용한 것이다. SVG 이미지는 크기를 줄이거나 늘리더라..
![[CSS] 💍 리스트(ul / ol / li ) 태그 디자인 🖌️ 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbdnw5T%2FbtruyObk8Vt%2FzuQaTMkT36ZbPsGUb6MH0k%2Fimg.jpg)
[CSS] 💍 리스트(ul / ol / li ) 태그 디자인 🖌️ 모음
리스트 태그 디자인 CSS 모음 Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 ul / ol / li 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. See the Pen Coloured ordered / image unordered list bullets css by Jeeten (@jeetenbargaiya) on CodePen. See the Pen Ordered Lists with Unicode Symbols by Steven Estrella (@sgestrella) on CodePen. See the Pen Custom Unordered List by ᜌᜓᜃᜒ (Yuki|雪亮) 🇵🇭 ..
![[CSS] 💍 툴팁(Tooltip) 디자인 🖌️ 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJLqtL%2Fbtr2YhyUFTT%2FaoVmtOAbPWKW5niWI7BoYK%2Fimg.webp)
[CSS] 💍 툴팁(Tooltip) 디자인 🖌️ 모음
툴팁 디자인 모음 codepen에서 괜찮은 css 디자인 요소들을 모아 간추려 포스팅 해본다. 모던하면서도 준수한 디자인을 뽐낸다. See the Pen CSS Tooltip Magic by Envato Tuts+ (@tutsplus) on CodePen. See the Pen only CSS Tooltip by Gyuho Lee (@asrahi) on CodePen. See the Pen Tooltip CSS Only by Akhbar (@akhbar) on CodePen. See the Pen Pure CSS Tooltip by Cristina Silva (@cristina-silva) on CodePen. See the Pen Mobile Friendly CSS Only tooltip by Ted ..
![[CSS] 💍 a링크 hover 디자인 🖌️ 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FddUVpn%2Fbtrp54X3pEJ%2F0D44bh5sIAhIdO0w6J7Dj0%2Fimg.jpg)
[CSS] 💍 a링크 hover 디자인 🖌️ 모음
a링크 hover 디자인 모음 codepen에서 괜찮은 css 디자인 요소들을 모아 간추려 포스팅 해본다. 모던하면서도 준수한 디자인을 뽐낸다. See the Pen link hover effect by kazemi (@kazemi) on CodePen. See the Pen Link Hover Effects w/ mo.js by Mike Quinn (@mprquinn) on CodePen.
![[CSS] 🎨 hr 구분선 디자인 스타일 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbczx2c%2FbtrZjLbq6y3%2FIin24KbDxrxQfkuWTMpsX0%2Fimg.webp)
[CSS] 🎨 hr 구분선 디자인 스타일 모음
hr 구분선 디자인 모음 Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 box-shadow 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. See the Pen Style hr tag with CSS by Venom (@Venom) on CodePen. See the Pen HR style by Kim Bertelsen (@kimmenbert) on CodePen. See the Pen Neon by Mario Durántez (@warbelt) on CodePen. See the Pen HR with centered text by Scott Zirkel (@scottzirkel) on Cod..
![[CSS] 💍 헤더 제목 디자인 🖌️ 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fyq4ge%2FbtrpMQeXFCN%2FBbsc1O3L8uDzVXjmeYvvA0%2Fimg.jpg)
[CSS] 💍 헤더 제목 디자인 🖌️ 모음
헤더 제목 디자인 모음 codepen에서 괜찮은 css 디자인 요소들을 모아 간추려 포스팅 해본다. 모던하면서도 준수한 디자인을 뽐낸다. See the Pen Pure CSS Page Heading / Title Styles by Veda (@vedadesigns) on CodePen. See the Pen Fancy Border Lines Behind Section Headings in CSS by Umair Ulhaque (@u) on CodePen. See the Pen Article Heading Styles by Пламен Синигерски (@pacolin) on CodePen. See the Pen Bubbling Text Effect by html5andblog (@html5andblo..
![[CSS] 💍 이미지 hover 디자인 🖌️ 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJZ7hJ%2FbtrpwP1wjoP%2FTVVW7ghMKImQ4ZcRtPBG31%2Fimg.jpg)
[CSS] 💍 이미지 hover 디자인 🖌️ 모음
이미지 hover 디자인 모음 codepen에서 괜찮은 css 디자인 요소들을 모아 간추려 포스팅 해본다. 모던하면서도 준수한 디자인을 뽐낸다. See the Pen Demo: CSS image hover effects by Naoya (@nxworld) on CodePen.
🎨 요소의 기본 디자인 리셋 - all 속성
CSS - all 속성 all 단축 속성은 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화 한다. 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜줄 수 있다. Click Me ! all: unset; 을 해주면 기본 버튼 모양이 초기화되어, 텍스트만 남게된다. button{ all: unset; } 과 의 디자인을 통일하기 위해서 등, 태그의 디폴트 디자인을 없애거나 통일할 경우에 같이 편리하게 쓸 수 있다. button{ all: unset; /* 유의할점은 정의할때 가장 처음에 써줘야 된다. 뒤에다 써주면 그 위의 스타일들도 초기화되게 된다. */ background..
🎨 :before :after 와 ::before ::after 차이점
가상 선택자 (pseudo selector) 가상 선택자(pseudo selector)에는 가상 클래스(pseudo class)와 가상 엘리먼트(pseudo element)가 존재한다. 둘이 비교하자면, 가상 클래스는 엘리먼트 전체나 엘리먼트 상태를 선택하고, 가상 엘리먼트는 엘리먼트의 하위 요소도 더 세분화하여 선택가능하다. 가상 엘리먼트 (Pseudo Elements) ::before , ::after , ::first-letter , ::first-line , ::selection 가상 클래스 (Pseudo Classes) :active , :checked , :disabled , :focus , :hover 등 CSS 2.1에서는 가상클래스, 가상엘리먼트 모두 싱글 콜론을 사용했었다. 하지만 CS..
