부트캠프(HTML,CSS)

부트캠프29일차(HTML)

동곤일상 2025. 3. 13. 17:50

1) HTML 개요 및 설정\

2) visual studio 설치

3) HTML 파일 생성과 기본태그

4)글자관련태그

5) 목록관련태그

6) 표관련테그

1) HTML 개요 및 설정

웹(WEB)

인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간 인터넷의 통신망 위에서 작동하는 서비스

웹 처리 과정

네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고 HTML이라는 마크업(Markup) 언어를 통해 자료를 주고 받음

관계도

웹 특징

HTTP(Hyper Text Transfer Protocol) 사용 HTML(Hyper Text Markup Language)로 작성된 문서 연결 텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공

반응형 웹

웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경

HTML

웹에서 정보를 표현할 목적으로 만든 마크업 언어(Hyper Text Markup Language) 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어짐

마크업과 마크업 언어

마크업(태그)는 문서의 논리적인 구조를 정의하고 출력 장치에 어떤 형태로 보일 것인지 지시하는 역할 마크업 언어는 마크업(태그)의 형식과 규칙을 정의한 언어

HTML5

구조적 설계 지원(시멘틱)
그래픽 및 멀티미디어 기능 강화
CSS3 및 Javascript 지원
다양한 API 제공
모바일 웹 지원 및 장치 접근 가능(배터리 정보, 카메라, GPS 등)
웹 브라우저가 서버와 양방향 통신 가능
인터넷이 연결되지 않은 상태에서도 애플리케이션 동작

구성요소

<시작태그 속성="속성값">요소의내용</종료태그>

시작태그 명 == 종료태그 명

구성요소	내용
태그(Tag)	‘< ‘와 ‘>’로 묶인 명령어 시작태그(<태그>)와 종료태그(</태그>)를 한쌍으로 이용
속성(Attribute)	요소의 시작태그에만 사용 / 명령어 구체화 역할 여러 개의 속성을 사용할 수 있으며 속성의 구분은 공백
변수/속성값(Argument)	속성이 가지는 값, 값 입력 시 “ ” 혹은 ‘ ’를 이용
요소(Element)	시작태그와 종료태그로 이루어진 모든 명령어 하나의 HTML문서는 요소들의 집합

주의사항

태그는 대 · 소문자를 구분하지 않으나 소문자를 권장함
<html>
...
</HTML>

이렇게작성 시 틀리진않지만
왠만하면 소문자로 쓰자!!
시작태그로 시작하면 반드시 종료태그로 종료
파일 확장자는 반드시 html 또는 htm으로 설정
문자의 공백은 몇 개를 입력하든 한 개만 인식하므로 공백을 추가하기 위해서
특수기호   를 이용해야 함
안녕하세요 홍길동 --> 안녕하세요 홍길동
안녕하세요   홍길동 -> 안녕하세요 홍길동

기본구조

시작부분 : <html>

속성 : lang

속성값: "ko"

종료부분 : </html>

head를 종료하고 body가 들어가야함

</head> 이후에 <body>

주석

<!-- -->

HTML에서 사용하는 주석 코드 작성내용에 대해 설명하는 곳에 사용 브라우저는 주석 부분을 해석하지 않고 넘어감

2) Visual Studio 설치

https://code.visualstudio.com 접근
Download for Windows클릭
1. 다운로드 폴더 이동 후 실행파일 더블 클릭
2. 사용권 계약 동의
3. <다음> 버튼 클릭
4. [바탕화면 바로가기], [편집기 등록], [PATH에 추가] 선택
5. <다음> 버튼 클릭
6. 설치 완료 후 종료
Visual Studio Code 테마
- 좌측하단 톱니바퀴-[Settings]-[Themes] 변경
- 혹은 톱니바퀴-[Themes]-[Color Theme]
Live Server : 자동 새로고침 기능 플러그인
1. 좌측 <Extensions> 버튼 클릭
2. Live Server 검색 후 클릭
3. <Install> 버튼 클릭
4. [File]-[Preferences]-[Settings] 클릭
5. [Extensions]-[Live Server Config] 클릭
7. Custom Browser를 chrome으로 변경
indent-rainbow : 가시성을 높여주는 확장 프로그램
1. 좌측 <Extensions> 버튼 클릭
2. indent-rainbow 검색 후 클릭

