컴퓨터 네트워크/웹 프로그래밍

[HTML5] HTML5 첫걸음

:) :) 2023. 3. 6. 00:12

1. HTML5 개요

HTML은 HyperText Markup Language의 약자이다. 웹 페이지는 HTML 문서라고도 불린다.

W3C는 World Wide Web Consortium의 약자이다.

이는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관이다.

 

웹 상에서 콘텐츠를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.

또한 다음과 같은 사항을 모두 문법적으로 유연하게 허용한다.

- 태그 이름에 대문자 사용

- 속성값에 따옴표 생략

- 속성값 생략

- 빈 태그의 종료 태그(/) 생략

 

2. HTML5 핵심 실습

https://www.youtube.com/watch?v=rgI930gqdaY

< 이 영상을 참고하였습니다. >

 

<!DOCTYPE html>
<html lang="en">
<!-- head에는 웹 사이트에 대한 정보 및 외부 자료 참조(CSS, JS)가 들어간다 -->

<head>
    <meta charset="UTF-8">
    <title>나의 웹사이트</title>
</head>

<!-- 실제 화면에 대한 내용은 body tag에 들어간다.-->

<body>
    <div style="display: flex;"></div> <!--이 내부는 가로로 또 나뉨-->
    <h1>첫 번째 블록</h1>
    <h1>H1, 가장 상위 제목</h1>
    <h2>H6, 가장 하위 제목</h2>
    <p>문단을 집어넣는 태그 p,
        여러 문단도
        한번에
        집어넣을 수 있다.(IDE상에서)
        <strong>실제로 줄 바꿈을 하려면<br /></strong>
        br/ 태그를 넣어줘야 한다.
    </p>
    <input type="text" style="width: 500px; height: 200px; font-size: 22px;">
    <!-- input태그는 내용이 없기때문에 닫을 필요가 없다.
    다시말해 내용이 없는 태그는 닫을 필요가 없다. 내용을 넣으면 닫아줘야됨-->
    <div>
        <button style="width: 100px; height: 30px;">버튼</button>
    </div>

    <div>
        <button style="width: 100px; height: 30px;">버튼2</button>
        <button style="width: 100px; height: 30px;">버튼3</button>
    </div>
    <!-- div 태그 사용시 웹페이지 상에서 div 내부와 외부를 구분해준다.-->

    <div>
        <h1>두 번째 블록</h1>
        <!-- a태그는 다른 웹사이트로 가는 링크를 걸어주는 태그다.-->
        <img src=""
            alt="google Logo"><br />
        <a href="https://www.google.com"> https://www.google.com 구글로 이동 </a>
        <!-- img의 alt는 이미지불러오기 실패시 나타낼 문구
        ul과 li은 리스트 표시, ul은 앞에 점, ol은 앞에 숫자
    -->
        <ul style="font-size: 25px">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol style="font-size: 25px">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ol>

        <!-- table은 표를 만들 때 사용, 첫 번째 tr에는 colname, 두 번째 부터는 data 입력-->
        <div>
            <table summary="테이블" style="width: 1000px; height: 250px;">
                <caption>테이블 이름</caption>
                <tr>
                    <td>이름</td>
                    <td>나이</td>
                    <td>학교</td>
                </tr>
                <tr>
                    <td>철수</td>
                    <td>24</td>
                    <td>인하대학교</td>
                </tr>
                <tr>
                    <td>영희</td>
                    <td>25</td>
                    <td>한국과학기술원</td>
                </tr>
                <tr>
                    <td>영민</td>
                    <td>26</td>
                    <td>서울대학교</td>
                </tr>
            </table>
        </div>
    </div>
    <div>
        <h1>세 번째 블록</h1>
        <!-- form 태크는 여러 태그를 묶어서 하나의 폼으로 제출해야 할 때
        type이 password인 경우 입력한 글자가 보이지 않는다.-->
        <form>
            <div><input type="text"></div>
            <div><input type="email"></div>
            <div><input type="password"></div>
            <div><input type="date"></div>
            <div><input type="checkbox">체크박스</div></input>
            <select name = "coffee">
                <option value="1">아메리카노</option>
                <option value="2">카페라떼</option>
                <option value="3">에스프레소</option>
                <!-- 내용이 웹페이지에 보이고 전송할 땐 value가 전송됨-->
            </select>
            <div>
                <button type="submit" style="font-size: 30px; width: 60px; height: 30px"></button>
            </div>
        </form>
    </div>

</body>

</html>

가장 상단 <!DOCTYPE html>부터 시작하여 html태그로 선언된 html문서는 크게  head  body 부분으로 나뉜다.

 head  는 웹사이트에 대한 정보 및 외부자료(CSS, JS)의 레퍼런스가 들어간다.

 body  에는 실제 화면에 대한 내용이 들어간다.

각 태그에는 내부에 내용(문자열)이 들어갈 시 반드시 닫아주는 태그를 사용해야한다. 반대로, 태그 속에 내용이 들어가지 않으면 닫는 태그를 사용하지 않아도 된다.

 

 

  • 각종 태그에 대한 설명
    • *각 태그의 하위 리스트는 각각의 파라미터?를 의미 
    • div : 웹 페이지 상 구역 분리
    • h1~h6 : 글자 크기(제목1 ~ 제목6)
    • strong : 강조
    • p : IDE상 여러 줄의 코드를 삽입하게 해주는 태그
    • br : 줄바꿈 태그(닫는 태그 필요 X)
    • input : 지정한 type의 정보를 입력받을 수 있는 태그, 내용이 없다면 닫는 태그 필요 X
      • input type에는 text, email, password, date, checkbox등이 있고 각각 직관적이고 고유한 기능을 가진다.
    • button : 버튼
      • button type을 submit으로 지정시 이를 클릭했을 때 로그인 창의 로그인 처럼 작동.
    • img : 이미지를 받는 태그
      • src : url입력
      • alt : 이미지를 불러오지 못할 시 대신 할(alternative) 내용
    • ul : 리스트를 만들어주는 태그, 이 줄처럼 맨 앞 점을 찍어줌
    • ol : 리스트를 만들어주는 태그, 각 줄의 맨 앞에 1에서부터 오름차순으로 증가하는 숫자를 찍어줌
    • li : 리스트 요소
    • table : 표를 만들어주는 태그
      • tr : 첫 번째 tr태그는 column list를 의미, 이후의 tr태그는 각 행(정보)를 의미
      • td : tr태그 속 정보들을 열 단위로 구분해주는 태그
    • form : 여러 태그(정보)를 하나로 묶어서 전달해야 할 때 
      • select : 해당 칸에 선택할 수 있는 리스트를 제공
        • option : 선택할 수 있는 리스트의 세부 요소, 내용에 해당하는 걸 누르고 이를 제출(전달) 시 value에 해당하는 값을 전달해준다.

 

 

3. 참조

http://www.tcpschool.com/html/html5_intro_intro