2018.11.28 글자배경/이미지삽입/표만들기/리스트만들기
2018. 11. 28. 16:42ㆍHTML5&CSS
#1 background-color 글자배경색 변경
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 문자의 통용을 위해 유니코드로 표현 → <meta charset="UTF-8"> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div 연습</title>
</head>
<body>
<!-- <div>는 블록 태그 -->
<div style="background-color: aqua">
내가 <span style="background-color:blue">사람의</span> 방언과 천사의 말을 할지라도
</div>
<div>
사랑이 <del>없으면</del> 아무것도 아니다.
</div>
<!-- <span>은 인라인 태그 -->
<span style="background-color: brown">스판테스트1</span>
<span>스판테스트2</span>
</body>
</html>
#2 이미지 삽입 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<titel>이미지 삽입</titel>
</head>
<body>
<header>
<h3>이미지 삽입</h3>
<hr>
</header>
<main>
<section>
<!-- 사진 인터넷주소로 삽입 -->
<p>엘비스 프레슬리 사진입니다.</p>
<img width="50%" height="400px" src="http://image.chosun.com/sitedata/image/201403/27/2014032704476_0.jpg"/>
<!-- 사진 저장주소로 삽입 -->
<p>엘비스 프레슬리 로컬사진입니다.</p>
<img width="50%" height="400px" src="img1.jpg"/>
</section>
</main>
</body>
</html>
#3 리스트 만들기
<!doctype html>
<html>
<head>
<meta charset="utf8"/>
<title>리스트</title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ul>
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후에 먹는다.</li>
</ul>
<hr>
<!-- shift + Tab 들여쓰기 -->
<ol>
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후에 먹는다.</li>
</ol>
<hr>
<ol type="A">
<!-- 소문자도 가능 -->
<li>물을 끓인다.</li>
<ul>
<li>조금 기다린다.</li>
<li>조금 기다린다.</li>
</ul>
<li>라면과 스프를 넣는다.</li>
<li>파를 썰어 넣는다.</li>
<li>5분 후에 먹는다.</li>
</ol>
</body>
</html>
#3 표만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <tr>:행 <td>:렬 -->
<table border="1">
<tr>
<th>이름</th>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>황기태 </td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>이재문</td>
<td>95</td>
<td>99</td>
</tr>
<tr>
<td>이병은</td>
<td>40</td>
<td>61</td>
</tr>
<tr>
<td><b>합</b></td>
<td><b>225</b></td>
<td><b>230</b></td>
</tr>
</table>
<!-- 소스 정렬 ctrl + K + F -->
</html>
'HTML5&CSS' 카테고리의 다른 글
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |
|---|---|
| 2018.12.03 화면배치(overflow,margin사용) (0) | 2018.12.03 |
| 2018.11.30 시멘틱구조 , 화면배치 , 로그인폼 (0) | 2018.11.30 |
| 2018.11.29 테이블여백 & 하이퍼링크 & id링크 (0) | 2018.11.29 |
| 2018.11.27 페이지의 기본 구조 (0) | 2018.11.27 |