코드스테이츠 7일차 - ([HTML/CSS] 활용) & 회고

와이어 프레임 

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도.

목업 (Mock-up)

실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것이다. 

레이아웃 리셋 

html 은 기본적인 스타일을 가지고 있는데 이러한 특징이 레이아웃을 잡는데 방해가 되기도 한다. 

이럴때는 전에 배운 코드를 이용하면 된다 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

flexbox 속성들은 내 다른 포스트에 정리를 해놓았으니 그거 보고 사실 직접 뭐라도 만들어 보는게 실력이 늘것 같아서 유튜브에 영상들 보면서 여러개 따라 만들 예정이다. 

flexbox 자식 속성들 (grow,shrink,basis) 

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

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

grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지,

shrink(수축 지수) 는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지,

basis(기본 크기) 는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미

안에 세 가지 값을 한 번에 설정해줄 필요 없이, 각 값을 따로 지정해줄 수 있다.

 

grow(팽창 지수) 

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

팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 빈 공간을 가져감 

ex) box1 = 6 , box2 = 3, box3 = 1 라고 한다면 6/ 6+3+1 => 3/5 즉 box1은 3/5만큼의 공간을 가져간다.

 

shrink(수축 지수)

grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다. 비율이 클수록 더 많이 줄어드는 것 그러나 grow 속성과 같이 사용하는것은 추천하지 않음 왜냐면 shrink 속성은 width 나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다. 

flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.

 

basis(기본 크기) 

자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다.

주의할점은 flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지되는 것이다. 

flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있다.

 

회고 

이번에는 css flexbox 와 계산기 만들기를 했는데 음 오랜만에 css를 하는거라 그런지 감을 다 잃어버림 그래서 생코랑 드림코딩 flexbox 부분만 빠르게 듣긴 했는데 이게 머리속으로는 이해는 다 했는데 계산기 만들때 뭘 써야 할지 잘 생각이 안난다. 아무래도 많이 써봐야 할듯 싶다. 원래 어제 썼어야 했는데 귀찮아서 쩝.. 

페어도 하긴 했는데 페어분이 알려준 유튜브 보고 한번 따라해봐야 겠다 

이제 1주일 좀 넘었는데 할게 정말 많다. 여태 안한 업보라고 생각해야지 지금이라도 하는게 어디냐