[CSS] #14 CSS 고급 기능 & 실전 활용 정리! 변수, BEM, 컴포넌트 스타일링까지
·
Web Front/CSS
안녕하세요, 토스트데브입니다!지금까지 CSS의 기초부터 애니메이션까지 단계별로 학습해오셨죠?이번 글에서는 실제 개발 환경에서 CSS를 더욱 효율적으로 사용하는 고급 기능들과 실전 스타일링 팁을 정리해보겠습니다.유지보수와 협업을 고려한 코드 작성을 위한 필수 개념도 함께 소개할게요. 1️⃣ CSS 변수(CSS Custom Properties)CSS에서도 변수를 선언하고 사용할 수 있습니다.변수를 사용하면 색상, 간격, 폰트 등 공통값을 일괄 관리할 수 있어 매우 편리합니다.✅ 변수 선언 (보통 :root에):root { --main-color: #3498db; --spacing: 16px;} ✅ 변수 사용button { background-color: var(--main-color); paddin..
[CSS] #07 스타일 속성, CSS 배경 속성 완전 정리! background-color부터 background-image까지 한 번에 끝내기
·
Web Front/CSS
안녕하세요, 토스트데브입니다!오늘은 웹 요소의 배경을 꾸미는 데 사용하는 CSS의 background 속성을 알아보겠습니다.텍스트만으로는 심심한 웹페이지도, 배경색이나 배경 이미지를 적절히 사용하면 훨씬 시각적으로 풍부해지고 전문적으로 보입니다.자, 그럼 배경 속성 하나하나 함께 살펴볼까요? 1️⃣ background-color – 배경 색상요소의 배경에 색을 지정합니다.div { background-color: lightblue;}색상값은 이름, 16진수, rgb, rgba, hsl 등 다양한 방식으로 표현 가능background-color: #f0f0f0;background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 */ 2️⃣ background-image – 배경 이미..