• HT : Hyper Text, 문서와 문서가 링크로 연결되어 있다.
• M : Markup, 태그로 이루어져 있다.
• L : Language
  -> 웹사이트의 틀을 만들어 주는 마크업 언어

📌 설치

• visual studio code

📌 단축키

• Alt + b or Alt + shift + b or F5: 브라우저
• Ctrl + + or - : 화면 확대 or 축소
• Ctrl + b : 전체화면, 다시 돌아가기
• ! + enter : 기본 html 문서 타입 작성

📢 확장자 설치

open in browser 설치

📌 기본 명령어 모음

📢 hr

: 제목

<h1>제목</h1>

📢 ol / ul

: 문단 리스트 / li를 담아주는 공간이라고 보면된다.
ul : 점으로 나타난다

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

📢 li

: ol나 ul 안에 있는 명단

<li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>

그 결과가 이렇게 나온다.

Coffee

Tea

Milk

📢 p

: 문단을 끊어주는 명령어

<p> 음료 리스트</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

결과값

📢 button

: 버튼단자 생기게함

<button type="button">Click Me!!!!</button>

결과값
Click Me!!!!

📢 img

: 이미지 생성

  <img src="miyeon.jpg" width="300" height="400"
            alt="조미연" title="조미연"/>

결과값 // 저장한 사진대로 나옴
//title="조미연" 사진에 마우스커서를 대면 입력한 값이 나옴
// alt="조미연" 사진이 안나올때 이 위치에 이 이미지가 있었다라는걸 알림

💡 table

: 행과 열이 있는 명단 만드는 명령어

<!-- tr : 행-->
<table border="2">
        <tr>
            <!-- td : 열-->
            <td>이름</td>
            <td>성별</td>
            <td>주소</td>
        </tr>
        <tr>
            <td>강해린</td>
            <td>여</td>
            <td>서울</td>
        </tr>
        <tr>
            <td>김혁규</td>
            <td>남</td>
            <td>서울</td>
        </tr>

결과값

💡 table 예시

 <!-- align : 센터로 고정시키는것 -->
    <table border= "2" width="300" align="center">
        <!-- thead : 테이블에 헤드부분-->
        <thead>
        <tr>
            <!-- th : 글씨 진하게하고 가운대로 모아줌 -->
            <th>이름</th>
            <th>성별</th>
            <th>주소</th>
            <th>회비</th> 
        </tr>
    </thead>
    <!-- tbody : 테이블에서 본문-->
    <tbody>
        <tr>
            <td>강해린</td>
            <td>여</td>
            <!-- rowspan : 횡을 합치는것-->
            <td rowspan="2">서울</td>
            <td>5000</td>
        </tr>

        <tr>
            <td>김혁규</td>
            <td>남</td>
            <!-- <td>서울</td> -->
            <td>10000</td>
        </tr>
    </tbody>
    <!-- tfoot : 표 상에서 가장 아래쪽-->
    <tfoot> 
        <tr>
            <td colspan="3">합계</td>
            <!--<td> </td>
            <td> </td>-->
            <td>15000</td>
        </tr>
    </tfoot>
    </table>

결과값

💡 table 문제

<table border="2" width="500" align="center" >
        <thead>
        <tr>
            <th colspan="2">획득포인트</th>
        </tr>
    </thead>

     <tbody>
        <tr align="center">
            <td rowspan="2">G획득</td>
            <td>루비결제5000G</td>
        </tr>

        <tr align="center">
            <td>가입 축하 10000G 지급</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th align="center">합계</th>
            <th align="center">15000G</th>
        </tr>
    </tfoot>
    </table>

결과

💡 table 문제2

    <!--
        <div> 
            - 영역 구분을 위한 태그
            - 상단,메뉴,본무,하단 등과 같이 웹 페이지의
            레이아웃에 대한 영역을 구분하기 위해 사용
            - 서로 중첩되어 사용할 수 있으며, 다른 태그를
            포함할 수 있다.
    -->
    <div>
        <!-- 게시판 제목 -->
        <div>
            <h1>공지사항</h1>
            <h2>우리 사이트의 새로운 소식을 알려드립니다.</h2>
        </div>
        <!-- 게시물 리스트 -->
        <div>
            <table border="2" width="800" align="center">
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>제목</th>
                        <th>작석장</th>
                        <th>조회수</th>
                        <th>작성일</th>
                    </tr>
                </thead>
                <tbody align="center">
                    <tr>
                        <td>3</td>
                        <td><a href="#">웹 표준 + 웹 접근성</a></td>
                        <td>관리자</td>
                        <td>123</td>
                        <td>2014-05-01</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td><a href="#">HTML5 + 반응형</a></td>
                        <td>관리자</td>
                        <td>123</td>
                        <td>2014-05-01</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td><a href="#">Javascript + jQuery</a></td>
                        <td>관리자</td>
                        <td>123</td>
                        <td>2014-05-01</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5" align="center">
                            <a href="#">1</a>
                            <a href="#">2</a>
                            <a href="#">3</a>
                            <a href="#">4</a>
                            <a href="#">5</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5" align="right">
                            <a href="#">새 글 쓰기</a>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

결과값