메인 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    2개의 iframe을 가집니다.
    <hr>
    <iframe src="leftframe.html" name="left" width="200" height="500"></iframe>
    <iframe src="rightframe.html" name="right" width="400" height="500"></iframe>
</body>
</html>
 cs

 

왼쪽 프레임 페이지

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- leftframe.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    이곳은 왼쪽 프레임 입니다.<br>
    <ul>
        <li><a href="http://jspstudy.co.kr" target="right">jspstudy</a></li>
        <li><a href="http://www.dt.co.kr" target="right">dt</a></li>
        <li><a href="http://www.etnews.com" target="right">dtnews</a></li>
    </ul>
</body>
</html>
 cs

위 코드를 적용하면 아래와 같이 나옵니다.

링크를 누르면 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

form 폼 태그  (0) 2020.03.04
html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04
iframe 사용 예제1  (0) 2020.03.03
a 태그에 다운로드 속성(html5 지원)  (0) 2020.03.03
태그 앵커 만들기 (페이지 내에서 이동)  (0) 2020.03.03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>2개의 IT전문 사이트 가져오기</h3>
 
    <!-- iframe을 이용하여 페이지 내에 다른 페이지 띄우기 -->
    <iframe src="http://www.dt.co.kr" width="300" height="300"></iframe>
    <iframe src="http://www.etnews.com" width="300" height="300"></iframe>
</body>
</html>
 cs

 

위 코드를 적용하면 아래와 같이 나옵니다.

 

'Web > Html_Css' 카테고리의 다른 글

html 미디어 (비디오, 오디오) 재생  (0) 2020.03.04
페이지 내의 프레임에 사이트 띄우기  (0) 2020.03.04
a 태그에 다운로드 속성(html5 지원)  (0) 2020.03.03
태그 앵커 만들기 (페이지 내에서 이동)  (0) 2020.03.03
하이퍼링크 만들기  (0) 2020.03.03
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>a 태그에 다운로드 속성(html5 지원)</h3>
    <hr>
    <ul>
        <!-- 
            서버가 아닌, 파일에서 링크를 클릭하면
            다운로드 속성이더라도 다운로드가 되지않고 페이지가 열린다.
            vscode를 사용한다면 live server 확장을 설치하여 실행해 본다.
            해당 페이지에서 마우스 우클릭으로 open with live server 실행.
        -->
        <li><a href="media/Elvis.png" download="">엘비스 이미지 다운로드</a></li>
        <li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드</a></li>
        <li><a href="media/EmbraceableYou.mp3" download>EmbraceableYou.mp3 다운로드</a></li>
        <li><a href="ex2.html" download>ex2.html 다운로드</a></li>
        
        <!--
             브라우저에서 실행 가능한 파일은 바로 켜지고 
             실행이 되지 않으면 download 속성이 없어도 바로 다운로드됨.
             ex) hwp 파일은 실행되지 않아서 다운로드됨.
        -->
        <li><a href="media/test.hwp">test.hwp 다운로드</a></li>
    </ul>
</body>
</html>
cs

'Web > Html_Css' 카테고리의 다른 글

페이지 내의 프레임에 사이트 띄우기  (0) 2020.03.04
iframe 사용 예제1  (0) 2020.03.03
태그 앵커 만들기 (페이지 내에서 이동)  (0) 2020.03.03
하이퍼링크 만들기  (0) 2020.03.03
하이퍼링크 예제1  (0) 2020.03.03
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>a 태그 앵커 이동 만들기</h3>
    <!-- 링크를 누르면 페이지 내의 해당 앵커 id 위치로 화면이 이동된다. -->
    <ul>
        <li><a href="#love">Love me tender</a></li>
        <li><a href="#can">Can't help falling in love</a></li>
        <li><a href="#it">It''s now or never</a></li>
    </ul>
    <h3 id="love">Love me tender</h3>
        Love me tender, Love me sweet, Never let me go.<br>
        You have made my life complete, <br>
        And I love you so.<br>
        Love me tender, Love me true, <br>
        All my dreams fulfilled.<br>
        For my darling I love you, And I always will.<br>
        <h3 id="can">Can't help falling in love</h3>
        Love me tender, Love me sweet, Never let me go.<br>
        You have made my life complete, And I love you so.<br>
        Love me tender, Love me true, All my dreams fulfilled.<br>
        For my darling I love you, And I always will.<br>
        <h3 id="it">It''s now or never</h3>
        It's now or never, Come hold me tight<br>
        Kiss me my darling, Be mine tonight<br>
        Tomorrow will be too late,<br>
        It's now or never. My love won't wait.<br>
