[Web] CSS의 기본 개념 정리

1. 🎨 CSS(Cascading Style Sheets)

웹페이지의 스타일을 정의하는 언어

• Cascading: 여러 스타일 규칙이 한 요소에 적용될 때, 위에서 아래로 내려오면서 최종 스타일이 결정되는 것
• Style: 디자인을 정의
• Sheets: 문서

✨ CSS의 주요 기능

• 텍스트 스타일링: 폰트, 색상, 크기, 간격 등 텍스트의 속성을 조정하여 가독성을 높임
• 시각적 디자인: 배경색, 테두리, 그림자 등 시각적 효과를 추가하여 웹페이지를 더 예쁘게 만듦
• 레이아웃 제어: 요소의 위치, 크기, 배치 등 웹페이지의 레이아웃을 제어하여 웹페이지를 더 깔끔하게 만듦
• 반응형 디자인: 다양한 디바이스(모바일, 태블릿, 데스크톱)에 따라 다른 스타일 적용

📄 CSS 적용 방법

• 인라인 스타일: 요소에 직접 스타일 적용
• 내브 스타일시트: 헤드 요소에 스타일 적용
• 외부 스타일시트: 외부 파일에 스타일 적용
• import: 다른 스타일시트를 가져오는 방법

2. CSS 문법

CSS 선택자의 종류

• 선택자 우선 순위: 같은 요소에 여러 선택자가 적용되는 경우, 우선 순위에 따라 스타일이 적용됨
• 선택자 우선 순위는 아래와 같은 순서로 적용됨(우선 순위 오름차순)
  • tag 선택자
  • class 선택자
  • id 선택자
  • 인라인 스타일
  • !important

기본 선택자

선택자	설명	사용법	예시
전체 선택자	모든 요소를 선택	*	* { margin: 0; }
tag 선택자	특정 태그를 선택	태그명	p { color: blue; }
class 선택자	클래스 이름을 기반으로 선택	.클래스명	.highlight { background: yellow; }
id 선택자	아이디 이름을 기반으로 선택	#아이디명	#header { height: 100px; }

고급 선택자

결합자 선택자

선택자	설명	사용법	예시
자식 선택자	직계 자식 요소만 선택	부모 > 자식	div > p { color: blue; }
하위 선택자	모든 하위 요소 선택	조상 후손	div p { color: blue; }
인접 형제 선택자	바로 다음 형제 요소 선택	요소 + 형제	h1 + p { margin-top: 0; }

가상 클래스 선택자

선택자	설명	사용법	예시
:hover	마우스를 올렸을 때 스타일 적용	선택자:hover	button:hover { background: blue; }
:active	클릭하는 순간 스타일 적용	선택자:active	button:active { background: red; }
:focus	포커스 받았을 때 스타일 적용	선택자:focus	input:focus { border: 2px solid blue; }
:first-child	첫 번째 자식 요소 선택	선택자:first-child	li:first-child { font-weight: bold; }
:last-child	마지막 자식 요소 선택	선택자:last-child	li:last-child { border-bottom: none; }
:nth-child(n)	n번째 자식 요소 선택	선택자:nth-child(n)	li:nth-child(2) { color: red; }

색상 표현 방법

표현 방식	설명	형식	예시
색상 키워드	색상 키워드 사용(키워드 참고 링크)	red, blue, green	red (빨간색)
16진수	16진수로 RGB 값 표현	#RRGGBB 또는 #RGB	#FF0000 또는 #F00 (빨간색)
rgb	RGB 값을 각각 표현	rgb(R, G, B)	rgb(255, 0, 0) (빨간색)
rgba	RGB + 투명도 표현	rgba(R, G, B, A)	rgba(255, 0, 0, 0.5) (반투명 빨간색)
hsl	색상, 채도, 명도로 표현	hsl(H, S%, L%)	hsl(0, 100%, 50%) (빨간색)
hsla	HSL + 투명도 표현	hsla(H, S%, L%, A)	hsla(0, 100%, 50%, 0.5) (반투명 빨간색)

• H(Hue): 색상 (0~360도)
• S(Saturation): 채도 (0~100%)
• L(Lightness): 명도 (0~100%)
• A(Alpha): 투명도 (0~1)

색상 도구 사이트 모음

사이트	URL	주요 특징
Adobe Color	color.adobe.com	• 색상 휠 기반 조화로운 색상 조합 제공 • 보색, 삼색 등 다양한 색상 규칙 기반 팔레트 생성
Coolors	coolors.co	• 빠른 색상 팔레트 생성/조정/저장 • 직관적인 인터페이스
ColorHunt	colorhunt.co	• 커뮤니티 기반 팔레트 제공 • 최신 트렌드를 반영한 다양한 팔레트
ColorSpace	mycolor.space	• 단일 색상 기반 어울리는 조합 추천 • 자동 팔레트 생성
Paletton	paletton.com	• 색상 휠 기반 전문적 팔레트 생성 • 상세한 색상 조정 가능
Flat UI Colors 2	flatuicolors.com	• 플랫 디자인 특화 색상 • 국가별 컬러 팔레트 제공
Material Design Color	material.io/resources/color	• Google Material Design 기반 • 접근성을 고려한 색상 추천
Colormind	colormind.io	• AI 기반 팔레트 생성 • 이미지 색상 추출 • 부트스트랩 UI 미리보기

텍스트 스타일링

글꼴 스타일

속성	설명	예시
font-family	글꼴 지정	font-family: 'Arial', sans-serif;
font-size	글꼴 크기 지정	font-size: 16px;
font-weight	글꼴 두께 지정	font-weight: bold;
font-style	글꼴 스타일 지정	font-style: italic;
font	글꼴 속성 축약형(한 줄에 모든 폰트 속성 설정할 때)	font: italic bold 16px 'Arial';

텍스트 레이아웃 스타일

속성	설명	예시
text-align	텍스트 정렬(가운데, 왼쪽, 오른쪽)	text-align: center;
text-decoration	텍스트 장식(밑줄, 취소선, 윗줄)	text-decoration: underline;
text-shadow	텍스트 그림자 추가(x, y, 블러, 색상)	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing	글자 간격 지정(글자 사이 간격)	letter-spacing: 2px;
word-spacing	단어 간격 지정(단어 사이 간격)	word-spacing: 4px;
line-height	줄 간격 지정(줄 사이 간격)	line-height: 1.5;

Web Development 카테고리 내 다른 글 보러가기