'HTML/HTML Concept' 카테고리의 글 목록

'HTML/HTML Concept'에 해당되는 글 7건

2018.04.23
<HTML> 태그 원어모음
2018.04.17
[HTML] 입력 양식태그
2018.03.30
[JavaScript] jsp
2018.03.20
[HTML] 테이블
2018.03.20
[HTML] 구조
2018.03.20
[HTML] 하이퍼링크
2018.03.20
[HTML] 태그

<HTML> 태그 원어모음

HTML/HTML Concept 2018. 4. 23. 21:33

태그	원어	간략한 의미

&nbsp	non-breaking spaces

<a href="url"> ... </a>	anchor hypertext reference="url"

<b> ... </b>	bold	텍스트를 볼드체로 표현
<body bgcolor="#000000">	body background color="#000000"	배경색 지정
<br> ... </br>	break	줄을 바꾸지만, 새로운 문단이 시작되지는 않음

<dd> ... </dd>	definition-list definition
<dl> ... </dl>	definition list
<dt> ... </dt>	definition-list term

<em> ... </em>	emphasized text

<hr>	horizontal rule	수평선
<h1> ... </h1>	header 1	표제어의 크기. "h1"이 가장 크고, "h6"이 가장 작음

<i> ... </i>	italic	글꼴을 이탤릭체로 표현
<img src="url" alt="text">	image source = "url" alternate text = "text"

<kbd> ... </kbd>	keyboard text

<li> ... </li>	listed item

<ol> ... </ol>	ordered list	번호 있는 목록

<p> ... </p>	paragraph	문단의 새로운 시작을 위해 줄을 바꾸고, 한 줄을 띄운 후 내용이 시작
<pre> ... </pre>	preformatted text

<samp> ... </samp>	sample computer code
<sub> ... </sub>	subscript	텍스트를 아래 첨자로 만듦
<sup> ... </sup>	superscript	텍스트를 윗 첨자로 만듦

<td> ... </td>	table data	데이터 정보를 갖는 셀
<th> ... </th>	table heading	헤더 정보를 갖는 셀
<tr> ... </tr>	table row
<tt> ... </tt>	teletype text

<u> ... </u>	underline	문장 아래에 밑줄을 그음
<ul> ... </ul>	unordered list	번호 없는 목록

<var> ... </var>	variable
< ... vlink="color" ...>	visited link

저작자표시 비영리 변경금지

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 입력 양식태그 (0)	2018.04.17
[JavaScript] jsp (0)	2018.03.30
[HTML] 테이블 (0)	2018.03.20
[HTML] 구조 (0)	2018.03.20
[HTML] 하이퍼링크 (0)	2018.03.20

Posted by 군우

AND

[HTML] 입력 양식태그

HTML/HTML Concept 2018. 4. 17. 15:55

입력 양식

<form>에 기술함

label태그

for속성에 input태그의 id 속성을 입력하면, label 태그가 어떤 태그를 설명

하는지 알려줌.

label태그를 클릭하면 자동으로 해당 input태그로 커서가 이동한다.

select태그

한 항목을 선택가능한 입력양식.

</select>

그 선택 옵션들을 묶는 <otpgroup label="묶는이름">

</optgroup>

</optgroup>

</select>

입력양식들을 묶는 <fieldset>과 테두리 제목을다는 <legend>

<form>

<legend> 입력양식 legend </legend>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</fieldset>

</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <form>
        <input type = "text" name= "text" value="text" /><br/>
        <input type = "password" name= "password" value="password" /><br/>
        <input type = "file" name= "file" value="file" /><br/>
        <input type = "checkbox" name= "checkbox" value="checkbox" /><br/>
        <input type = "radio" name= "radio" value="radio" /><br/>
 
        <input type = "hidden" name= "hiddn" value="hiddn" /><br/>
        
        <input type = "button" name= "button" value="button" /><br/>
        <input type = "reset" name= "reset" value="reset" /><br/>
        <input type = "submit" name= "submit" value="submit" /><br/>
        <input type = "image"  src ="point.png" /><br/>
        
        <label for="username"> 이름</label>
        <input id="username" type = "text"/>
        
        <input id = "girl" type = "text" name="gender" value="w" />
        <label for ="girl">여자</label>
        
    </form>
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'HTML > HTML Concept' 카테고리의 다른 글

