728x90

1. HTML(HyperText Markup Language)

HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표 등 웹 요소를 알려주는 역할을 한다. 

2. 기본 문법

태그

태그는 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 하는 역할을 한다.

여는 태그와 닫는 태그 사이에 콘텐츠 내용을 작성하며 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다.

<태그명>콘텐츠</태그명>

올바른 태그 작성 규칙

  1. 태그 이름은 소문자로 쓴다.
  2. 여는 태그와 닫는 태그를 정확히 입력한다.
  3. 들여쓰기를 적절히 사용하는 것이 좋다.

속성

속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 시작 태그 내부에 정의하며 여러 속성을 작성할 때는 공백으로 각 속성을 구분한다.

<태그명 속성="값">콘텐츠</태그명>
<태그명 속성="값" 속성="값" />

주석

웹브라우저에는 표시되지 않는 코드로, 주로 코드에 대한 메모를 남기기 위해 사용된다.

<!-- 주석의 내용 -->

3. HTML 문서 기본 구조

  • <!DOCTYPE html>: 문서의 타입을 지정
  • <html>: HTML 파일의 시작과 끝을 표시. lang 속성으로 문서에서 사용할 언어를 지정할 수 있음
  • <head>: 문서의 정보를 기입하는 부분. 웹 브라우저 화면에는 표시되지 않음
    • <meta>: 웹 문서와 관련된 정보(메타데이터)를 지정. 검색엔진이 페이지를 검새갈 때 참고할 수 있고 검색 결과에 반영할 수 있음
      • 일반적으로 문자 세트, 페이지 설명, 키워드, 작성자 및 뷰포트 설정을 지정하는 데 사용
      • charset 속성: 화면의 글자를 표시할 때 어떤 인코딩을 사용할지 지정
      • name 속성: 문서 정보
      • content 속성: 메타데이터 내용
      • http-equiv: 콘텐츠 속성 정보에 대한 http 헤
    • <title>: 문서의 제목. 웹 브라우저의 제목 표시줄에 표시
  • <body>: 문서의 내용을 표시하는 부분
<!DOCTYPE html>
<html>

<head lang="ko">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="author" content="홍길동">
  <meta name="description" content="연습용 페이지">
  <meta name="keywords" content="공부, HTML, 실습">
  <title>문서의 제목</title>
</head>

<body>
  화면에 표시될 내용
</body>

</html>

4. 태그

(1) 텍스트

  • <p>: 하나의 문단을 표시. 문단과 문단 사이에 여백 발생
  • <hn>: 제목 표시.n은 1~6 사이의 숫자이고 숫자가 클수록 텍스트 크기가 큼
  • <hr>: 텍스트 사이 구분선
  • <br>: 줄바꿈.

html의 텍스트는 엔터를 이용한 줄바꿈을 무시하고 스페이스를 이용한 공백을 한 번씩만 허용한다. 따라서 줄을 바꿀 때는 <br> 태그를 사용하고 공백을 두 번 이상 표시할 때는 &nbsp; 를 사용한다.

<body>
  <h1>고&nbsp;&nbsp;양&nbsp;&nbsp;이</h1>
  <hr>
  <h3>기본 정보</h3>
  <p>고양이는 포유류 식육목 고양이과의 동물이다.</p>
  <hr>
  <h3>식성</h3>
  <p>육식동물이지만, <br>
    <br>
    <br>
    등푸른 생성은 주지 않는 게 좋다.
  </p>
</body>

인라인 텍스트 요소

블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지
인라인 요소: 필요한 만큼의 공간만 차지
  • <mark>: 형광펜 효과
  • <strong>: 텍스트를 굵게 표시
  • <em>: 이탤릭체(기울기체)
  • <q>: 인용구
  • <s>: 취소선
<body>
  <h1>텍스트 요소 특징</h1>
  <p>그 다음 요소는 옆이 아닌 아래에 표시된다.(블록 요소)</p>
  <strong>스트롱 텍스트 요소(인라인 텍스트)</strong>
  <mark>마크 텍스트 요소</mark>
  <em>이엠 텍스트 요소</em>
  <s>취소선</s>
  <p>
    블록 레벨 요소의 안에는 
    <q>인라인 요소</q>가 포함되기도 한다.
  </p>
</body>

(2) 컨테이너

컨테이너 요소는 콘텐츠나 레이아웃에 영향을 주지 않고 여러 요소를 묶어 관리하기 편하게 만드는 역할을 한다.

  • <div>: 블록 레벨 컨테이너
  • <span>: 인라인 컨테이너

(3) 이미지

<img src="이미지 파일 경로" alt="대체용 텍스트">

