day36 - JavaScript(HTML, CSS, <!DOCTYPE html>, <h1>, image, <table> )

KIC/JavaScript,CSS

day36 - JavaScript(HTML, CSS, <!DOCTYPE html>, <h1>, image, <table> )

바차 2021. 8. 4. 23:00

[HTML]

-> 웹 페이지 제작에 가장 기본적으로 사용되는 마크업 언어이다.

-> Hyper Text Markup Language

[HTML 기본 구조]

<!DOCTYPE html>

-> DOCTYPE html 이란 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능

<head></head>

-> 헤드 태그에 title은

이 부부분을 나타낸다.

<body></body>

-> 브라우저 상에서 출력되는 실질적인 내용이 담기는 부분

[HTML 예제]

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <h1>글 제목 1</h1>
    <h2>글 제목 2</h2>
    <h3>글 제목 3</h3>
    <h4>글 제목 4</h4>
    <h5>글 제목 5</h5>
    <h6>글 제목 6</h6>
</body>

</html>

<h1> ~ <h6>

-> 글 제목의 크기를 지정한다. 숫자가 커질수록 작은 글자이다.

[예제2]

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <h3>물고기</h3>

    <img src='fish.jpg'>
    <img src='fish.jpg' , width="200" , height="200" title="물고기 입니다.">
    <img src='fish.jpg' , width="100">
</body>

</html>

-> image는 width, height, title 속성이 있다.

title은 사진에 마우스를 올려놓았을 때 출력되는 텍스트이다.

[예제3]

<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        tr,
        th,
        td {
            border: solid 1px black;
            border-collapse: collapse;
            padding: 8px;
        }
    </style>
</head>

<body>
    <h3>KTX 열차 시간표</h3>
    <table>
        <tr>
            <th>출발</th>
            <th>도착</th>
            <th>객실</th>
            <th>요금</th>
        </tr>
        <tr>
            <td>서울(17:25)</td>
            <td>부산(20:07)</td>
            <td>일반실</td>
            <td>50,800원</td>
        </tr>
        <tr>
            <td>서울(18:00)</td>
            <td>부산(20:35)</td>
            <td>특실</td>
            <td>83,700원</td>
        </tr>
        <tr>
            <td>서울(18:15)</td>
            <td>부산(20:50)</td>
            <td>일반실</td>
            <td>50,800원</td>
        </tr>
    </table>
</body>

</html>

-> <table>, <th>, <tr>, 를 활용하여 테이블을 만든다.

-> <table>로 전체를 감싸고, <th>는 테이블의 헤더부분을 의미하며 <td> 보다 글자가 진하다.

-> <tr>은 row, <td>는 col 을 의미

[CSS]

-> CSS 를 이용하여 글자의 색상, 크기, 글꼴 등을 지정할 수 있다.