HTML, CSS 활용 - [Codestates] Section1

레이아웃

와이어프레임 : 레이아웃의 뼈대를 그리는 단계

목업( Mock-up) : 실물 크기의 모형 

하드코딩 ;변수를 사용하지 않고 구구단처럼 보이기 위해서는, 각 숫자의 단을 소스 코드에 모두 출력하는 방법뿐입니다.

 

 

---

 

Flexbox

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

1. 부모요소  flexbox  - 요소들의 정렬과 관련

1) display:flex;

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

 

2) flex-direction: row;   -  정렬 축 정하기 

 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 설정 없을시 기본설정 'row'

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

 3) flex-wrap: nowrap;   줄 바꿈 설정

 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 기본세팅은 nowrap (줄바꿈 없음)

4) justify-content: row -  축 수평 방향 정렬 

 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다.

space- around :  각 item 들 주변에 사각형 공간 확보, space-between : 끝에 있는것들은 부모 크기에 딱 붙고 사이 간격 동일하게  ,  space-evenly : 각 item 간격 동일하게 조정

 5) align-items: row -  축 수직 방향 정렬  

 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.

6) align - content : 축 수직방향 정렬 

justify- content 와 비슷하며 속성값 동일하게 사용 가능.  

 

 

 

 

---

 

2. 자식요소 Flexbox - 요소들이 차지하는 공간 관련

 

flex 속성의 값 : grow(팽창지수) , shrink(수축지수) , basis(기본크기)

순서와 기본값 반드시 기억 - flex: grow shrink basis, 기본값 = flex: 0 1 auto

flex: 0 1 auto;
// 아래와 같음 
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

 1) grow : 자식 박스 빈 공간에 얼마나 늘어나나?  >> 절대적인 길이 비율 X

정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것

이처럼 팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 빈 공간을 가져갑니다.

[예시 3]의 box1은 box1의 팽창지수 6 / 팽창지수의 총합 6 + 3 + 1 = 3/5 만큼의 빈 공간을 가져가고,

[예시 4]의 box1은 box1의 팽창지수 60 / 팽창지수의 총합 60 + 30 + 10 = 3/5 만큼의 빈 공간을 가져갑니다.

팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지하게 되는 것이죠.

 

2) shrink :  자식 박스는 얼마나 줄어들 수 있을까

 비율이 클수록 더 많이 줄어든다.

 3) basis : 박스의 기본크기

늘어나거나 줄어들기 전에 가지는 기본크기 

기억하세요. flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됩니다. diplay 속성에 flex 가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis 로 설정된 크기가 항상 유지되는 것은 아닙니다.

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.

- Flex Item의 flex-basis가 auto인 경우 width, height 속성이 우선한다.

- Flex Item의 flex-basis가 auto가 아닌 경우, flex-basis 속성이 우선한다.