</body>
</html>
cs

'Web > Html_Css' 카테고리의 다른 글

iframe 사용 예제1  (0) 2020.03.03
a 태그에 다운로드 속성(html5 지원)  (0) 2020.03.03
하이퍼링크 만들기  (0) 2020.03.03
하이퍼링크 예제1  (0) 2020.03.03
테이블 만들기  (0) 2020.03.03
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>하이퍼링크 만들기</h3>
 
    <!--
        href의 값은 "URL" / "URL#앵커이름 / "URL#앵커이름"
        (앵커는 페이지 내의 id등의 위치)
        target의 값은 "_blank" / "_self" / "_parent" / "_top"
 
        target의 디폴트 값은 "_self"
        target="_blank"는 새창에서 링크의 페이지 실행.
    -->
    <a href="http://naver.com" target="_blank">네이버</a><br>
    <a href="http://google.com" target="_self">구글</a><br>
 
    <!-- 
        frame 태그에 적용 되는 target :
 
        target="_parent"는 부모프레임에 오픈
        target="_top" 전체화면에 오픈
    -->
    <a href="http://youtube.com" target="_parent">유튜브</a><br>
    <a href="ex12.html" target="_top">ex12</a><br>
    <a href="ex14.html" target="">ex14</a><br>
    <a href="ex14.html#can" target="">ex14 #can</a><br>
</body>
</html>
 cs

 

'Web > Html_Css' 카테고리의 다른 글

a 태그에 다운로드 속성(html5 지원)  (0) 2020.03.03
태그 앵커 만들기 (페이지 내에서 이동)  (0) 2020.03.03
하이퍼링크 예제1  (0) 2020.03.03
테이블 만들기  (0) 2020.03.03
<ul> <ol> 태그 사용 예시 - 글자에 번호 붙이기  (0) 2020.03.03
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>하이퍼링크 만들기</h3>
 
    <!--
        href의 값은 "URL" / "URL#앵커이름 / "URL#앵커이름"
        target의 값은 "_blank" / "_self" / "_parent" / "_top"
 
        target의 디폴트 값은 "_self"
        target="_blank"는 새창에서 링크의 페이지 실행.
    -->
    <a href="http://naver.com" target="_blank">네이버</a><br>
    <a href="http://google.com" target="_self">구글</a><br>
 
    <!-- 
        frame 태그에 적용 되는 target :
 
        target="_parent"는 부모프레임에 오픈
        target="_top" 전체화면에 오픈
    -->
    <a href="http://youtube.com" target="_parent">유튜브</a><br>
    <a href="ex12.html" target="_top">ex12</a><br>
</body>
</html>
 cs

 

'Web > Html_Css' 카테고리의 다른 글

