CSS - 2

*CSS에서 배경의 기본 값은 투명

-Types of Selectors

Universal Selector (전체 선택자)

페이지에 있는 모든 요소를 한꺼번에 선택합니다.

• 기호: 별표(*)를 사용합니다.
• 용도: 브라우저마다 조금씩 다른 기본 여백(margin, padding)을 초기화하거나, 모든 요소에 동일한 글꼴이나 박스 크기 기준(box-sizing)을 정할 때 주로 사용합니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 

* Selector 지정 순서

- 유니버셜 셀렉터

STEP 1: 태그를 정한다

STEP 2: 정한 태그의 이름을 스타일 네임에 그대로 쓴다

STEP 3: {} 브레이스를 열고 원하는 내용 기입

 

Type Selector (타입 선택자 / 요소 선택자 / 태그 선택자)

특정 HTML 태그 이름을 직접 사용하여 해당 태그를 모두 선택합니다.

• 특징: 페이지 내의 모든 해당 태그에 스타일이 일괄 적용됩니다.
• 용도: 웹사이트 전체의 기본 문단 스타일(p)이나 제목 스타일(h1)을 정할 때 유용합니다.

p {
  color: #333;
  line-height: 1.6;
}

 

* Selector 지정 순서

- 타입 셀렉터

STEP 1: 내가 스타일하고 싶은 태그 셀렉한다

STEP 2: 셀렉한 태그 내용을 스타일 시트 안에 기입

STEP 3: {} 브레이스를 열고 넣고 싶은 내용 기입

Class Selector (클래스 선택자)

HTML 요소의 class 속성값을 기준으로 선택합니다.

• 기호: 점(.) 뒤에 클래스 이름을 붙여 사용합니다.
• 특징: 한 페이지 내에서 여러 번 반복해서 사용할 수 있어 가장 활용도가 높습니다.
• 용도: 비슷한 스타일을 여러 요소에 공통적으로 입힐 때 사용합니다.

.highlight {
  background-color: yellow;
  font-weight: bold;
}

 

* Selector 지정 순서

- 클래스 셀렉터

STEP 1:  찍고 네이밍 한다

STEP 2: {} 열고 디자인 한다

STEP 3: 디자인을 하고 싶은 <> 태그 뒤에다가 class=""를 입력 후, STEP 1의 네이밍을 . 빼고 기입

 

ID Selector (아이디 선택자)

HTML 요소의 id 속성값을 기준으로 선택합니다.

