본문 바로가기
Web Study/24 웹 캠프

HTML 스터디

gaeunnnn 2024. 1. 15. 16:50

오늘은 HTML의 기본 문법을 살펴볼 것이다.

 

먼저 간단한 html문법 내용이다.

 

  1. <!DOCTYPE>: 문서 유형을 선언합니다.
  2. <html>: HTML 문서의 루트 요소입니다.
  3. <head>: 문서의 메타 정보를 포함하는 부분입니다.
  4. <title>: 문서의 제목을 정의합니다.
  5. <body>: 문서의 본문을 나타냅니다.
  6. <h1> ~ <h6>: 제목 태그, 중요도에 따라 1부터 6까지 있습니다.
  7. <p>: 문단을 나타냅니다.
  8. <br>: 줄바꿈을 나타냅니다.
  9. <hr>: 수평선을 나타냅니다.
  10. <!-- ... -->: 주석을 나타냅니다.
  11. <strong>: 중요한 텍스트를 강조합니다.
  12. <em>: 텍스트를 강조하여 이탤릭체로 표시합니다.
  13. <mark>: 텍스트를 하이라이트합니다.
  14. <small>: 작은 텍스트를 나타냅니다.
  15. <del>: 삭제된 텍스트를 나타냅니다.
  16. <ins>: 삽입된 텍스트를 나타냅니다.
  17. <sub>: 아래 첨자를 나타냅니다.
  18. <sup>: 위 첨자를 나타냅니다.
  19. <a>: 하이퍼링크를 생성합니다.
  20. <img>: 이미지를 삽입합니다.
  21. <map>: 이미지 맵을 정의합니다.
  22. <area>: 이미지 맵 내의 영역을 정의합니다.
  23. <ul>: 순서 없는 목록을 생성합니다.
  24. <ol>: 순서 있는 목록을 생성합니다.
  25. <li>: 목록 항목을 나타냅니다.
  26. <dl>: 정의 목록을 생성합니다.
  27. <dt>: 정의 목록에서 용어를 나타냅니다.
  28. <dd>: 정의 목록에서 용어의 설명을 나타냅니다.
  29. <table>: 표를 생성합니다.
  30. <caption>: 표의 제목을 정의합니다.
  31. <th>: 표의 머리글 셀을 나타냅니다.
  32. <tr>: 표의 행을 나타냅니다.
  33. <td>: 표의 셀을 나타냅니다.
  34. <thead>: 표의 머리글 부분을 그룹화합니다.
  35. <tbody>: 표의 본문 부분을 그룹화합니다.
  36. <tfoot>: 표의 바닥글 부분을 그룹화합니다.
  37. <form>: 사용자 입력을 위한 폼을 정의합니다.
  38. <input>: 입력 필드를 정의합니다.
  39. <textarea>: 여러 줄의 텍스트 입력을 위한 필드를 생성합니다.
  40. <button>: 버튼을 정의합니다.
  41. <select>: 드롭다운 목록을 생성합니다.
  42. <option>: 선택 목록에서 하나의 옵션을 정의합니다.
  43. <label>: <input> 요소에 레이블을 붙여 사용자에게 정보를 제공합니다. 입력 필드를 명확하게 식별할 수 있도록 도와줍니다.
  44. <fieldset>: 관련 요소를 그룹화하여 구조화합니다.
  45. <legend>: <fieldset> 내에 제목을 제공합니다.
  46. <div>: 블록 레벨의 컨테이너로 사용됩니다.
  47. <span>: 인라인 컨테이너로 사용되며, 텍스트나 다른 요소를 그룹화하기 위해 사용됩니다.
  48. <header>: 문서나 섹션의 헤더를 정의합니다.
  49. <footer>: 문서나 섹션의 푸터를 정의합니다.
  50. <nav>: 네비게이션 링크의 그룹을 정의합니다.

아래는 내가 따라 해본 실습강의 중 몇 가지 html 코드와 화면이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 draggable="true">움직일 수 있는 태그</h1>
    <p lang="ko">대한민국</p>
    <p hidden>이 문장은 화면에 보이지 않습니다.</p>
    <a
      href="https://google.com"
      id="google"
      title="클릭하면 구글 사이트로 이동합니다."
      >구글</a
    >
    <br />
    <label for="userId">사용자 아이디</label>
    <input type="text" name="" id="userId" />
    <br />
    <p spellcheck="true" contenteditable="true">This is a paraggraph</p>
    <p style="color: red; background-color: yellow">빨간색 문장입니다.</p>
    <a href="" tabindex="1">네이버</a>
    <a href="" tabindex="2">구글</a>
    <a href="" tabindex="3">개발자의 품격</a>
    <button title="주문 버튼을 클릭하면 선택한 제품에 대한 주문이 진행됩니다.">
      주문
    </button>
  </body>