alt 속성은 대체 텍스트 역할을 한다.  대체 텍스트는 이미지가 로딩되기 전이나 로딩에 실패한 경우 표시되고, 화면 낭독기가 대신 읽어주는 텍스트이다.

이미지의 크기를 조절하는 width, height 속성을 추가할 수도 있다.

  <img src="./img/cat.jpg" alt="고양이" width="300">

너비나 높이 중 하나만 지정하면 다른 속성은 원래 이미지의 비율을 자동으로 계산해 표시한다.

  <img src="./img/cat.jpg" alt="고양이" width="300" height="400">

(4) 링크

href 속성을 파일이나 링크로 연결한다. target 속성을 사용하면 새로운 탭에서 열지 결정할 수 있다.

  <!-- 현재 탭에서 열기 -->
  <a href="https://www.naver.com/" target="_self">Naver</a> 
  <hr>
  <!-- 새로운 탭에서 열기 -->
  <a href="https://www.naver.com/" target="_blank">Naver</a>

(5) 목록

  • <ol>: 순서 있는 목록
    • start 속성: 시작 번호를 설정할 수 있음
    • type: 기호 타입을 설정할 수 있음(숫자, 영어 대소문자, 로마 숫자 대소문자)
  • <ul>: 순서 없는 목록
  • <lli>: 목록의 항목. 항목을 무엇으로 감싸느냐에 따라 기호가 달라짐

위 태그 모두 블록 레벨 요소이다.

<body>
  <h1>과일</h1>
  <ul>
    <li>오렌지</li>
    <li>바나나</li>
    <li>사과</li>
    <li>배</li>
  </ul>
  <h1>채소</h1>
  <ol start="2" type="a">
    <li>양파</li>
    <li>당근</li>
    <li>청경채</li>
    <li>배추</li>
  </ol>
  <hr>
  <h1>반려동물의 특징</h1>
  <ul>
    <li>강아지</li>
    <ul>
      <li>귀엽다</li>
      <li>사랑스럽다</li>
    </ul>
    <li>고양이</li>
    <ul>
      <li>귀엽다</li>
      <li>도도하다</li>
    </ul>
  </ul>
</body>

(6) 표

  • <table>: 하나의 표. 표의 시작과 끝을 알림
  • <caption>: 표의 제목. 표의 위쪽 중앙에 표시됨
  • <tr>: 행
  • <th>: 제목 행
  • <td>: 셀

표의 구조 명확하게 표현하기: 코드 유지 보수가 편해지고 웹 접근성도 향상된다.

  • <thead>: 제목이나 주제
  • <tbody>: 본문
  • <tfoot>: 요약이나 맺음말
<body>
  <table border="1">
    <caption><strong>마라톤 참가선수 명단</strong></caption>
    <thead>
      <tr>
        <th>한국선수</th>
        <th>일본선수</th>
        <th>미국선수</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>김철수</td>
        <td>오오다</td>
        <td>제임스</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>세계랭킹 5위</td>
        <td>세계랭킹 8위</td>
        <td>세계랭킹 2위</td>
      </tr>
    </tfoot>
  </table>
</body>

(7) 폼 태그

<input>

사용자 입력을 받는다. 

  • type 속성: 입력 형태를 지정. 대표적으로 text(기본값), email, password, search, date, tel 등이 있음
  • placeholder 속성: 입력란에 적당한 힌트 내용 표시

텍스트를 입력받는 속성은 겉보기엔 똑같아보이지만 그 목적이 다르다. 예를 들어 타입을 email로 지정하고 입력칸에 아무거나 입력하면 올바른 이메일 주소를 써달라는 캡션을 볼 수 있다.

  <input type="email">

<label>

입력 요소에 라벨을 붙인다. 웹 이용자에게 더 직관적인 입력 요소를 제공하며, 코드의 가독성이 향상된다.

<label> 태그는 2가지 방법으로 사용할 수 있다.

  1. 태그 안에 폼 요소를 넣는다.
  2. id 속성을 이용해 라벨 태그와 폼 요소를 연결한다. 
<body>
  <h1>로그인 해주세요</h1>
  <label>아이디
    <input type="text" placeholder="아이디">
  </label>

  <label for="pw">비밀번호</label>
  <input type="text" id="pw" placeholder="비밀번호">
</body>

label의 for 속성은 input의 id와 매핑된다.

  <label><input type="checkbox">제육</label>
  <label><input type="checkbox">돈까스</label>
  <label><input type="checkbox">국밥</label>

<select>

