CSS6 [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. [SVG] 간단한 SVG 파일 제작하기 웹 페이지 제작 시 SVG 파일을 디자이너에게 받아서 그대로 사용하곤 했는데, 프로젝트 중 디자이너님이 쉬는 기간에 SVG 아이콘을 변경해 달라는 요청을 받았다. 어렵지는 않지만 처음 해보는 작업이라 꽤 시간이 걸렸던 기억이 나서 정리 해보려고 한다. SVG 파일의 장점 SVG 파일은 용량이 작아서 웹 사이트의 속도를 저하시키지 않는데다가 벡터 파일 형식이라 크기를 확대하거나 축소해도 이미지 품질이 저하되지 않는다. 자세한 설명은 Adobe 사이트에 잘 정리되어 있으니 참고하면 좋을 것 같다. https://www.adobe.com/kr/creativecloud/file-types/image/comparison/png-vs-svg.html PNG vs. SVG | Adobe 가장 일반적으로 사용되는 이미.. 2023. 11. 20. [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