<HTML> 태그 원어모음 (0)	2018.04.23
[JavaScript] jsp (0)	2018.03.30
[HTML] 테이블 (0)	2018.03.20
[HTML] 구조 (0)	2018.03.20
[HTML] 하이퍼링크 (0)	2018.03.20

Posted by 군우

AND

[JavaScript] jsp

HTML/HTML Concept 2018. 3. 30. 10:44

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ page language = "java" contentType = "text/html; charset=utf-8" %>
<%@ page import="java.util.Date" %>
<!DOCTYPE html>
<html>
    <head>
        <title>동적 웹 페이지</title>
    </head>
    
<body>
    <%
        Date now_datetime = new Date();
        out.print(now_datetime);
    %>
    <script>
    </script>
    <h1> 동적 웹 페이지 방문을 환영합니다....</h1>
</body>
</html>
Colored by Color Scripter
cs

저작자표시 비영리 변경금지

'HTML > HTML Concept' 카테고리의 다른 글

<HTML> 태그 원어모음 (0)	2018.04.23
[HTML] 입력 양식태그 (0)	2018.04.17
[HTML] 테이블 (0)	2018.03.20
[HTML] 구조 (0)	2018.03.20
[HTML] 하이퍼링크 (0)	2018.03.20

Posted by 군우

AND

[HTML] 테이블

HTML/HTML Concept 2018. 3. 20. 15:57

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <title> title TEST </title>
    <h1 id = "num1"><i> i test, italic h1 test </i></h1>
    <h2 id = "num2"><b> b test h2 test, bold  </b></h2>
    <h3><small> small test h3  </small> </h3>
    <h4><sub> sub test,</sub> h4 test</h4>
    <h5><sup> sup test</sup> h5 test </h5>
    <h1><ins> ins test</ins> br test </h1>
    <h1 id = "num3"><del> br test </del></h1>
    <hr>
</head>
<body>
    <ul>
        <p id = "num4"> p test p test p test p te<br/>st p test p test p test </p>
        <p><b> p test p test p test p te<hr/>st p test p test p test </b></p>
        <a href = "#num3"> num3 </a>
        <br/>
        <li> <a href = "http://gunu1.tistory.com/manage"> GNU </a> </li>
    </ul>
    <ol>
        <li> </br></li>
        <li> <a href = "#num1"> GNU </a> </li>
        <pre> pre! </pre> 
    </ol>
    <br>
    <table border = "1">
        <thead>
            <tr>
                <th colspan ="2">thead 1</th>
                <td>thead 2</td>                
            </tr>
            <tr>
                <th rowspan ="2">thead 3</th>
                <td>thead 4</td>                
            </tr>
        
        </thead>
        <tbody>
            <tr>
                <td>tbody1</td>
                <td>tbody2</td>
            </tr>
            <tr>
                <td>tbody3</td>
                <td>tbody4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>tfoot1</td>
                <td>tfoot2</td>
            </tr>
            <tr>
                <td>tfoot3</td>
                <td>tfoot4</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
Colored by Color Scripter
cs

이렇게 하면 thead3 의 row가 2개가 되지 않는다 . 왜냐하면

thead 4밑에 올 수 있는 게 없기 때문에 표현이 되지 않는다 ,

그래서 thead 밑에 올 수 있는 것은 만들어서 빈곳으로 두지 않아야 한다.

