css grid
-
[CSS Grid] 2. Hello World CSS Grid프로그래밍/HTML5 Web 2018. 7. 14. 17:31
코스이름은 Your First Grid 인데 너의 첫 그리드 라고 제목짓긴 좀 그래서 그냥 Hello World라고 지었다. 이번 강의는 매우 심플하다. Grid을 사용해서 행과 열 모양을 만드는 강좌이다. .container{ display: grid; grid-template-columns: 100px auto; grid-template-rows: 50px 50px 200px; grid-gap: 3px; } 1 2 3 4 5 6 아래와 같은 코드인데 완성시키면 아래와 같은 모양으로 완성이 된다. 일단 내가 이해한바로는 display 값에서 grid를 사용하겠다고 선언하고, 행과 열에서 px을 지정해주는데 auto의 경우에는 남는 비율을 전부 차지하는것 같았다. grid-gap의 경우에는 사이의 빈공간..
-
[CSS Grid] 1. 코스 소개프로그래밍/HTML5 Web 2018. 7. 14. 17:14
CSS Grid을 공부해야하는 이유는 무엇인가? 1. 2차원의 레이아웃을 쉽게 개발이 가능하다2. 간단한 마크업3. 유연함4. 프레임워크 스킵5. 브라우저 지원 이러한 장점들이 있다고한다. 나는 개인적으로 다른 부분은 모르겠고 어떤 프레임워크를 추가하지 않다고 된다는 점에 끌렸다. 일단 코드를 살펴보자 CSS GRID HEADER MENU CONTENT FOOTER BOOTSTRAP HEADER MENU CONTENT FOOTER CSS Grid을 사용한 방법과 Bootstrap을 사용한 예제를 보여주고있다. 설명하길 CSS Grid보다 Bootstrap에서의 클래스 네임이 훨씬 더 지저분하고 알아보기 어렵다고 설명하고 있다. 참고로 결과물은 동일하다. 이제 본격적으로 CSS Grid에 대해서 알아보도록..
-
CSS Grid 공부를 시작하며프로그래밍/HTML5 Web 2018. 7. 14. 16:49
프로젝트를 진행하면서 항상 진행을 방해하던것이 CSS이다. 그렇다고 기본 개념을 모르고 있는건 아닌데 항상 제대로 레이아웃을 구성하고 뭔가 제대로 ? 멋있게 만들어보려하면 굉장히 머리아프게 만들어서 포기하게 만드는 놈인것같다. 그래서 부트스트랩을 공부할까 레이아웃을 짜는 법을 공부해보려고 알아보던 도중에 해외에서 아주 좋은 자료를 발견하였다. https://scrimba.com/g/gR8PTE 여기로 접속하면 되는데 CSS Grid에 대해서 아주 상세하게 무료로 알려주고 있다. 단점이라면 영어인 부분이 있긴하지만 개발자에게 영어는 필수이기에 ㅎㅎ.. CSS Grid가 무엇인가에 대해서 좀 찾아보았더니 아주 신세대? 기술로서 앞으로는 아주아주 잘 활용될 것이라는 어떤 블로거 분의 글이 있어서 이번 기회에 ..