웹표준기술 4일

2025. 12. 3. 21:17ㆍ대우개발원 수업 내용/웹표준기술(HTML)

반응형

가로는 row

세로는 col

번호 상품명 수량 가격
1 콜라 1개 1,500원
2 사이다 2개 1,000원
3 탄산수 3개
총 금액 6,500원 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>table</title>
  <style>
    table{
      border-collapse: collapse;
    } 
    th, td {
      border: 1px solid #ccc;
      text-align: center;
    }
    </style>
</head>
<body>
  <!-- 테이블의 시작을 의미 -->
   <table>
    <tr>
      <th>번호</th>
      <th>상품명</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>1</td>
      <td>콜라</td>
      <td>1개</td>
      <td>1,500원</td>
    </tr>
    <tr>
      <td>2</td>
      <td>사이다</td>
      <td>2개</td>
      <td rowspan="2">1,000원</td>
    </tr>
    <tr>
      <td>3</td>
      <td>탄산수</td>
      <td>3개</td>
      <!-- <td>1,000원</td> -->
    </tr>
    <tr>
      <td>총 금액</td>
      <td colspan="3">6,500원</td>
      <!-- <td></td>
      <td></td> -->
    </tr>
   </table>

아래는 너가 작성한 코드 중 ‘지금까지 안 배운 태그/속성만’ 깔끔하게 정리한 내용이야. 그대로 블로그에 넣어도 되는 형식으로 작성했어.

📌 새로 사용된 태그·속성 정리

1. <table> 관련 속성

(1) border-collapse

  • CSS 속성.
  • 테이블 셀(td, th) 사이의 경계선을 하나로 합쳐서 보이게 함.
  • 테두리가 이중으로 보이지 않도록 깔끔하게 만듦.
table {
  border-collapse: collapse;
}

2. <th> 태그

  • 테이블에서 **제목 셀(헤더 셀)**을 만들 때 사용.
  • 자동으로 굵은 글씨 + 가운데 정렬이 적용됨.
<th>상품명</th>

3. rowspan 속성

  • 한 셀이 세로 방향으로 몇 줄(row)을 합칠지 정함.
  • 값이 2이면 아래 행과 합쳐서 하나의 긴 셀이 됨.
<td rowspan="2">1,000원</td>

4. colspan 속성

  • 한 셀이 가로 방향으로 몇 칸(col)을 합칠지 정함.
  • 열을 합쳐 하나의 넓은 셀을 만들 때 사용.
<td colspan="3">6,500원</td>
제주특별자치도 학교현황(2015.4.1 기준)
구분 학교수 학급수 학생수 교원수
유치원 1 2 5,547 474
초등학교 1 2 35,547 1,474
중학교 1 2 5,547 474
고등학교 1 2 5,547 474
특수학교 1 2 5,547 474
합계 117 252 85,547 474 

     <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>table</title>
  <style>
    table{
      border-collapse: collapse;
    } 
    th, td {
      border: 1px solid #ccc;
      text-align: center;
      padding:10px; 
    }
    </style>
</head>
<body>
<table>
      <caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
      <thead style="background-color:beige;">
        <tr><th>구분</th><th>학교수</th><th>학급수</th><th>학생수</th><th>교원수</th></tr>
      </thead>
      <tbody>
        <tr><th>유치원</th><td>1</td><td>2</td><td>5,547</td><td>474</td></tr>
        <tr style="background-color:lightcoral;"><th>초등학교</th><td>1</td><td>2</td><td>35,547</td><td>1,474</td></tr>
        <tr><th>중학교</th><td>1</td><td>2</td><td>5,547</td><td>474</td></tr>
        <tr><th>고등학교</th><td>1</td><td>2</td><td>5,547</td><td>474</td></tr>
        <tr><th>특수학교</th><td>1</td><td>2</td><td>5,547</td><td>474</td></tr>
      </tbody>
      <tfoot style="background-color:bisque;">
        <tr><th>합계</th><td>117</td><td>252</td><td>85,547</td><td>474</td></tr>
      </tfoot>
     </table>
</body>
</html>

새롭게 사용된 태그·속성 정리

1. <caption>

  • 테이블의 제목을 표시하는 태그.
  • 테이블 바로 위에 제목이 나타남.
<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>

2. <thead>

  • 테이블의 머리글 영역을 정의.
  • 보통 제목 행을 묶는 용도로 사용.
<thead>
  <tr><th>구분</th>...</tr>
</thead>

3. <tbody>

  • 테이블의 **본문(실제 데이터)**을 묶는 영역.
<tbody>
  <tr>...</tr>
