Unit6 - [HTML/CSS] 활용

🔥 레이아웃

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

1. 와이어프레임(Wireframe)

: 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계
와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추할 수 있도록 해야한다.

목업(Mock-up)
: 실물 크기의 모형, 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성

2. 화면을 나누는 방법

HTML 구성하기
콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다.
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다.

• 수직 분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소 배치
• 수평 분할 : 분할된 각각의 요소를 수평으로 구분하여, 콘텐츠가 세로로 배치될 수 있도록 요소 배치

레이아웃 리셋
HTML 문서는 기본적인 스타일을 가지고 있어, 때때로 레이아웃을 잡는데 방해가 되기도 한다.

* {
	box-sizing: border-box;
	}

body {
	margin: 0;
    padding: 0;
   }

위 코드를 작성하면 기본 스타일링을 제거하여, 디자인 하는대로 레이아웃 구현 가능하다.

---

🔥 Flexbox

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

1. Flexbox 따라하기 - 1

Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간 설정 가능

display: flex
: 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법

부모 요소에 적용해야하는 Flexbox 속성 (자식 요소들의 정렬과 관련)

• flex-direction : 정렬 축 정하기
  : 부모 요소에 설정해주는 속성, 자식 요소들을 정렬할 정렬 축을 정한다.
  ( 아무것도 설정하지 않으면 기본적으로 가로 정렬 )
  row(기본값, →), column(↓), row-reverse(←), column-reverse(↑)

• flex-wrap : 줄 바꿈 설정하기
  : 하위 요소들들의 크기가 상위 요소의 크기를 넘으면 자동으로 줄 바꿈을 할 것인지 정한다. ( 설정해주지 않으면 줄 바꿈을 하지 않는다. )
  nowrap(기본값), wrap, wrap-reverse

• justify-content : 축 수평 방향 정렬
  : 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다.
  row(기본값, ↔), column(↕️)

• align-items : 축 수직 방향 정렬
  : 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.
  row(기본값, ↕️), column(↔)

2. Flexbox 따라하기 - 2

자식 요소에 적용해야하는 Flexbox 속성 (요소가 차지하는 공간과 관련)

flex 속성의 값

grow (팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
shrink (수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
basis (기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지

flex: 0 1 auto;  /* 기본 값 */

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;  /* flex 속성 안에 세 가지 값을 한번에 설정해주지 않아도 된다. */

• 자식 요소에 flex 속성을 따로 설정해주지 않으면 기본값이 적용된다.
• 왼쪽에서 오른쪽으로 콘텐츠의 크기만큼 배치된다.

- grow : 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것
자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 빈 공간을 가져간다.
=> 팽창 지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지한다.

- shrink : grow와 반대, 설정한 비율만큼 박스 크기가 작아진다.
(비율이 클수록 더 많이 줄어든다,shrink 속성보다 grow 속성을 사용하는 것을 권장함)
flex-grow 속성으로 비율을 변경할 때, flex-shrink 속성은 기본값으로 둬도 무방하다.

- basis : 자식 박스가 grow나 shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
( basis 로 설정된 크기가 항상 유지되는 것은 아니다. )
flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선시된다.

---

과제. 계산기 목업 만들기

=> html, css 사용해서 아래 계산기 목업 구현

github repository

---

추가 내용

사용자 지정 CSS 속성 사용하기 (변수)
문서 전반적으로 재사용할 임의의 값을 담는다.
전용 표기법을 사용해 정의하고 (--main-color: black;),
var() 함수 (color: var(--main-color);)를 사용해 접근할 수 있다.

- 기본 사용법
: 두 개의 붙임표로 시작하는 속성의 이름과 함께 유효한 CSS값이라면 아무거나 그 값으로 지정해 선언한다.

element {
	--main-bg-color : yellow;
}

:root 의사 클래스에 선언해 HTML 문서 어디서나 사용자 지정 속성에 접근 가능하도록 구성

:root {
	--main-bg-color: yellow;
}

참고 - MDN 사용자 지정 CSS 속성 사용하기