HTML 기초 (1)

1. HTML의 정의와 특징
2. Font 변경
3. 문단과 리스트
4. 이미지 가져오기
5. 표 만들기
6. Input과 Form

1. HTML의 정의와 특징

• 웹브라우저에서 사용되는 표현 언어로 MVC 패턴의 view의 역할을 한다.
• HTML tag와 text(data)로 구성되며 tag는 속성을 가질 수 있다.
• HTML tag는 구분적 역할과 기능적 역할을 한다.

 HTML 고유기능 (CSS 대체 불가)
        <a href="website 주소">링크타기</a>
        <img src="image 주소">
        <input type="~" name="~"> 
        <form action="서버주소" method="get"> 

2. Font 변경

	<div>
    	<b>b tag는 굵게</b> <br>
    	<i>i tag는 이텔릭체</i> <br>
        <sub> sub tag는 아래첨자 </sub> <br>
        <sup> sup tag는 위첨자 </sup> <br>
        <ins>ins tag는 밑줄</ins> <br>
        <del>del tag는 취소(줄)</del> <br>
        <small>small tag는 작은 글자</small> <br>
        <strong>strong tag는 문자를 강력하게 강조</strong> <br>
        <mark>mark tag는 음영(형광펜)으로</mark> <br>
    </div>

3. 문단과 리스트

<p>p tag는 문단을 정의하는 tag</p>
<div>div tag는 data를 구분해주는 tag</div>
<span>span tag는 줄바꿈 없이 data를 구분해주는 tag</span>
<ol> <!-- ol은 순서가 있는 리스트 tag-->
    <li>MENU1</li>
    <li>MENU2</li>
    <li>MENU3</li>
</ol>
<ul>
    <li>서울</li>
    <li>경기</li>
    <li>충청</li>
</ul>

p tag는 문단을 정의하는 tag

1. MENU1
2. MENU2
3. MENU3

• 서울
• 경기
• 충청

4. 이미지 가져오기

절대경로: '\workspace\image.jpg' 과 같은 파일의 절대적인 위치를 의미한다.
(document root부터 시작)
상대경로: './../Images/temp/image.jpg' 과 같이 현재 위치에서 상대적인 위치를 의미한다.
( './' 는 현재 위치를, '../'는 현재 위치에서 상위 위치를 나타낸다. )
링크경로: 'https://~' 로 시작하는 이미지가 있는 링크를 나타낸다.

<img src="workspace\image.jpg">
<img src="./../Images/temp/iamge.jpg">
<img src="https://~">

5. 표 만들기

<table>
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
    </tr>

    <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
    </tr>

    <tr>
        <td>3행 1열</td>
        <td>3행 2열</td>
    </tr>
</table>

6. Input과 Form

<form action="서버주소" method="post">
    <label>메시지</label>
    <input type="text" name="msg"><br><br>

    <input type="radio" name="gender" value="남자">
    <label>남자</label>
    <input type="radio" name="gender" value="여자">
    <label>여자</label><br><br>

    <input type="submit" value="전송">
    <input type="reset" value="취소">
</form>