Korean Language Pack for Visual Studio Code : 한글메뉴 플러그인

3) HTML 파일 생성과 기본태그

[File]-[Open Folder] 클릭
드라이브에 있는d:/web/workspace 폴더 클릭
팝업창 뜨면 <Yes, I trust~> 버튼 클릭
폴더 선택
New Folder 버튼 클릭
html 폴더 생성
New File 버튼 클릭
html 파일명(htmlex01.html) 입력
기본 태그 작성

<!DOCTYPE html> <!--문서유형형-->
<html lang="en">
    <head> <!-- 문서의각종정보와 문서자체에대한 설명 내용용-->
        <meta charset="UTF-8">
        <meta name = "viewpoint" content="width=device-width, initial-scale=1.0">
        <title> htmlex01.html</title>
    </head>
    <body> Hello world! </body>  <!--화면에나타나는 내용용-->
</html> <!-- 문서종료-->

(F5 (디버깅없이 실행))

<html></html>

1) 특징

<html lang="en">
...
</html>

html 문서의 시작과 끝 표시

2) 속성

lang은 이 페이지가 어느 나라 언어로 되어있는지 의미

3) 속성값

lang의 속성 값은 설정 언어
영어 : en
한국어 : ko
독일어 : de
프랑스어 : fr

<head>태그

1) 역할

웹 페이지에 직접 보이지 않는 숨은 정보의 집합소
웹 페이지에 대한 설정, 외부 리소스 연결과 관련된 태그 포함
웹 브라우저와 검색 엔진이 이 정보를 사용

2) <head>에 포함될 수 있는 태그

<meta> : 문서 정보 제공
<title> : 문서 제목 설정
<link> : 외부 리소스 연결
<style> : 문서 내 스타일 추가
<script> : 문서 내 JavaScript 코드 포함

<meta > 태그

1) 특징

헤더 내부에서 사용하는 태그

HTML 문서가 가지고 있는 유용한 정보를 담아두는 곳

다양한 종류의 meta 태그가 있음

2) 기본 형태

여러 속성을 사용하여 다양한 정보 설정

<meta charset="인코딩 방식">
<meta name="속성명" content="속성내용">
<meta http-equiv="속성명" content="속성내용">

3) 주요 <meta> 속성과 기능

1. charset 속성

HTML 문서의 문자 인코딩 방식 정의

인코딩은 컴퓨터가 문자를 이해하고 표시할 수 있도록 변환하는 행위

<meta name="keyword" content="goodee,dev,HTML">

예시에 있는 UTF-8은 전세계 모든 언어를 표현할 수 있는 유니코드로 인코딩

대부분 웹 페이지에서 표준으로 사용

2.name 속성

문서와 관련된 다양한 정보를 제공할 때 사용

주요 사용 예시

검색 엔진을 위한 키워드 정의

<meta name="keyword" content="goodee,dev,HTML">

웹 페이지 설명 추가

<meta name="description" content="Goodee Java Developer">

뷰포트 설정(반응형 웹 디자인 지원)
다양한 기기에서 웹 페이지가 적절하게 표시되도록 화면 설정 조정

<!-- 기기의 뷰포트와 페이지의 가로를 동일하게 맞추고,
처음 페이지가 로딩될 때 확대나 축소하지 않고 기존 크기 사용 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. http-equiv 속성

서버와 브라우저간 통신에 필요한 정보 정의
주요 사용 예시
- 페이지 새로고침 또는 리다이렉션
- 일정 시간 후 다른 페이지로 자동 이동

