'Web Basic' 카테고리의 글 목록

<abbr>태그는 다음과 같은 형태로 사용합니다.

<!--코드 1.1-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        영수가 재미없는 개그를 해서 <abbr title="갑자기 분위기 싸해진다">갑분싸</abbr>
    </body>
</html>
Colored by Color Scripter


 

<abbr>태그

1. abbr은 abbreviation(약어)이라는 단어의 앞 부분을 사용한 단어입니다. 약어란 WWW(World Wide Web), HTML(HyperText Markup Language), DEC(December)와 같이 줄여서 사용하는 것을 말합니다. 한글로는 갑분싸, 아아(아이스 아메리카노) 등이 있죠?

2. 마우스 커서가 <abbr>태그를 설정한 곳(dot형식으로 밑줄)에 올려두면 약어에 대한 설명이 툴팁 형태로 나타납니다.

3. title 속성을 사용해서 약어에 대한 설명을 작성할 수 있습니다. ex) title="설명"

다음 코드는 WWW, HTML, DEC의 약어를 설명하는 코드입니다.

<!--코드 1.2-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
       <p><abbr title="World Wide Web">WWW</abbr></p>
       <p><abbr title="Hypertext Markup Language">HTML</abbr></p>
       <p><abbr title="December">DEC</abbr></p>
    </body>
</html>
Colored by Color Scripter

저작자표시

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <button> 태그 이해하기 (0)	2019.12.03
[HTML5] <caption>, <figcaption>태그 사용 방법 (0)	2018.03.20
[HTML5] colspan, rowspan 속성 사용 방법 (2)	2018.03.19
[HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0)	2018.03.14
[HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0)	2018.03.14

안녕하세요. 후니입니다!

이번 포스팅에서는 HTML5의 <button>태그에 대해서 알아보겠습니다.

<button>태그와 <button>태그 안에 들어가는 속성(Attribute)들도 많지만 한 개의 버튼을 우선 만들어보고 살펴보겠습니다.

<!--코드1.1-->
<!DOCTYPE>
<head>
    <meta charset="utf-8">
    <title>button test</title>
</head>
<body>
   <button>입력 버튼</button>
</body>

다음은 결과 화면입니다.

<button>버튼 이름</button> 형태를 가지고 있으며 버튼 태그 사이에 버튼의 이름을 지정할 수 있습니다.

간단하게 버튼 한 개 만드는 방법을 알아봤고 이제부터는 <button>태그의 속성들을 살펴보겠습니다.

<button>태그의 type 속성과 속성 값

1. button : 클릭할 수 있는 기능

2. submit : 데이터를 전송할 수 있는 기능

3. reset : 데이터를 리셋하는 기능

<button>태그의 type속성에 들어갈 수 있는 속성 값들은 위처럼 총 세 가지가 있으며 다음 코드는 button, submit. reset을 사용했습니다. <form>태그나 모르는 태그들이 있을 경우엔 일단은 무시하고 진행해도 괜찮지만 이 참에 같이 공부하는걸 추천합니다.

<!--코드1.2-->
<!DOCTYPE>
<head>
    <meta charset="utf-8">
    <title>button test</title>
</head>
<body>
   <form action="/index.html" method="post">
    First name : <input type="text" name="fname"><br>
    Second name : <input type="text" name="sname"><br>
    <button type="submit" value="Submit">Submit</button>
    <button type="reset" value="Reset">Reset</button>
    <button type="button" value="Button">click</button>
   </form>
</body>
Colored by Color Scripter

코드를 직접 타이핑 후 실행해보면 <사진1.2>와 같은 결과가 나옵니다.

First name의 텍스트 박스에 값을 입력하고 Second name 텍스트 박스에 값을 입력 후 submit 속성 값을 사용한 Submit버튼을 누르면 다음 화면으로 넘어갑니다. 아직 다음 화면은 만들지 않아서 "파일을 찾을 수 없음"화면이 나오는게 정상입니다. 그리고 값을 입력 후 reset 속성 값을 사용한 Reset버튼을 누르면 입력한 값들이 사라지며 button 속성 값을 사용한 click버튼은 클릭할 수 있는 버튼으로 생성됩니다.

