웹페이지를 만들기 위해 html5를 이용하여 기본 템플릿을 먼저 만들어 본다. 하나 만들어 놓으면 여기저기 사용할 곳이 많아지고 코딩할 시간을 확실히 줄여준다. 주석 또한 같이 달아놓도록 한다. 혹여 잊어먹더라도 간단한 주석의 설명은 나중에 다시 생각나게 해 준다.
html5
html5는 hyper text markup language 의 약자로써 현재 버전 5까지 나왔다.
기존 4 버전의 태그들에 대해 특정 부분에서 기능이 업그레이드 되어 있기도 하다.
html5를 작성하는 편의성을 고려한 측면도 있으며 다기종간 화면의 균일한 표현을 위한 것도 포함되어 있다.
웹표준, 반응형 html5 웹페이지
웹을 사용할 수 있는 기기들이 증가하고 늘어나고 다양해 지면서 웹페이지 또한 변화를 거듭해야 했다.
pc화면이라면 상관이 없지만, 같은 화면에서 모바일화면을 보게 된다면 스크롤하거나 글자크기 등에 제약이 많다.
하나의 웹페이지는 여러 기종에서 자유롭게 볼 수 있어야 하면, 다양한 화면에 대응할 수 있어야 한다.
그렇기에 웹표준 또는 반응형 html5 페이지의 형태가 현재 많이 사용되고 있다.
하나의 웹페이지를 웹표준 또는 반응형 으로 만들어 놓으면 별도로 페이지를 수정하지 않아도 자동으로 화면이 최적화되어 표현해 준다.
간단한 반응형 html5 작성하기
아래의 코드는 반응형 html5와 seo를 가정하고 웹페이지를 만들기 전에 기본 템플릿 형태로 만들어 놓은 것이다.
공부해 나가면서 태그들을 추가해 나갈 예정인 코드이다.
단 css 같은 style 은 고려하지 않고 작성할 부분이기도 하다.
html5 얘기하는데 css 까지 들어오면 머리아프다. 한번에 하나씩 진행해 보려는 것.
<!-- html5 기본템플릿 -->
<!DOCTYPE html>
<!-- head -->
<head>
<!-- meta SEO 컨텐츠 -->
<meta name="title" content="제목">
<meta name="description" content="내용">
<meta name="keywords" content="키워드">
<meta name="author" content="작성자">
<meta name="copyright" content="저작권">
<!-- // -->
<!-- meta 반응형 웹표준 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- // -->
<!-- 스타일 -->
<style>
</style>
<!-- // -->
</head>
<!-- // -->
<!-- body -->
<body>
<h1>컨텐츠의 부분 제목</h1>
<p>컨텐츠의 문단</p>
<p title="툴팁입니다.">툴팁은 마우스롤 올려놓으면 부수적으로 보이는 설명박스입니다.</p>
</body>
<!-- // -->
<!-- 자바스크립트 -->
<script type="text/javascript">
</script>
<!-- // -->
</html>
위의 코드를 대충 훓어 봤다면 어렵진 않을 것이다.
head 에 들어갈 자바스크립트 부분이 문단 아래에 있는 것에 의문이 있을 수도 있지만 넘어가자.
자바스크립트 위치는 어디에 있던 크게 상관이 없다.
부득이한 경우가 아니라면 가급적 위에 넣는 것이 좋지만, 본인은 개인적으로 밑에 넣는 것을 좋아하기에 저기에 넣었을 뿐이다.
'programming > web' 카테고리의 다른 글
| CSS html 모든 태그 여백 제거 및 초기화 (0) | 2021.06.17 |
|---|---|
| html 태그 여백을 두자 margin padding 차이 (0) | 2021.06.15 |
| html5 뷰포트 반응형 웹페이지 만들기 viewport responsive webpage (0) | 2021.03.23 |
| 자바스크립트 애니메이션 라이브러리 anime.js javascript animation library (0) | 2021.02.20 |
| html5 독학 빠르게 익히는 방법 (0) | 2021.02.18 |
댓글