FrontEnd/css 17

[css] css :has 사용 방법 및 지원 브라우저 (특정 요소 갖는 부모 요소 찾기)

css 작성하다 보면, 자식 선택자를 선택하는 것은 매우 잘되어있는데, 부모에서 밑에 해당 자식이 있는 경우 작동하게 하는 방법이 딱히 없는 것 같아서 찾아보았다. 필요한 상황 예를 들어 ul li 구조에서 a태그 내. active 클래스가 활성화되었을 때 li 태그에 css를 주고 싶은 상황이다. 📌자식선택자 선택하기 li밑에 있는. active class를 가진 a태그에 css를 주는 것은 매우 간단하다. ul li a.active { color:skyblue; } ul 태그 안에 li태그 안에 a.active가 되어있는 태그를 찾는 방법이다. 그냥 depth순서대로 작성해주면 해당 태그를 선택해서 css를 적용할 수 있다. ✨특정 자식선택자를 가진 부모 태그 선택하기 반면 li 태그중 .acitve..

FrontEnd/css 2022.08.02

[css]<hr> 태그 색상 바꾸는 방법

📑 태그란? hr 태그를 이용하면 콘텐츠 중간에 선을 그을 수 있다. 보통 주제가 변경이 될 때 이용하는 태그이다. 태그는 기본적으로 검은색으로 제공되고 있다. 만약에 해당 색상을 바꾸고 싶다면? 🧡태그 선 색상 변경 코드 hr { background:pink; height:1px; border:0; } hr 태그를 변경하려면 background나 color 속성만 변경하면 색상이 변하지 않는다. height를 1px을 주고 background를 주면 색상이 변하는 걸 확인할 수 있고 이때 border는 0으로 맞춰준다. 줄 넓이를 키우고 싶을 경우 height를 조절해주면 끝!

FrontEnd/css 2022.06.25

[css] 체크박스, 라디오버튼 색상 변경하기 (accent-color, 기본요소 컬러 변경)

input에서 체크박스, 라디오 버튼의 백그라운드 컬러를 바꾸고 싶을 때가 있다. 그냥 생각으로는 background 속성을 사용을 하면 변경이 되지 않을까라고 해서 적용을 해봤지만 input의 기본 color는 원래 css로 변경이 불가능했다. checkbox, radio button의 색상을 바꾸려면, 단순 css로 원래 불가능했는데 최근 새롭게 출시된 css 기능 중 accent-color가 추가되었다. 🎨css accent-color accent-color는 HTML 요소 기본 색상을 변경할 수 있는 새로운 기능의 css이다. 기존 css의 디자인을 바꾸려면 Label 등을 이용한 편법으로 수정해야 되고 가장 기본적인 컬러 변경 자체도 안돼서 브라우저에서 제공하는 기본 디자인을 사용해야 되었다. ..

FrontEnd/css 2022.06.15

2022 UI 트렌드 글래스모피즘과 클레이모피즘 CSS 생성하기(glassmorphism & claymorphism)

글래스모피즘이란? 반투명한 유리를 댄듯한 효과를 말한다. "얼린유리" 효과라고 해서 배경에 불투명한 유리를 올린 것 같은 효과를 말한다. 🙂글래스모피즘을 잘 활용하려면? 어느정도 배경 투영되어야 되서 비비드한 컬리와 패턴이 있는 배경 위에 사용을 해야 효과가 난다(배경 위에 떠있는 효과) 내부 쉐도우를 넣어서 테두리는 살짝 밝게 처리해준다. 글래스모피즘은 불투명도와 블러를 조절해서 효과를 낼 수 있다. 손 쉽게 글래스모피즘 효과를 보고싶다면 아래 링크에서 확인해보자. 👉https://hype4.academy/tools/glassmorphism-generator 클레이모피즘 클레이모피즘은 좀 더 부풀려진 말랑해보이는 3D모양의 UI 트랜드를 말한다. inner shadow, outerShadow를 활용해서..

FrontEnd/css 2022.06.07

css Animation을 만들어주는 무료 라이브러리 모음

Animation.css npm으로 간단히 설치가 가능하며 설치된 이후 해당 css를 CDN혹은 파일로 import 해놓으면 class 를 통해서 Animation을 이용할 수 있다. 위 사이트에서 실제로 제공되는 애니메이션 효과도 모두 확인해볼 수 있다. 간단하지만 매우 강력한 라이브러리 https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-..

