S1. HTML/CSS

노션으로 보기

Unit6 - [HTML/CSS] 활용

---

레이아웃

: 각각의 요소를 목적에 배치하는 것

와이어프레임

: 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것

목업

: 실물 크기의 모형

: 실제 제품이 작동하는 모습과 동일하게 HTML문서를 작성 → 트윗 작성자, 트윗 내용등을 HTML 문서 내에 하드코딩하는 방식

하드코딩

: 상수나 변수에 들어가는 값을 소스코드에 직접쓰는 방식

: 사용자에게 입력받을 정보를 소스코드에 입력 or 변수, 아이디, 비번 등 중요정보를 주석 처리하는 것도 하드코딩이다.

HTML의 [수직분할] 과 [수평분할]

• [수직분할] : 화면을 수직으로 구분, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
• [수평분할] : 분할된 각각의 요소를 수평으로 구분, 내부콘텐츠가 세로로 배치될 수 있도록 요소를 배치
  • 수평으로 구분된 요소 + height속성을 추가 ⇒ 수평분할을 보다 직관적으로 만들 수 있다.

Atomic CSS 방법론

: 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법

Flexbox

❗️ Flexbox 참고자료

---

• Flexbox로 레이아웃을 구성한다는 것 : 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

• Flexbox 속성을 활용하면 → 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다.

  ※ Flexbox 속성 ⇒ 부모요소, 자식요소 각각에 적용해야 하는 속성이 별도임을 주의 ※

Flexbox 요점 정리

1. 부모요소에 적용해야하는 Flexbox 속성들

---

flex-direction

: 자식 요소들을 정렬할 정렬 축을 정한다.

: 아무것도 설정X → 기본적으로 가로 정렬된다.

/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */
main {
	display: flex;
	**flex-direction : row;**
}

flex-wrap

: If 하위 요소들의 크기 > 상위 요소의 크기일 때 ⇒ 자동으로 줄바꿈 할 것인지 정한다.

: 설정X → 기본적으로 줄바꿈을 하지 않는다.

/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */
main {
	display: flex;
	**flex-wrap : nowrap;**
}

flex-direction 와 flex-wrap 을 한번에 지정하고 싶다면?

---

💡 **flex-flow**

• flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
• flex-direction, flex-wrap의 순으로 한 칸 떼고 써준다.

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

justtify-content

: 수평축 방향 정렬

: 자식 요소들을 축의 수평방향으로 어떻게 정렬할건지 정한다.

1. **flex-start (기본값)

   : 아이템들을 시작점으로 정렬

2. **flex-end**

   : 아이템들을 끝점으로 정렬

3. center

   : 아이템들을 가운데로 정렬

4. **space-between**

   : 아이템들의 “사이”에 균일한 간격을 만들어준다.

5. **space-around**

   : 아이템들의 “둘레”에 균일한 간격을 만들어준다.

6. **space-evenly**

   : 아이템들의 사이와 양끝에 균일할 간격을 만들어 준다.

💡 `space-between` / `space-around` / `space-evenly` ?

1. **stretch (기본값)

: 아이템들이 수직축 방향으로 끝까지 늘어난다.

1. center

   : 아이템들을 가운데로 정렬

1. flex-start

   : 아이템들을 시작점으로 정렬. (row일땐 위, column 일땐 왼쪽)

1. **flex-end**

   : 아이템들을 끝으로 정렬 (row일땐 아래, column일땐 오른쪽)

1. baseline

   : 아이템들을 텍스트 베이스라인을 기준으로 정렬

💡 **`justtify-content` 와 `align-items` 의 응용 !**

• **justify-content: center; align-item: center**; 를 해주면 ⇒ 쉽게 아이콘을 한 가운데에 놓을 수 있다!

2. 자식요소에 적용해야하는 Flexbox 속성들

---

• 부모 요소 적용 속성은 “자식 요소들의 정렬”과 관련 ↔ 자식 요소 적용 속성인 flex는 “요소가 차지하는 공간”과 관련된다.

flex 속성의 값

**flex-grow** : <팽창지수> 요소의 크기가 늘어나야 할때 얼마나 늘어날 건지

**flex-shrink** : <수축지수> 요소의 크기가 줄어들어야 할때 얼마나 줄어들 건지

**flex-basis** : <기본 크기> 늘어나고 줄어드는 것과 상관 없이, 기본 요소 크기는 얼마인지

❗ 1. Flex 속성을 따로 설정 하지 않으면 아래와 같이 **기본값**이 적용, **오른쪽**으로 콘텐츠 크기만큼 배치됨. ⇒ **`flex: 0 1 auto;`** 2. **`flex: grow shrink basis` 순서를 반드시 기억 !** 3. 각 값을 따로 지정해줄 수도 있다.

grow <팽창지수>

• 자식 요소의 grow값 / 자식요소들의 grow갓의 총합의 비율로 빈 공간을 가져간다.
• 즉, grow는 절대적 크기가 아닌 ⇒ 총합에서의 비율로 빈 공간을 차지하게 된다.

shrink <수축지수>

• 설정한 비율만큼 박스크기가 작아진다.

❌ **`flex-grow` 과 `flex-shrink` 속성을 함께 쓴는 건 비추천**

• 비율로 레이아웃을 지정할 경우 :

  ⇒ flex-grow or flex : <grow> 1 auto 와 같이 **grow 속성에만** 변화를 주는 방식이 권장!

🤷‍♀️Why? : flex-shrink 속성은 width 또는 flex-basis 속성에 따른 비율 → 실제크기 예측이 어렵기 때문

basis <기본크기>

• flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기

💡 `**flex-grow` 속성값이 0일 경우에만 ⇒** `**flex-basis`속성의 값이 기본크기로 유지**된다.

/*basis 기본크기 설정에 옳은 예 */
flex-grow: 0;   /* 중요! grow 0이여야만 함! */
flex-shrink: 1;
flex-basis: 300px;

/*basis 기본크기 설정에 옳지 않은 예 */
flex-grow: 1;   /* 중요! grow 0이여야만 함! */
flex-shrink: 1;
flex-basis:50px ;

추가

💡 `width`와 `flex-basis`를 동시에 적용하는 경우, `flex-basis`가 우선 💡 콘텐츠가 많아 자식 박스가 넘치는 경우, `width`가 정확한 크기를 보장하지 않는다. 💡 (`flex-basis`를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, `width` 대신 `max-width`를 쓸 수 있다. 💡 부모 요소의 높이를 따로 설정하지 않으면 → 자식 요소의 크기에 맞춰 높이가 설정된다. 💡 height: **100vh** ⇒ **브라우저 화면의 높이만큼의 길이** 💡 박스 사이즈는 **border-box**로 지정한다.

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

💡 `**border-radius**` : 테두리를 둥글게