html5 기본 태그로 웹문서 템플릿 만들기 making html5 document

html5는 마크업태그를 이용하여 웹문서르 만들 수 있다. 기본적인 태그만 가지고도 그럭저럭 사용할만한 웹문서를 만들 수 있다. 단지 멋이 없을 뿐이다. 웹에서 중요한 것은 컨텐츠이다. 컨텐츠는 글내용이기도 하고 글내용을 대표하는 제목이 중요하다. 나머지는 부수적이다. 이런 기본적인 것들만을 이용하면 멋은 없지만 템플릿을 만들어 응용할 수 있는 뼈대는 만들 수 있다.

html5 기본 태그로 웹문서 템플릿 만들기
making html5 document

이전에 했던 html5 태그들을 이용하여 웹문서를 만들어 보도록 한다.

이정도만 가지고도 웹문서를 만드는데는 문제는 없다.

다만, 모양새가 투박하고 멋이 없다.

여기서부터 시작이다. 조금씩 스터디를 하다보면 멋들어진 웹문서를 만들 수 있을 것이다.

사용되는 태그들

가장 기본적인 요소들을 이용하여 웹페이지를 만든다.

사용되는 태그는 다음과 같다.

<!DOCTYPE html>
<h숫자>
<p>
<a>
<img>

태그를 보면 별 것 없다.

컨텐츠 글내용을 위한 p 태그를 사용하고 문장을 대표하는 제목을 표현하기 위해 h 태그를 사용한다.

추가적인 내용을 연결하기 위해 a 태그를 사용하고 이미지를 표시하기 위해 img 태그까지 추가한다.

이정도만 해도 어느정도 정보성있는 문서를 만드는데 충분하다.

단지, 모양새 등 뭔가 밋밋하고 투박하고 멋이 없을 따름이다.

샘플코드

단순함의 극치를 보여주고 투박하고 별 것 없다.

위에서 보여준 가장 기본적인 것들만 가지고 웹페이지를 만들어 본 것이다.

반응형 뭐 그런 것은 없다.

위에서 언급한 5가지 태그요소만 보면 된다.

추가로 div 태그는 구역을 나누는 역할을 한다.

p 태그와 구분되는데 p 태그는 문장을 나타내고 div 는 태그들의 집합을 의미한다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>

	<!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>

        <!-- 제목 -->
        <div>
            <h1>HTML5 템플릿</h1>
            <p>
                기본적으로 사용되는 태그를 사용하여 html5 문서를 만들어 본다.
            </p>
        </div>

        <div>
            <h2>사용 방법</h2>
            <p>
                html5 문서를 만들 때는 html5라는 문서를 선언한 후 마크업태그를 사용합니다.
            </p>
            <p>
                <img width="250" height="250" src="https://upload.wikimedia.org/wikipedia/commons/d/de/HTML5_oval_logo.png"/>
            </p>
        </div>

        <div>
            <h2>사용되는 태그들</h2>
            <p>
                &lt!DOCTYPE html&gt : html 을 선언합니다.
            </p>
            <p>
                &lth숫자&gt 태그 : 제목을 나타냅니다.
            </p>
            <p>
                &ltp&gt 태그 : 문단을 나타냅니다.
            </p>
            <p>
                &lta&gt 태그 : 다른 웹문서를 연결합니다.
            </p>
            <p>
                &ltimg&gt 태그 : 이미지를 웹문서에 표현합니다.
            </p>
        </div>

        <div>
            <h2>추가적인 내용</h2>
            <p>
                html5의 자세한 내용은 아래의 링크를 참고한다.
            </p>
            <p>
                <a href="https://ko.wikipedia.org/wiki/HTML" target="_blank">추가내용</a>
            </p>
        </div>
        
	</body>
    <!-- // -->

</html>
<!-- // -->

결과화면을 보자.

투박하고 멋은 없지만 요소들을 추가하면 그럭저럭 급할 때 사용할 만 하게 보인다.

제목과 내용 이미지 추가내용을 위한 링크 필요한 것은 다 있다.

'programming > web' 카테고리의 다른 글

html5 태그 요소의 속성 특징 html tag attributes (0)	2022.02.24
html5 태그 요소 특징 html elements (0)	2022.02.22
html5 img 태그 웹페이지 이미지 표시 using img tag (0)	2022.02.13
html5 링크 a 사용 웹페이지 연결 및 이동 (0)	2022.02.12
html5 문단 태그 p 사용 컨텐츠 내용 표시 paragraphs tag (0)	2022.02.10