FrontEnd/css 2022.03.30

[css] 가상요소 ::after, ::before 사용방법 및 동작 안할 때 (content)

😶‍🌫️css 가상 요소 ( pseudo-Element) 가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다. 이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다. :before는 HTML안 앞쪽에 추가하는 가상 요소이고 :after는 HTML이 끝날 때 추가되는 가상 요소이다. css 가상 요소 사용법 div:after {...} div:before {...} 가상 요소는 css는 내가 처리할 요소 뒤에 :after, :before로 붙여서 만들 수 있다. 코드는 아래를 참고해보자. sample Code 텍스트 결과 화면 위의 코드를 실행해 보면 위에 같이 코드가 나타난다. HTML상에서는 div에. text랑 클래스를 가진 div 안에 있는 ..

FrontEnd/css 2022.03.03

[css] CSS 그라데이션 색 추천과 코드 생성 해주는 uigradients

좀 더 감각 있는 버튼, 배경을 만들어줄 때 그러데이션 효과를 많이 이용한다. 대부분 그라데이션 효과가 있을 때는 CSS를 이용해서 작성을 해주는데 디자이너가 별도로 있는 분들이라면 색을 지정해서 오지만 혼자서 개발을 할 때는 적절한 색 조합을 찾지 못하는 경우도 많다. 이때 유용한 색상 조합의 그러데이션 샘플을 제공해주는 사이트인 uigradients를 이용해보도록 하자 그러데이션 추천 사이트 uigradients uigradients는 다양한 그라데이션 색 조합을 추천해주는 사이트이다. 웹퍼블리셔나 디자이너분들은 해당 사이트에서 적절한 색상 코드를 찾을 수도 있다. 먼저 사이트에 접속해보자 uigradients.com/ uiGradients - Beautiful colored gradients uiG..

FrontEnd/css 2022.02.17

css @supports 를 이용해서 브라우저에 지원 여부에 따라서 코드 적용시키기 (Can I use)

css의 특정 기능들은 브라우저에 따라서 지원을 하는 브라우저와 없는 브라우저들이 있다. 특히 최근에 레이아웃을 구성하는 grid, flex 등의 코드 들은 익스플로러 낮은 버전이라던지 낮은 버전의 브라우저를 사용하면 동작을 안 할 수 도있다. Can I use 이용하기 Can I use라는 사이트를 이용하면 해당 css가 어떤 브라우저에서 동작하는지를 알 수 있다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com flex를 확인해보면 IE6에서 9 버전을 이용하면 flex가 적용하지 않는다는 것을 수 있다. @supports css의 @supports 기능을 이용하면 해당 css기능을 브라우저에서 지원하는..

FrontEnd/css 2021.08.17

[css] 레이아웃 구성 시 position fixed 와 sticky 차이 알아보기

스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오늘은 간단한 예시 중 특정 위치에 특정 엘리먼트를 고정할 수 있는 position 속성 중 fixed와 sticky 차이를 알아보려고 한다. 💡 fixed란? position:fixed 위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. fixed 예시 코드 Header content .header ..

FrontEnd/css 2021.08.16

css 선택자 반복 코드를 줄여주는 :is 사용 방법 (css 코드 줄이기)

css를 이용하다보면, 공통적으로 사용하는 코드들이 발생된다. 이러한 경우 어쩔수 없이 불필요한 코드가 늘어나는 경우가 있다. 이럴 경우 코드를 줄여주는 방법중 하나가 가상클래스를 이용하는 방법이다. 오늘은 가상클래스 중 :is 에 대해서 정리해보려고 한다. Depth가 깊은 엘리먼트에 CSS를 적용할 경우 만약 li에 color를 red로 지정해주고 싶다고하자. 하지만 그 li의 조건이 div 안에 들어있는 li일 경우, header안에 있는 li일 경우가 조건이라고 하자. 그럼 코드는 위 처럼 작성된다. div ul li, div ol li, header ul li, header ol li { color:red; } 해당 조건에 맞춰 코드를 작성하다보니 css가 4줄이 넘어가게 된다. Depth 선택..

FrontEnd/css 2021.08.14