</tbody>

4. <tfoot>

  • 테이블의 요약 또는 합계 부분을 묶는 영역.
<tfoot>
  <tr><th>합계</th>...</tr>
</tfoot>

5. style 속성(요소별 인라인 스타일)

  • 태그 안에서 직접 스타일을 지정하는 방식.

예:

<thead style="background-color:beige;">

6. padding 속성

  • 셀 내부 여백을 지정하는 CSS 속성.
th, td { padding: 10px; }

 

행, 열 병합 예제
1열 2열 3열
1행1열 1행 2열 1행 3열
2행 2열 2행 3열
3행 1열 

<!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>
    th,td {
      text-align: center;
      padding: 10px;
    }
  </style>
</head>

<body>
  <table border="1">
    <caption>행, 열 병합 예제</caption>
    <colgroup span="3" style="width: 100px;"></colgroup>
    <col>
    <tr>
      <th>1열</th>
      <th>2열</th>
      <th>3열</th>
    </tr>
    <tr>
      <td rowspan="2">1행1열</td>
      <td>1행 2열</td>
      <td>1행 3열</td>
    </tr>
    <tr>
      <td>2행 2열</td>
      <td>2행 3열</td>
    </tr>
    <tr>
      <td style="text-align: left;" colspan="3">3행 1열</td>
    </tr>
  </table>
</body>

</html>


(이미 이전에 배운 <table>, <tr>, <th>, <td>, rowspan, colspan, border, padding 등은 제외)

📌 오늘 배운 태그 / 속성 정리

1. <caption>

  • 테이블 제목을 나타내는 태그.
  • <table> 바로 아래에 작성한다.
<caption>행, 열 병합 예제</caption>

2. <colgroup>

  • 여러 개의 열(column)에 공통 스타일을 적용하기 위해 묶는 태그.
  • span 속성을 사용하면 지정한 개수만큼 열이 그룹에 포함된다.
<colgroup span="3" style="width: 100px;"></colgroup>

3. <col>

  • 개별 열(column)에 스타일을 적용하는 태그.
  • colgroup 내부 또는 단독으로 사용 가능.
<col>

4. span 속성 (colgroup에서 사용)

  • 얼마나 많은 열을 묶을지 지정한다.

예) 3개의 열에 동일한 width 적용:

<colgroup span="3" style="width: 100px;"></colgroup>

5. 셀 개별 정렬(style로 지정)

  • 특정 셀만 텍스트 정렬을 다르게 하고 싶을 때 사용.
<td style="text-align: left;">3행 1열</td>
성명 전화번호 이메일 주소
성 이름
홍 길동 010-1234-5678 abcd@naver.com 서울시 강남구 역삼동 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>spanEx</title>
  <style>
    table{
      border-collapse: collapse;
    } 
    th, td {
      border: 1px solid #ccc;
      text-align: center;
      padding:10px; 
    }
    </style>
</head>
<body>
  <table>
    <col>
    <col>
    <colgroup span="3" style="width: 200px;"></colgroup>
    <tr>
      <th colspan="2" style="background-color: olive;">성명</th>
      <th rowspan="2">전화번호</th>
      <th rowspan="2">이메일</th>
      <th rowspan="2">주소</th>
    </tr>
    <tr>
      <th>성</th>
      <th>이름</th>
    </tr>
    <tr>
      <td>홍</td>
      <td>길동</td>
      <td>010-1234-5678</td>
      <td>abcd@naver.com</td>
      <td>서울시 강남구 역삼동</td>
    </tr>
  </table>
</body>
</html>


(기존에 배운 table, tr, td, th, rowspan, colspan, padding, border 등은 제외)

📌 새로 등장한 태그 / 속성 정리

1. <col>

  • 테이블의 **각 열(column)**에 스타일을 적용할 때 사용.
  • 개별 열 폭이나 배경색 등 설정 가능.
<col>

2. <colgroup>

  • 여러 열을 묶어서 공통 스타일 적용.
  • span 속성을 사용해 몇 개의 열을 포함할지 지정함.
<colgroup span="3" style="width: 200px;"></colgroup>

3. span 속성 (colgroup 전용)

  • colgroup이 몇 개의 열을 그룹으로 묶을지 설정.

예)

<colgroup span="3">

→ 3개의 열에 같은 너비(200px)를 적용.

4. colspan

  • 가로(열 방향) 병합.

예)

<th colspan="2">성명</th>

→ 성과 이름 두 칸을 하나로 합침.

5. rowspan

  • 세로(행 방향) 병합.

예)

<th rowspan="2">전화번호</th>

