Web/CSS

🤯 CSS 색상 선정을 도와줄 사이트 모음 들어가기 전웹사이트 제작에서 가장 고민되는 순간 중하나가 CSS(Cascading Style Sheets, 연속적 스타일 시트)의 색상을 선정하는 순간일 것이다. 색상에 따라 웹사이트가 풍기는 이미지가 바뀔 수도 있기 때문에 다른 요소들이 잘 굴러간다고해도, 한 순간 거부감이 들 수 있는 부분이기 때문이다. 유명 브랜드들도 본인들만의 로고 색상을 통해 브랜드의 이미지를 표현하고 있다. 가산혼합가산 혼합이란 다른 색을 섞었을 때 더 밝은 색이 되는 것을 의미합니다. 예를 들어 빨강과 초록을 섞었을 때, 두 개의 컬러보다 밝은 노랑이 됩니다. 이런 방식은 주로 빛을 사용하여 컬러를 표현하는 장치, 텔레비전이나 스마트폰같은 디스플레이에 사용됩니다. 결론적으로 이것은 ..

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 해당 글을 대부분 참고하여 간단하게 정리한 내용입니다. 더 자세한 내용을 원하신다면 해당 글을 참고해주세요. § html 태그의 font-size css 값에 따라 달라지는 px과 rem 그리고 em 유닛을 확인할 수 있는 예시 § em과 rem의 공통점 불변적인 px와는 달리 길이가 유연한 가변단위로 설정된 폰트 크기 혹은 브라우저에 의해 계산된 픽셀값으로 변환된다. 요소의 크기가 절대 변하면 안 되는 상황에서는 사용하지 말아야 한다. em과 rem의 차이점 구분 em rem 변환에 영향을 주는 값 스타일을 지정한 요소의 폰트 크기..

Flexbox Froggy Flexible 박스 레이아웃 모듈은 유연한 반응형 레이아웃 구조를 만들 수 있는 CSS의 매우 강력한 효과 중 하나이다. justify-content, align-items... 이런 저런 것들 어떻게 시작해야 할 지 모르겠다면 게임을 통해 재미있게 배울 수 있는 사이트가 있다. 바로 Flexbox Froggy이다. 이 게임의 목표는 단 하나 개구리를 수련 위에 올려놓는 것이다. 그리고 우리는 그 방법으로 CSS를 이용하게 된다. 위의 사진 스테이지를 예시로 들어보자 개구리는 display: flex 상태이고, 오른쪽 끝으로 가야 수련 위에 올라간다. 따라서 justify-content: flex-end로 오른쪽 끝으로 보내서 문제를 해결하면 된다. 약간 더 심화된 스테이지를..