<meta http-equiv="refresh" content="5; url=https://gdlms.cafe24.com">

5초 후에 url 페이지로 이동하라는 뜻

기타태그

1) title

페이지 제목을 나타내는 태그
웹 브라우저 상단 탭에 표시되는 명칭

<title>페이지 이름</title>

2) link

html 문서를 외부 문서와 연결하기 위해서 사용
CSS파일이나 웹 폰트 사용시 주로 연결

<link rel="가져올 문서와 관계" href="문서위치" type="MIME">

속성
- href : 연결한 파일의 경로 지정
- rel : 링크가 형성하는 관계 지정
- type : MIME 타입 지정

3) style

태그의 스타일을 지정해주는 태그

CSS 속성을 HTML내에 직접 쓸 때 사용

<style>CSS구문</style>

예시2)

1) HTML 구성요소와 충돌이 발생하는 특수문자를 입력
2) &로 시작하고 ; 으로 종료

#텍스트를 블록으로 묶어줄 떄 사용 #

<p> : paragraph 텍스트 단락

<br> : 줄바꿈

<!DOCTYPE html>
<!-- html 문서 시작-->
 <html lang="en">
    <head>
        <title>
            엔티티코드(entitiy code)
        </title>
        <p> <!-- paragraph 텍스트 단락 -->
            작다 (less than) &lt; <br>
            작거나같다 (less than equal) &le; <br> <!--줄바꿈\n-->
            크다 (greater than) &gt; <br>
            크거나같다 (greater than equal) &ge; <br>
            <!-- <,>(연산자) 표시는 위험 &lt; : < -->
             앰퍼센트 &amp; <br>
             공백 &nbsp; &nbsp; &nbsp; &nbsp; 출력<br>
             공백 &emsp;&emsp;&emsp;&emsp; 출력<br> <!--emp : 조금 더 큰 공백-->
        </p>
    </head>
 </html>

4) 글자관련태그

(body 블럭 내에서 사용되어야함)

제목

1) <hn></hn>

제목을 입력할때 사용하는 태그
폰트의 크기가 태그마다 정해져있음
h뒤의 숫자(n)으로 구분

2) 작성법

<h1> 제목 내용 </h1>

3) 종류

h1~h6 : 숫자가커질수록 제목의크기가 작아짐

       <h1> 제목관련태그</h1> <!-- 가장 큰 글씨순서임-->
        <h1>제목1</h1>
        <h2>제목2</h2>
        <h3>제목3</h3>
        <h4>제목4</h4>
        <h5>제목5</h5>
        <h6>제목6</h6>

문단

1) <p>태그

문단을 정의할 때 사용
텍스트를 문단 단위로 구분하여 가독성 높임

2) 특징

자동으로 위, 아래에 기본 여백 추가해서 자연스럽게 문단 구분
다른 태그와 혼용해서 문단 내 텍스트 꾸밀 수 있음
내부에 텍스트 한줄로 입력해도 브라우저가 자동으로 줄바꿈 처리해줌

줄바꿈과 구분줄

1) <br>

문장을 줄 바꾸기(개행)할 때 사용
html은 공백을 한칸만 허용하므로 줄바꾸기는 <br>로만 가능

2) <hr>

페이지에 가로로 밑줄을 만들어줄 때 사용
페이지 전체를 관통하는 회색의 긴 줄 생성

<h1> 문단관련태그 : p태그</h1>
        <!-- Lipsum 첫번째 문장 가져오기 -->
        <p>배고파</p><p></p><p></p> <!--한번이후에는 의미X-->
        <p>배고프면 밥 먹어</p>

            <h1>줄바꿈 태그 : br태그</h1>
            안녕하세요 <br><br><br> <!--br태그가없다면 줄이 띄어지지않음-->
            홍길동입니다
            <h1>구분선 : hr태그</h1>
            <hr> <!-- 이 부분에 구분선이 그려짐짐-->
            안녕
            <h1>오늘의날짜는 <br> 3월</h1>
            <br>
            <h2>13일 </h2>

            <!-- 가로로 긴 밑줄  -->
            <hr>
            <h3>11 <hr> 22</h3>
            <h4>33</h4>
            <h5>44</h5>
            <h6>55</h6>
            <hr>

