CSS 개요, 속성

---

🎨 기본 문법

선택자 { 속성: 값; }

• 선택자는 스타일(CSS)을 적용할 대상(selector)을 의미합니다.

• 속성은 스타일(CSS)의 종류(property)를 의미합니다.

• 값은 스타일(CSS)의 값(value)을 의미합니다.
  ❗ 세미콜론이 누락되지 않도록 주의

-> 코드를 작성할 때는 예쁘게 작성하는 게 중요합니다!

🎨 선언 방식

1. 내장 방식 : 태그 안에 스타일을 작성하는 방식입니다. (권장 ❌)

<style>
	div	{
		color: blue;
        padding: 1rem;
	}
</style>

2. 인라인 방식 : HTML의 전역 속성인 style을 이용해 직접 스타일을 작성하는 방식입니다. (권장 ❌)

<div style="color: blue; padding: 1rem;"></div>

3. 링크 방식 : link 태그를 이용해서 외부 CSS 파일을 가져오는 방식입니다. (병렬)

<link rel="stylesheet" href="style.css" />

4. import 방식 : CSS의 @import 규칙을 이용해서 CSS 문서 안에 또 다른 CSS 문서를 연결하는 방식입니다. (직렬)

@import url("./header.css");

🎨 선택자

CSS는 크게 5가지의 선택자를 갖습니다.

1. 기본

   • * 전체 선택자(Universal Selector) : 모든 요소를 선택합니다.

   • 태그 선택자(Type Selector) : 태그 이름을 선택합니다.

   • 클래스 선택자(Class Selector) : HTML class 속성의 값 .을 이용해 선택합니다.

   • 아이디 선택자(ID Selector) : HTML id 속성의 값 #을 이용해 선택합니다.

	/* 전체 선택자 */
	* {
		color: blue;
	}
    
    /* 태그 선택자 */
    div {
		padding: 16px;
    }
    
    /* 클래스 선택자 */
    .wrap {
    	display: flex;
    }
    
    /* 아이디 선택자 */
    #wrap {
    	display: block;
    }

2. 복합

   • 일치 선택자(Basic Combinator) : 선택자를 동시에 만족하는 요소를 선택합니다.

   • 자식 선택자(Child Combinator) : 선택자의 자식 요소를 선택합니다.

   • 하위(후손) 선택자(Descendant Combinator) : 선택자의 하위 요소를 선택합니다.

   • 인접 형제 선택자(Adjacent Sibling Combinator) : 부모 요소를 공유하는 형제 요소 하나를 선택합니다.

   • 일반 형제 선택자(General Sibling Combinator) : 부모 요소를 공유하는 모든 형제 요소를 선택합니다.

	/* 일치 선택자 */
	div.wrap {
		color: blue;
	}
    
    /* 자식 선택자 */
    div > span{
		color: white;
    }
    
    /* 하위 선택자 */
    .wrap .btn {
    	padding: 16px;
    }
    
    /* 인접 형제 선택자 */
    ul + li {
    	color: olive;
    }
    
    /* 일반 형제 선택자 */
    ul ~ li {
    	color: olive;
    }

3. 가상 클래스 (Pseudo-Classes)

   • :hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택됩니다.

   • :active : 선택자 요소에 마우스가 클릭된 상태에서 선택됩니다.

   • :focus : 선택자 요소에 포커스가 되면 선택됩니다. (HTML의 대화형 콘텐츠 요소에 적용 가능합니다.)

   • :first-child : 선택자 요소 중 첫 번째 요소가 선택됩니다.

   • :last-child : 선택자 요소 중 마지막 요소가 선택됩니다.

   • :nth-child(n) : 선택자의 형제 요소 중 (n)째 요소가 선택됩니다.

   • :not() : 선택자가 아닌 요소를 선택합니다.

4. 가상 요소 (Pseudo-Elements)

   • ::before : 선택자 요소의 내부 앞에 내용을 삽입합니다.

   • ::after : 선택자 요소의 내부 뒤에 내용을 삽입합니다.

5. 속성 (Attribute) : 속성을 포함한 요소를 선택합니다.

🎨 스타일 상속

스타일 상속은 부모 요소의 스타일이 자식 요소의 스타일에 상속되는 것을 의미합니다.
(💥 글자/문자 관련 속성들이 상속)

inherit 속성 값을 사용하면 강제적으로 부모의 스타일을 상속받을 수 있습니다.

🎨 선택자 우선순위

우선순위란 같은 요소가 여러 선언의 대상의 된 경우, 어떤 선언의 CSS 속성을 우선으로 적용할지 결정하는 방법을 의미합니다.

1. 점수가 높은 선언이 우선이 됩니다.
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선이 됩니다.

🎨 width, height

• width : 요소의 너비를 설정합니다.
  - 기본값: auto

