본문 바로가기

웹 디자인

(2)
[CSS] 색상을 사용하는 팁, contrast ratio 확인 방법 1.  메인 컬러를 웹사이트의 개성에 맞게 설정하세요: 컬러는 의미를 전달합니다!  🔴 빨간색주목성이 높음힘, 열정, 흥분을 상징강렬한 에너지를 표현 🟠 주황색빨간색보다 덜 공격적행복, 쾌활함, 창의성을 전달 💛 노란색기쁨, 밝음, 지성을 의미긍정적인 에너지를 표현 💚 초록색조화, 자연, 성장, 건강을 대표안정감과 평화로움을 전달 💙 파란색평화, 신뢰성, 전문성을 상징 ( 파란색 계열이 많이 쓰이는 이유 )차분하고 안정적인 이미지 💜 보라색부, 지혜, 마법을 상징고귀함과 신비로움을 표현 💗 분홍색로맨스, 관심, 애정을 나타냄부드럽고 따뜻한 감정을 전달 🟤 갈색자연, 내구성, 편안함과 연관안정감과 신뢰성을 표현 ⚫ 검정색힘, 우아함, 미니멀리즘을 상징동시에 슬픔과 비통함도 표현 출처https..
[CSS] 5-2. CSS GRID ( 2차원 레이아웃 ) CSS GRID 란?CSS Grid는 2차원 레이아웃을 구축하기 위한 CSS 속성 집합입니다.CSS Grid의 주요 아이디어는 컨테이너 요소를 행과 열로 나누어 자식 요소로 채울 수 있게 하는 것입니다.2차원 컨텍스트에서 CSS Grid를 사용하면 덜 중첩된 HTML과 더 읽기 쉬운 CSS를 작성할 수 있습니다.CSS Grid는 flexbox를 대체하기 위한 것이 아닙니다.1차원 레이아웃은 flexbox, 2차원 레이아웃은 CSS Grid를 사용하면 됩니다.  Flex 와 마찬가지로 부모 태그가 container (바탕화면 또는 바닥) 역할을 하고자식 태그들이 items 가 되어 gird 안에 배치되게 됩니다.container 와 items 들은 각기 다른 속성들을 가지고 있습니다.   1. Grid 컨..