1. 정글 시네마
오늘 강의는 대부분 복습이였기 때문에 귀로 들으면 서 과거에 수업에서 본 정글시네마를 클론코딩 해봤다. 오늘 복습 주제가 flex 이었기 때문에 대부분 flex로 구현하였다.
정밀하게 1px단위까지는 맞추지 않았고 느낌대로 거의 비슷하게 만들었다.
어려웠던 점
각 article은 테이블로 구성되었었는데 table에는 border - radius 속성이 먹지 않는것 같았다. 때문에 여러 방법을 찾아봤고 그 중 border를 hidden으로 바꾸고 그자리에 그림자를 border처럼 만들어줬다. 됐다고 생각했는데 또다시 문제가 생겼다. 그림자로 border를 만드니 아래의 예매하기, 예고편 버튼 자리인 td 태그에 스타일을 먹이니 table에 border를 줬던부분이 그림자이기 때문에 td 태그 뒤로 가버려서 아래 사진 처럼 뾰족해져 버렸다.
조금 고민한 결과 table에 overflow:hidden 속성을 주니 해결할 수 있었다.
SMACSS
SMACSS 기법을 어느정도 이해했다 생각하여 내 생각대로 적용해나가며 해봤는데
대부분에 스타일들이 layout과 module에 집중되어 있었고 state, theme에는 한개도 없었다. 기법에 대한 이해가 부족한 것 같다. 앞으로 SMACSS 기법을 베이스로 사용하려 했는데 조금 더 정보를 찾아보고 적용해 봐야겠다.
flex
확실히 flex가 좋은것 같다. 거의 모든 레이아웃에 flex를 사용하였는데 반응형을 하나도 만들지 않아도 width를 줄여보니 많이 이상하지 않았다. 하지만 생각대로 안되는것도 있었는데 나는 article flex-item의 justify-content 속성을 space-between을 주었는데 item의 갯수가 한열에 딱 안떨어질 떄 중앙정렬이 되어 다른 행과 비교해봤을 때 상당한 이질감이 생긴다는 것이다.
이를 해결하기 위해 media를 이용해서 일정 수치의 flex의 정렬방식도 바꿔보았지만 여백이 뒤틀려 버리고 말았다. 저번에 누가 같은 질문을 해서 답을 들었었는데, 갯수를 세어서 부족한만큼 뒤에 가상요소를 붙힌다고 했던 것 같다. 아직 갯수를 셀수있는 방법이 없으니 js쪽 진도가 더 나간 후 다시 수정해봐야 겠다.
2. holy grail layout
마지막 시간 실습으로 layout 만들기 실습을 진행하였다. 반응형으로 짜달라고 하셔서 flex에 사이즈는 %를 입혀서 만들었다. 크게 어려운점은 없었지만 아까 between 문제를 다시 만나서 아직 해결하지 못했다.