저작자표시

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <abbr>태그 사용 방법 (0)	2019.12.05
[HTML5] <caption>, <figcaption>태그 사용 방법 (0)	2018.03.20
[HTML5] colspan, rowspan 속성 사용 방법 (2)	2018.03.19
[HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0)	2018.03.14
[HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0)	2018.03.14

1. 내부 스타일 시트

- 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.

모든 스타일 정보는 <head>태그와 </head>태그 안에서 정의해야 하고 <style>태그와 </style>태그 사이에 작성합니다.

<사진 1.1> 내부 스타일 시트

- 다음은 내부 스타일 시트 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>내부 스타일 시트</title>
    <style>
        ul{
            color:blue;
            list-style-type:square;
        }
    </style>
</head>
<body>
    <ul>
        <li>Korea</li>
        <li>Japan</li>
        <li>China</li>
    </ul>
</body>  
</html>

cs

<사진 1.2> 내부 스타일 시트

- <head>태그와 </head>태그 안에 있는 <style>태그와 </style>태그는 '내부 스타일 시트' 입니다.

2. 외부 스타일 시트

- 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다.

사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와

사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고 '.css' 라는 파일 확장자를 사용합니다.

- 외부 스타일 시트를 연결할 때는 <style>태그 없이 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결합니다.

기본형 : <link href="외부 스타일 파일 경로" rel="stylesheet" type=""text/css>

다음은 스타일 정보를 'style.css'라는 외부 스타일 시트 파일로 저장한 후 <link>태그를 이용해 링크한 것입니다.

1
2
3
4

ul{
    color:orange;
    list-style-type:square;
}

cs

<사진 1.3> style.css 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>외부 스타일 시트<title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul>
        <li>Korea</li>
        <li>Japan</li>
        <li>China</li>
    </ul>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.4> style.css파일과 연결된 외부 스타일 시트

- 다음은 결과 화면입니다.

<사진 1.4 결과 화면>

3. 인라인 스타일

- 간단한 스타일 정보라면 스타일 시트(<style> </style>)를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.

이런 방법을 '인라인 스타일'이라고 합니다. 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용하여

style="속성:속성 값;" 형태로 스타일을 바꿀 수 있습니다. 다음은 인라인 스타일을 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>인라인 스타일</title>
</head>
<body>
    <h1 style="color:blue;">진심과 배려 - 논어의 말</h1>
    <p>교사가 지녀야 할 마음가짐은 '진심'과 '배려'두 가지로 대변된다.<br>
    즉 타인을 위해 할 수 있는 일을 성심껏 하고 타인의 기분을 헤아려 주는 것이다.<br>
    언제나 이 두가지를 잊지 않는 한 누군가를 가르칠 자격이 있다.</p>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.5> 인라인 스타일 예제

- <h1>태그에 인라인 스타일을 적용 시켰습니다. 다음은 결과 화면입니다.

<사진 1.5 결과 화면>

저작자표시

'Web Basic > CSS3' 카테고리의 다른 글

[CSS3] 스타일 주석 표기 방법 (0)	2018.03.30
[CSS3] CSS란? 기초 용어 및 표기 방법 (0)	2018.03.19

1. 스타일 주석

- 소스를 작성하고 시간이 지나 다시 본인이 작성한 소스를 보면 "이건 뭐였지?"라는 생각이 자주 듭니다.

본인이 만든 소스를 다른 사람이 봤을 때도 간단하게 코드의 설명을 적어놓으면 훨씬 더 이해하기 쉽겠죠?

CSS3에서 주석을 표시할 때는 /*와 */ 사이에 내용을 입력하는데 주석을 한 줄만 입력하거나 여러 줄을 입력할 수도

있습니다.