여러 옵션을 포함할 수 있는 드롭다운 목록을 만든다. <option> 태그를 사용해 목록의 항목을 추가한다. 

<select> 태그 속성

  • multiple 속성: 둘 이상의 항목을 선택
  • size 속성: 화면에 표시될 항목의 개수 지정

<option> 태그 속성

  • value 속성: 서버에 넘겨줄 값을 지정
  • selected 속성: 기본적으로 선택된 항목 지정
  <h2>음료를 고르세요</h2>
  <select multiple size="2">
    <option value="coffee">커피</option>
    <option value="coke" selected>콜라</option>
    <option value="water">물</option>
  </select>

<textarea>

여러 줄의 텍스트를 입력받을 수 있다. cols, rows 속성으로 대략의 크기를 지정한다.

  <h2>원하는 음료를 써주세요</h2>
  <textarea cols="20" rows="5"></textarea>

<progress> 

작업의 진행 정도를 나타낼 때 사용한다. 

  • max 속성: 작업량 지정
  • value 속성: 화면에 표시할 진척도 지정
  <h2>준비 상태는 아래와 같습니다.</h2>
  <progress max="100" value="80"></progress>

<button>

<input> 태그의 버튼 타입으로 만든 것과 외형은 같지만 <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있다.

  <h2>추가 용무 시 호출해주세요</h2>
  <button>호출</button>
  <input type="button" value="호출">

<fieldset>

하나의 폼 안에서 구역을 나누어 표시할 때 사용한다.

<legend>

<fieldset> 태그로 묶은 그룹에 제목을 붙인다.

  <fieldset>
    <legend>음료 주문</legend>
    
    <h2>음료를 고르세요</h2>
    <select multiple size="2">
      <option value="coffee">커피</option>
      <option value="coke" selected>콜라</option>
      <option value="water">물</option>
    </select>

    <h2>원하는 음료를 써주세요</h2>
    <textarea cols="20" rows="5"></textarea>
  </fieldset>

<form>

폼을 만드는 태그로, 태그 사이에 여러 폼 요소를 넣는다. 입력 값을 서버로 전송할 수 있다.

  • method 속성: 클라이언트가 입력한 데이터를 어떻게 전송할지 지정. get 또는 post
  • action 속성: 입력값을 전송할 서버의 url
  • name 속성: 각 입력 요소에 추가하여 각 항목의 역할을 구별
  <form action="none.com" method="post">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="age">나이</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="character">성격</label>
    <textarea id="character" name="character"></textarea>
    <br>
    <input type="submit">
  </form>

여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽어들일 때는 개별 입력 요소의 name 속성값으로 입력값에 접근할 수 있다.

 <input type="text" id="talk">
  <input type="button" id="push" value="push">

  <script>
    const input = document.getElementById('talk')
    const button = document.getElementById('push')

    input.addEventListener('keyup', function(e) {
      console.log(e.target.value)
    })
   
    button.addEventListener('click', function() {
      input.value = '버튼 눌러서 써짐'
    })
  </script>

  <form id="form">
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="submit">
  </form>

  <script>
    const form = document.getElementById('form')
    form.addEventListener('submit', function (e) {
      e.preventDefault() // 제출 버튼 눌러도 새로고침 안되게
      const p = document.createElement('p')
      p.textContent = `${e.target.name.value}의 나이는 ${e.target.age.value}`
      document.body.append(p)
    })
  </script>

 

value 속성

사용자로부터 입력받는 요소에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근한다.

textContent: 요소에 쓰인 텍스트에 접근
value: 사용자가 직접 요소에 입력한 값에 접근

 

(8) 시맨틱 태그

HTML의 태그는 이름만 봐도 그 의미를 알 수 있어 시맨틱 태그라 한다.

시맨틱 태그를 사용하는 이유)

  1. 코드의 가독성 향상
  2. 검색 엔진 최적화 개선: 검색 엔진이 페이지의 구조를 잘 이해하고 중요한 콘텐츠를 더 잘 인식한다.
  3. 웹 접근성 향상: 화면 낭독기가 페이지의 의미를 더 쉽게 파악할 수 있다.

대표적인 시맨틱 태그는 다음과 같다.

  • <header>: 헤더 영역
  • <nav>: 네비게이션 영역
  • <main>: 주요 콘텐츠
  • <article>: 독립적인 콘텐츠
  • <section>: 콘텐츠 영역
  • <aside>: 사이드 바 영역
  • <footer>: 푸터 영역
728x90

5. 전역 속성