• 기호: 샵(#) 뒤에 아이디 이름을 붙여 사용합니다.
• 특징: 한 페이지 내에서 단 하나의 요소에만 고유하게 사용해야 합니다.
• 용도: 페이지 내에서 유일한 영역(예: #header, #footer, #main-nav)을 지정할 때 주로 쓰입니다.

#main-banner {
  width: 100%;
  height: 400px;
}

 

* Selector 지정 순서

- id 셀렉터

STEP 1: # 크로스 해치 열고 id 설정

STEP 2: 디자인 세팅

STEP 3: 디자인 하고 싶은 태그 옆에 id=""을 입력 후, STEP 1의 id를 # 빼고 기입

Group Selector (그룹 선택자)

여러 선택자에 동일한 스타일을 한꺼번에 적용하고 싶을 때 사용합니다.

• 기호: 쉼표(,)를 사용하여 선택자들을 나열합니다.
• 특징: 코드를 중복해서 쓰지 않아도 되므로 파일 용량이 줄어들고 가독성이 좋아집니다.

/* h1, h2, p 태그 모두 가로 중앙 정렬을 적용 */
h1, h2, p {
  text-align: center;
}

 

* Selector 지정 순서

- Group 셀렉터

셀렉터를 추가하고 싶으면 , 를 사용하고 셀렉터 입력하면 됌

 

그룹은 마지막에 정리할 때 사용

중간에 사용하면 꼬일 경우가 있음

"타이밍이 중요한 스타일"

* CSS는 Selector를 잘 선정해야 함

실무에선 타입과 클래스를 사용

학원에선 종종 유니버셜과 id를 사용 - 두 가지는 잊어도 됌 

 

* span은 어느 한 부분에 디자인을 적용하고 싶으면 줄 바꿈 없이 기입 

 

선택자 종류 및 우선순위 요약

선택자 종류	기호	예시	우선순위 점수
Universal	*	* { ... }	0점
Type	태그명	div { ... }	1점
Class	.	.container { ... }	10점
Id	#	#header { ... }	100점
Group	,	h1, h2 { ... }	각자 계산

 

학습 정리

• 가급적 클래스 선택자(.)를 중심으로 스타일을 짜는 것이 재사용성과 확장성 측면에서 가장 유리합니다
• 아이디  선택자(#)는 우선순위가 너무 높아서 나중에 스타일을 덮어쓰기 힘들 수 있으니 꼭 필요한 경우에만 신중히 사용하세요
• 그룹 선택자(,) 잘 활용하면 CSS 파일의 전체 길이를 획기적으로 줄일 수 있습니다

 

- CSS Precedence and Inheritance

Cascading (캐스케이딩)

캐스케이딩은 '폭포수처럼 위에서 아래로 흐른다'는 뜻입니다

하나의 요소에 여러 CSS 규칙이 적용될 때, 충돌을 해결하고 최종적으로 어떤 스타일을 적용할지 결정하는 원칙입니다

결정 방식은 크게 세 가지 기준을 따릅니다

• 중요도(Importance): !important가 있는지 확인합니다
• 우선순위(Specificity): 어떤 선택자가 더 구체적인지 계산합니다
• 소스 순서(Source Order): 나중에 작성된 코드가 이전 코드를 덮어씁니다

 

CSS Precedence (우선순위/명시도)

우선순위 점수 계산표

우선순위	선택자 종류	설명	점수
1순위	!important	무조건 최우선 적용 (사용 자제 권장)	-
2순위	Inline Style	HTML 태그 내에 style="..."로 직접 작성	1000점
3순위	ID 선택자	#header, #main 등	100점
4순위	Class/가상 선택자	.container, :hover 등	10점
5순위	Element 선택자	div, h1, p 등 태그 이름	1점
6순위	전체 선택자	*	0점

 

꿀팁: 같은 점수라면 나중에 작성된 스타일이 이긴다

 

CSS Inheritance (상속)

상속은 부모 요소에 적용된 스타일 속성들이 자식 요소에게 자동으로 전달되는 현상을 말합니다.

상속되는 속성 vs 안 되는 속성

• 상속되는 속성 (텍스트 관련): color, font-family, font-size, font-weight, line-height, text-align 등.
  
  

핵심 요약표

개념	핵심 내용
Cascading	스타일 적용의 우선순위를 정하는 전체적인 시스템
Precedence	선택자의 종류에 따라 부여되는 점수 (ID > Class > Tag)
Inheritance	부모의 스타일(주로 텍스트)이 자식에게 대물림되는 특성

 

학습 정리

• 스타일이 의도대로 나오지 않는다면 개발자 도구(F12)의 'Computed' 탭을 확인해 어떤 규칙에 의해 덮어씌워졌는지 확인
• **!important**는 우선순위 시스템을 무너뜨리므로, 정말 필요한 경우가 아니면 사용을 피하는 것이 유지보수에 좋다

 

- CSS minifier and compressor

실무에서 쓰는 코드 정리 및 압축 해주는 사이트

CSS Minifier & Compressor | Toptal®

CSS Minifier & Compressor | Toptal®

 

- CSS font Property

font-family (글꼴 종류)

텍스트에 적용할 글꼴을 지정합니다

• 기본 원칙: 사용자의 컴퓨터에 해당 폰트가 없을 경우를 대비해 여러 개의 후보 글꼴을 쉼표로 구분하여 작성합니다
• Generic Family (태그): 마지막에는 반드시 sans-serif(고딕 계열)나 serif(명조 계열) 같은 일반적인 글꼴 유형을 써서 대체 폰트가 작동하게 합니다
• 주의: 폰트 이름에 공백이 있다면 반드시 따옴표(" ")로 감싸야 합니다

body {
  font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
}

 

font-size (글자 크기)

글자의 크기를 결정합니다

• 절대 단위: px(픽셀) - 기기 화면의 화소 단위로 고정된 크기를 가집니다
• 상대 단위: em, rem - 부모나 최상위 요소의 크기에 비례하여 변하므로 반응형 웹에 적합합니다
• 키워드: small, medium, large 등으로도 지정할 수 있습니다

 

font-style (글자 스타일)

글자를 기울일지 말지를 결정합니다.

• normal: 일반적인 형태입니다. (기본값)
• italic: 이탈릭체(기울임꼴)로 표시합니다
• oblique: 글자를 강제로 비스듬히 기울입니다. (italic과 비슷하지만 방식이 다릅니다.)

 

font-weight (글자 굵기)

텍스트의 두께를 조절하여 강조 정도를 정합니다

• 키워드: normal(기본), bold(굵게)를 주로 사용합니다
• 숫자 값: 100부터 900까지 100 단위로 세밀하게 조절할 수 있습니다
  • 400은 normal과 같고, 700은 bold와 유사합니다

 

font (축약형 속성)

위의 속성들을 한 줄로 합쳐서 작성할 수 있습니다

• 순서: style weight size family (크기와 글꼴은 필수 입력 사항입니다.)
• 예시: font: italic 700 16px "Arial", sans-serif;

 

폰트 주요 속성 요약표

속성	설명	주요 값 예시
font-family	서체 지정	"Roboto", sans-serif
font-size	글자 크기	16px, 1.2rem
font-style	기울임 여부	italic, normal
font-weight	굵기 조절	bold, 400, 700

 

학습 정리

• 웹 접근성을 높이기 위해 본문 텍스트의 크기는 px보다는 rem 단위를 사용하는 것이 좋습니다
• 웹 폰트(Google Fonts 등)를 사용할 때는 로딩 속도를 고려해 필요한 font-weight만 골라 담는 것이 성능 최적화의 팁

 

코드 설명 및 팁

1. rem 단위 사용: font-size에서 px 대신 rem을 사용하면, 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 웹사이트 전체 글꼴도 함께 유동적으로 변하여 웹 접근성에 매우 좋습니다
2. font-weight 숫자 값: 구글 폰트처럼 웹 폰트를 불러올 때 해당 굵기(400, 700 등)를 명시적으로 포함해야 숫자로 제어할 수 있습니다
3. 축약형 주의사항: font 축약형을 쓸 때는 **font-size와 font-family**가 반드시 포함되어야 하며, 순서가 틀리면 속성이 무시될 수 있으니 주의하세요