- 다음은 스타일 주석을 사용한 예제입니다. 실제로 스타일 소스를 작성할 때는 주석을 이용해 어떤 용도로 사용한 규칙인지

표시해 두는 것이 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
    <title>CSS3 스타일 주석</title>
    <style>
        /*
            <h1>태그와 <p>태그의 스타일을 지정해보자
        */
        h1{
            color:orange; /*글자 크기*/
            font-size:20px; /*글자 색*/
        }
        p{
            color:blue; /*글자 색*/
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>HTML5, CSS3, JavaScript</p>
</body>  
</html>

cs

<사진 1.1> 여러 줄 주석 과 한줄짜리 주석

- <사진1.1>코드는 <h1>태그와 <p>태그가 적용된 곳에 스타일을 지정하였고 주석으로 스타일의 설명을 작성했습니다.

다음은 결과 화면입니다.

<사진 1.1 결과 화면>

- 우리가 작성한 주석은 코드에는 보이지만 웹 브라우저에는 보이지 않는다는 것을 알 수 있습니다.

저작자표시

'Web Basic > CSS3' 카테고리의 다른 글

[CSS3] 내부 스타일, 외부 스타일 시트와 인라인 스타일이란? (0)	2018.03.30
[CSS3] CSS란? 기초 용어 및 표기 방법 (0)	2018.03.19

1. <caption>태그, <figcaption>태그 - 표에 제목 붙이기

기본형 : <caption> 표 제목 </caption>

<figcaption> 표 제목 </figcaption>

- 표에 제목을 붙일 때 보통 <caption>태그를 사용하지만 <figcaption>태그를 사용할 때도 있습니다. 두 태그의 사용 방법을 알아보겠습니다.

1) <caption>태그

1. <caption>태그는 <table>태그 바로 다음에 사용합니다.

2. <caption>태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.

다음은 <caption>태그를 사용한 코드입니다.

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

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><catption>태그 사용 방법</title>
</head>
<body>
    <table border="1">
        <caption>컴퓨터 프로그래밍</caption>
        <tr>
            <td>Java</td>
            <td>Python</td>
            <td>Ruby</td>
        </tr>
        <tr>
            <td>Jsp</td>
            <td>Php</td>
            <td>Node js</td>
        </tr>
        <tr>
            <td>HTML5</td>
            <td>CSS3</td>
            <td>JavaScript</td>
        </tr>
    </table>
</body>  
</html>

cs

<사진 1.1>

<사진 1.1> 코드는 1행에는 컴퓨터 프로그래밍 언어를 작성하였고, 2행은 서버 단 언어를 작성하였으며 3행은 웹 베이직 3개를 작성했습니다.

<caption>태그는 <table>태그 다음에 위치하고 있습니다. 다음은 결과 화면입니다.

<사진 1.1 결과 화면>

<caption>태그를 사용한 결과 화면입니다. <caption>태그로 작성한 테이블 제목은 표의 중앙에 표시되었습니다.

2) <figcaption>태그

1. <figcaption>태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption>태그를 이용해 제목을

입력합니다.

2. <caption>태그와 달리 <figcaption>태그는 중앙에 정렬되지 않습니다.

3. <figcaption>태그를 <table>태그보다 앞에 사용하면 표 위에 제목이 표시됩니다.

4. <figcaption>태그를 </table>태그보다 뒤에 사용하면 표 아래에 제목이 표시됩니다.

다음은 <figcaption>태그를 <table>태그 앞에 사용한 코드입니다.

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

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><catption>태그 사용 방법</title>
</head>
<body>
    <figure>
        <table border="1">
            <figcaption>컴퓨터 프로그래밍</figcaption>
            <tr>
                <td>Java</td>
                <td>Python</td>
                <td>Ruby</td>
            </tr>
            <tr>
                <td>Jsp</td>
                <td>Php</td>
                <td>Node js</td>
            </tr>
            <tr>
                <td>HTML5</td>
                <td>CSS3</td>
                <td>JavaScript</td>
            </tr>
        </table>
    </figure>
