You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🔮 PurgeCSS 사용법 - CSS 프레임워크 코드 최적화
CSS 프레임워크의 문제점 웹 어플리케이션을 구축할때 서비스 품질과 성능도 중요하지만, 빠지지 않는 것이 웹디자인이다. 웹디자인은 사용자의 첫인상과 만족도에 큰 영향을 미치기 때문에 신경써야 한다. 하지만 웹디자인을 처음부터 만드는 것은 쉽지 않다. 복잡한 CSS 코드를 작성하고 반응형으로 만들고 호환성을 확인하는 과정은 많은 시간과 노력이 필요하기 때문이다. 그래서 많은 웹 개발자들은 Bootstrap, Foundation, Bulma, Pure.css, UIKit, Materialise, Tailwind와 같은 CSS 프레임워크를 사용한다. CSS 프레임워크는 미리 정의된 CSS 클래스와 구성 요소를 제공하여, 일관되고 표준화된 방식으로 쉽고 빠르게 고퀄리티의 웹디자인을 만들 수 있으며, 재사용하고 ..
🌟 first-child / first-of-type 속성 차이점
first-child 와 first-of-type 차이점 first-child 와 first-of-type은 똑같이 자식 형제 요소 고르는것같은데 무엇이 다를까? 한방에 이해하기 쉽게 간단명료하게 설명하면 이렇다. div > p:first-child 'div 하위의 p 요소 중 첫번째 요소' 로 읽는 게 아니라 'div 하위의 첫번째 자식인 요소가 p 요소' 이면이다. 즉, div의 자손 요소중에 first-child를 고르는데 그게 p이면 스타일을 적용한다. 만일 p가 없다면 스타일을 적용하지 않는다. 'div first-child is p' 라고 영어 문장으로 이해하면 된다. .parent > span:first-child { background: lightgreen; } .parent2 > p:fi..
🌟 @media는 이제 그만 ! 최신 @container 사용법
컨테이너 쿼리 vs 미디어 쿼리 컨테이너 쿼리는 미디어 쿼리와 같이 문서의 스타일을 반응형으로 지정할 수 있다. 이 둘의 작동 방식은 유사하지만, 차이점은 어느 것을 기반으로 동작되냐는 점이다. 예를들어 미디어 쿼리는 디바이스 또는 미디어 유형을 기반으로 뷰포트에 의해 반응하지만, 컨테이너 쿼리는 페이지내의 특정 컴포넌트 요소 기반으로 반응한다. 아래 그림을 보면 이해가 될텐데, 미디어 쿼리는 브라우저 너비를 기준으로 반응하지만, 컨테이너 쿼리는 문서 내 각 요소 의 크기나 모양에 따라 반응형 쿼리를 지정할 수 있다는 점에서 상위 호환이라고 할 수 있다. 컨테이너 쿼리가 없었을 시절에는 자바스크립트의 Resize Observer 기술을 통해 특정 요소의 크기 변화를 관찰하여 스크립트로 스타일링을 해주어야..
🌟 CSS 선택자를 모던하게 :where() / :is() / :has() / :not()
:where() 가상 선택자 :where 의사 클래스 선택자는 css 코딩할때 선택자의 중복을 줄이는 데 도움이 되는 녀석이다. 예를들어 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위해선 각 선택자들을 콤마를 이어 나열하여 표현하여야 했었다. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } 그런데 코드를 보면 a:hover 부분이 각 선택자마다 중복되는 것을 확인 할 수 있을 것이다. 거기다 적용해야할 요소가 많으면 많을 수록 선택자의 양도 늘어나 나중에 ..
🎨 말풍선 디자인 자동 만들기 사이트
말풍선 생성하기 사이트 간단하게 말풍선 스타일링을 바로 만들수 있는 제너레이터이다. 말풍선 꼬리표 위치(Side) 와 모양(Pointer triangle) 과 크기(Pointer size)를 지정해주고 옆의 css 코드를 붙여넣으면 완성된다. Bubbly CSS speech bubbles made easy! Bubbly — CSS speech bubbles made easy projects.verou.me
🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리
Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이 가능하여, 보다 자신의 웹사이트 돋보일 수 있게 하여 방문자에게 조금 더 기억에 남게 만들 수 있다. 다만 스크롤바 요소는 웹 콘텐츠가 아닌 브라우저 내부 인터페이스로 취급되기 때문에 일반적인 css 사용에 있어 기능이 제한적인 것이 많다. 우리가 브라우저의 alert 창을 스타일링 할수 없듯이 말이다. 즉, css를 사용하여 브라우저 스크롤바 색깔이나 두께를 바꿀 수는 있으나 이외의 복잡한 스타일링에는 제한적이라고 보면 된다. 특히 유의해야 할 점은 CSS scrollbar 관련 선택자들은 표준이 아니..
🕹️ CSS 요소 수평/수직 정렬 기법 모음
수평 중앙 정렬 📢 inline / inline-block 요소 정렬 대상 요소(inline)의 부모 요소(block)에 text-align: center;를 지정한다. inline, inline-block, inline-table, inline-flex, 기타 등등에 적용된다. One Two Three Four 자식요소가 block요소이면, 강제로 자식요소를 inline-block요소로 만들어주는 방법도 있다. I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row. I h..
![[CSS] 🎨 로그인 / 회원가입 페이지 디자인 스타일 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUaYQ5%2FbtrRsI8MzIU%2F4UXjsK9OJxB1pPTDgD4Px0%2Fimg.webp)
[CSS] 🎨 로그인 / 회원가입 페이지 디자인 스타일 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 로그인 및 회원가입 페이지 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. 로그인 / 회원가입 페이지 See the Pen Weekly Coding Challenge #1 - Double slider Sign in/up Form - Desktop Only by RH2O (@Rh2o) on CodePen. See the Pen Neumorphic sign-up / sign-in form by Shruti (@Shruti-Ag) on CodePen. See the Pen Slide Sign In/Sign Up form by Danielkvist (@d..
![[CSS] 🎨 버튼(Button) 디자인 스타일 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvPWME%2FbtrRt6U6wks%2Fl4z4ktdYtC9ir6zXIZGosk%2Fimg.webp)
[CSS] 🎨 버튼(Button) 디자인 스타일 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 버튼 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. 무난한 버튼 컬렉션 과하지도 튀지도 않은 적당히 이쁜 버튼들이다. See the Pen Cool Buttons by Felipe Marcos (@FelipeMarcos) on CodePen. See the Pen Collection CSS3 buttons by Andrés Bedoya (@Angelfire) on CodePen. See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. See the Pen Butto..
![[CSS] 🎨 테이블(Table) 디자인 스타일 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcNhmyu%2FbtrRuvUCHzi%2F335oxG6hdhqVSdsNjmlV80%2Fimg.webp)
[CSS] 🎨 테이블(Table) 디자인 스타일 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 테이블(Table) 디자인 스타일(style) 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다. 테이블 모음 See the Pen Advanced and accessible tables by Germán Freixinós López (@germanfrelo) on CodePen. See the Pen CSS responsive table with fixed column and row headers and scroll snap by Scott Jehl (@scottjehl) on CodePen. See the Pen Responsive Table Sass M..
🌟 미디어 쿼리 범위 지정 최신 문법 (간편해짐 ❗)
CSS media query 범위 최신 문법 CSS에서 반응형 쿼리를 작성할때 가장 이해가 안되었던 접이 바로 미디어 쿼리의 width, height 범위 지정 문법이다. 왠만한 프로그래밍 언어에선 범위 지정을 기호를 통해 범위지정을 하지만 CSS에서는 미디어 쿼리 범위 지정은 다음과 같이 하였다. 정확히 max-width 가 의미하는 것이 '이상' 인지 '이하' 이었는지 잠깐 문법이 햇깔릴 때도 있었으며, 기본적으로 '같거나 작다' 로 통용되기 때문에 만일 '무조건 작다' 로 설정하려면, 아래와 같이 319.99px 로 지정해야는 우회하는 방법을 써야 했다. /* viewports
🌟 이미지 사이즈 비율 맞추는 3가지 방법 (object-fit / background-size / position)
프론트를 작업할때, 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다. 예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위해, CSS를 이용하여 나 요소같은 오브젝트들을 조정해야 되는데 방법이 결코 녹록치 않다. 이번 시간에는 background-img 혹은 태그로 이미지를 가져와, 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고 비율을 조정해 꾸밀때, 어떤 css 속성을 사용하여 다루는지 3가지 방법에 대해 한방 정리하는 시간을 가져보자. background 속성을 이용해 조절 background-size 속성 먼저 css의 background-img : url() 속성을 통해 이미지를 불러와 사용할때, 사이즈를 조절하는 방법을 알아..
