HTML(1)

서버로부터 받은 웹 페이지는 클라이언트 컴퓨터의 웹 브라우저에 의해서 컴파일 되고 실행된다. 클라이언트의 요청을 처리하는 것은 서버 페이지지만 처리한 결과를 사용자에게 보여주는 것은 뷰 페이지이다. 이러한 뷰 페이지를 작성하는데 사용되는 언어가 HTML, CSS, JAVASCRIPT이다. 이 언어들은 모두 스크립트 언어로 컴파일한 결과를 저장하지 않고 웹 브라우저에 의해서 한 줄씩 컴파일한 뒤 바로 실행하는 형태로 동작한다.

1. HTML, CSS, JAVASCRIPT

HTML : 웹 페이지의 기본 뼈대가 되어준다.

CSS : HTML로 작성된 페이지를 예쁘게 꾸며준다.

JAVASCRIPT : HTML과 CSS만 사용한 페이지는 정적이지만, JAVASCRIPT까지 사용하면 동적인 페이지를 만들 수 있게 된다.

2. HTML의 기본

HTML 파일은 태그(Tag)라는 명령어로 구성되며, 각 태그는 속성으로 세부 설정이 가능하다.

샘플 코드 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        내용 
    </body>
</html>

HTML은 여러 종류의 태그로 구성된다. 태그는 보통 여는 태그와 닫는 태그로 구성된다.(<태그명>내용</태그명>)

태그는 이름에 따라 서로 다른 기능을 수행하며, 속성은 그 기능에 세부 설정을 가능하게 한다. 태그의 기능은 여는 태그와 닫는 태그 사이의 내용에만 적용된다. 또한 태그는 대소문자를 구분하지 않는다.

HTML 문서는 <HTML> 태그로 시작하여 </HTML>로 끝난다. 태그 안에는 <HEAD></HEAD>와 <BODY></BODY>로 구성된다. HEAD 태그에는 웹 페이지에 출력될 텍스트의 인코딩을 설정하거나 윈도우 창의 타이틀 바에 출력될 제목을 작성할 수 있다. BODY 태그에는 웹 페이지의 실제 내용이 담겨진다.

주석은 으로 작성한다.

3. 텍스트를 출력할 때 사용되는 태그의 종류

- <br/> : 엔터(Enter)

- <h1></h1> ~ <h6></h6> : 단락(위에 빈 줄 하나, 아래에 빈 줄 하나 추가)구분 및 글자 크기 제어(숫자가 높아질수록 글자의 크기는 작아진다)

- <hr/> : 특정 라인을 강조하거나 경계를 구분하기 위한 수평선

- <p></p> : 단락을 구분한다(위에 빈 줄 하나, 아래에 빈 줄 하나 추가)

4. 글자색, 글자체, 배경색과 같은 스타일을 결정하는 속성

style 속성 : 대부분의 태그에서 사용 가능하며 태그의 기능이 적용되는 범위의 크기나 색상, 배경 등을 제어한다.(원래는 CSS 속성으로 속성에 값을 작성하는 문법도 CSS 문법을 따른다.

작성 방법:

style = "속성:값;속성:값"

(속성명을 작성하고 그 값을 할당하는 연산자는 콜론을 사용한다. 여러 개의 속성을 이어서 설정할 경우에는 세미콜론으로 구분한다.)

속성 종류 :

- color : 글자색 지정

- background-color : 배경색 지정

- font-size : 글자 크기 지정

- font-family : 글자체 지정

- text-align : 텍스트 정렬 방법 지정

예시 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        <h2 style="color:yellow">HTML</h2>
        <p style="pont-size:10pt;font-family:궁서;text-align:right">
            html<br/><br/>
            by PMS
        </p>
    </body>
</html>

결과 :

5. 텍스트 스타일을 결정하는 태그

- <b></b> : 진하게 출력

- <em></em> : 강조

- <i></i> : 이테릭체

- <small></small> : 한 단계 작게 출력

- <big></big> : 한 단계 크게 출력

- <strong></strong> : 중요 텍스트

- <sub></sub> : 아래 첨자

- <sup></sup> : 위 첨자

- <ins></ins> : 추가 텍스트(밑줄)

- <del></del> : 삭제 텍스트(텍스트를 관통하는 줄)

- <mark></mark> : 마킹 텍스트

예시 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        일반 텍스트 <b>진하게 출력</b> <em>강조</em><br/>
        <i>이테릭체</i> <small>한 단계 작게 출력</small> <big>한 단계 크게 출력</big><br/>
        <strong>중요 텍스트</strong> <sub>아래 첨자</sub> <sup>위 첨자</sup><br/>
        <ins>밑줄</ins> <del>텍스트를 관통하는 줄</del> <mark>마킹 텍스트</mark>
    </body>
</html>

결과 :

6. 페이지 이동과 이미지 출력, 리스트 출력

1) 페이지 이동

