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

img src에는 3가지 경로를 입력가능하다.

1.상대경로 - html 또는 css파일을 기준으로 한 경로

2.절대경로 - 시스템 루트로부터의 경로

3.웹주소

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
    <p>엘비스 프레슬리의 사진입니다.</p>
    <!-- 상대적인 위치값 (html이나 css파일 기준으로의 위치) -->
    <img src="media/Elvis1.jpg" width="150" height="200" alt="엘비스">
    <!-- 절대적인 위치값 (사용하지 않는 것을 권장) -->
    <img src="C:/html/lotte.png" width="150" height="200" alt="롯데자이언츠로고">
    <!-- 이미지가 없을 경우 -->
    <img src="aaa.jpg" width="150" height="200" alt="aaa사진">
    <!-- 웹주소 -->
    <img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png" alt="다음 로고">
</body>
</html>
 cs

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

 

--

이미지의 링크가 없으면  alt 속성의 이미지나 문자가 나타난다.

1
2
3
4
5
6
7
8
9
10
<!-- 링크의 이미지가 있을 경우-->
<img src = "https://upload.wikimedia.org/wikipedia/
commons/thumb/1/1b/Internet_Explorer_9_icon.svg/
256px-Internet_Explorer_9_icon.svg.png" 
alt = "이미지가 없습니다." width = "100px" height = "100px">
 
<!-- 링크의 이미지가 없을 경우-->
<img src = "https://upload.wikimedia.org/wikipedia/
commons/thumb/1/1b/Internet_Explorer_9_icon.svg/a.png" 
alt = "이미지가 없습니다." width = "100px" height = "100px">
 cs

 

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

좌측: 링크의 이미지가 있는 경우, 우측: 링크의 이미지가 없는 경우 

 

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

테이블 만들기  (0) 2020.03.03
<ul> <ol> 태그 사용 예시 - 글자에 번호 붙이기  (0) 2020.03.03
메타데이터, metadata  (0) 2020.03.03
<p>태그, <br/>태그, <hr태그> 예시  (0) 2020.03.02
<!DOCTYPE html> 의 의미  (0) 2020.03.02

메타데이터 - 데이터에 대한 데이터

ex)

사진 데이터의 메타데이터 : 사진 찍은 장소, 시간

오디오 데이터 : 재생 시간, 채널 수

이미지 데이터 : 이미지의 폭, 높이 컬러 해상도

--

메타 태그들은 <head> 안에 작성

--

검색사이트들은 메타 정보를 가지고 검색을 진행함.

ex)

구글은 해당 사이트의 메타 정보의 값을 이용하여 사이트를 검색한다고 함.

--

html페이지에 대한 메타 ㄷ이터를 담기 위한 태그들

<base> <link> <script> <style> <title> <meta>

<script>는 <body>내에서도 작성가능

 

 

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 문자의 속성, utf-8은 동서양권 대부분 문자를 입력 가능한 포맷 -->
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- name와 content는 한쌍, 작성자에 대한 정보 -->
    <meta name="author" content="홍길동">
 
    <!-- name와 content는 한쌍, 홈페이지 정보 -->
    <meta name="description" content="임의 홈페이지">
    
    <!-- 외부의 css파일을 이용하여 스타일을 적용 -->
    <link type="text/css" rel="stylesheet" href="mystyle.css">
 
    <title>Document</title>
</head>
<body>
    <p>p태그의 테스트입니다.</p>
    <h1>h1태그의 테스트입니다.</h1>
    <h2>h2태그의 테스트입니다.</h2>
</body>
</html>
cs

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

<ul> <ol> 태그 사용 예시 - 글자에 번호 붙이기  (0) 2020.03.03
<img> 태그 - html 이미지 넣기  (0) 2020.03.03
<p>태그, <br/>태그, <hr태그> 예시  (0) 2020.03.02
<!DOCTYPE html> 의 의미  (0) 2020.03.02
폼 태그  (0) 2020.01.19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">  
        <title>Document</title>
    </head>
    <body>
        <p>단락을 나누는 태그입니다.</p> <!--div, h1~6, p,  ul, li 등은 블록요소이다.-->
        <p>단락을 나누는 태그입니다.</p>
        <p>단락을 나누는 태그입니다.</p>
        한줄을 구분하는 태그입니다.<br/> <!-- <br/>은 <br>로 쓸 수 있다. -->
        한줄을 구분하는 태그입니다.<br/>
        한줄을 구분하는 태그입니다.<br/>
        수평선을 표현 하는 태그는 <hr color="purple"> 입니다. <br/> <!-- 잘 알려진 색깔은 purple과 같이 쓸 수 있다.  -->
        수평선을 표현 하는 태그는 <hr color="#CCA63D"> 입니다. <br/> <!-- #CCA63D와 같은 16진수 값을 쓸 수 있다. -->
        수평선을 표현 하는 태그는 &lt;hr&gt; 입니다. <br/> <!-- 태그가 아닌 문자로 <,>등을 표현 하려면 왼쪽처럼 다른 이름을 써야한다. -->
 
    </body>
</html>
 
 cs

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

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

<img> 태그 - html 이미지 넣기  (0) 2020.03.03
메타데이터, metadata  (0) 2020.03.03
<!DOCTYPE html> 의 의미  (0) 2020.03.02
폼 태그  (0) 2020.01.19
html5과 이전버전의 미디어 차이  (0) 2020.01.19

html5.0이라는 뜻이다.

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

메타데이터, metadata  (0) 2020.03.03
<p>태그, <br/>태그, <hr태그> 예시  (0) 2020.03.02
폼 태그  (0) 2020.01.19
html5과 이전버전의 미디어 차이  (0) 2020.01.19
<table> <tr><td> 태그 사용 예시 - html 표만들기  (0) 2020.01.19

+ Recent posts

티스토리툴바