라라리라
2023.07.20 / HTML 2- 코딩 1 일차 본문
0201_리스트.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
(1) ol 태그(= ordered list)
(2) ul 태그(= unordered list)
-->
<ol>
<li>안</li>
<li>녕</li>
<li>하</li>
<li>세</li>
<li>요</li>
<li>안</li>
<li>녕</li>
<li>히</li>
<li>계</li>
<li>세</li>
<li>요</li>
<li>안</li>
<li>녕</li>
<li>안</li>
<li>녕</li>
</ol>
<ul>
<li>안</li>
<li>녕</li>
<li>하</li>
<li>세</li>
<li>요</li>
<li>안</li>
<li>녕</li>
<li>히</li>
<li>계</li>
<li>세</li>
<li>요</li>
<li>안</li>
<li>녕</li>
<li>안</li>
<li>녕</li>
</ul>
</body>
</html>
- 안
- 녕
- 하
- 세
- 요
- 안
- 녕
- 히
- 계
- 세
- 요
- 안
- 녕
- 안
- 녕
- 안
- 녕
- 하
- 세
- 요
- 안
- 녕
- 히
- 계
- 세
- 요
- 안
- 녕
- 안
- 녕
0202_리스트중첩.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
리스트에서 ul을 중첩으로 사용하면 모양이 자동으로 변경된다.
-->
<ul>
<li>
<a href="#">개인뱅킹</a>
<ul>
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">신규/해지</a></li>
<li><a href="#">공과금/법원</a></li>
<li><a href="#">뱅킹보안센터</a></li>
</ul>
</li>
<li>
<a href="#">자산관리</a>
<ul>
<li><a href="#">나의지출</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">신규/해지</a></li>
<li><a href="#">공과금/법원</a></li>
</ul>
</li>
<li><a href="#">예금/신탁</a></li>
<li><a href="#">대출</a></li>
<li><a href="#">펀드</a></li>
<li><a href="#">외환</a></li>
</ul>
<ul>
<li>
<a href="#">개인뱅킹</a>
<ul>
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">신규/해지</a></li>
<li><a href="#">공과금/법원</a></li>
<li><a href="#">뱅킹보안센터</a></li>
</li>
</ul>
<li>
<a href="#">자산관리</a>
<ul>
<li><a href="#">나의지출</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">신규/해지</a></li>
<li><a href="#">공과금/법원</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">예금/신탁</a></li>
<li><a href="#">대출</a></li>
<li><a href="#">펀드</a></li>
<li><a href="#">외환</a></li>
</ul>
</li>
</ul>
</body>
</html>
0203_리스트중첩2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
리스트에서 ul을 중첩으로 사용하면 모양이 자동으로 변경된다.
-->
<ul>
<li>
<a href="#">HTML5</a>
<ul>
<li>Multimedia Tag</li>
<li>Connectivity</li>
<li>Device Access</li>
</ul>
</li>
<li>
<a href="#">CSS3</a>
<ol>
<li>
Animation
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
</li>
<li>
3D Transform
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</li>
</ol>
</li>
</ul>
</body>
</html>
-
HTML5
- Multimedia Tag
- Connectivity
- Device Access
-
CSS3
-
Animation
- Test1
- Test2
-
3D Transform
- Test1
- Test2
- Test3
-
Animation
0204_리스트와이미지.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>메뉴</h1>
<ul>
<li>아메리카노<br />
<img src="americano.jpg" width="100" height="100">
에스프레소에 물을 넣어 연하게 마시는 커피
</li>
<li>카페라떼<br />
<img src="cafelatte.jpg" width="100" height="100">
에스프레소(Caffe)와 우유(Latte)를 넣은 커피
</li>
<li>카푸치노<br />
<img src="cappuccino.jpg" width="100" height="100">
우유를 섞은 커피에 계핏가루를 뿌린 이탈리아식 커피
</li>
</ul>
<h1>메뉴</h1>
<ul>
<li>아메리카노<br>
<img src="americano.jpg" width="100" height="100">
에스프레소에 물을 넣어 연하게 마시는 커피
</li>
<li>까페라떼<br>
<img src="cafelatte.jpg" width="100" height="100">
에스프레소(Caffe)와 우유(Latte)를 넣은 커피
</li>
<li>카푸치노<br>
<img src="cappuccino.jpg" width="100" height="100">
우유를 섞은 커피에 계핏가루를 뿌린 이탈리아식 커피
</li>
</ul>
</body>
</html>
메뉴
- 아메리카노
에스프레소에 물을 넣어 연하게 마시는 커피
- 카페라떼
에스프레소(Caffe)와 우유(Latte)를 넣은 커피
- 카푸치노
우유를 섞은 커피에 계핏가루를 뿌린 이탈리아식 커피
메뉴
- 아메리카노
에스프레소에 물을 넣어 연하게 마시는 커피
- 까페라떼
에스프레소(Caffe)와 우유(Latte)를 넣은 커피
- 카푸치노
우유를 섞은 커피에 계핏가루를 뿌린 이탈리아식 커피
0205_리스트문제.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><h1>에그 스크램블(Scrambled eggs)</h1></p>
<p>다음은 에그 스크램블을 만드는 요리법이다.</p>
<p><h3>재료</h3></p>
<ul>
<li>2eggs</li><br>
<li>1tbs butter</li><br>
<li>2tbs cream</li><br>
</ul>
<p><h3>방법</h3></p>
<ol>
<li>버터를 중간 정도로 달구어진 후라이팬에 두른다.</li>
<li>그릇에 달걀과 크림을 섞는다.</li>
<li>버터가 녹으면 크림과 달걀을 붓는다.</li>
<li>달걀을 반으로 접는다.</li>
<li>달걀이 아직도 촉촉할 때 불을 끈다.</li>
</ol>
</body>
</html>
에그 스크램블(Scrambled eggs)
다음은 에그 스크램블을 만드는 요리법이다.
재료
- 2eggs
- 1tbs butter
- 2tbs cream
방법
- 버터를 중간 정도로 달구어진 후라이팬에 두른다.
- 그릇에 달걀과 크림을 섞는다.
- 버터가 녹으면 크림과 달걀을 붓는다.
- 달걀을 반으로 접는다.
- 달걀이 아직도 촉촉할 때 불을 끈다.
0206_리스트문제.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>상위리스트 1
<ul>
<li>하위 리스트 1-1</li>
<ol>
<li>더 하위 리스트 a</li>
<li>더 하위 리스트 b</li>
<li>더 하위 리스트 c</li>
</ol>
<li>하위 리스트 2-2</li>
<li>하위 리스트 1-3</li>
</ul>
</li>
<li>상위 리스트2</li>
<ol>
<li>하위 리스트 2-1</li>
<li>하위 리스트 2-1</li>
<li>하위 리스트 2-1</li>
</ol>
<li>상위 리스트3</li>
</ul>
</body>
</html>
- 상위리스트 1
- 하위 리스트 1-1
- 더 하위 리스트 a
- 더 하위 리스트 b
- 더 하위 리스트 c
- 하위 리스트 2-2
- 하위 리스트 1-3
- 상위 리스트2
- 하위 리스트 2-1
- 하위 리스트 2-1
- 하위 리스트 2-1
- 상위 리스트3
종합설명.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>My Homepage</title>
</head>
<body>
<h2>My Homepage</h2>
<p>
<img src="programmer.png" width="100" height="100" alt="프로그래머 그림" />
<strong>컴퓨터 프로그래머</strong>를 꿈꾸며 열심히 공부하고 있는 1인입니다.
</p>
<h3>현재 학습하고 있는 과목</h3>
<ul>
<li>C 언어 </li>
<li>JAVA 언어 </li>
</ul>
<h3>Web 커피 메뉴</h3>
<ol>
<li>
<h4>아메리카노 5,000원</h4>
<img src="americano.jpg" width="100" alt="아메리카노 그림">에스프레소에 물을 추가한 것입니다.
</li>
<li>
<h4>카페라떼 6,000원</h4>
<img src="cafelatte.jpg" width="100" alt="카페라떼 그림">커피 위에 우유를 넣은 커피입니다.
</li>
<li>
<h4>카푸치노 6,000원</h4>
<img src="cappuccino.jpg" width="100" alt="카푸치노 그림">커피 위에 우유거품을 얹은 커피입니다.
</li>
</ol>
</body>
</html>
My Homepage
컴퓨터 프로그래머를 꿈꾸며 열심히 공부하고 있는 1인입니다.
현재 학습하고 있는 과목
- C 언어
- JAVA 언어
- 웹프로그래밍 w3schools 사이트
Web 커피 메뉴
-
아메리카노 5,000원
에스프레소에 물을 추가한 것입니다.
-
카페라떼 6,000원
커피 위에 우유를 넣은 커피입니다.
-
카푸치노 6,000원
커피 위에 우유거품을 얹은 커피입니다.
'코딩 > 2023 HTML & CSS' 카테고리의 다른 글
| 2023.08.10 / CSS3 - 코딩 22 일차 (0) | 2023.08.10 |
|---|---|
| 2023.08.09 / CSS2 - 코딩 21 일차 (0) | 2023.08.09 |
| 2023.07.21 / HTML 4- 코딩 2 일차 (0) | 2023.07.21 |
| 2023.07.21 / HTML 3- 코딩 2 일차 (0) | 2023.07.21 |
| 2023.07.20 / HTML 1- 코딩 1 일차 (0) | 2023.07.20 |
'코딩/2023 HTML & CSS' Related Articles
more