</body>  
</html>

cs

<사진 1.2>

다음은 결과 화면입니다.

<사진 1.2 결과 화면>

저작자표시

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <abbr>태그 사용 방법 (0)	2019.12.05
[HTML5] <button> 태그 이해하기 (0)	2019.12.03
[HTML5] colspan, rowspan 속성 사용 방법 (2)	2018.03.19
[HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0)	2018.03.14
[HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0)	2018.03.14

1. CSS란?

- CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. HTML이 텍스트나 이미지, 표 같은 각 요소를 웹 문서에

넣어 뼈대를 만드는 것이라면 CSS는 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상 등 디자인 요소를 담당합니다.

2. 스타일 형식

1

 p {text-align:center;} /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */

cs

<사진 1.1>

p : 맨 앞에 나와 있는 부분 즉 위의 예시에서 'p'부분을 '선택자(selector)' 라고 합니다. 이는 앞으로 만들 스타일 규칙을 어디에

적용할 것인지 나타냅니다. <p> 태그가 적용된 요소에 중괄호( { } ) 사이의 스타일을 적용하겠다는 의미입니다.

text-align : 해당 위치에 있는 것을 '스타일 속성' 이라 부릅니다.

center : 해당 위치에 있는 것을 '속성 값' 이라 부릅니다.

* '스타일 속성'과 '속성 값'은 콜론( : )으로 구분하여 '스타일 속성' : '속성 값' 형식으로 표현합니다.

'스타일 속성'과 '속성 값' 다음에는 세미콜론( ; )으로 구분합니다. 그래서 만약 두 개의 속성을 적용한다면 다음과 같이

작성할 수 있습니다.

1

p{ color:blue; font-size:16px;} /* 텍스트 단락의 글자 색 파란색, 글자 크기 16px */

cs

<사진 1.2>

3. 스타일을 표기하는 방법

스타일 규칙은 세미콜론( ; )으로 구분하여 중괄호( { } ) 안에 나열하면 상관없지만 앞에서 본 것처럼 한 줄로 길게 쓰면 속성이

여러 개일 경우, 구분하기 어렵다는 단점이 있습니다. 그래서 공백을 최소화 시켜 파일 크기를 작게 만들 거라면 한 줄로

표기하지만 개발자가 읽기 쉽고 유지/보수가 쉬우려면 여러 줄에 걸쳐 작성하는 것이 좋습니다.

다시 말해 아래의 두 코드는 모두 같은 코드입니다.

1

h2{font-size:20px; color:orange;}

cs

<사진 1.3>

한줄로 작성한 코드입니다.

1
2
3
4

h2{
    font-size:20px;
    color:orange;    
}

cs

<사진 1.4>

여러 줄로 작성한 코드입니다.

한줄로 작성한 코드를 여러줄로 작성한 코드입니다. 다시 강조하지만 <사진 1.3>, <사진 1.4> 코드는 모양새는 다르지만 같은 기능을 하는 코드입니다.

저작자표시

'Web Basic > CSS3' 카테고리의 다른 글

[CSS3] 내부 스타일, 외부 스타일 시트와 인라인 스타일이란? (0)	2018.03.30
[CSS3] 스타일 주석 표기 방법 (0)	2018.03.30

1. colspan 속성 - 열 합치기

기본형 : <td colspan="합칠 셀의 개수"> 내용 </td>

- colspan 속성의 col은 영어로 '열'을 뜻하는 column의 앞글자 col을 사용한 것입니다. 즉, 열을 합치고자할 때 colspan속성을 사용합니다.

다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

<사진 1.1>

우선 <사진 1.1>의 좌측에 있는 표를 만드는 코드입니다.

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

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>colspan 속성 사용 방법</title>
</head>
<body>
    <table border="1" width="250" height="100">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.2>

<사진 1.2>의 table속성을 보면 width속성과 height속성이 있습니다. 이 속성을 설정해주어야 커다란 빈 공간으로 셀이 생성됩니다.

