-
[CSS Grid] 1. 코스 소개프로그래밍/HTML5 Web 2018. 7. 14. 17:14반응형
CSS Grid을 공부해야하는 이유는 무엇인가?
1. 2차원의 레이아웃을 쉽게 개발이 가능하다
2. 간단한 마크업
3. 유연함
4. 프레임워크 스킵
5. 브라우저 지원
이러한 장점들이 있다고한다. 나는 개인적으로 다른 부분은 모르겠고 어떤 프레임워크를 추가하지 않다고 된다는 점에 끌렸다.
일단 코드를 살펴보자
<html><head><link rel="stylesheet" href="basic.css"><link rel="stylesheet" href="examples.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><!-- CSS Grid --><h1 class="title">CSS GRID</h1><div class="wrapper"><div class="header">HEADER</div><div class="menu">MENU</div><div class="content">CONTENT</div><div class="footer">FOOTER</div></div><!-- Bootstrap --><h1 class="title">BOOTSTRAP</h1><div class="row"><div class="col-xs-12 header">HEADER</div></div><div class="row"><div class="col-xs-4 menu">MENU</div><div class="col-xs-8 content">CONTENT</div></div><div class="row"><div class="col-xs-12 footer">FOOTER</div></div></body></html>CSS Grid을 사용한 방법과 Bootstrap을 사용한 예제를 보여주고있다. 설명하길 CSS Grid보다 Bootstrap에서의 클래스 네임이 훨씬 더 지저분하고 알아보기 어렵다고 설명하고 있다. 참고로 결과물은 동일하다.
이제 본격적으로 CSS Grid에 대해서 알아보도록 하겠다.
개발환경
IDE : Visual Studio CodeExtention : HTML Live Preview
반응형'프로그래밍 > HTML5 Web' 카테고리의 다른 글
안드로이드 브라우저 상단 주소창 색 지정하는 방법 (0) 2019.05.03 [CSS Grid] 2. Hello World CSS Grid (0) 2018.07.14 CSS Grid 공부를 시작하며 (0) 2018.07.14 [HTML5] 웹워커 Web Worker 기초 상식과 개요 (0) 2016.07.13 [HTML5] HashChange Event 해쉬 변경 이벤트 처리 PushState와 popState 메서드 (0) 2016.07.11
