-
학원 day41. 태그(2), 엘리먼트, 폼기록 2022. 11. 2. 14:50
표를 담는 태그
- <table> 태그 : 표를 생성하는 태그
- <thead> 태그 : 표의 헤더부를 생성하는 태그
- <tbody> 태그 : 표의 바디부를 생성하는 태그
- <tfoot> 태그 : 표의 푸터부를 생성하는 태그
- <tr> 태그 : table row의 약자로, 표에 새로운 행을 추가하는 태그
- <th> 태그, <td> 태그 : 표의 헤더칸, 표의 데이터칸을 행에 추가하는 태그, th는 글씨 굵게, 가운데 정렬이 되고, td는 왼쪽 정렬되어서 화면에 표시된다.
- <table> 태그는 <thead>, <tbody>, <tfoot> 태그를 자식태그로 가진다.
- <table> 태그는 <tr> 태그를 자식태그로 가진다.
- <thead>, <tbody>, <tfoot> 태그는 <tr> 태그를 자식태그로 가진다.
- <tr> 태그는 <th>, <td>태그를 자식태그로 가진다.
<h3>도서 주문정보</h3> <table> <thead> <tr> <th>순번</th> <th>제목</th> <th>가격</th> <th>구매수량</th> <th>구매금액</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>이것이 자바다</td> <td>35,000 원</td> <td>1 권</td> <td>35,000 원</td> <tr><tr> <td>2</td> <td>스프링 인 액션</td> <td>28,000원</td> <td>2 권</td> <td>56,000 원</td> <tr> <tr> <td>3</td> <td>정규표현식 핸드북</td> <td>10,000 원</td> <td>1 권</td> <td>10,000 원</td> <tr> </tbody> </table>
+ colgroup을 사용해서 표의 너비 정하기
<h2>게시글 목록</h2> <table> <colgroup> <col width="5%"/> <col width="*"/> <!-- *로 지정하면 다른 칸들이 차지하고 남은 모든 너비를 차지한다.--> <col width="10%"/> <col width="5%"/> <col width="15%"/> </colgroup> <thead> <tr> <th>번호</th> <th>제목</th> <th>작성자</th> <th>조회수</th> <th>등록일</th> </tr> </thead> <tbody> <tr> <td>1000</td> <td>이번주는 수강신청 기간입니다.</td> <td>관리자</td> <td>100</td> <td>2022.11.01</td> </tr> <tr> <td>1000</td> <td>이번주는 수강신청 기간입니다.</td> <td>관리자</td> <td>100</td> <td>2022.11.01</td> </tr> <tr> <td>1000</td> <td>이번주는 수강신청 기간입니다.</td> <td>관리자</td> <td>100</td> <td>2022.11.01</td> </tr> <tr> <td>1000</td> <td>이번주는 수강신청 기간입니다.</td> <td>관리자</td> <td>100</td> <td>2022.11.01</td> </tr> <tr> <td>1000</td> <td>이번주는 수강신청 기간입니다.</td> <td>관리자</td> <td>100</td> <td>2022.11.01</td> </tr> <tr> <td>1000</td> <td>이번주는 수강신청 기간입니다.</td> <td>관리자</td> <td>100</td> <td>2022.11.01</td> </tr> </tbody> </table>
+ colspan과 rowspan을 통한 칸의 병합
<body> <h1>칸의 병합</h1> <h2>가로 방향 병합</h2> <!-- colspan 속성 - 가로방향 셀 병합 갯수를 지정하는 속성이다. - th, td 태그의 속성이다. - <td colspan="병합할 칸의 갯수"> <th colspan="병합할 칸의 갯수"> - 표의 칸을 맞추기 위해서는 (병합한 칸의 갯수 -1)만큼 td, th태그를 해당 행에서 삭제해야 한다. --> <table> <tr> <td colspan="2">1</td> <td>2</td> <td>3</td> <td>4</td> <!-- <td>5</td> --> </tr> <tr> <td colspan="3">1</td> <td>2</td> <td>3</td> <!-- <td>4</td> <td>5</td> --> </tr> <tr> <td colspan="5">1</td> <!-- <td>2</td> <td>3</td> <td>4</td> <td>5</td> --> </tr> <tr> <td colspan="2">1</td> <td colspan="2">2</td> <td>3</td> <!-- <td>4</td> <td>5</td> --> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> <h2>세로 방향 병합</h2> <!-- rowspan 속성 - 세로방향 셀 병합 갯수를 지정하는 속성이다. - th, td 태그의 속성이다. <td rowspan="병합할 칸의 갯수"> <th rowspan="병합할 칸의 갯수"> - 표의 칸을 맞추기 위해서는 (병합한 칸의 갯수 -1)만큼 다음행의 td, th태그를 해당 행에서 삭제해야 한다. --> <table> <tr> <td rowspan="6">1</td> <td rowspan="3">2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <!-- <td>1</td> --> <!-- <td>2</td> --> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <!-- <td>1</td> --> <!-- <td>2</td> --> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <!-- <td>1</td> --> <td rowspan="3">2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <!-- <td>1</td> --> <!-- <td>2</td> --> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <!-- <td>1</td> --> <!-- <td>2</td> --> <td>3</td> <td>4</td> <td>5</td> </tr> </table> </body>
+) zen 코딩
* Emmet이라는 플러그인이 zen코딩을 지원한다.
table>(tr>td{$}*5)*5
=> table 안에다가 tr을 5개 만들고, tr안에는 td가 5개가 있어야 하는데 td의 각 칸에 숫자가 표시되게 하라는 의미이다.
이미지를 담는 태그
- <img 태그> 태그는 이미지를 표시하는 태그다.
- 이미지를 표현할 때 사용합니다.
- 컨텐츠를 가지지 않는 태그다.
<img src="images/logo.png" alt="로고이미지" width="64px" height="64px">- 주요 속성
- src : 표시할 이미지파일의 경로와 파일명을 정의한다.
- alt : 이미지에 대한 설명을 적는다. (웹 접근성)
- width : 이미지의 너비
- height : 이미지의 높이
* 웹 접근성(정보통신 접근성)이란, 장애인이나 고령자가 웹사이트에서 제공하는 정보를 비장애인과 동등하게 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>이미지 태그</title> <style> img { width: 140px; height: 170px; opacity: 0.3; } img:hover { /* img 태그 중에서 마우스포인터가 올라와 있는 것 */ opacity: 1; } </style> </head> <body> <h1>이미지 태그</h1> <!-- 이미지 태그 - img 태그가 있다. - img 태그는 컨텐츠를 가지지 않는 태그다. <img>컨텐츠</img>가 아니라 <img />다. - 주요 속성 src="이미지 경로" alt="이미지에 대한 설명" * alt 속성에 스크린리더 프로그램이 이미지에 대한 내용을 읽을 수 있도록 이미지에 대한 설명을 설정한다.(웹 접근성) --> <h2>이미지 표시하기</h2> <img src="resources/images/notobook-1.jpg" alt="삼성 노트북"/> <img src="resources/images/notobook-2.jpg" alt="한성 15인치 노트북"/> <img src="resources/images/notobook-3.jpg" alt="애플 맥북"/> <img src="resources/images/notobook-4.jpg" alt="아수스 게이밍 노트북"/> <h2>다른 사이트 이미지 표시하기</h2> <img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F4127deb531fea9b766461efb61da18af55697d3c" alt="영화 자백 포스터"> <img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F4127deb531fea9b766461efb61da18af55697d3c" alt="영화 자백 포스터"> <img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F4127deb531fea9b766461efb61da18af55697d3c" alt="영화 자백 포스터"> <img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F4127deb531fea9b766461efb61da18af55697d3c" alt="영화 자백 포스터"> <h2>이미지에 링크 걸기</h2> <a href="https://www.samsung.com/sec/notebook/all-notebook/"> <img src="resources/images/notobook-1.jpg" alt="삼성 노트북"/> </a> <a href="https://www.monsterlabs.co.kr/src/category/?category=2|0"> <img src="resources/images/notobook-2.jpg" alt="한성 15인치 노트북"/> </a> <a href="https://www.apple.com/kr/mac/"> <img src="resources/images/notobook-3.jpg" alt="애플 맥북"/> </a> <a href="https://www.asus.com/kr/"> <img src="resources/images/notobook-4.jpg" alt="아수스 게이밍 노트북"/> </a> </body>
포맷팅된 텍스트를 담는 태그
- <strong> 태그
- 중요한 텍스트는 <strong>태그에 담는다.
- <b> 태그를 대신해서 사용된다.
- <em> 태그
- 강조하고 싶은 텍스트는 <em>태그에 담는다.
- <i> 태그를 대신해서 사용된다.
- <del> 태그
- 삭제된 내용은 <del>태그에 담는다.
- <small> 태그
- 작게 표현할 태그는 <small>태그에 담는다.
- <mark> 태그
- 하이라이트시킬 내용은 <mark>태그에 담는다.
<title>포맷팅 태그</title> <style> strong { font-weight: bold; font-size: 20px; color: red; } </style> </head> <body> <h1>포맷팅 태그</h1> <!-- 포맷팅 태그 - 포맷팅된(중요한, 강조하고 싶은, 삭제된, 하이라이트된) 텍스트를 담는 태그다. - 주요 태그 <strong>, <b> - <strong> : important text, 데이터 중심적 - <b> : bold text, 표현 중심적 <em>, <i> - <em> : emphasized text, 데이터 중심적 - <i> : italic text, 표현 중심적 <del> - <del> : deleted text <small> - <small> : smaller text <mark> -<mark> : marked text --> <p> 이 텍스트는 매우 <strong>중요한</strong> 컨텐츠다. </p> <p> 이 텍스트는 <em>강조할</em> 컨텐츠다. </p> <p> 이 텍스트는 <del>삭제된</del> 컨텐츠다. </p> <p> 이 텍스트는 <small>작게 표현할</small> 컨텐츠다. </p> <p> 이 텍스트는 <mark>하이라이트 시킬</mark> 컨텐츠다. </p> </body> </html><화면 결과>
블록 엘리먼트와 인라인 엘리먼트
=> 브라우저는 html 문서를 해석(파싱)해서 document라는 객체를 만든다. document라는 객체는 html문서를 표현한 객체이다. document라는 객체 안에는 element라는 객체가 있는데 element객체는 태그 하나마다 만들어지고 브라우저는 그것들을 화면서 랜더링한다. element 간에도 트리형태의 부모-자식 관계를 갖고 있다.
태그와 엘리먼트의 관계는 클래스와 객체의 관계로 이해할 수 있다.
블록 엘리먼트
- 항상 새로운 줄에서 시작한다.
- 항상 사용가능한 최대 너비를 차지한다.
- 블록 엘리먼트의 왼쪽이나 오른쪽에는 다른 엘리먼트가 위치할 수 없다.
- 엘리먼트의 너비(width)를 지정할 수 있다.
- 엘리먼트내의 컨텐츠(자식엘리먼트, 텍스트)를 정렬할 수 있다.
- 대표적인 태그
- h1~h6, p, ol, ul, li, dl, dt, dd, table, form, div
- article, aside, section, nav, video, footer
인라인 엘리먼트
- 새로운 줄에서 시작하지 않을 수도 있다.
- 컨텐츠를 표시하는데 필요한 만큼의 너비만 가진다.
- 인라인 엘리먼트는 블록 엘리먼트로 꼭 감싸자.
- 엘리먼트의 너비(width)를 지정해도 적용이 되지 않는다.
- 엘리먼트내의 컨텐츠(자식엘리먼트, 텍스트)를 정렬할 수 없다.
- 대표적인 태그
- a, img, strong, em, small, del, b, i, br
- input, select, textarea, button, label
<title>블록 엘리먼트와 인라인 엘리먼트</title> <style> h1, h2, p, a, b, em, small { margin: 5px; padding: 5px; border: 1px solid red; } </style> </head> <body> <h1>블록 엘리먼트와 인라인 엘리먼트</h1> <h2>블록 엘리먼트</h2> <p>p는 블록 엘리먼트야</p> <p style="width: 25%">p는 블록 엘리먼트야</p> <p style="width: 50%">p는 블록 엘리먼트야</p> <p style="width: 70%">p는 블록 엘리먼트야</p> <p style="text-align: right;">p는 블록 엘리먼트야</p> <p style="text-align: center;">p는 블록 엘리먼트야</p> <p style="text-align: left;">p는 블록 엘리먼트야</p> <h2>인라인 엘리먼트</h2> <p style="text-align: right;"> <a href="http://www.daum.net">다음</a> <a href="http://www.daum.net">다음</a> <a href="http://www.daum.net">다음</a> <a href="http://www.daum.net">다음</a> <a href="http://www.daum.net">다음</a> </p> <p><b>제목만</b>들어도<em>이야기</em>의 <small>서두와 결말</small>이 완벽하게 예측되는 고교 시절 첫사랑 이야기</p> </body> </html><화면 결과>
블록 엘리먼트
문서의 제목: h1 ~ h6
문서의 내용: p
목록 : ol, ul, dl, li, dt, dd
표: table
입력폼: form
컨테이너 태그 : div
* 다른 블록 엘리먼트를 담는 태그다.
* 다른 인라인 엘리먼트를 담는 태그다.
* 다른 div 태그를 담는 태그다.
인라인 엘리먼트
링크 태그 : a
이미지 태그 : img
포맷팅 태그 : strong, em, small, del, mark
폼요소 태그 : input, select, textarea, button, lable
컨테이너 태그 : span
* 텍스트의 전부 혹은 일부분을 담는 태그다.+) 블록 엘리먼트와 인라인 엘리먼트간의 전환
: css의 속성 중 display의 값 변경을 통해 블록 엘리먼트는 인라인 엘리먼트로, 인라인 엘리먼트는 블록 엘리먼트로 변경이 가능하다.
- 블록엘리먼트를 인라인엘리먼트로 바꾸기
<블록엘리먼트태그 style="display: inline;" >컨텐츠</블록엘리먼트태그>
- 인라인엘리먼트를 블록엘리먼트로 바꾸기
<인라인엘리먼트태그 style="display: block;" >컨텐츠</인라인엘리먼트태그>
div 태그
- 블록엘리먼트를 그룹으로 묶을 수 있는 태그다.
- <div> 태그도 블록엘리먼트다.
- <div> 태그는 다른 블록엘리먼트나 인라인엘리먼트를 포함할 수 있고, 다른 div도 포함할 수 있다.
- <div> 태그는 html문서에서 엘리먼트들을 특정 그룹으로 묶을 때 사용한다.
<style> .products-box div { float: left; width: 240px; border: 1px solid silver; padding: 10px; margin: 5px; text-align: center; } </style> </head> <body> <h1>div 엘리먼트</h1> <h2>div의 활용</h2> <div> <input type="checkbox" checked onchange="toggleDisplay(this, 'box-1');">추천 <input type="checkbox" checked onchange="toggleDisplay(this, 'box-2');">신규 </div> <div style="width: 100%; overflow: hidden;" id="box-1"> <h3>추천 노트북 리스트</h3> <div class="products-box"> <div> <img src="resources/images/notobook-1.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> <div> <img src="resources/images/notobook-1.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> <div> <img src="resources/images/notobook-1.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> <div> <img src="resources/images/notobook-1.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> </div> </div> <div style="width: 100%; overflow: hidden;" id="box-2"> <h3>신규 노트북 리스트</h3> <div class="products-box"> <div> <img src="resources/images/notobook-2.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> <div> <img src="resources/images/notobook-2.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> <div> <img src="resources/images/notobook-2.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> <div> <img src="resources/images/notobook-2.jpg" alt="노트북 이미지"/> <p>11월 달에 세일이 가장 많이 들어가는 제품입니다.</p> </div> </div> </div> <div style="color: blue; font-style: italic;"> <p>div 엘리먼트는 블록엘리먼트다.</p> <p>div 엘리먼트는 블록 엘리먼트, 인라인 엘리먼트, 다른 div 엘리먼트를 포함할 수 있다.</p> <p>div 엘리먼트는 여러 엘리먼트를 하나의 그룹으로 묶을 때 사용되는 엘리먼트다.</p> <p>div 엘리먼트를 사용해서 여러 엘리먼트를 하나의 그룹으로 묶으면, 그룹 단위로 스타일을 부여할 수 있다.</p> </div> <div style="color: orange; font-size: 20px;"> <p>div 엘리먼트는 블록엘리먼트다.</p> <p>div 엘리먼트는 블록 엘리먼트, 인라인 엘리먼트, 다른 div 엘리먼트를 포함할 수 있다.</p> <p>div 엘리먼트는 여러 엘리먼트를 하나의 그룹으로 묶을 때 사용되는 엘리먼트다.</p> <p>div 엘리먼트를 사용해서 여러 엘리먼트를 하나의 그룹으로 묶으면, 그룹 단위로 스타일을 부여할 수 있다.</p> </div> <div style="background-color: black; color: white; font-weight: bold;"> <p>div 엘리먼트는 블록엘리먼트다.</p> <p>div 엘리먼트는 블록 엘리먼트, 인라인 엘리먼트, 다른 div 엘리먼트를 포함할 수 있다.</p> <p>div 엘리먼트는 여러 엘리먼트를 하나의 그룹으로 묶을 때 사용되는 엘리먼트다.</p> <p>div 엘리먼트를 사용해서 여러 엘리먼트를 하나의 그룹으로 묶으면, 그룹 단위로 스타일을 부여할 수 있다.</p> </div> <script> function toggleDisplay(checkbox, id) { let el = document.getElementById(id); if (checkbox.checked) { el.style.display = "block"; } else { el.style.display = "none"; } } </script> </body> </html>< 화면 결과 >
span 태그
- <span> 태그는 텍스트를 담는 태그다.
- <span> 태그를 사용해서 담은 텍스트는 style, id, class를 사용해서 다양한 스타일로 표시할 수 있다.
<style> .text-danger { color: red; } .text-success { color: blue; } .text-small { font-size: smaller; } .text-box { padding: 5px; border: 1px solid #eee; border-radius: 15px; } .text-blue-box { background-color: cornflowerblue; color: white; } .text-green-box { background-color: darkseagreen; color: white; } </style> </head> <body> <h1>span 태그</h1> <p>span 태그는 텍스트를 감싸는 태그다.</p> <p>span 태그에 담겨있는 텍스트는 style, id, class 속성을 이용해서 다양한 스타일로 표현할 수 있다.</p> <h2>span 태그의 활용</h2> <dl> <dt>제목</dt><dd>이것이 자바다</dd> <dt>저자</dt><dd>홍길동 <span class="text-success text-small">(김유신 감수, 이순신 테스트)</span></dd> <dt>출판사</dt><dd>중앙출판사</dd> <dt>가격</dt><dd><span class="text-danger"><strong>35,000</strong>원</span> <span class="text-danger text-small">(500원 적립)</span></dd> <dt>기타</dt><dd><span class="text-box text-blue-box">무료배송</span>, <span class="text-box text-green-box">당일배송</span></dd> </dl> </body> </html>< 화면결과 >
블록 엘리먼트와 인라인 엘리먼트의 사용
- <div> 엘리먼트는 다른 <div>를 포함할 수 있다.
- <div> 엘리먼트는 다른 블록 엘리먼트를 포함할 수 있다.
- <div> 엘리먼트는 인라인 엘리먼트를 포함할 수 있다.
- 블록 엘리먼트와 인라인 엘리먼트는 텍스트를 포함할 수 있다.
- 블록 엘리먼트는 텍스트와 인라인 엘리먼트를 포함할 수 있다.
- 인라인 엘리먼트는 블록 엘리먼트를 포함할 수 없다.
폼과 폼요소
폼
- 폼은 사용자가 값을 입력할 수 있는 입력요소(입력필드, 체크박스, 라디오버튼, 콤보박스 등)를 제공하는 것이다.
- 모든 입력요소들은 <form> 태그 안에 정의되어야 한다.
폼요소
- 폼요소는 사용자가 값을 입력하거나, 선택하거나, 체크할 수 있는 것들이다.
- 대표적인 폼요소 태그 : <input>, <select>, <textarea>, <button>
<title>폼 입력</title> </head> <body> <h1>폼 입력요소</h1> <h2>회원가입 폼</h2> <form> <div> <label>이름</label> <!-- 텍스트 입력필드 --> <input type="text" name="name" /> </div> <div> <label>비밀번호</label> <!-- 비밀번호 입력필드 --> <input type="password" name="pwd" /> </div> <div> <label>전화번호</label> <select name="tel1"> <option value="010"> 010</option> <option value="010"> 011</option> <option value="010"> 016</option> <option value="010"> 017</option> <option value="010"> 018</option> <option value="010"> 019</option> </select> - <input type="text" name="tel2"> - <input type="text" name="tel3"> </div> <div> <label>프로필 사진</label> <!-- 첨부파일 입력필드 --> <input type="file" name="profile" /> </div> <div> <label>생일</label> <!-- 날짜 입력필드 --> <input type="date" name="birth" /> </div> <div> <label>성별</label> <!-- 라디오버튼 : 같은 이름을 가진 것 중에서 하나만 선택 가능 --> <input type="radio" name="gender" value="남"> 남성 <input type="radio" name="gender" value="여"> 여성 </div> <div> <!-- 라디오버튼 : 같은 이름을 가진 것 중에서 하나만 선택 가능 --> <label>학력</label> <input type="radio" name="school" value="초등"> 초졸 <input type="radio" name="school" value="중등"> 중졸 <input type="radio" name="school" value="고등"> 고졸 <input type="radio" name="school" value="전문대"> 초대졸 <input type="radio" name="school" value="대학"> 대학졸 <input type="radio" name="school" value="대학원"> 대학원졸 </div> <div> <label>보유 기술</label> <!-- 체크박스 : 복수개 선택 가능 --> <input type="checkbox" name="skill" value="java"> 자바 <input type="checkbox" name="skill" value="c"> c <input type="checkbox" name="skill" value="c++"> c++ <input type="checkbox" name="skill" value="python"> 파이썬 <input type="checkbox" name="skill" value="SQL"> 데이터베이스 <input type="checkbox" name="skill" value="빅데이터"> 빅데이터 <input type="checkbox" name="skill" value="머신러닝"> 머신러닝 <input type="checkbox" name="skill" value="임베디드"> 임베디드 프로그래밍 </div> <div> <label>지원분야</label> <!-- 셀렉트박스(콤보박스) : 제시된 옵션 중 하나 혹은 여러 개를 선택(multiple 설정 필요)하는 것이 가능 --> <select name="job"> <option value="app"> 응용프로그램 개발</option> <option value="web"> 웹 애플리케이션 개발</option> <option value="fullstack"> 풀스택 개발</option> <option value="front"> 프론트 엔드 개발</option> <option value="infra"> 인프라 관리</option> <option value="db"> 데이터베이스 관리</option> </select> </div> <div> <label>자기소개</label> <!-- textarea : 개행문자가 포함된 여러 라인의 텍스트 입력이 가능하다. --> <textarea name="memo" rows="10"></textarea> </div> </form> </body>< 화면 결과 >
'기록' 카테고리의 다른 글
학원 day43. 선택자, 색표현, 박스모델, 포지션, 레이아웃 (0) 2022.11.04 학원 day42. 폼(2), id와 class, CSS (0) 2022.11.03 학원 day40. 웹, HTML, 태그, 속성 (0) 2022.11.01 학원 day39. 분석함수, 집합 연산, 계층형 쿼리 (0) 2022.10.31 학원 day37~38. ibatis(2), XML (0) 2022.10.30