모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다.

  • id: 요소에 고유한 이름을 부여하는 식별자 역할
  • class: 요소를 그룹으로 묶을 수 있는 식별자 역할. 여러 요소에 같은 클래스를 적용할 수 있고 하나의 요소에 여러 클래스를 적용하는 것도 가능.
  • style: 요소에 적용할 CSS 스타일 선언
  • title: 요소의 추가 정보를 제공. title 속성을 적용한 요소에 커서를 올리면 툴팁이 나타남.
<body>
  <div id="cat">
    <p class="text">고양이는</p>
    <p class="text cute">귀엽다</p>
  </div>
  <div id="dog">
    <p class="text">강아지도</p>
    <p class="text cute">귀엽다</p>
  </div>
  <p title="툴팁 제공">타이틀 속성 예시</p>
</body>

Mini Project 1) 프로필 페이지 만들기

<!DOCTYPE html>
<html>

<head lang="ko">
  <meta charset="UTF-8">
  <title>티니핑의 프로필</title>
  <style>
    ul li {
      list-style: '🌸';
    }
  </style>
</head>

<body>
  <h1 title="하츄핑의 프로필 페이지">하 츄 핑</h1>
  <img src="./img/teenie.webp" alt="하츄핑" width="300">

  <div id="introduce">
    <p>💖 <strong>안녕! 난 사랑의 요정, 하츄핑이야!</strong> 💖</p>
    <p>하츄~! 만나서 반가워! 😊 나는 "쥬로링 동물탐정"에서 온 사랑의 요정, 하츄핑! ✨<br>
      내 이름처럼 사랑과 따뜻한 마음을 전하는 게 내 역할이야!
    </p>
  </div>
  <hr>
  <div id="fun-facts">
    <h2>내 특징!</h2>
    <p>
    <ul>
      <li>말버릇: <strong>"하츄~!"</strong></li>
      <li>특징: 둥글둥글한 핑크색 몸, <mark>반짝</mark>이는 날개 ✨</li>
      <li>성격: 사랑스럽고 다정해! 친구들을 돕는 걸 좋아해!</li>
      <li>능력: <em>사랑의 마법</em>으로 사람들의 마음을 따뜻하게 만들어! 💖</li>
    </ul>
    </p>
  </div>
  <hr>
  <span>&copy; 하츄핑</span>
</body>

</html>

Mini Project 2) 설문조사 양식 만들기

<body>
  <header>
    <h1>설문조사 양식</h1>
    <p>모든 항목에 빠짐없이 체크해주십시오.</p>
  </header>
  <hr>

  <main>
    <form>
      <fieldset>
        <legend>개인정보</legend>
        <label for="name">이름</label>
        <input type="text" id="name" name="name" placeholder="본명을 입력하세요">
        <br>
        <label for="email">이메일주소</label>
        <input type="text" id="email" name="email" placeholder="메일 주소를 쓰세요">
      </fieldset>

      <fieldset>
        <legend>설문</legend>
        <p>연령대가 어떻게 되십니까?</p>
        <input type="radio" id="teen" name="age">
        <label for="teen">10대</label>
        <input type="radio" id="twenty" name="age">
        <label for="twenty">20대</label>
        <input type="radio" id="thirty" name="age">
        <label for="thirty">30대</label>
        <input type="radio" id="fouty" name="age">
        <label for="fouty">40대</label>
        <input type="radio" id="fifty" name="age">
        <label for="fifty">50대</label>
        <input type="radio" id="other" name="age">
        <label for="other">그 외</label>

        <p>학원 선택 시 그 기준은 어떻게 되시나요?</p>
        <input type="checkbox" id="position" name="academy">
        <label for="position">위치</label>
        <input type="checkbox" id="price" name="academy">
        <label for="price">학원비</label>
        <input type="checkbox" id="teacher" name="academy">
        <label for="teacher">강사</label>
        <input type="checkbox" id="infra" name="academy">
        <label for="infra">시설</label>
      </fieldset>

      <fieldset>
        <legend>기타 의견</legend>
        <textarea rows="3" cols="30" name="comment"></textarea>
      </fieldset>

      <input type="submit">
    </form>
  </main>
  <hr>

  <footer>
    <p>입력하시느라 수고하셨습니다.</p>
  </footer>
</body>

728x90

'HTML, CSS' 카테고리의 다른 글

CSS 박스 모델  (0) 2025.04.14
CSS 기본 - 사용법, 선택자, 상속  (0) 2025.04.14
CSS 이론 (2) - 박스 모델 / 우선순위 / 단위  (0) 2025.03.26
CSS 이론 (1) - 적용 방법 / 선택자 / 주요 속성  (1) 2025.03.23
HTML 구조 및 요소(태그)  (0) 2025.03.22

티스토리툴바