페이지 이동 : HTML에서의 페이지 이동은 Hyperlink(텍스트나 이미지를 클릭하여 다른 페이지로 이동)로 구현된다.

<a></a> 태그로 링크를 구현하며 사용 문법은 <a href="url">링크</a> 와 같다.

<a></a>태그는 target 속성도 있는데 이것은 링크 페이지를 어느 윈도우에 출력할지를 설정한다.

- 예시 : <a href="url" target="">링크</a>

- 속성 값의 종류

_blank : 새 윈도우나 새 탭에서 링크 페이지 실행(주로 사용되는 값)

_self : 링크를 클릭한 위치와 동일한 프레임에 링크 페이지 실행(기본값)

_parent : 부모 프레임에 링크 페이지 실행

_top : body 전체에 링크 페이지 실행

프레임명 : 지정한 이름의 프레임에 링크 페이지 실행

<a></a>태그는 id 속성을 이용해서 북마크를 생성할 수도 있다.(물론 다른 페이지의 북마크로도 이동이 가능하다)

- 예시 :

다른 페이지로 이동하거나 웹 페이지에 이미지를 출력하려면 이들의 파일명 뿐만 아니라 경로도 지정해야 올바르게 처리된다.

경로를 지정하는 방법 :

- 절대 경로로 접근 :

절대 경로로 접근하려면 그 파일의 전체 경로를 작성한다.

<a href=" C:\data\source\ch2\2.html ">2.html로 이동</a>

- 상대 경로로 접근 :

상대 경로로 접근하려면 현재의 소스를 기준으로 자원을 찾아가야 한다.

<a href="../ch2/2.html ">2.html로 이동</a>

2) 이미지 출력

<img> 태그는 웹 페이지에서의 이미지를 정의한다.

<img> 태그는 body 없이 속성만 갖는다. 속성으로는 src와 alt가 있다.

예시 : <img src="url" alt="text"/>

src 속성은 출력하려는 이미지의 경로를 alt 속성은 이미지가 출력되지 않을 경우 보여줄 텍스트를 등록한다. 그리고 style 속성으로 이미지의 크기를 조절할 수 있다.

예시 : <img src="url" alt="text" style="width:70px;height:40px"/>

이미지의 크기를 지정하지 않으면 원본 이미지 크기대로 출력된다.

이미지에 링크를 설정할 수도 있다.

예시 : <a href="http://www.naver.com"><img src="naver.gif"></a>

CSS의 float 속성으로 이미지의 정렬 방식도 정할 수 있다.

예시 : <img src="naver.gif" style="float:right;width:90px;height:80px">

3)리스트 출력

웹 페이지에 목록을 출력하는 방법은 순서 없이 출력하는 방법과 순서 있게 출력하는 방법 두가지가 있다.

순서 없이 출력 : <ul></ul>

순서대로 출력 : <ol></ol>

리스트의 각 항목들은 <li></li>로 묶어주어야 한다.

리스트 항목 앞의 마크는 원과 숫자 이외에도 여러 종류가 있으며 속성 값을 통해 설정할 수 있다.

disc - 안이 채워진 원 모양(기본값)

circle - 안이 빈 원 모양

square - 사각형 모양

none - 아무 마크도 표시되지 않음

예시 : <ul style="list-style-type:disc"></ul>

순서 있는 항목의 마크는 type 속성으로 종류를 설정하고, start 속성으로 시작 값을 지정할 수 있다.

- type = "1" :

<ol type = "1"></ol>으로 설정하면 항목은 1.2.3.으로 출력된다.

<ol type = "1" start ="3"></ol>으로 설정하면 항목은 3.4.5.로 출력된다.

- type = "A" :

<ol type = "A"></ol>으로 설정하면 항목은 A.B.C.으로 출력된다.

<ol type = "A" start = "3"></ol>으로 설정하면 항목은 C.D.E.로 출력된다.

- type = "a", type ="I"(로마숫자) 등 나머지 type들도 동일한 방식으로 출력된다.

'Web' 카테고리의 다른 글

CSS(1) (0)	2023.01.08
간단한 회원가입 페이지 구현 (1)	2023.01.02
HTML(2) (0)	2022.12.31
구글 클론 사이트 만들기 (1)	2020.09.16
HTML 입문 (0)	2020.09.15

'Web' 카테고리의 다른 글

티스토리툴바