태그 앵커 만들기 (페이지 내에서 이동)  (0) 2020.03.03
하이퍼링크 만들기  (0) 2020.03.03
테이블 만들기  (0) 2020.03.03
<ul> <ol> 태그 사용 예시 - 글자에 번호 붙이기  (0) 2020.03.03
<img> 태그 - html 이미지 넣기  (0) 2020.03.03
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
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>테이블 만들기</h3>
    <!-- border는 테두리의 두께이다. 디폴트는 0 -->
    <table border="1" bordercolor="red">
        <caption>1학기 성적</caption>
        <!-- tr은 하나의 행(가로줄의 개수)을 의미한다-->
        <tr>
            <!-- th는 하나의 열을 만들며, 기본적으로 볼드체이며 중앙정렬이다. -->
            <th width="100">이름</th>
            <th width="50">HTML</th>
            <th width="50">CSS</th>
        </tr>
        <tr>
            <!-- td는 하나의 열을 만든다. -->
            <td>홍길동</td>
            <td>100</td>
            <td>75</td>
        </tr>
        <tr>
            <td>홍길자</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </table><hr>
    <table border="1">
        <caption>1학기 성적</caption>
        <!-- thead는 제일 위에 들어감 -->
        <thead>
            <th width="100">이름</th>
            <th width="50">HTML</th>
            <th width="50">CSS</th>
        </thead>
        <tr>
            <td>홍길동</td>
            <td>100</td>
            <td>75</td>
        </tr>
        <tr>
            <td>홍길자</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <!-- tfoot은 제일 위에 들어감 -->
        <tfoot>
            <tr>
                <th>합</th><th>190</th><th>165</th>
            </tr>
        </tfoot>
    </table><hr>
    <table>
        <caption>좋아하는 과일</caption>
        <tbody>
            <tr>
                <td><img src="media/apple.png"></td>
                <td><img src="media/banana.png"></td>
                <td><img src="media/mango.png"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
 cs

위 코드를 적용하면 아래와 같이 나옵니다.

 

--

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px">
        <tr>
            <th width="60" height="100">201호</th>
            <th width="60">202호</th>
            <th width="60">203호</th>
        </tr>
        <tr>
            <th colspan="3" height="100">주인집</th>
        </tr>
    </table><hr>
    <table border="1px">
        <tr>
            <th rowspan="2" width="60">201호</th>
            <th width="60" height="100">202호</th>
            <th width="60">203호</th>
        </tr>
        <tr>
            <th width="60" height="100">주인집2</th>
            <th width="60">주인집3</th>
        </tr>
    </table><hr>
    <table border="1px">
        <tr>
            <th rowspan="2" width="60">201호</th>
            <th width="60" height="100">202호</th>
            <th width="60">203호</th>
        </tr>
        <tr>
            <th colspan="2" height="100">주인집2</th>
        </tr>
    </table><hr>
</body>
</html>
 cs

위 태그를 실행하면 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

하이퍼링크 만들기  (0) 2020.03.03
하이퍼링크 예제1  (0) 2020.03.03
<ul> <ol> 태그 사용 예시 - 글자에 번호 붙이기  (0) 2020.03.03
<img> 태그 - html 이미지 넣기  (0) 2020.03.03
메타데이터, metadata  (0) 2020.03.03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h3>뿌리식물</h3>
<ul type = "square">
    <li>감자</li>
    <li>고구마</li>
</ul>
<ul type = "circle">
    <li>감자</li>
    <li>고구마</li>
</ul>
 
<!--
    type는 1/a/A/I/i/disc/square/circle 등 가능
    start는 무슨 숫자부터 시작할 것인지 선택
-->
<ol type = "1" start = "3">
    <li>감자</li>
    <li>고구마</li>
</ol>
 
 
 cs

위의 코드를 적용하면 아래처럼 나옵니다.

html5에서는 type 속성을 지원하지 않지만 이전의 html의 속성을 모두 표현 가능하기 때문에 문제는 없음 

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>리스트 만들기</h3>
    <hr>
    <h3>라면 끓이는 순서</h3>
    <!-- ol 리스트는 순서가 있다. -->
    <ol type="A">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ol>
    <ol type="1">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ol>
    <!-- ul 리스트는 순서가 없다. 디폴트값은 disk -->
    <ul>
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ul>
    <ul type="circle">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ul>
</body>
</html>
 cs

위의 코드를 적용하면 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

하이퍼링크 예제1  (0) 2020.03.03
테이블 만들기  (0) 2020.03.03
<img> 태그 - html 이미지 넣기  (0) 2020.03.03
메타데이터, metadata  (0) 2020.03.03
<p>태그, <br/>태그, <hr태그> 예시  (0) 2020.03.02

+ Recent posts

티스토리툴바