Frontend/CSS6 [CSS]헥스(hex)코드 투명도 조절하기 색상을 사용할 때 보통 rgb나 hex코드 중에 하나를 사용하는데, CSS에서 투명도를 줄 때는 rgb코드를 사용해왔다. 아래와 같이 원하는 투명도를 뒤에 붙여주기만 하면 쉽게 사용할 수 있기 때문이다. background-color : rgb(277, 277, 277, 0.5); 🔍 hex 코드 투명도 조절하기 하지만 사용자가 입력한 값에 투명도를 설정해서 화면에 보여줘야하는 일이 생겼다. 입력값은 무조건 hex코드!!!!! 사용자가 #F66161을 입력했을 때 카드의 텍스트는 입력한 색상코드를 그대로 사용해주고 아래 박스는 투명도를 줘서 사용해야 했다. 우선 js로 색상을 가져온 후 hex코드 투명도를 조절하는 방법을 검색해봤당 아래표에서 원하는 투명도를 찾아, Hex열의 문자 혹은 숫자를 코드 뒤에.. 2024. 4. 12. [CSS]Flexbox Froggy 소개 및 정답 - CSS 코드 게임 🐸 Flexbox Froggy 소개 CSS의 flexbox 속성을 공부할 때 자주 했던 게임이다. 귀염뽀짝한 개구리와 함께 flexbox 속성을 연습할 수 있다! 아래는 Flexbox Froggy 한국어버전 링크이다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 💡 Flexbox Froggy 정답 1 justify-content: flex-end; 2 justify-content: center; 3 justify-content: space-around; 4 justify-content: space-between; 5 align-items: flex-end; 6 justify-con.. 2024. 1. 8. [CSS] Text '...' 처리, 개행 처리 - ellipsis, wrap CSS에서 말줄임 처리하는 법은 다음과 같다. overflow: hidden; white-space: nowrap; text-overflow: ellipsis; CSS에서 개행 처리 하는 법은 다음과 같다. white-space: wrap; word-break: break-all; Text '...' 처리, 개행 처리 예시코드 말줄임 표시 테스트 말줄임 표시 테스트 개행 테스트 개행 테스트 개행 테스트 결과 2023. 12. 18. [CSS] 채팅에 사용할 말풍선 만들기 백개발이 끝나 즐거운 UI시간을 보냈다. 우선 완성본이다. 채팅에는 이 외에도 전송영역, 첨부파일영역 등 다양한 영역이 존재하지만 이번에는 대화영역을 올려서 다음개발 때도 사용하고자 한다. *front는 Vue.js, Quasar 프레임워크를 사용하고 있다. 우선 HTML소스이다. Quasar 프레임워크를 사용하고 있지만 Quasar컴포넌트를 사용하면 css를 고치는데 제약이 좀 있어서 이번에는 Editor만 Quasar컴포넌트를 사용하고 나머지는 div로 만들었다. HTML코드에서 신경써줘야 할 점은 바로 자기자신의 말풍선 class 와 다른사람의 말풍선 class를 구분하는 조건을 적어줘야 한다는 것이다. 나는 Vue.js를 사용하고 있기 때문에 class에 조건을 걸어 바인딩해주었다. 다른 툴을 사.. 2023. 10. 28. [CSS] hr 태그 색상 변경하기/ HTML 선 색상 변경하기 만드는 화면 특성상 border를 자주 이용하는데 가끔 태그를 사용할 때가 있다. 간단한데 자주 사용하지 않으니 사용할 때 마다 검색하는 일이 잦아서 기록해두려고 한다. hr 태그 색상 변경하기 hr 태그를 사용할 때는 원하는 색상을 background에 입력하고 꼭 height와 border:0 을 함께 입력해주어야한다. 입력하지 않으면 색상이 변경되지 않는다. 2023. 10. 16. [CSS] quasar에 정의되어있는 가상 선택자 클래스 css 변경하기 Quasar프레임워크를 사용하다가 css를 변경할 때, Quasar가 가지고 있는 클래스를 재정의하여 사용하곤 한다. 하지만 기존 css의 가상 클래스 중 :active, :focus는 Quasar가 가지고 있는 클래스에 붙여 사용하려 해도 적용되지 않는 경우가 있다. 예를들어 q-tab의 경우이다. 개발자 도구를 들여다 보면 활성화된 탭에는 q-tab--active라는 클래스가, 비활성화된 탭에는 q-tab--inactive라는 클래스가 적용되어있다. 이러한 경우 q-tab:active 또는 q-tab:focus를 사용한다고 하더라도 적용 자체가 되지 않거나, 원하는 결과를 얻기가 어렵다. Quasar에서 가상클래스 재정의 하는 법 * Quasar자체에서 제공하는 클래스를 가상클래스라고 정의하기에는 확.. 2023. 10. 14. 이전 1 다음 728x90
