ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
-
recentPost
-
popularPost
-
Archive
-
recentComment
HTML5 기본 템플릿
HTML5 기본 템플릿
기본적으로 자주 사용할 것 같은 구조인 HTML5 파일을 적어 봅니다.
웹이나 블로그 제작할 때 매번 같은 작업을 하려고 하니 대단히 귀찮아져서 이렇게 블로그에 하나 만들어 놓을까 싶어서 이렇게 글 적습니다. 예전에 한번 CSS 초기세팅 값 (개인적) 포스트 한 적 있는데 그것의 연장인 것 같습니다.
참고 : 많이 사용하는 프론트엔드 프레임워크 소개
저의 경우에는 가능한 한 기존의 프레임 워크를 사용하지 않으려 합니다. 하지만 현실은 그렇지가 않아서 사용합니다만 가능하면 빼려고 노력을 합니다. 물론 나와 있는 또는 많이 사용하고 좋은 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가지는 많이 사용하고 계속 발전해 가는 사이트를 소개 한 것이고요. 보통은 그리 큰 것을 사용하지 않더라도 사이트 만드는 데에는 지장이 없고 또는 위의 것을 가져와서 자기만의 특성을 살려 추가해서 만들 수도 있습니다.
시작
이제 본격적으로 시작해 보겠습니다.
<!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/8.0.1/normalize.min.css"
/>
<link rel="stylesheet" href="css/style.css" />
<!-- 사용자 스크립트 DATA 영역 -->
<!-- // 사용자 스크립트 DATA 영역 -->
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
예전에 적은 글에서는 저만의 CSS reset 파일을 소개하였습니다. 하지만 이번에는 기존의 normalize를 적었습니다. 그냥 기본에 충실히 하려고 적은 것입니다. 물론 위의 5가지 프론트엔드 프레임워크도 넣지 않았습니다.
CDN
혹시 몰라서 CDN도 적어 봅니다. (자신에게 맞는 버전을 찾을 수 있습니다.)
