* HTML : 하이퍼링크 형식의 마크업 기반 언어
<html>
<head>
</head>
<body>
Hello HTML World
</body>
</html>
- 위의 코드로 페이지 만들고, 소스 보기로 확인 가능
- html은 소스가 그대로 노출됨
- 단축키
주석 : ctrl + / -->
문장 복사 : shift + alt + 방향키 아래
이동 : alt + 화살표 방향키 위, 아래
한 줄 삭제 : ctrl + shift + k
아래에 빈 행 삽입 : ctrl + Enter
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<html>
<head>
<title>창제목123</title>
</head>
<body>
<h1>처음 만드는 웹 페이지</h1>
<h3>두번째 만드는 웹 페이지</h3>
<h6>세번째 만드는 웹 페이지</h6>
하하 잘 실행이
<h3>live server</h3>
아무 글
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head>
<title>HTML(Hyper Text Markup Language)</title>
</head>
<body>
<!-- 주석 : ctrl + / -->
<!-- 문장 복사 : shift + alt + 방향키 아래 -->
<!-- 이동 : alt + 화살표 방향키 위, 아래 -->
<!-- 한 줄 삭제 : ctrl + shift + k -->
<!-- 아래에 빈 행 삽입 : ctrl + Enter -->
<h1>특징1</h1>
<h2>특징2</h2>
<h3>특징3</h3>
<h4>특징4</h4>
<h5>특징5</h5>
<h6>특징6</h6>
</body>
</html>
|
cs |
- 리스트
ol(orderd list) : 순서가 있는 리스트
ul(unorderd list) : 순서가 없는 리스트
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<html>
<!-- <html>은 부모, <head>와 <body>는 형제 -->
<head></head>
<body>
<h3>HTML</h3>
<!-- <p> 문단 -->
<!-- <p> element -->
<p>HTML은 웹페이지를 만드는 마크업 언어</p>
<p>HTML은 웹페이지를 만드는 마크업 언어</p>
<p>HTML은 웹페이지를 만드는 마크업 언어</p>
<!-- ol(orderd list) : 순서가 있는 리스트-->
<!-- ul(unorderd list) : 순서가 없는 리스트 -->
<ol>
<!-- li : 각 항목들 표시 (순서 x) -->
<li>HTML은 마크업을 통해서 웹페이지의 구조를 설계</li>
<li>HTML의 요소들은 웹페이지를 구성하는 요소이며
태그를 통해서 표현한다.</li>
<li>태그들은 각자의 기능과 의미를 가지고 웹페이지의 내용을 보여준다.
</li>
</ol>
</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
|
<html>
<head>
<title>글과 문단</title>
</head>
<body>
<h1>글과 문단</h1>
<!-- Lorem : 의미 없는 엉터리 글자 -->
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit iste sint, voluptate vero modi dolorum magni sed. Alias veniam pariatur accusamus sapiente animi sit, repudiandae, nemo officiis quos ipsam suscipit.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, eum sunt libero vitae tenetur quo voluptatibus consequatur corrupti officiis eaque earum mollitia magnam culpa non iure illo possimus illum iusto!</p>
<!-- 하이퍼링크 -->
<a href="http://www.google.com">구글</a>
<a href="http://www.naver.com">네이버</a>
<h3>영화목록</h3>
<!-- 네이버 영화 목록 1위부터 5위까지 제목만 순서가 있는 목록으로 출력 -->
<ol>
<li>스즈메의 문단속</li>
<li>던전 앤 드래곤</li>
<li>더 퍼스트 슬램덩크</li>
<li>웅남이</li>
<li>리바운드</li>
</ol>
</body>
</html>
|
cs |
- 이미지 불러오기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head>
<title>네이버 영화관</title>
</head>
<body>
<!-- <시작태그 속성=값> 내용 </끝태그> -->
<!-- <단독태그 /> : 내용을 쓸 필요가 없는 경우 (ex.img)-->
<!-- <img src="파일경로/파일명" /> -->
<!-- 경로는 상대경로와 절대경로가 존재 -->
<!-- 상대경로 : 현재 디렉토리는 . 부모 디렉토리는 .. -->
<img src="../images/movie_image1.jpg" alt="문단속이미지">
<!-- atl : 대체 -->
<img src="../images/movie_image2.jpg" alt="">
img[src="../images.movie_image2.jpg"] < 이와같이 입력해서 속성을 줌
</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html>
<head></head>
<body>
<h3>영화목록</h3>
<!-- '목록' 누르면 위의 list로 갈 수 있게 -->
<a name = "list"></a>
<!-- 순서가 있는 영화목록 -->
<!-- 멀티 커서 : alt + 마우스 커서 -->
<!-- 하이퍼링크에 #을 붙이면 '내부링크' -->
<ol>
<li><a href="#1번영화">스즈메의 문단속</a></li>
<li><a href="#2번영화">던전 앤 드래곤</a></li>
<li><a href="#3번영화">더 퍼스트 슬램덩크</a></li>
<li><a href="#4번영화">웅남이</a></li>
<li><a href="#5번영화">리바운드</a></li>
</ol>
<!-- 1번영화 클릭하면 이미지로 향하게 -->
<a name="1번영화">
<img src="../images/movie_image1.jpg" width="300" height ="300" alt="스즈메의 문단속">
<!-- '목록' 추가 -->
<a href="#list">[목록]</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="2번영화">
<img src="../images/movie_image2.jpg" width="300" height ="300" alt="던전 앤 드래곤">
<a href="#list">[목록]</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="3번영화">
<img src="../images/movie_image3.jpg" width="300" height ="300" alt="더 퍼스트 슬램덩크">
<a href="#list">[목록]</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="4번영화">
<img src="../images/movie_image4.jpg" width="300" height ="300" alt="웅남이">
<a href="#list">[목록]</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="5번영화">
<img src="../images/movie_image5.jpg" width="300" height ="300" alt="리바운드">
<a href="#list">[목록]</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</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
|
<html>
<head>
<title>표 만들기</title>
</head>
<body>
<!-- 3행 2열짜리 표 만들기 -->
<!-- 표의 너비 300px, 테두리 선 1px, 셀 간의 거리 20, 셀과 컨텐츠 간의 거리 25-->
<table width="300px" border="1", cellspacing="20", cellpadding="25">
<!-- 행 : tr / 열 : td -->
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</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
42
43
44
45
46
47
48
49
50
51
|
<html>
<head>
<title>표</title>
</head>
<body>
<!-- table>(tr>td*5)*5 -->
<!-- cellspacing을 0으로 하면 선 하나로 보임 -->
<table width="500px", border="1", cellspacing = "0", cellpadding="20">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<!-- 13번과 18번 행 결합 -->
<td rowspan="2">13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<!-- <td>18</td> -->
<td>19</td>
<td>20</td>
</tr>
<tr>
<!-- 21번과 22번 열 결합 -->
<td colspan="2">21</td>
<!-- <td>22</td> -->
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
</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
|
<html>
<head><title>Cold Brew</title></head>
<body>
<h1>리저브 콜드 브루</h1>
<h3>리저브 커피 마스터의 정성으로 차갑게 추출한 깊고 부드러운 풍미의 커피</h3>
<img src="../images/coldbrew.jpg" weight = "300", height = "300" alt="리저브 콜드 브루">
<br><br><br>
<table width = "500", border="1", cellspacing="0", cellpadding="20">
<tr>
<td colspan="4">제품 영양 정보 - Tall(톨) / 355ml (12 fl oz)</td>
<!-- <td></td> -->
<!-- <td></td> -->
<!-- <td></td> -->
</tr>
<tr>
<td >1회 제공량(kcal)</td>
<td align=right>5</td>
<td>나트륨(mg)</td>
<td align=right>0</td>
</tr>
<tr>
<td>포화지방(g)</td>
<td align=right>0</td>
<td>당류(g)</td>
<td align=right>0</td>
</tr>
<tr>
<td>단백질(g)</td>
<td align=right>0</td>
<td>카페인(mg)</td>
<td align=right>190</td>
</tr>
</table>
</body>
</html>
|
cs |
리저브 콜드 브루
리저브 커피 마스터의 정성으로 차갑게 추출한 깊고 부드러운 풍미의 커피
| 제품 영양 정보 - Tall(톨) / 355ml (12 fl oz) | |||
| 1회 제공량(kcal) | 5 | 나트륨(mg) | 0 |
| 포화지방(g) | 0 | 당류(g) | 0 |
| 단백질(g) | 0 | 카페인(mg) | 190 |
'HTML' 카테고리의 다른 글
| [HTML] javascript (2) - 응용 (0) | 2023.04.16 |
|---|---|
| [HTML] javascript (1) (0) | 2023.04.16 |
| [HTML] CSS - div ( block & in-line / position - relative, absolute, fixed / button (0) | 2023.04.09 |
| [HTML] CSS(Cascade Style Sheet) - width / border / text-align border-collapse / font / #id / .class (0) | 2023.04.09 |
| [HTML] http / 기본 구조 + html:5 (테이블/광고판/입력 표현/기능/form/검색창/로그인창) (0) | 2023.04.09 |