Week1 - CSS 개념 정리

📌 CSS 규칙

div {
	color: blue;
}

• div - CSS 선택자
• 속성 값 - CSS 선언
  
  

📌 아이디

#oauch {
	color: blue;
}


<div id="oauch"> oauch </div>

• 중복 사용 X
• 지정해서 해당 태그에만 스타일을 줄 수 있다.
• 요소 1개만 선택 가능
• css 파일에서 # 사용

📌 클래스

.oauch {
	color: blue;
}


<div class="oauch"> oauch </div>

• 중복 사용 O
• css 파일에서 . 사용
  
  

🔥 아이디 vs 클래스

아이디 : 하나만 스타일 적용하고 싶을 때
클래스 : 여러개 한번에 스타일 적용하고 싶을 때

---

📌 절대적인 단위

• 픽셀(px)

📌 상대적인 단위

• 퍼센트(%), em, rem
  
  

📌 픽셀 (Px)

• 화면을 표시하는 기준이 되는 가장 작은 정사각형
  
  

📌 PPI (Pixel Per Inch)

• 모니터에서 1인치 정사각형 안에 픽셀이 몇개 들어가는지
• 높은 해상도일수록, 세밀한 표현 가능
  
  

📌 해상도 (Resolution)

• 가로, 세로 몇 px을 보여주는지
• ex) 1980 x 1600
  
  

📌 퍼센트 (%)

• 부모 태그에 대해서 상대적인 크기
• 크기를 바꾸고 싶으면, 부모만 바꾸면 됨
  
  

📌 em, rem

• 글자 크기를 기준으로 상대적인 크기를 정함

---

📌 색상 단위

• red, green, blue로 나뉜다.
  
  

📌 색상 코드

• # 사용
• 6글자의 코드
• 16진수로 두 글자씩
• #FFFFFF
  
  

📌 RGB

• 빨강, 초록, 파랑 값을 조합해 색상을 표현
• 빨,초,파 10진수
• rgb(255, 255, 255)
  
  

📌 RGBA

• 빨강, 초록, 파랑, 알파 값을 조합해 색상을 표현
• 빨,초,파 10진수
• 알파값 0 ~ 1 사이 소수값
• rgba(0, 0, 0, 0.5)

---

📌 코멘트 문법

/* 코멘트 */

📌 하위 호환성 (backwards compatibility)

• 옛날 버전을 지원하면서 다음 버전으로 업그레이드 하는 것

---

📌 줄높이 (line-height)

• 단위 없이 쓰이며, 글자 크기에 상대적인 값
• font-size: 12px 이면 line-hegiht: 1은 12px * 1 = 12px
  
  

📌 텍스트 꾸미기 (text-decoration)

• none / underline / line-through 등 속성값 존재

---

🧩 자주 쓰는 CSS 속성

📌 배경 이미지 (background-image)

.cover {
	background-image: url('주소');	# 배경이미지
    background-repeat: no-repeat;	# 반복
  	background-position: center;	# 위치
  	background-size: cover;			# 크기
}

📌 그라디언트 (linear-gradient)

.cover {
	background-image: linear-gradient(속성값들...);
}

🔥 이미지 위에 그라디언트 사용

.cover {
	background-image: linear-gradient(속성값들...),
    url('이미지 주소');
}

🍯 CSS 그라디언트

📌 그림자 (box-shadow)

.cover {
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
}

• offset-x, offset-y : 그림자의 위치를 지정합니다.
• blur-radius : 숫자가 커질수록, 그림자가 블러 처리되어 흐려집니다.
• color : 그림자의 색깔을 지정할 수 있습니다.

🍯 그림자

📌 불투명도 (opacity)

.cover {
	opacity: 0.5;
}

• 요소 전체를 반투명하게 만들 때, 사용

---

🧩 박스모델

📌 padding

• 영역 안쪽 여백을 넣을 때 사용
• 시계방향 순서

padding: 10px 10px 10px 10px;	# 상 우 하 좌

padding-top: 10px;		# 상
padding-right: 10px;	# 우
padding-bottom: 10px;	# 하
padding-left: 10px;		# 좌

📌 margin

• 영역 바깥쪽 여백을 넣을 때 사용
• 시계방향 순서

margin: 10px 10px 10px 10px;	# 상 우 하 좌

margin-top: 10px;		# 상
margin-right: 10px;		# 우
margin-bottom: 10px;	# 하
margin-left: 10px;		# 좌

📌 border

• 테두리

border: 1px solid #fefefe;

굵기, 테두리 모양, 색상

📌 border-radius

• 모서리를 둥글게 만들어주는 속성
• border가 없어도 사용가능

border-radius: 10px;

📌 box-sizing

box-sizing: border-box;

• border를 기준으로 너비를 지정
  
  

📌 overflow

• 넘친 내용을 숨김, 스크롤 할 수 있게 해줌

overflow: hidden;	# 숨김
overflow: auto;		# 넘치면 스크롤
overflow: scroll;	# 항상 스크롤

📌 white-space

• 띄어쓰기, 줄 바꿈 등 공백문자를 말함

white-space: nowrap;	# 줄바꿈 안함 (가로 스크롤 할 때)

📌 마진 상쇄

• 이웃하는 요소들끼리 마진 상쇄 발생
• 부모, 자식 사이에도 마진 상쇄를 일어날 수 있다.
  - 부모요소에 border, padding이 있어 어떤 경계가 생기면 마진 상쇄 X
  
  

---

🧩 디스플레이 (display)

📌 블록 (block)

• 위에서부터 아래로
• 너비와 높이 지정 O
  

📌 인라인 (inline)

• 글쓰는 방향
• 화면에 꽉차면 다음 줄로 넘어감
• 너비나 높이 지정 X
• img 같은거는 가능
• 여백은 가로만 가능 (글쓰는 방향)
  

📌 인라인 블록 (inline-block)

• 배치는 inline처럼 하면서 크기 조절도 하고 싶을 때
  

---

🧩 선택자

📌 선택자 목록

.a1,
.a2 {
	저런식으로 선택해서 사용 가능
}

📌 자식 결합자

.a1 > a2 {
	저기 꺽새가 자식을 가르킴
}

.a1 a2 {
	이런식으로도 사용 가능
}

📌 가상 클래스

a:hover {
  text-decoration: underline;
}

:active : 클릭할 때 상태
:hover : 마우스를 올려놨을 때
:focus : 모양을 지정할 수 있는 것
:visited : 방문 했을 때

🔥 선택자는 최대한 단순하게

---

📌 캐스케이드

• 여러 CSS 규칙이 적용될 때, 순서에 따라 합친다.
• CSS 규칙들은 순서에 따라 합쳐서 적용
  
  

📌 캐스케이드 순서

• 선택자에는 명시도라는게 있고, 선택자가 많을수록, 명시도가 높아서 우선적으로 캐스케이드 된다.

🔥 명시도 : 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 매긴다.

🔥 상속 적용 vs 직접 요소

• 무조건 직접요소가 더 높다

📌 상속

• CSS 속성은 조상 태그에서 상속
  
  

📌 코드 상의 순서

• 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높다.
• 단, 같은 선택자일때만

사진 출처 : 코드잇