강조

<aside> 💡

시작태그와 종료 태그 사이에 강조하고 싶은 문자를 입력하면 일부 문자를 강조할 수 있어요.

</aside>

텍스트의 효과설정

- 태그 내의 텍스트만 적용

- 종류

(1) 굵게

-<b> , <strong>

(2) 형광펜 : <mark>

(3) 밑줄 : <u> : underLine

(4) 취소선 : <s> : strikeLine

(5) 작은 글씨 : <small>

(6) 위첨자 : sup

(7) 아래첨자 : sub

            <h1> 강조표현 </h1>
            <p>
                <strong>글씨크게</strong> <b>크게</b>
                <mark>형관펜</mark> <u>밑줄</u> <s>취소선</s>,
                <em>글씨기울이기</em>
                <i>adipiscing</i>
                <small>작게,</small>
                <sup>위첨자,</sup>
                <sub>아래첨자,</sub>
            </p>

인용

1) 인용 태그란?

문서 내에서 다른 자료를 참조하거나 인용할 때 사용하는 태그

2) <blockquote></blockquote>

다른 블로그나 사이트의 글을 인용할 경우 사용
자동 들여쓰기가 되어 다른 텍스트와 구별 가능
개행을 내포하고 있음

3) <q></q>

다른 블로그나 사이트의 글을 인용할 경우 사용
인용 문구에 “ ”가 표시됨
개행을 내포하고 있지 않음

 <h1>인용태그</h1>
            <blockquote>
                Lorem ipsum dolor sit amet
            </blockquote>
            <q> <!-- "" 표시-->
                sed do eiusmod tempor incididunt 
            ut labore et dolore magna aliqua.
            </q>

기타 텍스트 태그

1) <abbr></abbr>

일반적으로 축약어를 나타낼 때 사용
태그 위에 마우스를 올려놓으면 툴팁 형태로 출력
title 속성의 값이 툴팁으로 나옴

2) <code></code>

컴퓨터 인식을 위한 소스코드를 담는 태그
<pre></pre>태그 내부에 작성

<h1>기타태그</h1>
            <abbr title="Lorem ipsum dolor sit amet">Lipsum</abbr>
            <pre> <!-- 일반텍스트문서와같이 출력-->
                pre 태그는 메모장에 작성하는 대로 출력됩니다
                아래라인에 출력됩니다
                <code>
                    public void test(){ <!-- 코드는 pre블럭내에서만사용-->
                        System.out.println("Hello Java");
                    }
                </code>
            </pre>

5) @@ 목록관련 태그 @@

ul , ol 의 하위태그 : li

ul ,ol , li ,hn 태그들은 블록레벨태그

블록레벨태그 : 라인전체에 적용되는 태그

b , strong , mark : 인라인 레벨태그

(인라인레벨태그 : 라인의일부만 범위적용)

HTML 문서 구조(2)

1) 부모 요소와 자식 요소

부모 요소 : 특정 요소의 관점에서 한 단계 상위에 있는 요소
자식 요소 : 특정 요소의 관점에서 한 단계 아래에 있는 요소
예시 : 부모(ul), 자식(li)

<ul>
	<li>탕수육</li>
</ul>

2) 자손 요소와 후손 요소

자손 요소(=자식요소) : 특정 요소 관점에서 한 단계 아래 있는 요소
후손 요소 : 특정 요소 관점에서 아래에 있는 모든 요소
조상 요소 : 특정 요소 관점에서 위에 있는 모든 요소
예시 : 조상(ul), 자손(li), 후손(li와 mark)

