랜덤 컬러를 생성하기 앞서 HSL을 알아보자 HSL Hue (색조) 색조는 0에서 360까지의 색상값을 가진다. 0은 빨간색, 120은 녹색, 240은 파란색이다. (360은 빨간색) *숫자만 기재 Saturation (채도) 채도는 백분율 값이다. 0%는 회색의 색조를 의미, 100%는 전체 색상이다. *% 단위 필수 Lightness (명도) 명도는 백분율 값이다. 0%는 검은색, 100%는 흰색이다. *% 단위 필수 HSL 문법 hsl(100, 100%, 50%) // #5f0 hsl(235, 100%, 50%, .5) // #0015ff with 50% opacity hsl(235, 100%, 50%) // CSS Colors 4 space-seperated values 랜덤 컬러 생성 (채도, ..
🔖 Basic CSS # 인라인 스타일
자주 쓰지만 항상 어떤 속성을 사용할지 고민하게 되는 margin과 padding. 여러가지를 참고하며 작성하는 글이지만 사실 아직 어느 상황에 써야 맞는지 헷갈리는건 여전하다. 그래도 검색하면서 다른 사람들도 많이 헷갈려 하는구나.. 라는 위안을 얻으며 기록해본다. 🔎 BOX MODEL HTML은 4가지 박스 형태로 만들어진다. 이 네가지 영역을 박스모델이라고 한다. ▪️ content: 내용이 담긴 부분 ▪️ padding: border와 content사이의 영역 ▪️ border: element를 감싸는 경계 ▪️ margin: border의 바깥 영역 🔎 비교 ✅ margin: 바깥쪽 여백 ✅ padding: 안쪽 여백 양수 (+) 음수 (-) auto collapse margin O O O O ..
내가 원하는 스타일을 화면 전체 페이지에 주고 싶을때 마음대로 되지 않아서 애를 먹었던 적이 많았다. 그냥 무작정 height: 100% 주거나 비슷하게 px 또는 rem으로 크기를 맞춰서 하곤 했는데, 여러 디바이스를 비교하면서 하면 이상해 보이는걸 알았지만 일단 내가 보이는 화면에만 안 보이게 처리하려고 그랬나보다. 별거 아닐 수 도 있지만 기본이라고 생각하는 화면 크기 값 조정. 기록해 놔야지. 📌 % 창이 중심이 아닌 부모 요소의 길이에 맞게 반환한다. 그래서 최상단에서 사용한다면 문제는 없지만 밑의 컴포넌트로 파고 들어갈수록 원하는 결과 값을 얻기 힘들어진다. 📌 vh와 vw vh(viewport height): 화면 기준으로 높이를 뜻한다. vw(viewport width): 화면 기준으로 넓..