→ 위·아래 두 행을 하나로 합침.

6. 개별 스타일 적용(style 속성)

  • 특정 셀에만 배경색 적용 가능.

예)

<th colspan="2" style="background-color: olive;">성명</th>

 

 

 

구분 중간고사 기말고사
전공 A+ B+
교양 C- B 

     <table>
      <tr>
        <th scope="col">구분</th>
        <th scope="col">중간고사</th>
        <th scope="col">기말고사</th>
      </tr>
      <tr>
        <th scope="row">전공</th>
        <td>A+</td>
        <td>B+</td>
      </tr>
      <tr>
        <th scope="row">교양</th>
        <td>C-</td>
        <td>B</td>
      </tr>
     </table>

 

✔ <th>의 scope 속성 설명

scope 속성은 테이블에서 제목 셀이 어떤 영역을 설명하는지 명확하게 알려주는 역할을 한다.
특히 화면 읽기 프로그램(스크린 리더)이 표를 읽을 때 중요한 정보이다.

🔹 1. scope="col"

  • 현재 <th>가 세로 방향(열)의 제목이라는 의미.
  • 아래쪽 셀들(td)을 설명함.

예)

<th scope="col">중간고사</th>

→ 이 <th>는 중간고사 열 전체의 제목.

🔹 2. scope="row"

  • 현재 <th>가 가로 방향(행)의 제목이라는 의미.
  • 오른쪽 셀들(td)을 설명함.

예)

<th scope="row">전공</th>

→ 이 <th>는 전공 행 전체의 제목.

📌 요약

scope 값 의미 적용 위치

col 열 제목 <th>가 제목 행에 있을 때
row 행 제목 <th>가 행 앞에 있을 때

즉, scope는 이 제목(th)이 어떤 방향의 데이터(td)를 설명하는지 지정하는 속성이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>미디어연습</title>
</head>
<body>
    <audio src="/medias/Bourree_-_Joel_Cummins.mp3" controls></audio>
   <video style="width: 60%;" src="/medias/sample.mp4"controls></video>
   <audio controls>
    <source src="/medias/Bourree_-_Joel_Cummins.mp3" type="audio/mp3">
   </audio>
   <video controls style="width: 30%;">
    <source src="/medias/sample.mp4" type="video/mp4">
   </video>
   <iframe width="160" height="105" src="https://www.youtube.com/embed/HphhrMQnfpI?si=4Oo3RaXNPUGAdm-8&amp;start=127" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html>

미디어 관련해서 새롭게 등장한 태그와 속성만 정리

📌 새로 배운 미디어 관련 태그 & 속성 정리

1. <audio>

웹페이지에서 오디오(음악, 음성 파일) 를 재생할 때 사용한다.

주요 속성

  • controls : 재생/일시정지 버튼, 볼륨 조절 UI 표시
  • src : 직접 오디오 파일 경로 지정
<audio src="/medias/Bourree_-_Joel_Cummins.mp3" controls></audio>

2. <video>

웹페이지에서 비디오(영상)를 재생할 때 사용한다.

주요 속성

  • controls : 재생 UI 표시
  • width 또는 style="width: ~" : 동영상 크기 설정
  • src : 영상 파일 경로 지정
<video src="/medias/sample.mp4" controls></video>

3. <source>

<audio>나 <video> 안에서 사용하며,
여러 파일 형식을 동시에 지원할 때 사용한다.
브라우저가 지원 가능한 파일을 자동으로 선택한다.

속성

  • src : 파일 경로
  • type : 파일의 MIME 타입 지정 (예: "audio/mp3", "video/mp4")
<source src="/medias/sample.mp4" type="video/mp4">

4. <iframe>

웹페이지 안에 다른 웹페이지나 외부 콘텐츠(유튜브, 지도, SNS) 를 삽입할 때 사용하는 태그.

주요 속성

  • src : 불러올 웹페이지 주소
  • width, height : 크기 설정
  • frameborder : 테두리 설정
  • allowfullscreen : 전체 화면 재생 허용
  • allow : 유튜브 재생에 필요한 권한들 설정

📌 요약

태그 의미

<audio> 오디오 재생
<video> 비디오 재생
<source> 다양한 미디어 파일 형식을 지정
<iframe> 웹 안에 외부 사이트(유튜브 등) 삽입

베스트셀러

최근 7일간의 판매량을 기준으로 합니다

문학 베스트셀러

웃음

유머의 생산과 유통이라는 이색 소재로 그려 낸 미스터리 소설

빅 픽처

진정 나를 위한 삶을 살고 싶었던 한 남자 이야기

고구려

