본문 바로가기

Frontend12

[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.
[JavaScript] 이미지 랜덤 출력(Math.Random() - 랜덤 함수) 게시글 작성 목록의 사용자 아이콘이 하나의 색상으로 통일되어있는게 왠지 예쁘지가 않았다. 그래서 색상만 다른 아이콘을 두개 더 집어 넣고 랜덤하게 아이콘을 출력하는 코드를 짜 보았다. (javaScript기반의 Quasar 프레임워크를 사용하고 있다.) data () { return { userImg: '' } } 우선 문자열 형식으로 변수 선언을 해주고 사용할 HTML 요소에 변수 바인딩을 해주었다. (반복문으로 게시글을 하나씩 출력하는 구조이다.) Math.Random() userRandomImg () { const randomNum = Math.floor(Math.random() * 3) if (randomNum === 0) { this.userImg = 'img:icons/chat-profile-.. 2023. 12. 22.
[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.
[javaScript]월 별 데이터의 최댓값, 최솟값 구하기(feat. split) - MAX, MIN 최댓값, 최솟값 구하기(MAX, MIN) 월별 가격 데이터를 출력한 후 스파크 그래프로 표현해서, 스파크 그래프 마우스 hover시 최댓값을 가진 월과 최솟값을 가진 월을 표시해줘야 한다. 가져온 데이터는 다음과 같다. * javaScript 기반의 Quasar 프레임워크를 사용하고 있다 fn_searchCntSpark (rowIndex, columnIndex, value, headerText, item, dataField) { const fields = dataField.split(",") let min = Number.MAX_VALUE let max = Number.MIN_VALUE for (let i = 0; i < fields.length; i++) { const v = Number(item[fi.. 2023. 12. 14.
[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.
728x90

티스토리툴바