StyleSheet (4) 썸네일형 리스트형 [CSS] 색상과 배경 다루기 (Gradients & Multi-bg) 이번 포스팅에서는 [CSS 디자인] 파트의 세부 주제인 색상 심화 및 그라디언트 활용법에 대하여 상세히 알아보겠습니다.1. RGB vs HSL: 색상 보정의 마법사 HSL실무에서 HEX나 RGB를 많이 쓰지만, 버튼의 hover 상태(조금 더 어둡게)나 시스템 테마를 구성할 때는 hsl()이 압도적으로 편리합니다. 명도(Lightness) 수치만 살짝 조절하면 되기 때문입니다..btn-primary { /* H: 210(파랑), S: 100%, L: 50% */ background-color: hsl(210, 100%, 50%);}.btn-primary:hover { /* 색상과 채도는 유지하고 명도만 40%로 낮춰 어둡게 처리! */ background-color: hsl(210, 100%, 4.. [CSS] 실무 단위 정복 (px, em, rem, vh, vw) 이번 포스팅에서는 [CSS 기초] 파트의 세부 주제인 실무 단위 활용법에 대하여 상세히 알아보겠습니다.1. rem과 em의 차이점 및 적재적소 활용법px은 절대 단위이므로 접근성(사용자 폰트 크기 변경)에 취약합니다. 실무에서는 주로 상대 단위인 rem과 em을 혼합하여 사용합니다.rem (Root em): 최상위 요소의 폰트 사이즈(기본 16px)를 기준으로 합니다. 전체적인 타이포그래피, 여백, 컴포넌트 간격 설정에 가장 안전하게 쓰입니다.em: 자기 자신 혹은 부모의 폰트 사이즈를 기준으로 합니다. 컴포넌트 내에서 폰트 크기에 비례해 아이콘 크기나 padding이 유동적으로 변해야 할 때(예: 버튼 크기별 변형) 강력한 힘을 발휘합니다.2. 모바일 브라우저의 골칫거리 vh 단위 해결 노하우모바일 .. [CSS] Box Model 완벽 가이드와 마진 병합 현상 이번 포스팅에서는 [CSS 기초] 파트의 세부 주제인 Box Model과 실무 트러블슈팅에 대하여 상세히 알아보겠습니다.1. 실무 필수 설정: box-sizing: border-box디폴트 박스 모델인 content-box는 width 지정 후 padding을 주면 요소의 전체 크기가 커지는 문제가 있습니다. 퍼블리싱 시 제일 먼저 설정해야 하는 글로벌 룰입니다./* CSS 리셋의 기본: 모든 요소에 border-box 적용하기 */*, *::before, *::after { box-sizing: border-box;}2. 마진 병합(Margin Collapsing) 현상 타파하기인접한 블록 요소의 상하 마진이 만날 때, 두 마진 중 더 큰 값 하나로 합쳐지는 현상입니다. 이로 인해 레이아웃이 예상과 .. [CSS] CSS 기초 문법과 고급 선택자 (Selectors) 이번 포스팅에서는 [CSS 기초] 파트의 세부 주제인 CSS 기초 문법과 고급 선택자에 대하여 상세히 알아보겠습니다.1. 명시도(Specificity) 점수 계산의 비밀CSS를 작성하다 보면 내가 작성한 스타일이 무시되는 명시도(Specificity) 충돌 현상을 자주 겪습니다. 실무에서는 명시도 계산을 정확히 이해해야 !important를 남발하는 지저분한 코드를 방지할 수 있습니다.인라인 스타일 (1000점): 형태로 HTML 내에 직접 작성 (가장 강력함)ID 선택자 (100점): #header클래스, 가상 클래스, 속성 선택자 (10점): .btn, :hover, [type="text"]요소(태그) 선택자 (1점): div, p, ::before2. 고급 선택자로 HTML 구조 수정 없이 스타일.. ← 이전 1 다음 →