</html>
Document

움직일 수 있는 태그

대한민국

구글

This is a paraggraph

빨간색 문장입니다.

네이버 구글 개발자의 품격 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h3>순서 없는 목록</h3>
    <!-- ul은 unordered list -->
    <ul>
      <li>순서 없는 목록 1</li>
      <li>순서 없는 목록 2</li>
      <li>순서 없는 목록 3</li>
    </ul>

    <h3>음료 목록</h3>
    <ul>
      <li>에스프레소</li>
      <li>아메리카노</li>
      <li>카페라떼</li>
    </ul>

    <h3>순서 있는 목록</h3>
    <!-- ol은 ordered list -->
    <ol>
      <li>순서 있는 목록 1</li>
      <li>순서 있는 목록 2</li>
      <li>순서 있는 목록 3</li>
    </ol>

    <h3>웹 개발 환경 준비</h3>
    <ol>
      <li>비쥬얼스튜디오코드 설치</li>
      <li>Node.js 설치</li>
      <li>비쥬얼스튜디오코드 확장 프로그램 설치</li>
    </ol>

    <h3>설명 목록</h3>
    <!-- dl은 description list -->
    <!-- dt은 define term -->
    <!-- dd은 describe description  -->
    <dl>
      <dt>HTML</dt>
      <dd>- 웹 페이지 개발을 위한 마크업 언어</dd>
      <dt>CSS</dt>
      <dd>- 웹 페이지 디자인을 위한 언어</dd>
      <dt>자바스크립트</dt>
      <dd>- 웹 페이지를 사용자와 동적처리를 위한 언어</dd>
    </dl>
  </body>
</html>
Document

순서 없는 목록

  • 순서 없는 목록 1
  • 순서 없는 목록 2
  • 순서 없는 목록 3

음료 목록

  • 에스프레소
  • 아메리카노
  • 카페라떼

순서 있는 목록

  1. 순서 있는 목록 1
  2. 순서 있는 목록 2
  3. 순서 있는 목록 3

웹 개발 환경 준비

  1. 비쥬얼스튜디오코드 설치
  2. Node.js 설치
  3. 비쥬얼스튜디오코드 확장 프로그램 설치

설명 목록

HTML
- 웹 페이지 개발을 위한 마크업 언어
CSS
- 웹 페이지 디자인을 위한 언어
자바스크립트
- 웹 페이지를 사용자와 동적처리를 위한 언어

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }

      table {
        width: 100%;
      }

      /* th {
        border: 1px solid black;
      }

      td {
        border: 1px solid black;
      } */
    </style>
  </head>
  <body>
    <!-- 표 : table -->
    <!-- 행 : tr -->
    <!-- 셀 : td(데이터), th(열 제목) -->
    <!-- thead : 제목이 들어가는 모든 tr태그들 -->
    <!-- tbody : 데이터가 들어가는 모든 tr태그들-->
    <table>
      <thead>
        <tr>
          <th>이름</th>
          <th>연락처</th>
          <th>이메일</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>유재석</td>
          <td>010-0000-0000</td>
          <td>ryu@naver.com</td>
        </tr>
        <tr>
          <td>김종국</td>
          <td>010-0000-0001</td>
          <td>kim@naver.com</td>
        </tr>
        <tr>
          <td>송지효</td>
          <td>010-0000-0002</td>
          <td>song@naver.com</td>
        </tr>
      </tbody>
    </table>
    <br />

    <table>
      <thead>
        <tr>
          <th>학년</th>
          <th>반</th>
          <th>학생수</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3">1학년</td>
          <td>1반</td>
          <td>18명</td>
        </tr>
        <tr>
          <!-- <td>1학년</td> -->
          <td>2반</td>
          <td>19명</td>
        </tr>
        <tr>
          <!-- <td>1학년</td> -->
          <td>3반</td>
          <td>18명</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">합계</td>
          <!-- <td></td> -->
          <td>55명</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
Document
이름 연락처 이메일
유재석 010-0000-0000 ryu@naver.com
김종국 010-0000-0001 kim@naver.com
송지효 010-0000-0002 song@naver.com

