| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 간편정리
- 마동석
- 베식타스
- 유벤투스
- UI/UX
- 이클립스
- HTML/CSS
- 첼시
- 바르셀로나
- 프로젝트
- Eclipse
- 파탄잘리
- 오피셜
- 맨시티
- 마티치
- jQuery
- export
- 치차리토
- jsp
- 레스터
- 루카쿠
- UX/UI
- JavaScript
- HTML 제어
- HTML
- CSS
- 맨유
- 라카제르
- 아스널
- 네이마르
- Today
- Total
Be a groovy man by positive thinking
UI/UX_001 본문
간략정리
1. 제목 글자 태그(h1~h6)
- 숫자가 낮을수록 크다.
2. p 태그
- p : 본문 글자 태그
3. br, hr 태그
- br : 개행 태그
- hr : 수평 줄 태그
4. 앵커 태그
- controls : 음악 재생 도구를 출력할지 지정
5. ol, ul 태그
- ul : 순서가 없는 목록 태그
- ol : 순서가 있는 목록 태그
- li : 목록 요소
6. dl, dt, dd 태그
- dl : 정의 목록 태그
- dt : 정의 용어 태그
- dd : 정의 설명 태그
7. tr, th, td 태그
- tr : 표 내부의 행 태그
- th : 표 내부의 제목 셀 태그
- td : 행 내부의 일반 셀태그
8. th, td 태그의 속성 - rowspan, colspan
- rowspan : 셀의 높이 지정
- colspan : 셀의 너비 지정
예문
Ex_01 제목 글자 태그(h1~h6)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
일반적인 글자
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Ex_02 p 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Ex_03 br 태그 : 한 줄 띄우기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
This is a paragraph. <br />
This is a paragraph.
</body>
</html>
Ex_04 a 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
</body>
</html>
Ex_05
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<h2 id="test">Top of page!</h2>
<p>In my younger and more vulnerable years my father gave me some
advice that I´ve been turning over in my mind ever since.</p>
<p>"Whenever you feel like criticizing any one," he told me, "just
remember that all the people in this world haven´t had the advantages
that you´ve had."</p>
<p>He didn´t say any more, but we´ve always been unusually
communicative in a reserved way, and I understood that he meant a
great deal more than that. In consequence, I´m inclined to reserve all
judgments, a habit that has opened up many curious natures to me and
also made me the victim of not a few veteran bores. The abnormal mind
is quick to detect and attach itself to this quality when it appears
in a normal person, and so it came about that in college I was
unjustly accused of being a politician, because I was privy to the
secret griefs of wild, unknown men. Most of the confidences were
unsought-frequently I have feigned sleep, preoccupation, or a hostile
levity when I realized by some unmistakable sign that an intimate
revelation was quivering on the horizon; for the intimate revelations
of young men, or at least the terms in which they express them, are
usually plagiaristic and marred by obvious suppressions. Reserving
judgments is a matter of infinite hope. I am still a little afraid of
missing something if I forget that, as my father snobbishly suggested,
and I snobbishly repeat, a sense of the fundamental decencies is
parcelled out unequally at birth.</p>
<p>And, after boasting this way of my tolerance, I come to the
admission that it has a limit. Conduct may be founded on the hard rock
or the wet marshes, but after a certain point I don´t care what it´s
founded on. When I came back from the East last autumn I felt that I
wanted the world to be in uniform and at a sort of moral attention
forever; I wanted no more riotous excursions with privileged glimpses
into the human heart. Only Gatsby, the man who gives his name to this
book, was exempt from my reaction-Gatsby, who represented everything
for which I have an unaffected scorn. If personality is an unbroken
series of successful gestures, then there was something gorgeous about
him, some heightened sensitivity to the promises of life, as if he
were related to one of those intricate machines that register
earthquakes ten thousand miles away. This responsiveness had nothing
to do with that flabby impressionability which is dignified under the
name of the "creative temperament"-it was an extraordinary gift for
hope, a romantic readiness such as I have never found in any other
person and which it is not likely I shall ever find again. No-Gatsby
turned out all right at the end; it is what preyed on Gatsby, what
foul dust floated in the wake of his dreams that temporarily closed
out my interest in the abortive sorrows and short-winded elations of
men.</p>
<a href="#test">Go to top</a>
</body>
</html>
Ex_06 ol, ul 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML</title>
<style>
/*li { list-style-type: none; }*/
</style>
</head>
<body>
<h1>순서있는 목록</h1>
<ol>
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked In</li>
</ol>
<h1>순서없는 목록</h1>
<ul>
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked In</li>
</ul>
</body>
</html>
Ex_07 ol, ul 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML</title>
<style>
/*li { list-style-type: none; }*/
</style>
</head>
<body>
<h1>순서있는 목록</h1>
<ol>
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked In
<ol>
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked In</li>
</ol>
</li>
</ol>
<h1>순서없는 목록</h1>
<ul>
<li>Facebook</li>
<li>Tweeter</li>
<li>Linked In</li>
</ul>
</body>
</html>
Ex_08 dl, dt, dd 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<dl>
<dt>용어</dt>
<dd>용어설명1</dd>
<dd>용어설명2</dd>
<dd>용어설명3</dd>
</dl>
</body>
</html>
Ex_09 tr, th, td 태그
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table border='1'>
<tr>
<td>제목 1</td>
<td>제목 2</td>
</tr>
<tr>
<td>Data 21</td>
<td>Data 22</td>
</tr>
<tr>
<td>Data 31</td>
<td>Data 32</td>
</tr>
</table>
</body>
</html>
Ex_10 th, td 태그의 속성 - rowspan, colspan
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table border='1'>
<colgroup>
<col span='2' style="background: red;">
<col style="background: yellow;">
</colgroup>
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
<th>제목 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 21</td>
<td>Data 22</td>
<td>Data 23</td>
</tr>
<tr>
<td>Data 31</td>
<td>Data 32</td>
<td>Data 33</td>
</tr>
</tbody>
</table>
</body>
</html>