CSS 8

[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

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

[HTML] 간단한 코드로 토글메뉴 만들기(아코디언 메뉴 details, summary 태그)

홈페이지 상에서 가끔 자주 묻는 질문 등의 페이지에 들어가면 토글 메뉴의 UI를 많이 볼 수 있다. 은근 홈페이지를 제작할 때 많이 쓰는 토글 메뉴를 만들기 위해서는 주로 라이브러리를 이용해서 작성을 했는데 이번 HTML5 태그로만 만들 수 있다고해서 이에 대해 설명해보려고 한다. 1️⃣HTML details & summary Tag 흔히 말하는 아코디언 메뉴를 작성하려면, 사용자가 먼저 볼 수 있는 타이틀과 클릭했을 때 보일 세부 내용으로 이루어진다. 해당 태그안에는 클릭했을 때 보일 세부내용을 작성할 수 있다. 클릭 전 보여질 타이틀 내용을 작성할 수 있다. 위의 예시처럼 만들려면 아래와 같은 코드를 이용하면 된다. 자주묻는 질문1 여기에 자세한 내용을 작성합니다. 예전에 Javascript로 구현을..

FrontEnd 2022.02.20

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

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

FrontEnd/css 2022.02.17

[css/layout] css layout 방법 - 2️⃣ grid

💜 2020 State of CSS Survey 1편에서는 레이아웃 중 가장 사랑받는 flexbox를 살펴보았다면 이번 편에서는 grid를 살펴보려고 한다. 사실 실무에서 flexbox를 너무 잘 활용하고 있었고, flexbox로 아쉬운 부분들은 기존 float방식으로 충분히 원하는 레이아웃을 짤 수 있었기에 새로운 layout에 대한 필요성을 아직 느끼지 못했다. flexbox 사용이 궁금하다면 전의 포스팅을 먼저 참고하고 오자! [css/layout] CSS Layout 방법 - 1️⃣ flexbox 💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된..

FrontEnd/css 2020.12.18