<ul>
    <li>
        <mark>탕</mark>수육
    </li>
</ul>

3) 형제 요소

부모 요소가 같은 요소
예시 : <li>끼리의 관계

<ul>
    <li>
        <mark>탕</mark>수육
    </li>
    <li>짜장면</li>
</ul>

1. 순서가없는 목록

1) <ul></ul>

순서가 필요하지 않은 목록 만들 때 사용

리스트 앞에 특정 모양(기본 값 : ·) 출력

모양은 CSS로 수정 가능

순서가없는목록 : ul (un_ordered list)

글머리의 종류 :

-disk : 기본속성(생략)

-square : ■

-circle : ○

2) 표현법

<ul>
	<li>내용1</li>
	<li>내용2</li>
				⋮
</ul>

<h1>순서가없는 태그 : u1</h1>
        <h3>점심 메뉴</h3>
        <ul type="square">
            <li> 칼국수</li><li> 짬뽕</li>
            <li> 라면</li><li> 국밥</li>
        </u1><hr>

2) 순서가있는 목록

1) <ol></ol>

순서가 있는 목록을 만들 때 사용
리스트 앞에 순서를 나타내는 값(기본값 : 숫자) 출력
type 속성의 값을 변경하여 순서 표현법 변경 가능
순서 표현 방식 CSS로 변경 가능
        순서가 있는 목록 : ol(ordered list)
          - 글머리의 종류
          1)  1,2,3 (기본값)
          2) a : a,b,c ..
          3) A : A , B ,C ...
          4) I : I, II ,III ,IV
          5) i : i.ii,iii, iv ....

2) 표현법

<ol type="순서형식(a,A,1,i,I)" start="시작순서">
	<li>내용1</li>
	<li>내용2</li>
				⋮
</ol>

예시)

        <h3> 다음중 select 구문이 속한 부분을 선택하세요</h3>
        <ol type = "I">
            <li>DDL</li><li>DML</li><li>DCL</li><li>TCL</li>
        </ol>

3)개요목록 : dl

            블록레벨
            하나의 개요는 항목과 설명으로구성
            dl(description list) : 모든개요의목록
            dt(description term) : 하나의개요를 구성하는 항목
            dd(description description) : 하나의 개요를 구성하는 설명

<h1>개요목록: dl</h1>
        <h3>일타스캔들</h3>
        <dl>
            <dt>편성</dt>
            <dd>tvN 2023.01.14 ~ </dd>
            <dt>시청률</dt>
            <dd>13.0% 닐슨코리아</dd>
            <dt>소개</dt>
            <dd>사교육 전쟁터에서 펼처지는 국가대표 ....</dd>
        </dl>

6)@@ 표관련 태그 @@

테이블태그

(요즘은 잘 안쓰지만 알아둘 필요는있음)

1) 특징

웹 문서에서 자료를 정리할 때 주로 사용
행과 열로 이루어져 있음
행과 열이 만나는 지점을 셀이라고 함

2) 표현법

1행 2열 테이블 작성

<table>
	<tr>
		<td>내용</td>
		<td>내용</td>
	</tr>
</table>

3) 구조

<tr>이 행을 만드는거라고생각하자

<td>는 n행의 내용들

<table>
	<tr>
		<td>내용1</td>
		<td>내용2</td>
		<td>내용3</td>
	</tr>
	.
	. X3
	.
</table>

테두리 속성

table태그

표를 만드는 태그

테이블의 구역구분하는 태그: th , tbody , tfoot

이것들은 생략이 가능함

<tbody>태그는 생략하더라도 자동으로사용됨(tr의 상위)

다음과 같이 순서가 유지됨.

행(row) : <tr></tr>

열(column) : <td></td>

border : 테두리굵기설정(css권장! 숫자가높아질수록 두꺼워짐)

2) 표현법