width속성과 height속성을 사용하지 않으면 아주 작은 셀로 표가 생성됩니다. 다음은 결과 화면입니다.

<사진 1.2 결과 화면>

이제 이 표의 2행2열 부분의 우측부분을 하나의 셀로 결합시켜보겠습니다.

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

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>colspan 속성 사용 방법</title>
</head>
<body>
    <table border="1" width="250" height="100">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td colspan="3"></td>
        </tr>
        
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.3>

<사진 1.3> 코드는 2행2열의 <td>코드 내부에 colspan 속성과 속성 값 3을 작성하였습니다. 열을 통합 시킬 것이므로 colspan 속성을 사용했으며

3개의 셀을 합칠 것이므로 속성 값을 3으로 설정했습니다. 다음은 결과 화면 입니다.

<사진 1.3 결과 화면>

2. rowspan 속성 - 행 합치기

기본형 : <td rowspan="합칠 셀의 개수"> 내용< /td>

기본형 : <th rowspan="합칠 셀의 개수"> 내용< /th>

- rowspan 속성의 row는 영어로 '행'을 뜻하는 row 입니다. 즉, 행을 합치고자할 때 rowspan속성을 사용합니다.

다음의 사진과 같이 세 개의 셀을 하나의 셀로 합쳐보겠습니다

.

<사진 1.4>

<사진 1.4>의 좌측에 있는 표는 위에서 이미 작성하였으므로 바로 rowspan 속성을 사용하여 셀을 합치는 코드를 작성해보고 결과를 확인해보겠습니다.

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

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>rowspan 속성 사용 방법</title>
</head>
<body>
    <table border="1" width="250" height="100">
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.5>

3개의 행을 합칠 것이므로 rowspan 속성을 사용하였으며, 속성 값으로 3을 설정했습니다. 만약 2개의 행을 합치고자 한다면 속성 값을 2로 주면 됩니다.

그리고 2행과 3행 부분을 보면 <td></td>속성이 4개에서 3개로 수정되어 있습니다. 이유는 셀을 합치고 결과적으로 표현되는 표는 <사진 1.4>의

우측 표와 같이 3개의 셀이므로 <td></td>속성을 3개를 작성합니다. 다음은 결과 화면입니다.

<사진 1.5 결과 화면>

저작자표시

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <button> 태그 이해하기 (0)	2019.12.03
[HTML5] <caption>, <figcaption>태그 사용 방법 (0)	2018.03.20
[HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0)	2018.03.14
[HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0)	2018.03.14
[HTML5] <ul>, <ol>, <li>태그 사용 방법 (0)	2018.03.12

1. <table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기

기본형 :

<table>

<tr>

<th></th> 

<td>내용</td>

</tr>

</table>

- 우리가 일상에서 자주 보는 표를 머릿속으로 상상해보세요. 가로, 세로로 각각 행과 열이 있고 그 안에 내용이 입력됩니다.

이런 표를 만들 때는 표를 만드는 태그와 행을 만드는 태그, 열을 만드는 태그가 각각 필요합니다.

이렇게 하나의 표를 만들기 위해서는 여러 개의 태그가 필요합니다.

2. 기본적인 표 만들기

우선 <table> 태그를 이용하여 표 전체 윤곽을 잡은 다음에 행(row)을 먼저 만들고 각 행마다 몇 개의 셀(cell)이 들어갈지 결정합니다.

예를 들어 2개의 행과 3개의 열을 가진 표를 만든다면 다음과 같은 순서로 만들면 됩니다.

1) <table> 태그를 이용하여 표 자리를 만듭니다.

1
2
3

<table>
 
<table>

cs

<사진 1.1>

2) <tr> 태그를 사용하여 2개의 행을 만듭니다.

1
2
3
4
5
6
7
8

<table>
    <tr>
        
    </tr>
    <tr>
        
    </tr>
</table>

cs

<사진 1.2>

3) <td> 태그를 사용하여 각 행마다 셀을 3개씩 만듭니다.

