[003] HTML 기본

HTML 태그 vs 속성

<img src="pic1.jpg" alt="이미지 없음">

태그 : img

속성 : src, alt

첫 HTML

vscode에서 ! 입력 후 enter

<!DOCTYPE html> <!-- 이 문서는 html5 문서를 쓸 것이라는 것을 browser에게 알려주는 역할 -->
<html lang="ko"> 
<head>
    <meta charset="UTF-8"> <!-- 문자 인코딩 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>여기는 웹 페이지 상단 제목입니다.</title> <!-- 문서 제목 설정 -->
</head>
<body>
    
</body>
</html>

<head>

- 페이지 연결

<head>
	<link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">
</head>

<head>
    <style>
        body { background-color: lightpink }
        h1 { color: red; }
        p { text-decoration: underline; }
    </style>
</head>

<script type="application/javascript">
    document.getElementById("para").innerHTML = "자바스크립트가 실행되었습니다.!";
</script>

<body>

- 외우지 말고 https://www.w3schools.com/tags/default.asp 사이트에서 찾아보기

<table> 태그 (실습 중요★★)

- 과거에는 화면 배치를 table 태그로 했었다. (현재는 div 태그로 대체)

<table> : 표의 테두리를 만들어준다.

<tr> : 가로 줄 한 줄을 만들어 준다. (table row)

<th> : 표의 제목을 진하게 표현해준다. (table heading)

<td> : 한 칸을 만들어 준다. (table definition)

속성값으로 width, height을 줄 수 있다.

colspan 속성 : 가로 병합

rowspan 속성 : 세로 병합

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>여기는 웹 페이지 상단 제목입니다.</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">지역별 홍차</th>
        </tr>
        <tr>
            <th rowspan="3">중국</th>
            <td>정산소총</td>
        </tr>
        <tr>
            <td>기문</td>
        </tr>
        <tr>
            <td>운남</td>
        </tr>
        <tr>
            <th rowspan="4">인도 및 스리랑카</th>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
        </tr>
    </table>
</body>
</html>