학년 반 학생수
1학년 1반 18명
2반 19명
3반 18명
합계 55명 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- form 요소 -->
    <!-- 사용자로부터 데이터(정보)를 입력 받기 위한 HTML 요소들 -->

    <form action="/server/login">
      <div>
        <label for="email">이메일</label>
        <input type="email" id="email" />
      </div>
      <div>
        <label for="pw">비밀번호</label>
        <input type="password" id="pw" />
      </div>
      <div>
        <button>로그인</button>
      </div>
    </form>

    <h4>당신이 배우고 싶은 언어는? (다중 선택 가능)</h4>
    <div>
      <input type="checkbox" name="chk_lang" id="chk_html" />
      <label for="chk_html">HTML</label>
      <br />
      <input type="checkbox" name="chk_lang" id="chk_css" />
      <label for="chk_css">CSS</label>
      <br />
      <input type="checkbox" name="chk_lang" id="chk_js" />
      <label for="chk_js">JavaScript</label>
    </div>
    <h4>당신이 배우고 싶은 언어는? (하나만 선택 가능)</h4>
    <div>
      <input type="radio" name="rdo_lang" id="rdo_html" />
      <label for="rdo_html">HTML</label>
      <br />
      <input type="radio" name="rdo_lang" id="rdo_css" />
      <label for="rdo_css">CSS</label>
      <br />
      <input type="radio" name="rdo_lang" id="rdo_js" />
      <label for="rdo_js">JavaScript</label>
    </div>
    <br />
    <div>
      <label for="favoriteColor">가장 좋아하는 색상은?</label>
      <input type="color" id="favoriteColor" value="" />
    </div>
    <br />
    <div>
      <label for="bornDate">태어난 날짜는?</label>
      <input type="date" id="bornDate" />
    </div>
    <br />
    <div>
      <label for="arrivalDateTime">입국한 날짜/시간은?</label>
      <input type="datetime-local" id="arrivalDateTime" />
    </div>
    <br />
    <div>
      <form action="">
        <label for="userEmail">이메일 주소는?</label>
        <input type="email" name="" id="userEmail" />
        <button type="submit">저장</button>
      </form>
    </div>
    <br />
    <div>
      <label for="attachment">파일 첨부</label>
      <input type="file" id="attachment" />
    </div>
    <br />
    <div>
      <!-- 사용자의 입력을 받기 위한 용도가 아님 -->
      <!-- 대부분 개발자가 사용하기 위해서 쓰는 태그 -->
      <input type="hidden" name="email" value="john@gmail.com" />
    </div>
    <br />
    <div>
      <img src="./img/doglogo.jpeg" alt="" style="width: 100px; height: auto" />
      <!-- 아래 이미지 태그는 잘 사용 안함 -->
      <input
        type="image"
        src="./img/doglogo.jpeg"
        style="width: 100px; height: auto"
      />
    </div>
    <br />
    <div>
      <label for="yearmonth">생년/년월</label>
      <input type="month" id="yearmonth" />
    </div>
    <br />
    <div>
      <label for="">당신의 나이는?</label>
      <input type="number" min="0" />
    </div>
    <br />
    <div>
      <label for="userPass">비밀번호</label>
      <input type="password" id="userPass" />
    </div>
    <br />
    <div>
      <form action="">
        <label for="phone">전화번호</label>
        <input type="tel" id="phone" value="" pattern="^010-\d{4}-\d{4}$" />
        <button type="submit">저장</button>
      </form>
    </div>
    <br />
    <div>
      <label for="general">일반문자</label>
      <input type="text" id="general" />
    </div>
    <br />
    <div>
      <label for="visitTime">예약시간</label>
      <input type="time" id="visitTime" />
    </div>
    <br />
    <div>
      <form action="">
        <label for="">블로그 주소는?</label>
        <input type="url" id="" />
        <button type="submit">저장</button>
      </form>
    </div>
    <br />
    <div>
      <label for="weekPlan">주간 계획(몇주차)</label>
      <input type="week" id="weekPlan" />
    </div>
    <br />
    <div>
      <label for="searchKeyword">검색조건</label>
      <input type="search" id="searchKeyword" />
    </div>
  </body>
</html>
Document

당신이 배우고 싶은 언어는? (다중 선택 가능)



당신이 배우고 싶은 언어는? (하나만 선택 가능)



















'Web Study > 24 웹 캠프' 카테고리의 다른 글

Spring CRUD  (1) 2024.01.31
CSS 스터디  (0) 2024.01.16
개발 환경 설정  (0) 2024.01.13
닷홈(dothome) 무료 호스팅 서비스 이용 방법  (0) 2024.01.13

'Web Study/24 웹 캠프' Related Articles

티스토리툴바