728x90
반응형
💾 소스코드
web.html
0.00MB
CssTest.html
0.00MB
table.html
0.00MB
💡 HTML
💬 태그
▪️ <!DOCTYPE html> : <html>만 적혀있다면 html 1.5버전 이하이다.
▪️ <head>
▪️ <body>
💬 텍스트 태그
▪️ <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : 텍스트 크기 순
▪️ <p> : 텍스트 단락, 입력한 내용 앞 뒤로 빈 줄이 생긴다.
▪️ <br> : 줄 바꾸기, 닫는 태그가 없다.
▪️ <blockquote> : 인용문, 다른 텍스트보다 안으로 들여서 써진다.
💬 부가사항
▪️ <strong>, <b> : 굵게 표시
▪️ <em>, <i> : 이탤릭체로 표시
▪️ <ol>, <li> : 순서 목록
▪️ <ul>, <li> : 순서 없는 목록
▪️ <dl>, <dt>, <dd> : 설명 목록
💬 표 태그
▪️ <caption> : 표 제목
▪️ <table> : 표 전체
▪️ <tr> : 행
▪️ <td> : 열
▪️ <th> : 제목 셀
💬 부가사항
▪️ colspan : 열 합치기
▪️ rowspan : 행 합치기
💬 기타
▪️ <ul style="list-style-type:upper-alpha">
▪️ <ul style="list-style-type:upper-roman">
▪️ <ol style="list-style-type:decimal" start="10">
▪️ <ul style="list-style-type:circle">
📃 웹 문서 만들기 예제(1) - 텍스트 태그 사용하기
📝 웹 문서 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>웹 문서 만들기</title>
</head>
<h1>웹 개발 기초</h1>
<br> <!-- 줄바꿈 + 빈 줄 삽입, 종료 태그 X -->
<p>H</p><p>T</p>ML</p><br>
<h3><strong>레드향</strong></h3>
<p>껍질에 붉은 빛이 돌아 <b>레드향이라고 불린다.</b></p>
<!-- 인용문 -->
<blockquote>레드향은 <em>한라봉</em>과 <em>귤</em>을 교배한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</blockquote>
<p>비타민 C와 비타민 P가 풍부해<br><i>혈액순환, 감기예방</i> 등에 좋은 것으로 알려져있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
<p></p> <!-- 기능이 없음 -->
<p></p> <!-- 기능이 없음 -->
<!-- 목록 만들기(순서 O, X) -->
<p><b>재료 : </b> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소</p>
<oi>
<li>샐러드 채소 씻고 물기 제거 후 준비</li>
<li>레드향과 아보카도, 토마를 먹기 좋은 크기로 썬다.</li>
<li>드레싱 재료를 믹서에 간다.</li>
<li>볼에 샐러드, 레드향, 아보카도, 토마토 등을 넣는다.</li>
<li>끝!!!</li>
</oi>
</body>
</html>💻 실행 화면
📃 웹 문서 만들기 예제(2) - 목록 태그 사용하기
📝 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text.css">
/* body태그 안에 'background-color'로 상수값(red)나 16진수 값으로 배경색을 지정할 수 있다. */
body {
background-color: white;
}
ul {
/* 속성 : 값 */
display: block;
list-style-type: decimal;
/* 여백 */
margin-top: 100em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
</style>
</head>
<h3>소설책 제목</h3>
<!-- A. 오만과 편견, B. 오디세이 -->
<ul style="list-style-type:upper-alpha">
<li>오만과 편견</li>
<li>오디세이</li>
</ul>
<!-- I. 오만과 편견, II. 오디세이 -->
<ul style="list-style-type:upper-roman">
<li>오만과 편견</li>
<li>오디세이</li>
</ul>
<!-- 10. 오만과 편견, 11. 오디세이 -->
<!-- 번호 시작을 10부터 시작하기! -->
<ol style="list-style-type:decimal" start="10">
<li>오만과 편견</li>
<li>오디세이</li>
</ol>
<ul style="list-style-type:circle">
<li>져니</li>
<li>빵먹는 숩</li>
<li>만두은진</li>
</ul>
</body>
</html>💻 실행 화면
📃 웹 문서 만들기 예제(3) - 표 만들기 태그 사용하기
📝 Table
<!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>Table</title>
</head>
<!-- 테이블 순서 : <table>, <tr>, <td> -->
<body>
<!-- 1번째 테이블 -->
<!-- 선의 굵기 -->
<table border="2">
<!-- 칸(열) -->
<td>1행 1열</td>
</table>
<!-- 2번째 테이블 -->
<br><br>
<table border="2">
<!-- 줄(행) -->
<tr>
<!-- 칸(열) -->
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table><br><br>
<!-- 3번째 테이블 -->
<table border="2">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>3행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
<!-- 4번째 테이블 -->
<br><br>
<table border="2">
<tr>
<td><b>1행 1열</b></td>
</tr>
</table>
<br><br>
<!-- 5번째 테이블 -->
<table border="2">
<tr>
<td><b>1행 1열</b></td>
<td><b>1행 2열</b></td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<!-- 6번째 테이블 -->
<br><br>
<table border="2">
<tr>
<td><b>1행 1열</b></td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td><b>2행 1열</b></td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td><b>3행 1열</b></td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
<!-- 7번째 테이블 -->
<br><br>
<table border="1" , cellspacing="10">
<!-- cellspacing : 공백 -->
<tr>
<td><b>1행 1열</b></td>
</tr>
</table>
<!-- 8번째 테이블 -->
<br><br>
<table border="2">
<tr>
<!-- rowspan : 칸에 있는 행을 합친다. -->
<td rowspan="2">
1행 1열
</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 2열</td>
</tr>
</table>
<!-- 9번째 테이블 -->
<br><br>
<table border="3" , cellspacing="10">
<tr>
<td rowspan="3">1행 1열</td>
<td>1행 2열</td>
<td colspan="3">1행 3열</td>
<!-- <td>1행 4열</td> -->
</tr>
<tr>
<!-- colspan : 열에 있는 행을 합친다. -->
<td colspan="3">2행 2열</td>
<td rowspan="2">2행 4열</td>
</tr>
<tr>
<td>3행 2열</td>
<td colspan="2">3행 3열</td>
<!-- <td>3행 4열</td> -->
</tr>
</table>
</body>
</html>💻 실행 화면
728x90
반응형
'Front-End > HTML | CSS' 카테고리의 다른 글
| HTML - 입력 양식 작성하기, <form> 태그 (0) | 2022.07.08 |
|---|---|
| HTML - 실습문제 03 (0) | 2022.07.07 |
| HTML - 기본 구조와 태그 (0) | 2022.07.07 |
| HTML - 실습문제 02 (0) | 2022.07.07 |
| HTML - 실습문제 01 (0) | 2022.07.06 |
댓글