unit 4 : HTML/CSS 활용
BIL: css selector, box model
고등학생 때 모형 건축물 대회에서 우승한 나...
마치 설계도 없이 건물을 짓는 것과 같은 행위를 하다.
3일 동안 레이아웃의 뼈대에는 큰 중요성을 못 느끼고 있었는데
오늘 와이어프레임이라는 개념을 배우고 반성했다.
그리고 나를 별안간 애먹인 "그것"이 등장한다...
**그건 바로 flexbox 🥳**
오늘은 코드블럭 사용해서 용어 및 개념 정리 도전~
velog 적응도 아직 안 된 게 말이 되나...
ParentElement {
display: flex; <--부모 박스에 적용, 자식 박스의 방향/크기 결정
flex-direction : <--자식 요소 정렬축 결정, 기본 가로 정렬
flex-wrap : <--하위 요소가 상위 요소를 넘어갈 때, 자동 줄바꿈 여부 결정
기본 설정은 nowrap
justify-content : <--자식 요소의 축 수평 방향 정렬 방식 결정
align-items : <--자식 요소의 축 수직 방향 정렬 방식 결정
}
ChildElement {
flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
flex: 0 1 auto; <--기본값
flex-basis: CE가 flex-grow나 flex-shrink에 의한 변동 전에 가지는 기본 크기
flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지
1. width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선
2. 콘텐츠 많아 자식 박스 넘치는 경우, width: 정확한 크기 보장 불가
3. (flex-basis를 사용하지 않는다면)자식 박스가 넘치는 경우를 대비해,
width 대신 max-width 사용 가능
}
하나씩 코드를 쳐 보면 알겠는데,
막상 이걸 적용시켜서 내가 원하는 모습이 나오도록 연결짓는 게 어렵다.
반대로 내가 원하는 레이아웃을 위해서 어떤 속성을 줘야 하는지도!
챕터 진행 한 번으로 모두 습득될 거라고 생각하는 것도 오만이긴 하지...
ㅡ
그리고 오늘은 드디어 그렇게 긴장되던 페어 프로그래밍 첫날이다.
나는 3인 페어에 포함되어서 오늘은 드라이버 세 시간 했다.
즐거워서 세 시간 넘은 줄도 몰랐다.
이것이 바로 네 시간의 결과물이다... 너무 아름답지 않나요?
이 계산기 내가 낳았나... 아무튼
button:active 값을 줄 때 아무리 수정해도 계속 마지막 버튼 탭이 어그러졌다.
결국 거슬리지 않게 정렬을 하기는 했지만...
container 대비 box-shadow 영역이 2px 정도 어긋났는데,
justify-content를 center에서 space-between으로 바꾸니
바로 맞춰졌다.
혼자였으면 이유 찾는 것만 한 시간은 걸렸을 듯.
페어 프로그래밍으로 진행하니까 속도도 빠르고 문제 해결도 금방 된다.
혼자 진행했으면 한 달 뒤에나 알았을 단축키들도 많이 알게 됐고,
네비게이터랑 드라이버로 나누는 이유가 다 있는 거다.
나는 아직 코드 치는 도중에 바보처럼 에? 으어? 할 때가 있다... (4일차)
하지만? 내가 검색창 켜기도 전에 힌트를 제시해 주셔서 정신차리게 된다. 굿.
이런 거 맨날 하고 싶다.
