'분류 전체보기' 카테고리의 글 목록 (85 Page)

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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

테이블은 사이트 제작시 중요한 요소이다.

개발자에게는 테이블과 폼이 중요하다.

--

정적페이지 - HTML(only)

- 개발자가 만든 페이지 그대로 보이는 것

동적페이지 - JSP, ASP, PHP -> DB연동

- 유저들이 게시판에 글을 쓰거나, 댓글을 쓰는 등의 기능이 포함.

'낙서장' 카테고리의 다른 글

웹서버 메모1 (0)	2020.03.04
이클립스 코드 실행 단축키, form 태그 method 속성 (0)	2020.03.04
포트번호, iframe (0)	2020.03.03
브라우저 출력 (0)	2020.03.03
알아둘것, (0)	2011.12.27

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>
 
 
Colored by Color Scripter

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>
Colored by Color Scripter

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

페이지에 접속하면, html, css, script, 이미지, 사운드 등 모두 내 컴퓨터 어딘가에 저장되서 출력된다.

'낙서장' 카테고리의 다른 글

웹서버 메모1 (0)	2020.03.04
이클립스 코드 실행 단축키, form 태그 method 속성 (0)	2020.03.04
포트번호, iframe (0)	2020.03.03
테이블, 정적페이지, 동적페이지 (0)	2020.03.03
알아둘것, (0)	2011.12.27

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>
Colored by Color Scripter

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페이지에 대한 메타 ㄷ이터를 담기 위한 태그들

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>
Colored by Color Scripter
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>
 
Colored by Color Scripter

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

Jaybon 의 지식창고