1
2
3
4
5
6
7
8
9
10
11
<thead>
            <tr>
                <th colspan ="2">thead 1</th>
                <td>thead 2</td>                
            </tr>
            <tr>
                <th rowspan ="2">thead 3</th>
                <td>thead 4</td>                
            </tr>
            <tr><td>thead +</td></tr>
        </thead>
cs

출력 결과

저작자표시 비영리 변경금지

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 입력 양식태그 (0)	2018.04.17
[JavaScript] jsp (0)	2018.03.30
[HTML] 구조 (0)	2018.03.20
[HTML] 하이퍼링크 (0)	2018.03.20
[HTML] 태그 (0)	2018.03.20

Posted by 군우

AND

[HTML] 구조

HTML/HTML Concept 2018. 3. 20. 14:44

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <title> title TEST </title>
    <h1 id = "num1"> h1 test </h1>
    <br />
    <h1 id = "num3"> br test </h1>
</head>
<body>
    <a href = "#num3"> num3 </a>
    <br/>
    <a href = "http://gunu1.tistory.com/manage"> GNU </a>
    </br>
    <a href = "#num1"> GNU </a>
</body>
</html>
Colored by Color Scripter
cs

이런식으로 되어있다. 하나 하나 살펴보면

<!doctype html> : 현재 문서가 HTML5언어로 작성된 웹 문서라는 뜻이다.

문서 유형을 지정하는 선언문이다.

<html> ~ </html>: 웹문서의 시작과 끝을 나타내는 태그이다. 웹브라우져가 <html> 태그를 만나면 </html> 까지의 소스를 읽어 HTML문법에 맞추어

브라우저에 표시한다.

<head> ~ </haed> : 웹브라우저가 웹문서를 해석하기 위해 필요한 정보들을

입력하는 부분이다.

해더안의 정보는 실제 문서 내용이 아니기 때문에 제목만 브라우저 창에

표시되고, 나머지는 웹브라우저 화면에 표시되지 않는다.

스타일, 및 스크립트 등이 포합된다

<body> ~ </body> : 실제로 웹 브라우저 화면에 나타날 내용이다.

저작자표시 비영리 변경금지

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 입력 양식태그 (0)	2018.04.17
[JavaScript] jsp (0)	2018.03.30
[HTML] 테이블 (0)	2018.03.20
[HTML] 하이퍼링크 (0)	2018.03.20
[HTML] 태그 (0)	2018.03.20

Posted by 군우

AND

[HTML] 하이퍼링크

HTML/HTML Concept 2018. 3. 20. 14:12

이게 하이퍼링크이다.

이다 .

내부로 참조할 때는 내부에 id를 생성해놓고

접근할때 #을 통해 아이디를 불러야한다 .

이렇게 호출 하는데 다른 곳에 num3인 아이디를 만들어 놔야한다.

저작자표시 비영리 변경금지

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 입력 양식태그 (0)	2018.04.17
[JavaScript] jsp (0)	2018.03.30
[HTML] 테이블 (0)	2018.03.20
[HTML] 구조 (0)	2018.03.20
[HTML] 태그 (0)	2018.03.20

Posted by 군우

AND

[HTML] 태그

HTML/HTML Concept 2018. 3. 20. 14:10

제목글자 태그

-H는 Heading을 의미한다.

h1~h6 까지 있는데 뒤의 숫자는 크기를 의미한다

본문 태그

- p 태그: Paragraph를 의미하며 문단 하나를 생성한다.

- br 태그: 줄 바꾸기 기능 ( <head>에서도 사용이 가능하다.)

다른 글자 태그 내부에 삽입이 가능하다.

<br>, <br /> 닫는 태그는 필요가없다고 함.

- hr 태그: 수평 줄 삽입기능, 가로 선 생김

다른 글자 태그 내부에 삽이이 불가능하다 // 되는 것 같은데..

<hr> , <hr /> 닫는 태그는 필요가없다고 함.