<table border="두께(숫자)"> </table>

    <table border="1">
            <thead> <!--테이블의 헤더 부분 명시(생략해도무관)-->
                <tr>
                    <td>제품명</td><td>입고수량</td><td>출고수량</td>
                </tr>
            </thead>
            <tbody> <!-- 몸통구역 구분-->
                <tr><td>신라면</td><td>10</td><td>10</td></tr>
                <tr><td>진라면</td><td>20</td><td>20</td></tr>
            </tbody>
            <tfoot> <!-- 최종구역 구분 (tbody부분에 내용넣어도 같은결과과)-->
                <tr><td>합계</td><td>30</td><td>30</td></tr>
            </tfoot>
        </table>

사진파일을 활용한 테이블태그 이용

image.zip

8.18MB

다음의 사진을 HTML저장파일에 붙여넣기 후 실행했음

        <table border="1">
            <tr>
                <td><img src="D:/web/workspace/html/flower1.jpg" alt="꽃1" width="200px"> </td>
                <td>10,000원<br><strong><mark>꽃1</mark></strong></td>
            </tr><!-- 1행-->
            <tr>
                <td><img src="D:/web/workspace/html/flower2.jpg" alt="꽃2" width="200px"> </td>
                <td>20,000원<br><strong><mark>꽃2</mark></strong></td>
            </tr><!--2행-->
            <tr>
                <td><img src="D:/web/workspace/html/flower3.jpg" alt="꽃3" width="200px"> </td>
               <td>30,000원<br><strong><mark>꽃3</mark></strong></td>
            </tr><!-- 3행-->
        </table>

<table border ="1"> 로 테이블의 테두리를 설정해주었다

<tr> 내부에 있는 <td>들은 모두 같은행이 된다

<img src = "이미지의경로" alt 별명 width = "n px"> 로

사진을 넣고 크기를 정할수있음

<td>20,000원<br><strong><mark>꽃2</mark></strong></td>

하나의 속성에 20000원을 넣고 \n 후 꽃2 (글씨굵게 + 형광펜)

테이블 관련 태그

1) <th></th>

열에 대한 제목을 표시하는 태그
중앙 정렬 및 굵게 표시 됨
<tr></tr>태그 아래에 <td></td>처럼 사용

2) <caption></caption>

테이블의 제목이나 내용을 추가하는 태그
다른 태그를 이용하여 텍스트를 꾸밀 수 있음
기본 위치는 테이블 위 중앙
<table></table> 태그 아래에 사용

셀병합

1) 특징

<td>태그의 속성
rowspan은 지정한 수만큼의 행 병합
colspan은 지정한 수 만큼의 열 병합

2) 예시

colspan

            <table border="1">
                <tr>
                    <td>1열</td><td>2열</td><td>3열</td>
                </tr>
                <tr>
                    <td>1열</td><td colspan="2">2~3열</td>
                </tr>
                <tr>
                    <td colspan="3">1~3열</td>
                </tr>
            </table>

rowspan

   <table border="1">
                <tr>
                    <td>1행</td><td rowspan="2">1~2행</td><td rowspan="3">1~3행</td>
                </tr>
                <tr><td>2행</td></tr>
                <tr><td>3행</td><td>3행</td></tr>
            </table>

예제1)

<h1>행 통합과 열 통합</h1>
<table border="1">
  <caption>행 통합</caption>
  <tr>
      <th>1행</th>
      <td>1행 1열</td>
  </tr>
  <tr>
      <th rowspan="2">2행</th>
      <td>2행 2열</td>
  </tr>
  <tr>
      <td>3행 2열</td>
  </tr>
</table>
<br>
<table border="1">
  <caption>열 통합</caption>
  <tr>
      <th>1열</th>
      <th colspan="2">2열</th>
  </tr>
  <tr>
      <td>2행 1열</td>
      <td>2행 2열</td>
      <td>2행 3열</td>
  </tr>
</table>

테이블 구조 태그

1) 특징

