많이 쓰이는 CSS를 생성해주는 곳

CSS 너무 내용이 많아서 다 외우고 다닐 수가 없다. 그래서 이런 사이트들이 있다.

http://css3generator.com/

1차원 레이아웃은 Flex로, 2차원 레이아웃은 Grid로

https://codepen.io/kyagrd/pen/EERPve (캐나다 워킹홀리데이 개발자로 일하는 sonim1님이 깃헙에 공유한 grid 예제 중에서 가져옴)

위 예제는 가장 간단한 기본적인 기능이고 더 복잡한 기능들도 있다.

• https://github.com/sonim1/css_grid_example/ 여기에 다른 사용법들도 좀 정리되어 있음 (우리말)
• MDN의 CSS Grid Layout

Grid는 Flex보다도 나중에 CSS에 추가되었기 때문에 더 최신 브라우저에서만 지원됨을 유의. CSS의 Gird 기능이 추가되지 않았을 때는 화면상에 그리드를 구현하는 라이브러리들을 사용했다. Flex를 겹쳐 써서 2차원 레이아웃을 만들 수도 있고 (예를 들면 이런 식으로) 또 우리 주교재 책에 나온 것처럼 Flex도 안쓰고 (relative/absolute 포지셔닝, float 등등을 조합하거나 table 디스플레이 속성을 사용해서) 할 수도 있다.

https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf Flex와 Grid에 대해서 핵심적인 개념을 잘 비교/대조하며 정리해 놓은 글

오늘의 실습

Grid를 활용해서 주교재 14장 스타버즈 예제의 index.html 레이아웃을 만들어 보자.

지난주와 마찬가지로 github 사용법도 같이 반복하여 실습한다.

• 미리 만들어 놓은 교수 저장소 https://github.com/kyagrd/web0403 를 fork하여 자기 소유의 복사본 저장소를 만든다.
• fork된 자기 소유의 복사본 저장소를 깃헙 데스크톱 어플리케이션 (또는 아톰의 git관련 기능이나 커맨드 라인으로) clone해 온다.
• grid를 활용해 레이아웃을 만들어 본다. (아마도 css 파일만 편집하면 될 것이다.)
• 변경된 코드들 commit 하여 로컬 (자기 자신 컴퓨터에 있는) 저장소에 기록한다
• commit된 변경사항을 push하여 깃헙의 온라인 저장소로 변경사항을 반영한다
• 깃헙 설정에서 웹페이지 호스팅을 할 수 있도록 하여 인터넷에서도 접근할 수 있게 해본다.