웹보안_3. HTML태그

HTML태그

 

HTML에 대해 자세히 알아보자. HTML은 요소와 속성으로 이루어져 있다. 먼저 태그에대해서 알아보자. HTML의 태그는 무수히 많으므로 그중에 간단히 몇개만 알아보자.

 

태그는 크게 block tag와 inline tag로 나뉜다. block태그는 해당내용이 한블럭을 전부 차지하는 태그이다. 반대로 inline tag는 한블럭에서 해당부분만 차지하는 태그이다.

 

1. 표제

태그의 종류는 첫번째로 표제를 나타내는 태그인 <h1>~<h6>이 있다.

 

2. 문단, 본문

두번째로는 문단, 본문, 단락을 나타내는 <p>, <span>, <div>가있다. 추가적으로 앤터의 기능을 수행하고싶을때는 <br>을 이용한다.

 

3. 목차

세번째로는 목차를 나타내는 <ol> ordered list, <ul> unordered list 와 리스트에 들어갈 항목을 나타내는 <li> list item 이 있다. 아래사진을 통해 ol과 ul의 차이를 알아보자.

 

# ol

 

먼저 ol (ordered list)는 리스트가 숫자로 표현이된다.

반대로 ul (unordered list)는 리스트가 숫자가 아닌 다른형태로 표현된다.

 

 

4. 그림, 사진

네번째로는 그림을 표현할 수 있는 <img>태그이다. img는 다른태그와는 달리 <img> ... </img> 에서 ...에 그림을 넣을 수 없다.

 

 

src를 이용해 해당 사진의 경로를 적어 사진을 불러올 수 있고, 웹브라우저의 사진의 주소를 이용해 해당 이미지를 불러올 수 있다. 왼쪽사진은 평창올림픽 이미지를 다운받아 다운받은 경로를 이용해 사진을 불러왔고 오른쪽사진은 웹브라우저에있는 이미지의 주소를 불러와 다운받았다. 이미지의 크기도 조절할 수 있는데 width와 height를 이용해서 크기를 조절한다.

 

 

5. 표

다섯번째로는 표를 작성할 수 있는 <table>태그이다. 표의 구조는 <table> </table> 태그안에 <tr>은 행 <td>는 열을 표현해서 나타낸다. 표를 이용할때 여러 속성을 이용할 수 있는데 <td>에서 rowspan과 colspan이 있는데 rowspan은 세로로 합치고 colspan은 가로로 합쳐지게 된다. 또 table을 사용할때 속성으로 border이 있는데 표의 테두리를 표현할때 사용하게된다. 아래 그림을 통해 확인해보자.

 

 

6. 링크

여섯번째로는 링크가 있다. 링크를 사용하는 구조는 <a href="경로">이다. 링크걸고자 하는 주소를 경로부분에 작성하면된다.

 

링크건 목록을 누르면 해당경로로 이동하게된다.

 

<CSS 표현방법>

## 각각의 태그는 많은 속성들을 포함한다. 요소별로 속성항목은 다를 수 있다. 작성법은 오프닝(시작) 태그에 작성한다. 속성은 개별속성과 글로벌 속성이있다.

개별 속성은 각각의 태그에 직접 입력하는 것이고, 글로벌 속성으로는 이벤트 속성(mouse, keyboard) 과 스타일 속성(CSS, Casding Style Sheet)과 id,class를 이용한 방법으로 나뉜다.

 

개별속성은 표에서 rowspan과 colspan처럼 사용해봤으니 글로벌 속성에 CSS표현방법에 대해서 알아보자.

 

CSS표현방법은 3가지로 나타낼 수 있다.

 

1. 직접표현

첫번째로 해당태그에 직접표현하는 것이다.

 

2. style태그만 따로 설정

두번째로는 <style> ... </style> 따로 style태그를 만든뒤 해당 태그들을 이곳에 입력할 수 있다.

 

첫번째방법과 두번째 방법이 같이 사용된다면 첫번째 방법인 해당태그에 직접 입력하는 방법이 우선적으로 적용된다.

 

3. 외부표현

세번째로는 외부에 css폴더를 작성한뒤 <style> ... </style>에서 ...에 들어가는 내용을 따로 저장한뒤 <link>를 통해 불러올수 있다. 이때 type="text/css" href="경로" rel="stylesheet"를 꼭작성해야한다.

 

 

이때 href="경로" 부분에 경로는 html파일과 css파일이 같은 위치에있다면 상대경로인 해당 파일명만 입력하고 경로가 다를경우 절대경로를 입력해야한다.

 

4. id,class

id, class를 이용한 방법도 해보도록 해보자.

id와 class를 이용해 다른태그여도 id와 class를 이용해 한꺼번에 속성을 변경할 수 있다. 아래를 통해 확인해보자

 

 

id값으로 설정한 single은 앞에 #을 붙여서 사용한다 보통 id값은 중복되지 않도록 설정한다. class값으로 설정한 multi는 앞에 . 을 붙여서 사용한다. 보통 class값은 중복되도록 여러개를 같은class로 지정할 때 사용한다. 위사진에서도 h1과 p 서로 다른 태그를 파란색으로 한번에 지정한 것을 확인 할 수 있다.

 

## 간단한 웹페이지하나를 작성해보기

 

 

css파일을 따로 만들어서 불러오도록하자.

 

 

bacground-image:url("경로")는 웹브라우저에 있는 이미지를 불러와 배경이미지로 설정하게된다.