테이블의 영역별로 태그를 지정하여 헤더, 본문, 푸터로 구분
각 열에 공통된 스타일을 적용하고, 테이블의 구조를 잡을 수 있음

2) 주요 테이블 구조 태그

1. <thead>

테이블 열의 제목을 정의
테이블의 머리 부분을 그룹화해줌
스타일을 별도로 지정하거나 스크롤 고정을 설정할 때 유용

2. <tbody>

실제 데이터(행)를 포함
테이블의 본문 콘텐츠를 그룹화
대량의 데이터가 있을 때 스크롤 처리를 설정하기에 적합함

3. <tfoot>

합계, 요약 등 테이블 하단에 표시되는 정보 포함
테이블의 푸터 콘텐츠 그룹화

4. <colgroup>

테이블 열의 공통 스타일(너비, 색상)이나 속성 지정
<caption> 태그 뒤, <thead>나 <tbody> 앞에 위치
자식 요소인 <col>을 사용

5. <col>

개별 열의 속성 정의
<colgroup>의 자식요소

<h1>테이블의 색상 주기</h1>
            <table border="1"><!-- 4행2열-->
                <colgroup><!-- 열의 서식지정-->
                    <col width="10%" style="background-color: aquamarine;"><!--1열-->
                    <!-- style : CSS 라고생각-->
                    <col width="40%">               <!--2열-->
                </colgroup>
                <thead>
                    <tr>
                        <th>No</th>
                        <th>이름</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>홍길동</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>김삿갓</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>인원수</td>
                        <td>2명</td>
                    </tr>
                </tfoot>
            </table>

예제)

    <h1>종합 문제</h1>
            <table border="1">
                <caption>출장 비용 보고서</caption>
                <colgroup>
                    <col><col>
                    <col style="background-color:rgb(241, 145, 193)">
                </colgroup>
                <thead>
                    <tr>
                        <th>대분류</th><th>중분류</th><th>금액</th>
                        <!--th를 함으로써 글씨정렬+굵게게-->
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>교통비</td> <td>ktx</td> <td>100,000</td>
                    </tr>
                    <tr>
                        <td rowspan="2">식비</td><td>점심</td><td>20,000</td>
                    </tr>
                    <tr>
                        <td>저녁</td><td>200,000</td>
                    </tr>
                    <tr>
                        <td>숙박비</td><td>모텔</td><td>50,000</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">총합계</td><td>190,000</td>
                    </tr>
                </tfoot>
            </table>

오늘 배운 모든것을 사용해보았다

<h1> : 제목

<table border="1"> : 굵기1의 테이블생성

<caption> : 테이블이름

<colgroup> : col(열) 튜닝 -- 3번쨰열만 튜닝해야하므로

<col><col><col style="xx">

<th> : 열의 제목 ( 글씨정렬+굵게)

<tr> ...</td>하나의 행

<td rowspan="n"> : n개의 행 병합(상하)

<td colspan="n"> : n개의 열 병합(좌우)

거듭 말하지만

<thead> <tbody> <tfoot>은 필수가아니다

특히 <tbody>는 적지않아도 알아서 만들어줌

구역구분 태그 모두 사용 시(관리자코드)

구역구분 태그 모두 사용 X (관리자코드)

7) 예제

나의정답

'부트캠프(HTML,CSS)' 카테고리의 다른 글

부트캠프33일차 (CSS media, bootstrap) (0)	2025.03.19
부트캠프32일차(css(layoutStyle)) (0)	2025.03.18
부트캠프31일차(CSS) (0)	2025.03.17
부트캠프30일 (HTML,CSS) (0)	2025.03.14

현재글부트캠프29일차(HTML)

web동곤

백엔드위주

형변환, java, 초보, 반복문, 이클립스, 꿀팁, 코딩, Easy, 자바, 스코프, Method, 유익한, `, 기초, 인텔리제이, 기본, Spring, Eclipse, 메서드, 유익,

Today :
Yesterday :

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31