Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- 객체 비교
- 대덕인재개발원
- NestedFor
- 예외미루기
- 메소드오버로딩
- 인터페이스
- 자바
- 환경설정
- 어윈 사용법
- 컬렉션 타입
- Java
- 예외처리
- 참조형변수
- GRANT VIEW
- 오라클
- 추상메서드
- exception
- 집합_SET
- 제네릭
- 자동차수리시스템
- 정수형타입
- cursor문
- 생성자오버로드
- oracle
- EnhancedFor
- 사용자예외클래스생성
- 컬렉션프레임워크
- 다형성
- abstract
- 한국건설관리시스템
Archives
- Today
- Total
거니의 velog
230824_HTML 강의 본문
[list2.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="리스트2" />
<meta name="keywords" content="대덕인재개발원, html, 리스트2" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>리스트2</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<pre>
밑으로 배치되는 블럭요소를 옆으로 배치하기 위해서
float: left; / float: right;
해제하고자 하는 요소에서
clear: both;
</pre>
<div>
<h3>list-style-type : decimal</h3>
<ol class="o1">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
</div>
<div>
<h3>list-style-type: upper-alpha</h3>
<ol class="o2">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
</div>
<div>
<h3>list-style-type: lower-roman</h3>
<ol class="o3">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
</div>
<div>
<h3>list-style-type: hangul</h3>
<ol class="o4">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
</div>
<div>
<h3>list-style-image: url()</h3>
<ol class="o5">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ol>
</div>
<hr color="green" />
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQUERY</li>
</ul>
</body>
</html>@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Noto Sans KR", sans-serif;
color: #333;
word-break: keep-all;
}
pre {
font-family: "Noto Sans KR", sans-serif;
color: #333;
word-break: keep-all;
background-color: lightblue;
border: 4px inset red;
padding: 10px;
margin: 20px 0px;
font-size: 1.5rem;
}
.cen {
max-width: 600px;
width: 100%;
margin: auto;
}
h3 {
margin-bottom: 10px;
border: 1px solid blue;
width: 400px;
}
div {
border: 2px solid green;
padding: 20px;
width: 450px;
height: 240px;
margin-bottom: 10px;
float: left;
}
ol {
border: 5px solid red;
list-style-position: inside;
width: 400px;
height: 75%;
}
.o1 {
list-style-type: decimal;
}
.o2 {
list-style-type: upper-alpha;
}
.o3 {
list-style-type: lower-roman;
}
.o4 {
list-style-type: hangul;
}
.o5 {
list-style-image: url(../images/check.png);
}
hr {
clear: both;
}
ul {
list-style-position: inside;
}
[list3.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="리스트3" />
<meta name="keywords" content="대덕인재개발원, html, 리스트3" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>리스트3</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<style>
dl {
/* border: 1px solid red;*/
margin: 5px;
width: 50%;
}
dt {
/* border: 1px solid green;*/
margin: 5px;
margin-left: 100px;
width: 70%;
}
dd {
/* border: 1px solid blue;*/
margin: 5px;
margin-left: 150px;
width: 60%;
}
</style>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>문서의 내용을 작성</dd>
<dt>CSS</dt>
<dd>문서의 스타일을 작성</dd>
<dt>JAVASCRIPT</dt>
<dd>문서의 동작을 작성</dd>
<dt>JQUERY</dt>
<dd>JAVASCRIPT의 라이브러리</dd>
</dl>
</body>
</html>
[attr_a_href.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="href 속성" />
<meta name="keywords" content="대덕인재개발원, html, href 속성" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>href 속성</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<style>
a {
font-size: 2rem;
text-decoration: none;
display: inline-block;
margin-bottom: 10px;
border: 1px solid blue;
padding: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<a href="#cof1">재배 지역</a>
<br />
<a href="#cof2">어원</a>
<br />
<a href="#cof3">한국어 단어</a>
<br />
<a href="#cof4">역사</a>
<br />
<h1 id="cof1">재배 지역</h1>
<p>
커피콩은 주로 적도지방 라틴 아메리카, 동남아시아, 남 아시아 그리고 아프리카의 70여개국에서 재배 되는 커피 나무에서 얻을 수 있다. 커피콩(로스팅 전의 콩, 생두)은 세계에서 가장 많이 교역되는 농산물 중의 하나이다. 커피는 <b>카페인 성분</b>으로 인해 사람을 각성시키는 효과를 가지고 있다. 커피는 세계에서 가장 많이 소비되는 음료 중의 하나이다. 1년에 세계적으로 약 6천억 잔이 소비된다.
</p>
<p>
커피는 많은 사회에서 중요한 역할을 해 왔다. 커피의 기운을 북돋우는 효과는 에티오피아 동북부 지방에서 발견된 것으로 생각되며, 커피의 재배는 아랍으로 처음 전파되었다. 커피의 음용에 대한 최초의 믿을 수 있는 증거는 15세기 중반, 남부 아라비아의 예멘의 수피즘 사원에서 발견되었다. 커피는 무슬림 세계로부터 인도, 이탈리아, 그리고 나머지 유럽으로, 인도네시아, 미주 대륙으로 전파되었다. 남 아프리카와 예멘에서 커피는 종교의식에 사용되었고 그 결과, 에티오피아 정교회에서는 세속적인 소비를 금지하였으며, 금지령은 에티오피아 메네릭 2세 때까지 유지되었다. 커피는 오토만 제국 튀르키예에서 17세기에 정치적인 이유로 금지되었고, 유럽에서는 반체제적 정치 활동과 연관되어 있었다.
</p>
<h1 id="cof2">어원</h1>
<p>
“커피”라는 단어는 커피의 원산지인 에티오피아의 남서부 “카파”에서 유래되었다는 설과, 커피의 아랍어 명칭 까후와(قَهْوَة)[9]에서 유래되었다는 설이 존재한다. 아랍어의 까후와는 ‘배고픔을 줄이다’라는 의미의 ‘까히야’의 변화형으로, 원래 와인의 한 종류를 가리키는 말이었으나, 와인과 유사한 각성효과가 있는 커피에도 붙여졌다고 한다. 아랍어 까후와는 오스만 투르크어 kahve로 흘러 들어갔고, 거기서 유럽인들이 그들의 언어로 차입해 갔다(이탈리아어 caffè, 프랑스어 café, 독일어 Kaffee, 영어 coffee).
</p>
<h1 id="cof3">한국어 단어 “커피”</h1>
<p>
한국어 단어 “커피”는 영어 coffee에서 온 말이다. 커피가 들어왔던 개화기 당시, 한자로 가배(珈琲), 가비, 혹은 가배다, 가배차, 가비차 등으로 사용하거나 원음을 그대로 코오피, 코피로 사용하고, 공적인 문서들에는 커피, 가배, 신문 등지에서는 코오피, 카피차, 가피차, 양차 등으로 사용한 것을 찾을 수 있다.
</p>
<p>
최근에, 커피에 대한 수요와 관심도가 증가하면서, 개화기 당시 커피를 부르는 말로서 가배, 가비 외에도 빛깔과 맛이 탕약과 비슷하다 하여 서양에서 들어온 탕이라는 뜻으로 양탕국 등으로 불렸다고 하나, 그 사용처나 그 사용빈도는 개화기 당시의 문서에서는 나타나지 않는다. 양탕국이라는 단어는 1968년 한 신문의 칼럼에 처음 등장하는 말로서, 이후 커피나 차에 관심있는 사람들에 의해 실제로 양탕국이라 불려진 것처럼 생각되기도 하지만 개화기 당시의 문서에서는 찾을 수 없으므로 보통으로, 일반적으로 사용하였다고 단정할 수 없다.
</p>
<p>
한편, 커피가 발견된 에티오피아에서는 “분나”(Bunna)라고 부른다.
</p>
<p>
커피를 내리고 남은 찌꺼기는 우리말로 <sup>커피박(-剝)</sup>이라 하고 영어권에서는 커피퍽(coffee puck)이라 한다.
</p>
<p>
커피를 마시며 휴식을 취한다는 표현 <sub>"coffee break"</sub>은 1952년에 처음 발견된다. '커피포트'라는 용어는 1705년에 등장한다.
</p>
<h1 id="cof4">역사</h1>
<p>
커피는 7세기 이전부터 에티오피아의 고지대에서 자생하고 있던 것으로 보인다. 전설에 따르면 염소 목동이었던 칼디(Kaldi)가 우연히 염소들이 먹던 열매를 발견했고 열매를 마을에 가져오는데, 피곤함을 덜어주는 커피의 효능을 마을의 종교 수행자들을 돕기 위해 쓰게 되었다고 전해지고 있다. 그곳에서부터 커피는 이집트와 예멘으로 전파되었다. 이집트와 예멘에서는 커피가 종교적 의식에 사용되기도 했다. 15세기 쯤에는 페르시아, 터키와 북아프리카에 이미 들어와 있었다.
</p>
<p>
커피에 대한 처음 반응은 그다지 좋지 않았다. 1511년에는 신경을 자극하는 성질 때문에 메카의 보수적인 이맘에 의해 금지되었다. 하지만 이 음료의 인기, 특히 그리스인과 지식인 사이에서의 인기를 꺾을 수 없었고 결국 오스만 투르크 술탄 셀림 1세에 의해 커피 금지령이 폐지되었다. 카이로에서도 유사한 금지령이 1532년에 내려졌고, 커피샵과 커피 창고들이 파괴되었다. 하지만 이후 1554년 이스탄불에 세계 최초의 커피 가게인 카페 키바 한(Cafe Kiva Han)이 들어서게 된다.[14]
</p>
<p>
커피는 이슬람 세계에서 유럽으로 퍼졌다. 계기가 된 사건은 오스만 제국이 오스트리아의 빈을 침공하면서 부터이다(1683년 빈 전투 참고). 전쟁중에 터키에 머물고 있던 공직자 프란츠 콜스키츠키(Franz Kolschitzky)는 검은 빛깔의 열매를 발견해 들여오게 됐고 1683년에 커피 전문점을 열었다. 지금처럼 커피에 우유를 넣거나 달게 먹는 방식은 오스트리아에서 시작됐다고 한다.[15] 커피는 후에 17세기로 접어들면서 유럽에서 큰 인기를 얻기 시작했다. 유럽으로 커피를 처음 대량 수입하기 시작한 것은 네덜란드 상인이었다. 네덜란드인들은 자와섬 지역에 커피 플랜테이션 농장을 지으면서 큰 성공을 거두기도 한다.
</p>
</body>
</html>
[table1.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="테이블 1" />
<meta name="keywords" content="대덕인재개발원, html, 테이블 1" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>테이블 1</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<style>
table:first-of-type {
border: 5px solid blue;
margin: 20px;
}
th {
height: 60px;
background-color: blue;
color: white;
font-size: 1.5rem;
}
td {
width: 200px;
height: 50px;
text-align: center;
}
table:nth-of-type(2) {
border: 5px outset red;
margin: 20px;
}
table:nth-of-type(2) th {
background-color: gold;
color: blue;
width: 400px;
}
table:nth-of-type(3) {
border-collapse: collapse;
border: 5px solid blue;
margin: 20px;
}
table:nth-of-type(4) {
border-spacing: 20px;
border: 5px solid blue;
margin: 20px;
}
table:nth-of-type(4) th {
border: 10px dashed red;
border-left: none;
border-right: none;
}
table:nth-of-type(5) {
border-collapse: collapse;
border: 1px solid #000;
margin: 20px;
width: 700px;
}
table:nth-of-type(5) th {
background-color: white;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h3 style="border: none; margin-left: 20px;">border-collapse: collapse;</h3>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h3 style="border: none; margin-left: 20px;">border-spacing: 20px;</h3>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h3 style="border: none; margin-left: 20px;">연습문제</h3>
<table border="1">
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
[table2.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="테이블 2" />
<meta name="keywords" content="대덕인재개발원, html, 테이블 2" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>테이블 2</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<style>
table:first-of-type {
border-collapse: collapse;
border: 5px solid blue;
margin: 20px auto;
}
td {
width: 200px;
height: 50px;
text-align: center;
}
table:first-of-type tr:first-of-type {
background-color: blue;
color: white;
font-weight: 700;
font-size: 1.5rem;
}
table:first-of-type caption {
font-size: 2rem;
/* border: 2px solid green;*/
margin: 10px 0px;
padding: 10px;
/* caption-side: bottom;*/
}
table:nth-of-type(2) {
border-collapse: collapse;
border: 5px solid blue;
margin: 20px auto;
}
table:nth-of-type(2) caption {
font-size: 2rem;
margin: 10px 0px;
padding: 10px;
}
table:nth-of-type(2) td {
width: 300px;
height: 70px;
}
table:last-of-type {
border-spacing: 5px;
border: 5px solid black;
margin: 20px;
}
table:last-of-type caption {
font-size: 2rem;
margin: 10px 0px;
padding: 10px;
}
table:last-of-type td {
height: 70px;
}
</style>
</head>
<body>
<table border="1">
<caption>
VIP 고객 리스트
</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table border="1">
<caption>
테이블 병합
</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">1</td>
</tr>
</table>
<table border="1">
<caption>연습문제</caption>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
[tableEx.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="author" content="LeeGJ" />
<meta name="copyright" content="대덕인재개발원" />
<meta name="description" content="테이블 2" />
<meta name="keywords" content="대덕인재개발원, html, 테이블 2" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>테이블 2</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<style>
td {
width: 200px;
height: 50px;
text-align: center;
}
table:first-of-type {
border-spacing: 5px;
border: 5px solid black;
margin: 20px;
}
table:first-of-type caption {
font-size: 2rem;
margin: 10px 0px;
padding: 10px;
}
table:first-of-type td {
height: 100px;
}
</style>
</head>
<body>
<table border="1">
<caption>연습문제</caption>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
'대덕인재개발원_Front End' 카테고리의 다른 글
| 230829_HTML 강의 (0) | 2023.08.29 |
|---|---|
| 230828_HTML 강의 (0) | 2023.08.28 |
| 230825_HTML 강의 (0) | 2023.08.25 |
| 230823_HTML 강의 (0) | 2023.08.23 |
| 230822_HTML 강의 (0) | 2023.08.22 |
'대덕인재개발원_Front End' Related Articles
more
