[SEB_FE] Unit3, CSS🐣

1. CSS란?

웹 페이지 스타일 및 레이아웃을 정하는 스타일시트 언어, UX 제공
CSS를 통해 가독성을 높일 수 있다. 보다 잘 전달될 수 있는 효과를 준다.
직관적이고 쉬운 UI를 제작하는 것은 FE 개발자의 목적이자 소양이다. 결국 좋은 UX를 만드는 것은 FE개발자의 능력에서 나온 직관적이고 쉬운 UI이다. (컴포넌트의 기능 별로 구분하는 능력 또한 중요할 것 같다.) UX에 대해 고민하고, 좋은 구성이나 배치에 대해 끊임없이 고민하는 것이 중요하다.

2. CSS의 문법 구성

---

셀렉터(Selector), 선언 블록(Declaration block), 선언(Declaration)으로 이루어 지는데, 선언 안의 속성명(Property)와 속성값(Value) , 선언구분자가 포함되어 있다. 밑 {} 안이 선언 블록이다. 하나의 속성만 작성할 때는 세미콜론은 붙이지 않아도 무방하다.

.class(셀렉터) {
	color : blue;(선언)
}

link는 html 파일과 다른 파일을 연결하는 목적으로 사용된다. 인라인과 내부 스타일시트보다는 외부스타일 시트를 추천한다.

link rel="stylesheet" href="index.css" />

3. 스타일링 적용

---

✈️id로 이름 붙여서 스타일링 적용

h1 {
  color: blue;
}

section 별로 다른 색상을 적용하고 싶다면, id 를 활용하면 된다. #으로 선택하고, 한 문서에 하나의 요소에만 적용가능하다.(id는 고유값!) 특정 요소에 이름을 붙이는 데 사용된다.

#navigation-name {
  color: red;
}

✈️class로 스타일을 분류하여 적용

.으로 선택한다. 동일한 값을 갖는 요소가 많을 때 사용한다.

.menu {
  color : red;
}

여러 클래스를 하나의 요소의 적용하기 위해서는 띄어쓰기로 클래스의 이름을 구분한다.

4. CSS 개념

---

• 색상 : color

• 배경색상 : background-color

• 테두리색상 :border-color

• 글꼴: font-family , => google Fonts에서 다양한 폰트 적용 가능하다.

• 글꼴 크기 : font-size

• 가로 정렬 : text-align ( left,right, center, justify)

• 절대 단위 : px,pt

• 상대 단위 : %,em, rem,ch,vw,vh 등등..

  글꼴이나 화면 사이즈를 정할때 상대단위를 추천하는데, 사용자 접근성에 유리하다. 반응형 웹에서 기준점을 만들 때 크롬 브라우저에서 디바이스의 너비나 높이 별로 어떻게 보이는지 테스트 할 수 있다. Viewport가 바뀜에 따라 딱 떨어지게 웹을 보여주는 사례가 상대크기를 사용한 것이다. 사용자가 사용하는 디바이스가 바뀌어도 보기 좋은 UI를 만드는 것이 중요할 것 같다.
  (기본적인 것만 정리했다.)

5. 박스 모델

---

모든 콘텐츠는 고유의 영역을 가지며 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 박스는 항상 직사각형이며, 너비와 높이를 가진다. 줄바꿈이 되는 박스(block)과 옆으로 붙는 박스(inline, inline-box)로 구분 가능하다. 줄 바꿈이 되는 요소에는 h1,p , 줄바꿈이 안되는 요소는 span이 있다. span는 width와 height 속성이 적용되지 않는 경우다. 이때 css에서 display = inline-block을 추가하면 속성 적용이 가능하다

css 박스 모델은 border를 기준으로 padding(안쪽)과 margin(바깥쪽)이 있다. border-box인 경우 box의 높이: height + padding-top + padding-bottom + border-top + border-bottom , content-box인 경우 box의 높이: height(width일때도 비슷한 방법으로 계산해준다!)

p {
  margin: 10px 20px 30px 40px; // 상 우 하 좌(시계방향)
}

6. CSS Selecter

---

- 전체 셀렉터

* { }

- 태그 셀렉터

h1 { }
section, div { }

- id 셀렉터
#id { }
- class 셀렉터
.class { }
- 자식 셀렉터
첫번째로 입력한 요소 바로 아래 자식인 요소
header > p { }
- 형제 셀렉터
부모 요소를 공유하면서 첫번째 입력 요소 뒤에 오는 두번째 입력한 모든 요소 선택
header ~ p { }
- 인접 형제 셀렉터
같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두번째 입력한 요소를 선택한다.

a:link { } ,a:visited { } ,a:hover { } ,a:active { } ,a:focus { } 등등 요소 상태 정보에 기반해 선택하는 가상클래스 셀렉터도 있다. 그 밖에도 UI 요소 상태 셀렉터, 구조 가상 클래스 셀렉터, 부정 셀렉터, 정합성 확인 셀렉터 등이 있다.