• max-width : 요소의 최대 너비를 설정합니다.
  - 기본값: none
  

• min-width : 요소의 최소 너비를 설정합니다.
  - 기본값: 0

---

• height : 요소의 높이를 설정합니다.
  - 기본값: auto

• max-height : 요소의 최대 높이를 설정합니다.
  - 기본값: none

• min-height : 요소의 최소 높이를 설정합니다.
  - 기본값: 0

🎨 단위

• px : 픽셀

• % : 상대적 백분율

• em : 요소의 글꼴 크기
  -> 요소 글꼴 크기 16px, 1.5em = 24px

• rem : 루트 요소의 글꼴 크기
  -> 루트 요소 글꼴 크기 16px, 1.5rem = 24px

• vw : 뷰포트 가로 너비의 백분율

• vh : 뷰포트 세로 너비의 백분율

🎨 box-sizing

box-sizing는 요소의 크기를 계산하는 기준을 지정해 주는 속성입니다.

• content-box : box-sizing의 기본 값으로 요소의 내용으로 크기를 계산합니다.
• border-box : 요소의 내용, padding, border의 총합을 크기로 계산합니다. -> 총합이 자동으로 계산 되어서 편리

🎨 overflow

overflow는 요소의 크기 이상으로 내용이 넘쳤을 경우, 보이는 내용을 제어하는 단축 속성입니다.

• visible : overflow의 기본값으로 넘친 내용을 그대로 보여줍니다.
• hidden : 넘친 내용을 잘라내는 속성값입니다.
• scroll : 넘친 내용을 잘라내고 스크롤바를 생성합니다.
• auto : 넘친 내용이 있을 경우에만 내용을 잘라내고 스크롤바를 생성합니다.

❗ overflow-y, overflow-x를 이용해 개별적으로 스타일을 줄 수 있습니다.

🎨 position

position은 요소의 위치를 지정해 주는 속성입니다.

• static : 기본값으로 기준이 없음을 의미합니다.
• relative : 요소 자신을 기준으로 위치를 지정합니다.
• absolute : 위치 상 부모 요소를 기준으로 위치를 지정합니다.
• fixed : 뷰포트를 기준으로 위치를 지정합니다.
• static : 스크롤 영역을 기준으로 위치를 지정합니다.

❗ z-index를 사용하려면 우선적으로 position을 지정

🎨 flex

flex는 요소를 주축을 기준으로 정렬하는 속성입니다.
flex를 선언하면 요소들은 flex-container(부모)와 flex-item(자식)이 됩니다.

❗ container와 item에 각각 다른 속성이 적용됩니다.

📍 container에 적용되는 속성 & 값

• display :
  - flex -> 블록 요소 container
  - inline-flex -> 인라인 요소 container
  
  
• flex-direction :
  - row -> 기본 값 행(수평)을 기준으로 정렬
  - column -> 열(수직)을 기준으로 정렬
  
  
• flex-wrap :
  - nowrap -> 기본 값 줄 바꿈 ❌
  - wrap -> 줄 바꿈 ⭕️
  
  
• ✨ justify-content : 주 축을 기준 정렬
  - flex-start -> 기본 값 items를 시작점으로 정렬
  - flex-end -> items를 끝점으로 정렬
  - center -> items를 가운데 정렬
  - space-between -> 각 items 사이를 균등하게 정렬(양 끝은 공백 ❌)
  - space-around -> 각 items의 외부 여백을 균등하게 정렬
  - space-evenly -> 각 itmes에 동일한 여백을 생성해 정렬
  
  
• align-content : 교차 축 기준 여러 줄 정렬 -> 이 속성은 flex-wrap이 wrap일 경우에만 적용
  - stretch -> 기본 값
  - 이외 속성 값은 justify-content와 같습니다.
  
  
• ✨ align-items : 교차 축 기준 한 줄 정렬
  - align-content와 동일하게 stretch, flex-start, flex-end, center 속성 값을 갖습니다.
  • baseline -> items를 각 줄의 문자 기준선에 정렬

❗ flex의 justify-content: center;와 align-items: center;를 사용하면 요소를 쉽게 가운데 정렬을 시킬 수 있습니다.

---

📍 item에 적용되는 속성 & 값

• order : 각 item들의 나열 순서를 결정하는 속성 -> HTML 구조는 바뀌지 않습니다.

• flex-grow : item의 증가 너비 비율을 설정
  - 기본값: 0

• flex-shrink : item의 감소 너비 비율을 설정
  - 기본값: 1

• flex-basis : item의 기본 크기를 설정
  - 기본값: auto

  • basis 값을 0으로 지정하면 깔끔한 비율로 요소의 너비를 설정할 수 있습니다.

• flex : flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 단축 속성입니다.

• align-self : align-items의 item 버전으로 item을 교차 축 기준으로 정렬합니다.