블로깅챌린지]Unit.4 HTML / CSS 활용 - 코드스테이츠

SEB_FE_45

Section1. Unit 4. HTML / CSS 활용

---

1. 레이아웃

레이아웃이란 각각의 요소를 목적에 맞게 배치하는 것이다.

이를 위해 와이러프레임 작업을 먼저 수행해야 한다. 와이어 프레임이란 레이아웃의 뼈대를 그리는 단계이다.

와이어프레임은 선과 도형을 이용하여 인터페이스를 시각적으로 표현하는 것이며, 레이아웃과 제품의 구조를 단순하게 보여주는 용도이다.(전환효과, 애니메이션, 사용자 경험에 대한 판단은 고려하지 않는다.)

---

와이어프레임 단계이후에는 목업(Moke-up)을 만들어야 한다.

목업이란 대부분의 산업에서 실물크기의 모형을 의미한다.

와이어프레임과 목업이 없는 HTML은 도면없는 건물과 같다고 볼 수 있다.

---

HTML 구성은 컨텐츠의 흐름 방향에 따라 차례대로 진행한다.

컨텐츠는 왼쪽에서 오른쪽으로 위에서 아래로 흐른다.

이에 CSS로 화면 구성 시 수직분할과 수평분할을 차례대로 적용한다.

• 수직분할이란 화면을 수직으로 구분하는 것이며, 컨텐츠가 가로로 배치된다.
• 수평분할은 화면을 수평으로 구분하여 컨텐츠가 세로로 배치된다(heigh 값을 적용하면 수평분할을 더욱 직관적으로 확인할 수 있다.)

---

HTML 문서는 기본적으로 가지고 있는 스타일이 있다. 이에 때대로 레이아웃을 잡을 때 방해가 되는 경우가 있다. 이에 레이아웃 리셋을 통해 기본 스타일을 초기화시켜줘야 레이아웃을 적용하기 용이하다.

* {
  box-sizing:border-box;
}

body {
  margin: 0;
  padding: 0;
}

---

2. Flexbox

Flexbox는 박스를 유연하게 늘리거나 줄여서 레이아웃을 잡는 방법이다.

속성을 이용하여 요소의 정렬과 요소가 차지하는 공간을 설정할 수 있다.

이때, 속성의 위치가 중요하며 이는 아래에서 정리하도록 하겠다.

---

Flexbox를 이용하여 레이아웃을 설정하기 위해서는 위에 언급한 것과 같이 속성을 지정하는 위치가 중요하다.

1.  부모(상위) 요소에 적용해야 하는 속성
   • display:flex  // 자식박스 요소의 방향, 크기를 결정
   • flex-direction // 정렬 축을 정하는 속성이며, 값으로는 row(기본값 - 가로축정렬), column(세로축정렬), row-revers(가로축&역순 정렬), column-revers(세로축 역순정렬)이 있다.
   • flex-wrap // 줄바꿈을 설정하는 속성이며, 하위요소들의 크기가 상위요소의 크기를 넘어가면 자동으로 줄 바꿈을 설정할지를 정하는 것이다. 기본값은 줄바꿈을 하지 않는 것이다. 속성 값은 nowrap(기본값-줄바꿈X), wrap(줄바꿈O), wrap-revers(줄바꿈 O, 하단에 맞춰 줄바꿈)
   • justify-content // 축 수평 방향 정렬을 정하는 속성으로 flex-direction 값에 따라 정렬되는 위치가 변화한다. 속성값으로는 flex-start, flex-end, center, space-between, space-around 가 있다.
   • align-items // 축 수직 방향 정렬을 정하는 속성으로 justify-content와 동일하게 flex-direction 값에 따라 정렬되는 위치가 변화한다. 속성값으로는 stretch, flex-start, flex-end, center, baseline이 있다. 해당 요소의 컨텐츠 크기를 다르게 하여 해당 속성을 적용하면 차이를 파악하기 용이하다.
2. 자식(하위) 요소에 적용해야 하는 속성
   • flex // 자식 요소의 박스 크기를 늘리고 줄이는 설정값을 입력할 수 있다. 그리고 요소의 기본 크기를 설정할 수 있다. 속성값은 grow(팽창지수), shrink(수축지수), basis(기본크기)가 있다.
   • 팽창지수는 늘어날 때 얼마나 늘어날 것인지, 수축지수는 줄어들 때 얼마나 줄어들 것인지, 기본크기는 늘어나고 줄어드는 것 상관없이 요소의 기본크기는 얼마인지를 설정한다.
   • grow는 정렬축 방향으로 빈공간이 있을 때 각 자식요소들이 얼마나 늘어나서 남는 공간을 차지할 것이지 비율을 정하는 것이다. 팽창지수 각 요소의 크기 = 자식 요소의 grow 값 / 자식요소들의 grow 값의 총합이다.
   • shrink는 grow와 반대로 설정한 비율만큼 크기가 작아진다. 단, 비율로 레이아웃을 지정하는 경우, flex-grow와 flex-shrink를 함께 사용하는 것은 권장하지 않는다.
   • basis는 늘어나거나 줄어들기 전에 가지는 기본크기 이다. 단, flex-grow:0; 일 때만 flex-basis 속성의 값이 유지된다.

flex: grow(팽창지수) shrink(수축지수) basis(기본크기);
flex: 1 1 auto;

// 팽창지수
flex-grow: 1;

// 수축지수
flex-shrink: 1;(기본값)

// 기본크기
flex-basis: auto;

• 참고사항
  • width와 flex-basis가 동시에 적용될 때는 flex-basis가 우선 적용된다.
  • 컨텐츠가 많아 박스가 넘치는 경우에는 width가 정하는 크기를 보장하지 않는다.
  • (flex-basis를 사용하지 않는 경우)컨텐츠가 많아 자식박스가 넘치는 경우에는 이를 대비해 width 대신 max-width를 사용할 수 있다.

---

3. Unit.4-1을 마치며..

첫 페어 프로그램 활동이 생각보다 많이 떨렸다. 함께 페어를 맡은 짝꿍님은 JavaScript까지 독학으로 공부하신 분이었다.

네비게이터 역할을 맡아 주셨는데, 오늘 배운 flex내용이 이해가 잘 되지 않았는데 이해할 수 있도록 많이 도와주셨다.

다음주 월요일에도 페어 프로그램 시간이 있어 함께 flex에 대해 더 공부하고 이와 관련하여 함께 스터디해보기로 하였다.

주말동안 여러 자료들을 통해 공부하면서 flex에 대해 조금더 심도있는 이해를 할 수 있도록 노력해야겠다!

첫술에 배부를 수 없듯이 이제 첫주가 끝났다.

너무 조급해하기보다는 약간의 여유를 갖으며 공부해야하겠다.

 

※ Flex 정리 끝판왕(복습하자!)

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

https://heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드

[그림] 페어프로그램에서 만든 계산기 목업 - 짝꿍님 많이 알려줘서 고마워요!