<!DOCTYPE html>
<html lang="en">
<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>test1.html</title>
</head>
<body>
<h1>처음 입력해봅시다.</h1>
<h1>처음 입력해봅시다.</h1>
<h1>처음 입력해봅시다.</h1>
<h1>처음 입력해봅시다.</h1>
<h1>처음 입력해봅시다.</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>code_02.html</title>
</head>
<body>
<h1>this is a heading.</h1>
<p>this is a paragrph.</p>
<p>this is another pragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<title>code_03.html</title>
<body>
<h2>여기는 h2태그 영역입니다.</h2>
<p>여기는 하나의 단락(글의 작은 덩어리)입니다.</p>
<a href="https://www.naver.com">이것은 a 태그(link)입니다.</a>
<br><br><br><br>
<img src="img_html.png" alt="이미지가 없으면 글자가 표시됨"
width="300" height="180">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_04.html</title>
</head>
<body>
<h1>안녕하세요</h1>
<P>this is a <br><br><br> paragraph with a line break</P>
<P>반갑습니다.</P>
</body>
</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>code_05.html</title>
</head>
<body>
<a href="https://www.google.com">구글사이트로 이동</a>
<p title="제목입니다."> 글 덩어리 ~~~ </p>
<img src="../img_html.png" alt="">
<p style="color: rgba(1, 82, 82, 0.596);">안녕하세요 반갑습니다. 스타일을 적용해 봅니다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_06.html</title>
</head>
<body style="background-color: rgb(255, 255, 155);">
<p>I am normal</p>
<p style="color: red;">I am red</p>
<p style="color: blue;">I am blue</p>
<p style="font-size: 50px;">I am big</p>
<h1 style="background-color: powderblue;">여기는 파우더 블루</h1>
<p style="background-color: tomato;">여기는 토마토 색상입니다.</p>
<h1 style="font-family: Verdana;">여기는 verdana 폰트입니다.</h1>
<p style="font-family: courier;">여기는 courier 폰트입니다.</p>
<h1 style="font-size: 300%;">this is a haeding</h1>
<p style="font-size: 160%;">this is a paragraph</p>
<!---기본 p 태그보다 160% 큰 사이즈-->
<h1 style="text-align: right;">Centered Heading</h1>
<p style="text-align: end;">end paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>code_ex_06.html</title>
</head>
<body style="background-color: yellowgreen;">
<p>I am normal</p>
<p style="color: red;">I am red</p>
<p style="color: blue;">I am blue</p>
<p style="font-size: 50px;">I am big</p>
<h1>This is a heading</h1>
<h1>This is a paragraph</h1>
<h1 style="background-color: powderblue;">This is a heading</h1>
<h1 style="background-color: tomato;">This is a paragraph</h1>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph</p>
<h1 style="font-family: verdana;">This is a heading</h1>
<p style="font-family: Courier;">This is a paragraph</p>
<h1 style="font-size: 300%;">This is a heading</h1>
<p style="font-size: 160%;">This is a paragraph</p>
<h1 style="text-align: center;">Centered Heading</h1>
<p style="text-align: center;">Centered paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_07.html</title>
</head>
<body>
<h1 style="border: 12px dashed dodgerblue;"> hello world! </h1>
<h1 style="border: 2px solid violet;"> hello world! </h1>
<h1 style="background-color: rgb(200, 199, 71);">hello world!</h1>
<h1 style="background-color: rgba(200, 199, 71, 0.1);">hello world!</h1>
<h1 style="background-color: #ff6347;">#ff6347</h1>
<h1 style="background-color: hsl(9, 100%, 64%)">hsl(9, 100%, 64%)</h1>
<h1 style="background-color: hsla(12, 100%, 32%, 0.3);">hello world</h1>
</body>
</body>
</html>
code_08.html 내용없음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code_09.html</title>
<style>
/**/
body {
background-color: aliceblue;
}
h1 {
color: red;
}
p {
color: red;
}
</style>
</head>
<body>
<h1 style="background-color: indigo;">This is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code_09_1.html</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>this is a paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code_10.html</title>
<style>
</style>
</head>
<body>
<a href="https://www.naver.com" target="">naver이동하기 1</a>
<a href="https://www.naver.com" target="">naver이동하기 2</a>
<a href="https://www.naver.com" target="">naver이동하기 3</a>
<br><br><br>
<a href="https://www.naver.com" target="_self">네이버 이동하기 4</a>
<!--ㄴ기본 속성-->
<a href="https://www.naver.com" target="_blank">네이버 이동하기 5</a>
<a href="https://www.naver.com" target="_parent">네이버 이동하기 6</a>
<!--ㄴparent : 팝업창과 동시에 띄울 경우 부모창 속성이 페이지 이동 -->
<a href="https://www.naver.com" target="_top">네이버 이동하기 7</a>
<!-- ㄴ이미지를 링크로 사용 -->
<br>
<a href="https:www.naver.com" target="_blank">
<img src="./../img_html.png" alt="html 연습" style="width: 42px; height: 42px;">
</a>
<br><br>
<!-- 이메일 주소 링크 -->
<a href="mailto:rkdud3240@naver.com">send email</a>
<br><br>
<button onclick="document.location='code_03.html'">HTML BUTTON</button>
<!-- -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_10_1.html</title>
</head>
<body>
<h2>절대경로</h2>
<p>
<a href="https://www.google.com">Google</a>
</p>
<h2>상대경로</h2>
<p>
<a href="code_02.html">My Html Page</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_11.html</title>
</head>
<body>
<div style="background-color: black; color: white; padding: 20px;">
<h2> LONDON </h2>
<p>LONDON is the capital city of England.</p>
</div>
<p>
안녕하세요 <span style="color: blue; font-weight: bold;">반갑습니다.</span>
</p>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code_12.html</title>
<style>
#m_box {
background-color: #09c;
}
.box {
background-color: blue;
margin-bottom: 10px;
}
.box2 {
color: springgreen;
background-color: deeppink;
margin-bottom: 10px;
}
#my_id2 {
color: yellow;
background-color: navy;
}
/* 태그선택자 */
hr {
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box">box class</div>
<div class="box">box class</div>
<div id="m_box">m_box id</div>
<!-- id는 고유한 값 class는 그룹화시켜서 사용가능 -->
<hr>
<div class="box2">html1</div>
<div class="box2">html2</div>
<div id="my_id2">html2</div>
<hr>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_12_1.html</title>
<style>
div {
background-color: cyan;
}
div span {
text-align: center;
padding: 10px;
}
div.yellow_box span {
background-color: yellow;
}
div#c_box span {
background-color: violet;
padding: 10px;
}
div span.blue_span {
background-color: blue;
}
div span#c_span {
text-align: center;
padding: 10px;
background-color: brown;
}
ul>li {
list-style: none;
}
</style>
</head>
<body>
<div class="yellow_box">
<span>
yellow_box div 클래스 내의 span 태그입니다.
</span>
</div>
<div id="c_box">
<span>
c_box div 아이디 내의 span 태그입니다.
</span>
</div>
<div>
<span class="blue_span">
div 내의 blue_span 클래스 입니다.
</span>
</div>
<div>
<span id="c_span">
div내의 c_span 아이디 입니다.
</span>
</div>
<br><br><br>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_12_2.html</title>
<style>
/* .aa>.cc {
background-color: red;
} */
.aa .cc {
background-color: seagreen;
}
</style>
</head>
<body>
<div class="aa">
<div class="cc">
sec1
</div>
</div>
<div class="aa">
<div class="bb">
<div class="cc">
sec2
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_12_3.html</title>
<style>
div#m_box {
width: 220px;
height: 132px;
border: 1px solid yellow;
background-color: antiquewhite;
}
div.box {
background-color: blue;
}
div#m_box,
.box {
background-color: #f23;
}
</style>
</head>
<body>
<div id="m_box">아이디의 div태그 입니다.</div>
<div class="box">box클래스 div태그입니다.</div>
<span id="m_box">m_box의 span입니다.</span>
<span class="box">box 클래스의 span입니다.</span>
</body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_ex2.html</title>
<style>
div,
span {
width: 50px;
height: 50px;
margin: 0 auto;
text-align: center;
border: 1px solid #000;
display: block;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span>4</span>
<span>5</span>
<span>6</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_13.html</title>
<style>
div,
span {
width: 80px;
height: 80px;
margin: 20px;
background-color: pink;
}
div {
background-color: red;
/* display: inline; */
text-align: center;
}
span {
background-color: blue;
display: block;
text-align: center;
}
</style>
</head>
<body>
<!-- block level -->
<div>1</div>
<div>2</div>
<div>3</div>
<!-- inline level -->
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>code_14.html</title>
<style>
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background-color: red;
}
.container {
background-color: yellow;
left: 20px;
top: 20px;
width: 500px;
height: 500px;
overflow-y: scroll;
/* position: relative; */
/* width: 70px;
height: 1000px; */
}
.box {
background-color: blue;
left: 20px;
top: 20px;
width: 50px;
height: 50px;
/* position변경 */
/* position: static; */
/* 원래 있어야하는 자리에 존재 기본값*/
/* position: relative; */
/* 원래 있던 자리에서 left 20 top 20 */
/* position: fixed; */
/* 부모박스(상자) 기준에서 나와서 페이지 기준으로 left 20 top 20 */
/* position: absolute; */
/* 부모박스(상자) 기준으로 left 20 top 20 옮겨감 */
position: sticky;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div class="box">2, box</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="description" content="Free web tutorials">
<meta name="author" content="홍길동">
<!-- 5초마다 문서 새로고침 -->
<meta http-equiv="refresh" content="50">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>code_head.html개발자 쇼핑몰</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Javascript!";
}
</script>
<style>
h1,
p {
color: royalblue;
text-align: center;
}
button {
margin: 0 auto;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A paragraph</p>
<button type="button" onclick="myFunction()">버튼을 눌러주세요</button>
</body>
</html>
'코리아 IT아카데미 > grid·flex·mySql·jsp' 카테고리의 다른 글
6일차 | 그리드 예제 최종, 자바스크립트 round1~5 (0) | 2021.11.22 |
---|---|
4,5일차 | code_grid3 (0) | 2021.11.19 |
3일차 | class_grid2 (0) | 2021.11.19 |
2일차 | code_grid (0) | 2021.11.19 |
오전반_1~6일차 | 정리 (0) | 2021.11.06 |