반응형 html5 템플릿을 만드는 것은 나중에 홈페이지를 만들 때 시간을 줄이기 위함이다. 템플릿이 많으면 좋고, 다양하면 더 좋다. 눈에 보이는 다른 홈페이지들의 화려함은 무시하고 처음부터 하나씩 시작해 보도록 한다. 태그를 익히고 반응형의 개념을 찾고 적용하다보면 어느샌가 결과물이 보일 것이다.
다시 만드는 반응형 html 5문서 템플릿
홈페이지를 새로 만들면서 html 를 다시 코딩하게 되었다.
벽돌쌓기 느낌이지만 어쩔 수 없다. 다만 웹표준에 맞춰서 대충 하나 만들어서 꾸준히 업데이트를 해 나가는 수 밖에 벗을 듯
스타일시트까지 건드리고 싶지만 일단 뼈대부터 만들어 두는게 중요하다.
망가진 홈페이지를 처음부터 다시 만든다는 것이 엄청 귀찮은 것이기도 하지만 이번엔 뼈대부터 신경을 좀 써서 제작할 생각이다.
스타일시트도 무리하게 하지 않고 html 부터 천천히 제작하다 보면 뭔가 하나 나올꺼란 기대를 해 본다.
반응형 html5 문서
처음부터 다시 제작하는 것이기에 반응형은 기본으로 갈 수 밖에 없고, 이제는 필수인 html5 를 이용하도록 한다.
반응형 html5 문서는 PC 모바일 등 화면의 크기가 물리적으로 다른 이기종에 맞게 화면배치를 해 준다.
아~ 귀찮은게 한두가지가 아니지만 천천히 만들어 보자. 급하지 않게 천천히
뼈대인 html5 문서를 먼저 만들고 이후 스타일시트를 추가하면 된다.
html5 반응형 웹페이지의 문서 구조는 다음과 같다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html>
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>위의 코드는 html5로 만들어지는 반응형 html5 웹문서임을 나타내는 코드이다.
주석이 달린 부분으로 웹브라우저에 명시적으로 알려주는 것으로 저 구문이 없다면 검색엔진의 SEO 검사기는 이를 감지하고 반응형을 위한 코드를 넣어주길 요청한다.
html5 문서 템플릿
이제 템플릿을 대충 만들어 볼 차례이다.
보통 header, nav-menu, contents, footer 부분으로 이루어 진다.
여기서는 html5의 시멘틱을 이용하지 않고 간단히 마크업만을 사용하여 만든다.
템플릿을 만들어 두는 것은 기본 뼈대를 먼저 만들어 놓으면 다음에 복사하여 재사용할 수 있기 때문이다.
코딩을 할 시간도 줄고 다른 부분을 적용하기 위한 생각할 시간도 생긴다.
양식하나 만들어 둔다 생각하자.
본인이 귀찮기도 하고 빨리 대충 만들고 적용을 하기 위함도 있고 뭐 이유는 많지만 핑계이기도 하다.
내가 아는 지식으로 먼저 빠르게 만든 후에 추후 업데이트를 하면 될 것이다.
위의 코드에서 비어있는 body 부분을 채워보도록 한다.
그 전에 구성이 어떻게 되는지 생각해 본다.
- header
홈페이지 제목 표시 - nav-menu
홈페이지의 카테고리 또는 메뉴 표시 - contents
홈페이지의 내용 표시 - footer
홈페이지 시작연도, 소유자 표시, 이메일 등 표시
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html>
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- header -->
<div id="header">홈페이지 제목</div>
<!-- // -->
<hr/>
<!-- nav-menu -->
<div id="nav-menu">메뉴</div>
<!-- // -->
<hr/>
<!-- contents -->
<div id="contents">내용</div>
<!-- // -->
<hr/>
<!-- footer -->
<div id="footer">저작권 소유자</div>
<!-- // -->
</body>
</html>아래는 위의 코드에 대한 결과화면이다. 비주얼 스튜디오 코드 ( Visual Studio Code ) 를 사용했다.
템플릿이라고 보기엔 너무나 볼품없다.
앞으로 여기에 계속 내용을 추가하면서 이어나갈 생각이다.
다음엔 STS에서 직접 작업해 보기로 한다.
'programming > TroubleShootInG' 카테고리의 다른 글
| 반응형 html5 톰캣 서버에서 사용하는 방법 (0) | 2022.11.18 |
|---|---|
| 아파치 톰캣 다운로드와 설치 시작과 종료 하기 (0) | 2022.11.16 |
| 톰캣 로그 확인하기 카페24 웹호스팅 putty 확인 (0) | 2022.11.15 |
| 톰캣 서버 시작과 종료 카페24 웹호스팅 서버를 가동하자 (0) | 2022.11.14 |
| 찾을 수 없음 404 구글 서치 콘솔 페이지 색인 생성 문제 (0) | 2022.11.14 |
댓글