누가봐도 인생 1회차의 기록장

개발공부/CSS 2

[1분코딩] CSS Flex와 Grid 제대로 익히기 #02 (Grid)

처음 배우는 개념이라 아직 어렵긴 하지만 정말 신세계다..! 자바스크립트 공부하기도 바쁜데 다시 CSS 공부하는게 맞나 싶었는데 몰랐으면 후회할 뻔! 참고 (1분코딩 블로그) : https://studiomeal.com/archives/533 ※ 그리드에 대한 오해? "Grid는 인터넷 익스플로러에서 지원하지 않기 때문에 우리나라에서는 그림의 떡이다" X. IE10과 11에서도 구버전 스펙을 지원하기 때문에 좀 귀찮기는 해도 방법이 있다! 분명 한계는 있지만 뭐가 다른지를 잘 알아두고 대응하면 충분히 사용 가능! Grid 레이아웃을 만들기 위한 기본적인 HTML 구조 A B C D E F G H I 용어정리 그리드 컨테이너 (Grid Container) : display: grid를 적용하는 grid 전..

개발공부/CSS 2021.11.23

[1분코딩] CSS Flex와 Grid 제대로 익히기 #01 (Flex 핵심정리)

👉인프런에서 수강하는 1분코딩 강의 노트 flex는 html, css 하면서 한 번 공부했는데 Grid는 해본 적이 없어서 flex 복습 겸 grid 공부! 새로 알게된 내용도 있어서 신기ㅎㅎ 출처 : 1분코딩 블로그 https://studiomeal.com/archives/197 Flex 레이아웃을 만들기 위한 기본적인 HTML 구조 Hello flex bye Flex 컨테이너에 적용하는 속성들 display : flex 아이템들은 가로 방향(기본)으로 배치됨 자신이 가진 내용물의 width 만큼만 차지하게 됨 (inline 요소처럼) height는 컨테이너의 높이만큼 늘어남 inline-flex도 있는데, 이건 block과 inline-block의 관계와 같음 아이템들이 배치된 방향의 축을 메인 축 ..

개발공부/CSS 2021.11.18