1
2
3
4
5
6
7
8
9
10
11
12

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

cs

<사진 1.3>

4) 각 셀에 들어갈 내용은 <td>와 </td> 사이에 입력합니다.

다음은 내용이 들어간 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><table>, <tr>, <td>, <th> 태그 사용 방법</title>
</head>
<body>
<table>
    <tr>
        <th>제목 셀</th>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
    <tr>
        <th>제목 셀</th>
        <td>2행 2열</td>
        <td>2행 3열</td>
        <td>2행 4열</td>
    </tr>
</table>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.4>

다음은 <사진 1.4> 결과 화면입니다.

<사진 1.4 결과 화면>

결과 화면을 보면 입력한 대로 출력이 되었지만 우리가 생각했던 표가 아닙니다. 왜냐하면 표를 구분 짓는 테두리 없이 표현이 되었기 때문입니다.

테두리를 표현하고자 한다면 <table> 태그 안에 border 속성으로 속성 값을 1을 주어야 합니다. 다음은 border 속성을 입력한 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><table>, <tr>, <td>, <th> 태그 사용 방법</title>
</head>
<body>
<table border="1">
    <tr>
        <th>제목 셀</th>
        <td>1행 2열</td>
        <td>1행 3열</td>
        <td>1행 4열</td>
    </tr>
    <tr>
        <th>제목 셀</th>
        <td>2행 2열</td>
        <td>2행 3열</td>
        <td>2행 4열</td>
    </tr>
</table>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.5>

다음은 결과 화면입니다.

<사진 1.5 결과 화면>

<table> 태그 안에 border 속성을 입력한 결과입니다. border 속성값으로 1을 입력했지만 숫자가 올라갈수록 테두리 색이 진하게 표현됩니다.

저작자표시

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <caption>, <figcaption>태그 사용 방법 (0)	2018.03.20
[HTML5] colspan, rowspan 속성 사용 방법 (2)	2018.03.19
[HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0)	2018.03.14
[HTML5] <ul>, <ol>, <li>태그 사용 방법 (0)	2018.03.12
[HTML5] <span> 태그 사용 방법 (0)	2018.03.11

1. <dl>, <dt>, <dd> 태그 - 설명 목록 만들기

기본형 :

<dl>

<dt> 제목 </dt>

<dd> 설명 </dd>

...

</dl>

- <dl> 태그는 사전 구성처럼 '제목'<dt>과 '설명'<dd>이 한 쌍인 설명 목록(Description List)을 만듭니다.

<dt> 태그는 제목을 표시할 때 사용됩니다.

<dd> 태그는 설명을 표시합니다. 하나의 <dt> 태그에 여러 개의 <dd> 태그를 가질 수 있습니다.

다음은 <dl>, <dt>, <dd> 태그를 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><dl>, <dt>, <dd> 태그 사용 방법</title>
</head>
<body>
    <h1>내가 좋아하는 연예인</h1>
    <dl>
        <dt>배우</dt>
        <dd>이연희</dd>
        <dd>조승우</dd>
        <dd>전지현</dd>
        <dt>가수</dt>
        <dd>박효신</dd>
        <dd>아이유</dd>
        <dd>성시경</dd>
    </dl>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.1>

제가 좋아하는 배우 3명과 가수 3명을 작성하였습니다. 다음은 결과 화면입니다.

<사진 1.1 결과 화면>

저작자표시

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] colspan, rowspan 속성 사용 방법 (2)	2018.03.19
[HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0)	2018.03.14
[HTML5] <ul>, <ol>, <li>태그 사용 방법 (0)	2018.03.12
[HTML5] <span> 태그 사용 방법 (0)	2018.03.11
[HTML5] <mark>태그 사용 방법 (0)	2018.03.11

1. <ul> 태그 - 순서 없는 목록 만들기

기본형 :

<ul>

<li> 내용 </li>

...

</ul>

- <ul> 태그는 Unordered List의 약자로써 '정돈되지 않은 리스트'를 뜻 합니다.

<ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용하여 각 항목을 표시합니다. <ul> 태그 사용 시 각 항목 앞에 작은 원이나 사각형 같은

불릿(bullet)이 붙습니다. 작은 원이 디폴트 값입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><ul>, <li>태그 사용 방법</title>
</head>
<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ul>
</body>  
</html>

cs

<사진 1.1>

<사진 1.1> 코드는 <ul> 태그와 <li> 태그를 사용했습니다. 그리고 <li> 태그의 끝 태그인 </li> 태그를 생략해도 결과는 같습니다.

<사진 1.1 결과 화면>

결과 화면을 보면 a, b, c, d, e의 앞에 작은 원인 불릿이 붙어서 출력되는 것을 확인할 수 있습니다.

2. <ol> 태그 - 순서 목록 만들기

기본형 :

<ol>

<li> </li>

....

</ol>

- <ol> 태그는 Ordered List의 약자로써 '정돈된 리스트'를 뜻 합니다.

<ul> 태그처럼 순서 없는 목록이 아닌, 순서를 알고 싶은 목록을 사용하고 싶으면 <ol> 태그를 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><ol>, <li>태그 사용 방법</title>
</head>
<body>
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
    </ol>
</body>  
</html>

cs

<사진 1.2>

<사진 1.2> 코드는 <사진 1.1> 코드에서 <ul> 태그 부분을 <ol> 태그로만 수정한 코드입니다. 아래는 결과 화면입니다.

<사진 1.2 결과 화면>

<ul> 태그와 달리 <ol> 태그는 순서를 확인할 수 있는걸 볼 수 있습니다. 물론 <li> 태그의 끝 태그는 생략 가능합니다.

2.1 <ol> 태그의 Type 속성

<사진 1.3>

위 표는 <ol> 태그안에서 사용할 수 있는 속성 값들 입니다. 사용법은 아래와 같습니다.

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

<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><ol>, <li>태그 사용 방법</title>
</head>
<body>
    <ol type="1"> <!-- 속성 값 1은 type 속성의 디폴트 값이므로 작성하지 않아도 결과는 똑같습니다. -->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
 
    <ol type="a">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
 
    <ol type="A">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
 
    <ol type="i">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
 
    <ol type="I">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
</body>  
</html>
Colored by Color Scripter

cs

<사진 1.4>

아래는 결과 화면입니다.

<사진 1.4 결과 화면>

저작자표시

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <table>, <tr>, <td>, <th>태그 사용 방법 (0)	2018.03.14
[HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0)	2018.03.14
[HTML5] <span> 태그 사용 방법 (0)	2018.03.11
[HTML5] <mark>태그 사용 방법 (0)	2018.03.11
[HTML5] <q>태그 사용 방법 (0)	2018.03.08

데니스의 놀이터

Web Basic

[HTML5] <abbr>태그 사용 방법

<abbr>태그

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <button> 태그 이해하기

<button>태그의 type 속성과 속성 값

'Web Basic > HTML5' 카테고리의 다른 글

[CSS3] 내부 스타일, 외부 스타일 시트와 인라인 스타일이란?

'Web Basic > CSS3' 카테고리의 다른 글

[CSS3] 스타일 주석 표기 방법

'Web Basic > CSS3' 카테고리의 다른 글

[HTML5] <caption>, <figcaption>태그 사용 방법

'Web Basic > HTML5' 카테고리의 다른 글

[CSS3] CSS란? 기초 용어 및 표기 방법

'Web Basic > CSS3' 카테고리의 다른 글

[HTML5] colspan, rowspan 속성 사용 방법

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <table>, <tr>, <td>, <th>태그 사용 방법

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <dl>, <dt>, <dd>태그 사용 방법

'Web Basic > HTML5' 카테고리의 다른 글

[HTML5] <ul>, <ol>, <li>태그 사용 방법

'Web Basic > HTML5' 카테고리의 다른 글

+ Recent posts

티스토리툴바