지구정복

[HTML] HTML 기초2 본문

데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js

[HTML] HTML 기초2

eeaarrtthh 2020. 10. 28. 11:44
728x90
반응형

저번 기초 1에 이어서 계속


목차

  • 테이블 속성 사용
  • HTML 한글 사용법
  • 파비콘 넣는 방법

 

 

ㅇ테이블

-테이블 머릿말

아래와 같이 <td>태그 대신 <th> 태그를 이용하면 머릿말이 된다.

        <table border='1' width="400" height="200">
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </table>

 

-테이블 중첩

테이블 안에 테이블 중첩할 수 있다.

아래와 같이 <td> </td> 안에 새로운 <table></table>을 집어넣는다.

            <tr>
                <td>
                    <table>
                        <tr>
                            <td>11</td>
                            <td>22</td>
                            <td>33</td>
                        </tr>
                    </table>
                </td>
                <td>5</td>
                <td>6</td>
            </tr>

 

-각 행렬값 정렬하기

<td> 태그 안에 align 속성 또는 valign 속성을 추가한다.

아래와 같다. 1행은 align 속성(가로를 기준으로 정렬), 2행은 valign 속성(세로를 기준으로 정렬)을 사용했다.

속성의 값은 align은 center, left, right

valign은 top, middle, bottom 이 있다.

 

 

 

 

ㅇHTML 한글사용법

html 문서 header안에 <meta charset='utf-8'> 을 써준다.

이 명령어를 사용하지 않으면 한글이 깨져서 나온다.

 

-<header> 태그 안에 내용

 

<title> 은 문서의 제목이다.

<meta> 는 문서의 언어를 불러오는 것이다.

<style> 은 css를 적는 곳

<script> 는 javascript를 적는 곳이다.

 

 

ㅇ파비콘 넣는 방법

파비콘은 웹페이지의 아이콘이다. 아래 예시를 보면 이해가 된다.

 

 

미리 사용할 파비콘 아이콘을 준비한다. 이때 확장자명은 .ico 이다.

이때 경로는 공유되는 폴더안에 파비콘 아이콘을 위치시킨다.

이를 넣으려면 헤드태그 안에 아래 명령어를 입력한다.

 

파비콘이 생겼음을 알 수 있다.

이때 속성값 rel은 link 태그에서 꼭 입력되어야하는 속성값이다.

rel 은 relation의 약자로 연결 관계를 의미한다. 

rel="short icon" 의 뜻은 "short icon과 관련이 있다." 라는 뜻이다.

728x90
반응형
Comments