- pre 태그: 입력하는 그대로 화면에 표시하기.

글자 모양 태그

* 글자모양 태그 사이에 제목 글자 태그(<h1>)나 본문글자 태그<p>는 넣을 수 없다.

- b 태그: 굵은 글자

- i 태그 : 기울어진 글자

- small 태그: 작은 글자

- sub 태그: 아래첨자

- sup 태그: 위첨자

- ins 태그: 밑줄글자

- del 태그 : 가운데 줄이 그어진 글자, 취소선

목록 태그

( ul과 ol이 있는데 그내부 표시는 li로 한다.)

-글머리 목록 태그

- ul 태그 : 글머리기호 목록생성

ul이 순서가 필요하지 않는 목록 만드는 것이다. ul과 li를 같이 사용해서

글머리를 달면된다.

- li 태그 : 목록 요소 생성

한문장만 글머리단다.

-순서 번호 목록 태그

- ol 태그 : 순서 번호 목록 생성

<ol type = "속성 값" start ="순서번호" > 이렇게 type과 start값을

지정할 수 있다,

- li 태그 : 목록요소 생성

태이블태그

- table 태그 : 표를 삽입함

- thead 태그: 표의 머리를 생성함

- tbody 태그 : 표의 body를 생성함

- tfoot 태그 : 표의 foot을 생성함

- tr 태그 : 표의 행을 삽입함.

- th 태그 : 표의 제목 요소를 생성함.

colspan : 셀의 너비 지정, 차지하는 너비 크기를 지정함.

rowspan : 셀의 높이 지정, 차지하는 높이 크기를 지정함

- td 태그 : 표의 일반요소 (table data)를 생성함.

colspan : 셀의 너비 지정, 차지하는 너비 크기를 지정함.

rowspan : 셀의 높이 지정, 차지하는 높이 크기를 지정함

이미지 태그

- img 태그 :

입력양식 태그

-input 태그:

- label 태그 : for 속성에 input 태그의 id 속성을 입력하면

//// 소스코드 .

<!DOCTYPE html>

<html>

<head>

<title> title TEST </title>

<h1 id = "num1"><i> i test, italic h1 test </i></h1>

<h3><small> small test h3 </small> </h3>

<hr>

</head>

<body>

<ul>

<br/>

</ul>

<ol>

</ol>

<br>

<thead>

<tr>

<th colspan ="2">thead 1</th>

<td>thead 2</td>

</tr>

<tr>

<th rowspan ="2">thead 3</th>

<td>thead 4</td>

</tr>

<tr><td>thead +</td></tr>

</thead>

<tbody>

<tr>

<td>tbody1</td>

<td>tbody2</td>

</tr>

<tr>

<td>tbody3</td>

<td>tbody4</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>tfoot1</td>

<td>tfoot2</td>

</tr>

<tr>

<td>tfoot3</td>

<td>tfoot4</td>

</tr>

</tfoot>

</table>

<form>

</form>

</body>

</html>

출력화면

저작자표시 비영리 변경금지

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 입력 양식태그 (0)	2018.04.17
[JavaScript] jsp (0)	2018.03.30
[HTML] 테이블 (0)	2018.03.20
[HTML] 구조 (0)	2018.03.20
[HTML] 하이퍼링크 (0)	2018.03.20

Posted by 군우

AND

gnu

TAG CLOUD

'HTML/HTML Concept'에 해당되는 글 7건

<HTML> 태그 원어모음

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 입력 양식태그

'HTML > HTML Concept' 카테고리의 다른 글

[JavaScript] jsp

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 테이블

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 구조

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 하이퍼링크

'HTML > HTML Concept' 카테고리의 다른 글

[HTML] 태그

'HTML > HTML Concept' 카테고리의 다른 글

ARTICLE CATEGORY

RECENT ARTICLE

RECENT COMMENT

CALENDAR

ARCHIVE

LINK

티스토리툴바