WEB LAB
    HTML/CSS 1.8 · 1부. HTML 기초

    속성과 실습

    id 와 class 로 이름을 붙입니다. 1부를 한 번에 정리합니다.

    예상 학습 시간 18분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문
    개념 설명

    태그에 값을 붙이는 자리

    여는 태그 안에 적는 이름="값" 을 속성이라고 합니다. 지금까지 href·src· type 을 사용했는데, 그것들은 그 태그에만 있는 속성입니다.

    이 단원에서 다루는 셋은 어느 태그에나 붙일 수 있는 속성입니다. 2부에서 CSS 가 요소를 찾을 때 이 이름들을 사용하므로, 여기서 정확히 알아 두어야 합니다.

    최소 예제 · 편집 가능

    id 와 class

    둘 다 요소에 이름을 붙입니다. 다른 것은 몇 개까지 같은 이름을 가질 수 있는가입니다. 

    <p id="total">합계 12,000원</p>

<p>
  <span class="tag">공지</span>
  <span class="tag">필독</span>
  <span class="tag new">새 글</span>
</p>
    /* # 은 id, . 은 class 를 가리킵니다. 2.2 에서 자세히 다룹니다. */
#total { color: #d9480f; font-weight: 700; }

.tag {
  background: #ece7fb;
  padding: 2px 8px;
  border-radius: 10px;
}
.new { color: #6e56cf; }
    idclass
    같은 이름화면에 하나뿐이어야 합니다.여럿이 가질 수 있습니다.
    개수요소마다 하나입니다.빈칸으로 구분해 여럿 적습니다.
    주로 쓰는 곳링크로 건너뛸 자리, label for모양을 입힐 자리

    꾸미는 일은 대부분 class 로 합니다. id 는 하나뿐이라 같은 모양을 다른 곳에 다시 쓸 수 없습니다.

    상세 사용법

    이름을 짓는 규칙

    • 영문 소문자와 하이픈을 사용합니다 — item-title.
    • 숫자로 시작하지 않습니다.
    • 모양이 아니라 무엇인지로 짓습니다. red-text 라고 지으면 나중에 파란색으로 바꿀 때 이름이 거짓말이 됩니다. warning 이 낫습니다.
    • 빈칸은 이름을 가르는 구분자입니다. class="tag new" 는 이름 하나가 아니라 둘입니다.
    상세 사용법

    data- 속성

    data- 로 시작하는 이름은 마음대로 만들어 붙일 수 있습니다. 화면에는 나오지 않고, JavaScript 가 읽어 사용합니다.

    index.html 
    <li data-id="1024" data-price="12000">노트</li>

    값을 어디에 둘지 마땅치 않을 때 사용합니다. 이 트랙에서는 JavaScript 를 다루지 않으므로 이런 자리가 있다는 것만 알아 두면 됩니다.

    흔한 실수

    세 가지

    • 같은 id 를 여러 요소에 붙입니다. 브라우저는 오류를 내지 않고 첫 번째만 찾습니다. 나머지는 스타일도 링크도 듣지 않는데 원인이 보이지 않습니다.
    • 클래스 이름에 빈칸을 넣습니다. class="main title" 은 이름 하나가 아니라 둘입니다. 한 이름으로 만들려면 main-title 처럼 붙입니다.
    • 모양으로 이름을 짓습니다. left· big 같은 이름은 배치를 바꾸는 순간 뜻이 어긋납니다.
    실습 문제

    1부 마무리 — 소개 문서 한 장

    1. 1부에서 배운 것으로 문서 만들기 난이도 중

    아래를 모두 담은 문서를 작성하십시오. 아직 CSS 는 사용하지 않습니다.

    1. 문서의 뼈대(1.2)와 탭에 나올 이름
    2. 제목과 소개 문단(1.3)
    3. 할 줄 아는 것을 목록으로(1.4)
    4. 연락처를 표로(1.4)
    5. 다른 사이트로 가는 링크 하나(1.5)
    6. 머리말·본문·꼬리말을 뜻이 있는 태그로 나누기(1.7)
    먼저 1.2 의 뼈대를 적고, body 안을 header · main · footer 로 나눈 뒤 각 자리를 채우면 됩니다.
    <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>홍길동 소개</title> </head> <body> <header> <h1>홍길동</h1> <p>웹 화면을 만드는 일을 배우고 있습니다.</p> </header> <main> <section> <h2>할 줄 아는 것</h2> <ul> <li>HTML 문서 작성</li> <li>목록과 표 만들기</li> </ul> </section> <section> <h2>연락처</h2> <table> <tr><th>구분</th><th>값</th></tr> <tr><td>전자 메일</td><td>hong@example.com</td></tr> </table> </section> </main> <footer> <p><a href="https://learn.microsoft.com">참고 문서</a></p> </footer> </body> </html>
    요약

    정리

    • id 는 화면에 하나뿐인 이름, class 는 여럿이 가질 수 있는 이름입니다.
    • 꾸미는 일은 대부분 class 로 합니다.
    • 클래스는 빈칸으로 구분해 여러 개를 적습니다.
    • 이름은 모양이 아니라 무엇인지로 짓습니다.
    • 여기까지가 1부입니다. 2부에서 이 이름들로 모양을 정합니다.