1
<!DOCTYPE html>
<html>
<head>
<style>
section {
width:500px;
padding:15px;
border:5px solid gray;
}
</style>
</head>
<body>
<section>
<h2>Who am I?</h2>
<p>프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.<br>
현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</section>
</body>
</html>
2
<!DOCTYPE html>
<html>
<head>
<style>
section {
width:500px;
padding:15px;
border:5px solid gray;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h2>Who am I?</h2>
<p>프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.<br>
현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</section>
</body>
</html>style.css
h2 {
color : blue;
}
p {
font-size:0.9em;
line-height: 2.0;
}
3
<!DOCTYPE html>
<html>
<body>
<h1>블루베리와 항산화 효능</h1>
<p style="color:blue;">블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면
블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다.</p>
</body>
</html>
4
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color:blue;
}
p {
font-size:12px;
margin-left:20px;
}
</style>
</head>
<body>
<h1>블루베리에 관한 연구</h1>
<h2>블루베리와 항산화 효능</h2>
<p>블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
<p>매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면
블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다.</p>
<h2>블루베리와 노화</h2>
<p>USDA 인류 영양 연구센터(the USDA Human Nutrition Research Center on Aging) 실험실에서 신경과학자들은 쥐들에게 블루베리를 먹임으로써
노화에 의한 인지능력의 손실을 예방해 준다는 사실을 발견하였습니다.</p>
</body>
</html>
5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>셀렉터 만들기</title>
<style>
h3, li {
color:brown;
}
div > div > strong {
background-color: yellow;
}
ul strong {
color:dodgerblue;
}
.warning {
color: red;
}
body.main{
background:aliceblue;
}
#list {
background:mistyrose;
}
#list span {
color:forestgreen;
}
h3:first-letter {
color:red;
}
li:hover {
background:yellowgreen;
}
</style>
</head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기<strong>학습 내용</strong>입니다.</div>
<ul id="list">
<li><span>HTML5</span></li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div class="warning">60점 이하는 F!!</div>
</div>
</body>
</html>
6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 꾸미기</title>
<style>
h3 {
text-align:right;
}
span {
text-decoration:line-through;
}
strong {
text-decoration: overline;
}
.p1 {
text-indent: 3em;
text-align: justify;
}
.p2 {
text-indent: 1em;
text-align: center;
}
</style>
</head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<p class="p1">HTML의 태그만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬, 공백,
간격 등과 세밀한<span>텍스트 제어</span>를 할 수 없다.
</p>
<p class="p2">그러나, <strong>스타일 시트</strong>는 이를 가능하게 한다.
들여쓰기, 정렬에 대해서 알아본다.
</p>
<a href="http://www.naver.com" style="text-decoration:none;">
밑줄이 없는 네이버링크</a>
</body>
</html>
7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
body {
background:ghostwhite;
}
span {
background:deepskyblue;
}
div.box {
background:yellow;
border-style:solid;
border-color:peru;
margin:40px;
border-width:30px;
padding:20px;
}
</style>
</head>
<body>
<div class="box">
<span>DIVDIVDIV</span>
</div>
</body>
</html>
8
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
div {
background:yellow;
padding:20px;
border:5px dotted red;
margin:30px;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div>
<img src="mio.png" alt="고양이 눈">
</div>
</body>
</html>
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 테두리 만들기</title>
<style>
p {
background:yellow;
width:200px;
height:60px;
padding:10px;
border:20px solid lightgray;
}
#round { border-image : url("border.png") 30 round; }
#repeat { border-image : url("border.png") 30 repeat; }
#stretch { border-image : url("border.png") 30 stretch; }
</style>
</head>
<body>
<h3>이미지 테두리 만들기</h3>
<hr>
다음은 원본 이미지입니다.<br>
<img src="border.png" alt="원본">
<hr>
<p>20x20 크기의 회색 테두리를 가진 p태그</p>
<p id="round">round 스타일 이미지 테두리</p>
<p id="repeat">repeat 스타일 이미지 테두리</p>
<p id="stretch">stretch 스타일 이미지 테두리</p>
</body>
</html>
10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>text-shadow와 box-shadow</title>
<style>
h2 {
text-align: center;
color : yellow;
text-shadow : 2px 2px 3px blue;
}
img:hover {
box-shadow : 0 0 5px blue;
}
</style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table>
<tr>
<td><a href="http://www.naver.com">
<img src="naver.png" width="120" height="100">
</a></td>
<td><a href="http://www.chosun.com">
<img src="chosun.png" width="120" height="100">
</a></td>
<td><a href="http://www.amazon.com">
<img src="amazon.png" width="120" height="100">
</a></td>
</tr>
</table>
</body>
</html>'----------고1---------- > 화면구현' 카테고리의 다른 글
| [고1 화면구현] 11 - (2) (0) | 2023.11.21 |
|---|---|
| [고1 화면구현] 11 - (1) (0) | 2023.11.09 |
| [고1 화면구현] 10 - (3) (0) | 2023.10.19 |
| [고1 화면구현] 10 - (2) (1) | 2023.10.10 |
| [고1 화면구현] 10 - (1) (0) | 2023.10.05 |