본문 바로가기
I Learned

(TIL0913) 오늘부터 Today I Learned 쓰기:: 오늘부터 4개월..!!

by 돈민찌 2021. 9. 14.
반응형

드디어 오늘부터 부트캠프 시작이다..!!!

6개월간 쉬면서 생활패턴이 많이 늦어져서 오늘 한 일 중에 9시에 일어나는 일이 제일 힘들었다(?!)

신지원 매니저님의 진행 하에 OT를 하면서 앞으로의 커리큘럼과 주의사항 시간표 등등을 교육받고 팀을 배정받았다.

어쩌다보니 팀장이 되었다. 팀원분들은 나는 손도 못대본 C언어 배운 분들도 계셨고, 다른 분야이긴 하지만 SI 쪽(맞나?) 에서 현업에서 일하시다가 웹개발자로 전향하시려는 분도 계셨다. 음악 전공자 분도 계셨당 호우.. 다들 팀 이름을 정하는데 우리팀은 9번째 팀이어서 한참 고민을 하다가 자료9조로 정햇다 이름 정하기...항상 어렵더라...(8ㅛ8)

오늘은 잠이 부족해선지 컨디션이 영 나빠서 14시간 시간은 채웠는데 돌이켜보니 한가지에 이상하게 꽂혀가지고 하루종일 그것만 고치다가 시간 다 가버렸네...ㅎ

여튼 웹개발종합반 강의는 다 듣고 이제 웹개발플러스반 2주차 강의 듣는댜

오늘 막힌게 뭐였냐면

Masonry Grid 라는 것이 있는데, 한번에 와닿을 만한 예를 들자면, 인스타그램처럼 정해진 사이즈가 있는 그리드가 아니라, 핀터레스트나 구글 이미지검색처럼 폭이나 너비는 일정하되 각 이미지들이 약간의 갭 외에는 빈틈없이 자리할 수 있게 하는 것이다. 

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

이게 부트스트랩에 card-columns 클래스가 비슷한 기능을 지원해서 웹개발종합반 수업 들으면서 잘 사용했는데, 웹개발 플러스반에서 사용하려고 검색했더니 찾을 수가 없는 것이었다;;;

한참 뒤적이다 알게 된 것이 card-columns 클래스로 Masonry 스타일의 그리드를 구현하는 것이 오류가 많아서 Deparacated되어 강의에서 링크해주신 4.1 버전에는 있었는데... 없습니다 (최신 버전 5.1)

그럼 그냥 다시 4.0으로 다운그레이드해서 하면 되는데 이미 5.1버전으로 꽤 꾸며놓은 상태라 괜한 오기로 "퓨어하게 CSS 만으로 masonry 구현하기"에 도전했....으나 보기 좋게 실패했다. 흠.... masonry CDN을 임포트해도 안먹히더라고.... 내가 쓰고 있던 코드에서 클래스만 바꿔서 도전했더니 안됐던거같다 내일 시작하면 이것부터 싹 갈아엎어야지 껄껄

부트스트랩의 예제 페이지... 저렇게 빈틈없이 착착 들어가야하는데ㅠㅠ
내가 구현한 한계.... 아니야 내일은 성공할거같애

근데 진짜 웹디자인 모루겠다... css는 알아도알아도 끝이없어... 거기다가 어디엔 되고 어디엔 안되고 아직 적용안되는 브라우저가 더 많은 새로운 프로퍼티도 있고... 혼란스러워... 내일 새로 도전해보고 안되면 그냥 4.1버전 땡겨쓰겠다 하하 내일 일찍일어나려면 얼른 자야지 12시 넘으니까 자동으로 출석처리 되더라..(?)

반응형

댓글