11월 01, 2022 11월 01, 2022

웹페이지 만들기 | 구조와 방법

문자를 사용하는 인류는 대나무, 나무, 비단을 정보전달과 기록매체로 사용하였으나, 오늘날은 2세기경 발명된 종이를 사용하고 있다. 종이의 발명으로 기록매체의 최대 관건인 보관과 열람의 편의성을 획기적으로 향상하였다. 하지만 인터넷으로 가능해진 현대의 웹페이지는 응용 여하에 따라 시공을 초월하는 절대적 기록매체로 활용할 수 있다. 종이를 대신한 컴퓨터나 스마트폰 화면은 무한대의 저장과 시각적 공간을 제공하기 때문이다. 각종 SNS의 한계를 초월하고 장문의 메시지 작성을 위한 웹페이지 만드는 방법과 개요를 알아본다.

html 문서 작성

컴퓨터나 스마트폰 화면을 종이처럼 활용하기 위해서는 공간과 구역(레이아웃)을 설정해야 한다. 그러기 위해서는 인터넷 시스템이 실행하도록 아래와 같이 <html 파일>)을 만들고 내용을 명시하면 된다.

무료인 Microsoft Windows용 문서 편집기(Notepad++)로 작성하면 가장 이상적이다. 아래와 같이 작성하고 반드시 html 확장자로 저장해야 한다.

아래 예문 8~10번 줄은 html 편집이 쉬운 구글 블로그를 이용하면 효과적이다. 구글 블로그 문서편집기의 <새 문서 보기>로 문서를 작성 후에 <html 보기>로 전환해서 복사하면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML !DOCTYPE declaration</title>
</head>
<body>
<div class="ex">
    <p>이 문서는 HTML 문서입니다.</p>
</div>
</body>
</html>

html 파일 저장

html 파일은 웹서비스가 가능한 서버에 저장해야 한다. 거의 무료에 가까운 구글 클라우드(GCP)를 사용하면 된다. 구글 드라이브는 완벽한 웹페이지 구현이 불가능하다.

html 파일 링크

선호하는 SNS에 <html url>을 입력하고 <보내기>를 하면 문서의 내용("이 문서는 HTML 문서입니다.")이 상대방 스마트폰에 노출된다.

html 파일 편집

HTML(Hyper Text Markup Language, 하이퍼 텍스트 마크업 언어)는 웹페이지 표시를 위해 개발된 마크업 언어다. 제목, 단락, 목록 등과 같은 요소를 꺽쇠괄호<>에 포함하여 <태그>로 지정하고, 자바스크립트와 CSS 같은 스크립트로 본문의 구조와 크기, 색상, 배경, 여백 등을 다채롭게 꾸밀 수 있다.

방법1

<div style="width:45%;heigh:200px;background:yellow;padding:10px">
<h1 style=“font-size:20px;color:red;”>이 가을에</h1>
<p>따스한 가을 햇살 같은 그대의 미소를 그리워합니다.</p>
</div>

이 가을에

따스한 가을 햇살 같은 그대의 미소를 그리워합니다.

방법2

<div class="test">
<h1></h1>
<p>따스한 가을 햇살 같은 그대의 미소를 그리워합니다.</p>
</div>

<style>
.test{
width:50%;
height:100px;
background:yellow;
}
h1{
font-size:25px;
color:red;
}
</style>

Dream Chaser