속도감 있는 전개와 치밀한 구성으로 빚어낸 또 하나의 고구러
Copyright © 2015 YoungHan, All right reserved.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>영한 문고</title>
</head>
<body>
  <header>
    <h1>베스트셀러</h1>
    <h4>최근 7일간의 판매량을 기준으로 합니다</h4>
    <nav>
      <ul>
        <li>문학</li>
        <li>사회</li>
        <li>만화</li>
      </ul>
    </nav>
  </header>
  <section>
    <header>
      <h2>문학 베스트셀러</h2>
    </header>
    <article>
      <h2>웃음</h2>
      유머의 생산과 유통이라는 이색 소재로 그려 낸 미스터리 소설
    </article>
    <article>
      <h2>빅 픽처</h2>
      진정 나를 위한 삶을 살고 싶었던 한 남자 이야기
    </article>
    <article>    
      <h2>고구려</h2>
      속도감 있는 전개와 치밀한 구성으로 빚어낸 또 하나의 고구러
    </article>
  </section>
  <aside><p>광고 : 올해의 서평 이벤트</p></aside>
  <footer>Copyright © 2015 YoungHan, All right reserved.</footer>
</body>
</html>

 

📌 새로 등장한 태그만 정리

1. <header>

페이지 또는 특정 구역(섹션, 기사)의 머리글 영역을 뜻하는 시맨틱 태그.

주로 다음 내용을 포함함:

  • 제목(<h1>, <h2> 등)
  • 부제목
  • 네비게이션 메뉴(<nav>)
<header>
  <h1>베스트셀러</h1>
</header>

2. <nav>

웹사이트의 메뉴나 링크 모음을 의미.
주로 상단 메뉴, 사이드 메뉴 등 “이동 경로”를 담는 영역.

<nav>
  <ul>
    <li>문학</li>
    <li>사회</li>
    <li>만화</li>
  </ul>
</nav>

3. <section>

문서를 주제별로 나누는 큰 구역.
책의 “장(Chapter)” 같은 개념.

<section>
  <h2>문학 베스트셀러</h2>
</section>

4. <article>

독립적으로 의미를 갖는 콘텐츠 단위(기사, 글, 리뷰) 를 표현할 때 사용.

예: 뉴스 기사, 블로그 글, 페이스북 게시물 등

너의 코드에서는 개별 책 소개 블록으로 사용됨.

<article>
  <h2>웃음</h2>
  유머의 생산과 유통이라는 ~
</article>

5. <aside>

본문 내용과 직접적인 관계는 적지만,
보조 정보나 광고, 사이드바를 표시할 때 쓰는 시맨틱 태그.

<aside>
  <p>광고 : 올해의 서평 이벤트</p>
</aside>

6. <footer>

문서나 섹션의 바닥(푸터) 영역.
보통 저작권, 연락처, 추가 정보가 들어감.

<footer>
  Copyright © …
</footer>

✔ 새로 배운 태그 요약표

태그 의미

<header> 머리글 영역(제목·메뉴 포함)
<nav> 네비게이션 메뉴
<section> 문서의 큰 주제 영역
<article> 독립적인 콘텐츠 블록
<aside> 부가 정보·광고·사이드바
<footer> 문서의 바닥(저작권 등 표시)

필요하면 이걸 HTML 블로그 글용으로 깔끔하게 포맷팅해서 다시 써줄 수도 있어!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wiki</title>
</head>
<body>
  <h1>목차</h1>
  <ul>
    <li type="1">역사</li>
      <ol type="1">
        <li>
          <a href="#">개발</a>
          </li>
        <li>
          <a href="#">최초규격</a>
        </li>
        <li>
          <a href="#">표준 버전의 역사</a>
        </li>
          <ol type="1">
            <li>
              <a href="#">HTML 버전 스케줄</a>
            </li>
            <li>
              <a href="#">HTML 초안 버전 스케줄</a>
            </li>
            <li>
              <a href="#">XHTML 버전</a>
            </li>
          </ol>
        </li>
      </ol>
    <li type="1">마크업</li>
      <ol>
        <li>
          <a href="#">HTML 요소</a>
        </li>
        <li>
          <a href="#">데이터 형식</a>
        </li>
        <li>
          <a href="#">문서 형식 선언</a>
        </li>
      </ol>
  </ul>
</body>
</html>

 

'대우개발원 수업 내용 > 웹표준기술(HTML)' 카테고리의 다른 글

웹표준기술 3일차  (0) 2025.12.02
웹표준기술 2일차  (0) 2025.12.01
웹표준기술 1일차  (0) 2025.12.01

관련글

티스토리툴바