기본적으로 자주 사용할것 같은 구조인 HTML5파일을 적어 봅니다.
구조화를 위한 요소들이 등장으로 조금더 보기 쉬워 졌으며 시멘틱한 웹이 가능해 졌습니다.
저의 경우에는 가능한한 기존의 프레임 워크를 사용하지 않으려합니다. 하지만 현실은 그렇지가 않아서 사용을 합니다만 가능하면 뺄려고 노력을 합니다. 물론 나와있는 또는 많이 사용하고 좋은 Bootstrap(부트스트랩)나 Foundation등의 좋은 프론트엔드 프레임워크들이 있습니다. 이것을 사용하면 쉽고 강력한 반응형 웹을 만들수 있지만 저는 가능하면 적게 사용하거나 않쓸려고 합니다. 이번 포스트는 가능한 기초와 사용하지 않는 범위네에 하나의 예제를 적을까 합니다.
많이 사용하는 프론트엔드 프레임워크소개
| Bootstrap(부트스트랩) | 2011년도에 반응형 웹디자인, 모바일 우선으로 큰 인기가 있으며 Mark Otto and Jacob Thornton가 만듬. |
| Foundation | 2011년도에 ZURB 회사가 만들어 널리 사용하고 있는 강력한 프론트엔드 프레임워크. |
| Semantic UI | 2013년도 Jack Lukic라는 사람이 개발하고 순수한 언어의 유용한 원리를 기반으로 하는 UI 컴포넌트 프레임 워크. |
| Pure | 2013년도에 yahoo가 개발 했으며 모든 웹 프로젝트에서 사용 가능한 반응형 CSS 모듈의 작은 세트. |
| UIkit | 2013년도에 YOOtheme가 개발 했으며 빠르고 강력한 웹 인터페이스를 개발하기 위한 경량 및 모듈 형 프론트엔드 프레임 워크. |
그냥 참고 사항
프레임워크를 선택해서 작업을 진행하시면 더 좋다고 생각이 듭니다. 위의 5가지는 많이 사용하고 계속 발전해 가는 사이트를 소개 한것이고요
보통은 그리 큰 것을 사용하지 않터라도 사이트 만드는데에는 지장이 없고 위의 것을 가져와서 자기만의 특성을 살려 추가해서 만들다 보니 덩치만 커지더군요. 각각의 구서을 짜집기도 해서 사용도 하고요. 하지만 업데이트할려니 오래되어서 어디를 손봤는지도 잃어버이곤 합니다. 그래서 이번에 글처럼 하나하나 적으면서 기억할까 합니다.
서론이 길었네요.
Getting started
아무리 기본이라도 있을것은 있어야 되니 최소한의 index.html 파일에 있을것을 소개 합니다.
문서 형식 선언- HTML5 .
<!doctype html>문서 코딩 선언- UTF8 .
<meta charset="utf-8">호환성 보기 - IE에서만 해석되며 IE=edge는 최신 버전으로 렌더링
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">모바일 너비(가로 스크롤 방지)와 줌 정의
<meta name="viewport" content="width=device-width, initial-scale=1">브라우저가 CSS를 재설정하여 일관되게 요소를 렌더링하도록합니다.
Normalize.css 는 좋은 옵션입니다.
https://cdnjs.com/libraries/normalize 가시면 최신이나 자신에게 맞는 버전을 찾을수 있습니다.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">jQuery 라이브러리 포함 (선택 사항)
cdnjs, Google은 호스트 라이브러리를 제공합니다.
https://cdnjs.com/libraries/jquery/ 가시면 최신이나 자신에게 맞는 버전을 찾을수 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>맞춤 CSS 및 자바 스크립트에 대한 링크 포함
css/style.css및 js/scripts.js허용되는 경로이다.
<link rel="stylesheet" href="css/style.css"><script src="js/scripts.js"></script>최신 Internet Explorer 렌더링 모드 사용 (선택 사항)
필수는 아니지만 도움이 될 수 있습니다.
<meta http-equiv="x-ua-compatible" content="ie=edge">HTML5에 추가된 문서 구조화 요소들로는 section, nav, aside, hgroup, header, footer, address가 있으며 구조화 태그들은 기본적으로 스타일을 지니고 있지 않습니다.
Starter template
위의 것을 모두 정리한 소스코드는 밑에 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
