728x90
★ 문제 1
- body 태그의 배경 이미지를 설정하시오.
- 적당한 텍스트와 적당한 배경 이미지를 사용하시오.
- 소스코드
<!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>Document</title>
</head>
<body background="images\dog03.jpg">
<h1 align="center">
<font color="white"> 강아지 </font>
</h1>
<p align="center">
<font color="white"> 강아지가 청가방에 들어가 웃고 있습니다. </font>
</p>
<p align="center">
<font color="white">강아지, 강아지, 강아지, 강아지, 강아지, 강아지, 강아지, 강아지,강아지, 강아지</font>
</p>
<p align="center">
<font color="white"> 강아지가 혀를 메롱합니다.</font>
</p>
<p align="center">
<font color="white">강아지, 강아지, 강아지, 강아지, 강아지, 강아지, 강아지, 강아지,강아지, 강아지</font>
</p>
<p align="center">
<font color="white">출처 : 2019 웃는 강아지 우니</font>
</p>
</body>
</html>- 실행화면
★ 문제 2
- 제목과 문단을 작성하시오.
- 소스코드
<!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>Document</title>
<h1 align="center"> CEO 인사말</h1>
<h2 align="center">고객에게 최고의 가치를 제공하는‘Total Solution Provider’</h2>
</head>
<body>
<p>안녕하십니까? ㈜대림 대표이사 이근모입니다.</p>
<p>㈜대림 홈페이지를 찾아주신 여러분을 진심으로 환영합니다.</p>
<p>㈜대림은 1994년 석유화학도매업으로 사업을 시작한 이래 물류, 해운, 건설, 부동산, IT 등 다양한 분야로 사업을 다각화하며, 세계 시장을 무대로 하는 ‘Total Solution Provider’로 성장해 왔습니다.</p>
<p>‘고객에게 최상의 가치를 제공하는 것’은 ㈜대림 임직원 모두의 공통된 업무 목표이며, ㈜대림이 갖는 경쟁력의 핵심입니다.</p>
<p>고객 가치 극대화를 최우선 목표로 하여 급변하는 시장 환경에 따라 수시로 변화하는 고객의 Needs를 소중히 경청하며, 기대하시는 수준 이상의 서비스를 제공하기 위해 끊임없는 노력을 기울이고 있습니다.
지속적인 혁신을 통해, 사업 역량을 강화, 확장함으로써, 모든 고객에게 보다 나은 가치를 제공하기 위해 전사적 역량을 집중하겠습니다.</p>
<p>㈜대림은 DL 그룹의 리더이자 일원으로서 기업의 사회적 책무를 충실히 이행하며, 우리 사회 전반의 발전에 기여하는 ‘큰 숲’이 될 것입니다.</p>
<p>㈜대림을 응원해주시는 주주와 고객, 협력사, 기타 모든 이해관계자들에게 감사드립니다.</p>
<p>보내주신 기대와 성원에 부응하여, 모든 면에서 모범적인 기업으로 성장할 수 있도록 항상 노력하겠습니다.</p>
<p>감사합니다.</p>
<p align="right">대표이사 이근모</p>
</body>
</html>- 실행화면
★ 문제 3
- 각각의 단계의 제목을 작성하시오.
- 적당한 내용을 텍스트를 작성하시오.
- 소스코드
<!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>Document</title>
<h1 align="left">개발자를 위한 웹 기술</h1>
<p>웹의 개방성은 개발자들에게 많은 기회를 제공합니다. 하지만 웹 기술을 잘 활용하려면 우선 그 사용 방법을 잘 알아야 합니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.</p>
</head>
<body>
<h2>웹 개발자를 위한 문서</h2>
<h3>웹 개발자 안내서</h3>
<p>웹 개발자 안내서는 원하는 것과 필요한 것을 웹으로 만들 때 유용한 도움말을 제공합니다.</p>
<h3>웹 개발자를 위한 자습서</h3>
<p>API, 웹 기술, 기타 넓은 주제에 대한 단계별 학습을 제공하는 문서 목록입니다.</p>
<h3>프로그레시브 웹 앱 (PWAs)</h3>
<p>프로그레시브 웹 앱은 새롭게 떠오르는 웹 브라우저 API를 전통적인 점진적 향상(progressive enhancement) 기법과 함께 사용해서, 네이티브 앱에 필적하는 사용자 경험을 제공하는 크로스 플랫폼 웹 애플리케이션을 말합니다.</p>
<h2>웹 기술 참고서</h2>
<h3>웹 API</h3>
<p>웹의 강력한 스크립트 가능성을 구성하는 각각의 API에 대한 참고 문서입니다. DOM을 포함해 웹 콘텐츠와 앱을 만들 때 사용할 수 있는 모든 관련 API 및 인터페이스를 포함합니다.</p>
<h3>HTML</h3>
<p>HyperText Markup Language는 웹 페이지를 나타내고 정의하는 언어입니다.</p>
<h3>CSS</h3>
<p>Cascading Style Sheets는 웹 콘텐츠의 외형을 나타냅니다.</p>
<h3>JavaScript</h3>
<p>JavaScript는 웹사이트에 상호작용을 추가하는 프로그래밍 언어입니다.</p>
<h3>SVG</h3>
<p>Scalable Vector Graphics는 일련의 벡터와 도형으로 나타낸 이미지입니다. 해상도에 상관없이 항상 부드럽게 그려집니다.</p>
<h3>MathML</h3>
<p>Mathematical Markup Language는 복잡한 수학 공식과 구문을 그릴 때 사용할 수 있습니다.</p>
<h3>웹 컴포넌트</h3>
<p>웹 컴포넌트는 개발자가 직접 정의하고 재사용할 수 있는 사용자 정의 요소입니다.</p>
</body>
</html>- 실행 화면
★ 문제 4
- 문서의 제목, 컨텐츠의 제목과 내용을 작성하시오.
- 컨텐츠 항목 사이에 구분선을 추가하시오.
- 소스코드
<!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>Document</title>
<h1>클라이언트 언어</h1>
</head>
<body>
<h2>HTML</h2>
<p>
<font color="blue">장점 : </font> 무료로 사용이 가능하며 문법이 쉽다. 마크업 언어로 클라이언트-서버 간의 빠른 정보 전달이 가능하다. 시스템과 운영체제에 독립적이다.
</p>
<p>
<font color="red">단점 : </font> 정적언어로 동적 출력 생성이 불가능하다. 구조화된 정보의 표현과 검색이 어렵다. 제공하는 보안기능이 제한되어 있다.
</p>
<hr>
<h2>CSS</h2>
<p>
<font color="blue">장점 : </font> html의 기능을 확장하며 문법이 쉽다. 양식을 모듈화해 전체를 같은 문서양식으로 구성할 수 있다. 사용환경에 영향을 거의 받지 않는다.
</p>
<p>
<font color="red">단점 : </font> 브라우저의 스타일 시트 지원 방식이 달라 보편화가 쉽지 않다. 때문에 브라우저가 공통적으로 사용하는 방식을 사용해야 한다.
</p>
<hr>
<h2>JavaScript</h2>
<p>
<font color="blue">장점 : </font> 인터프리터 언어로 습득과 디버깅이 쉽다. 시스템과 운영체제에 독립적이다. 웹서버에 주는 부담이 적다.
</p>
<p>
<font color="red">단점 : </font> 사용할 수 있는 메소드가 적다. 소스코드를 감출 수 없다. 디버깅도구와 개발도구가 부족하다.
</p>
</body>
</html>- 실행 화면
★ 문제 5
- 계층별 목록을 작성하시오.
- 소스코드
<!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>Document</title>
<h1>
<font color = "blue">HTML5 Reference</font>
</h1>
</head>
<body>
<h2>W3C Editor’s Draft 9 August 2010</h2>
<p>
<b>This version:</b>
<br>
<u>http://www.w3.org/TR/2010/ED-html5-author-20100809</u>
</p>
<p>
<b>Latest version:</b>
<br>
<u>http://www.w3.org/TR/</u>
</p>
<p>
<b>Previous version:</b>
<br>
<u>No previous versions.</u>
</p>
<p>
<b>Editors:</b>
<br>
<u>Lachlan Hunt (Opera Software ASA) lachlan.hunt@lachy.id.au</u>
</p>
<hr>
<h3>
<font color = "blue">Abstract</font>
</h3>
<p>
This document explains the syntax, vocabulary and the available APIs for HTML5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.This document is complimentary to the HTML5 Guide.
</p>
<h3>
<font color = "blue">Status of this document</font>
</h3>
<p>
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
</p>
<p>
This document is an Editors Draft of the “HTML5 Reference” produced by the HTML Working Group, part of the HTML Activity. The working group is working on HTML5 (see the HTML5 Editor’s draft). The appropriate forum for comments on this document is public-html-comments@w3.org (public archive) or public-html@w3.org (public archive).
</p>
<p>
Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
</p>
<p>
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
</p>
<h3>
<font color = "blue">Table of contentsStatus of this document</font>
</h3>
<ol>
<li>Introdution</li>
<li>Basic Templates</li>
<li>The HTML and XHTML Syntax</li>
<ol>
<li>Syntactic Overview</li>
<li>The Syntax</li>
<ol>
<li>DOCTYPE Declaratio</li>
<ol>
<li>Obsolete But Permitted DOCTYPEs</li>
<li>HTML and XHTML Comparison</li>
<li>Historical Notes</li>
</ol>
<li>Elements</li>
<ol>
<li>Tags</li>
<li>Void Elements</li>
<li>Raw Text Elements</li>
<li>RCDATA Elements</li>
<li>Foreign Elements</li>
<li>Normal Elements</li>
<li>Element Type Comparision</li>
<li>HTML and XHTML Comparison</li>
</ol>
<li>Attributes</li>
<ol>
<li>Empty Attribute Syntax</li>
<li>Unquoted Attribute Value Syntax</li>
<li>Double-Quoted Attribute Value Syntax</li>
<li>Single-Quoted Attribute Value Synta</li>
<li>HTML and XHTML Comparison</li>
</ol>
<li>Comments</li>
<li>Text</li>
<li>CDATA Sections</li>
<li>Character References</li>
</ol>
<li>Understanding MIME Types</li>
<li>Character Encoding</li>
<li>Choosing HTML or XHTML</li>
<li>Polyglot Documents</li>
</ol>
<li>The HTML Vocabulary and APIs</li>
</ol>
</body>
</html>- 실행 화면
★ 문제 6
- 스타일 태그를 적용해 작성하시오.
- 소스코드
<!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>Document</title>
</head>
<body>
<h1>명언</h1>
<h3>오프라 윈프리</h3>
<p> “조금도 도전하지 않으려고 하는 것이 <b>인생</b>에서 가장 위험한 일이다.”<br><br></p>
<mark>도전에는 당연히 위험이 따른다.</mark> 안전하면 도전이 아니다. 하지만 오직 안전하기 위해 아무 것에도 도전하지 않는다면, 그건 안전한 삶이라기보다는 정체된 삶일 것이다.<br><br>
<h3>파블로 피카소</h3>
<b>“행동은</b> 모든 성공의 가장 기초적인 핵심이다.”<br><br>
아무리 좋은 생각, 아무리 기발한 아이디어도 행동으로 옮기지 않으면 한낱 공상에 지나지 않는다. <mark>마음에 품은 생각이 있다면 일단 실천하라.</mark> 설사 실패한다고 해도 그 과정에서 새로운 아이디어도 떠오른다. 그게 성공으로 가는 시작이다.<br><br>
<h3>헬렌 켈러</h3>
“절대로 고개를 떨구지 말라. 고개를 꼿꼿이 치켜 들고 두 눈으로 똑똑히 세상을 보라.”<br><br>
누구나 크고 작은 실패를 경험한다. 실패하면 부끄럽고 숨고 싶다. 하지만 실패나 좌절은 도망가면 더 따라온다. 정면으로 승부를 보겠다고 달려 들어야만 극복할 수 있다.
<h3>토마스 에디슨</h3>
“인생에서 실패한 사람의 대부분은 성공이 눈앞에 왔는데도 모르고 포기한 사람들이다.”<br><br>
무언가를 이루기 위한 과정은 지난하다. 보이지 않는 결과를 향해 나아가는 일은 고단하다. 그래도 중도에 포기하면 아무것도 시작하지 않은 것이 된다. 조금만 더, 끝까지 최선을 다하겠다는 마음이 있으면 반드시 크든 작든 결실을 볼 수 있다.
<h3>벤자민 프랭클린</h3>
“너는 머뭇거릴 수 있지만, <b>시간</b>은 그렇지 않다.”<br><br>
인간에게 주어진 시간은 유한하다. 모든 일에는 때가 있다. 후회하고 좌절하고 허송세월하는 사이에도 시간은 끊임없이 흘러간다. 나중에 되돌리려고 해봐야 소용없다. <mark>바로 지금, 할 수 있는 일을 하라.</mark>
</body>
</html>- 실행 화면
★ 문제 7
- 제공된 URL을 사용해서 링크를 작성하시오.
- 항목별 목록을 작성하시오.
- 링크는 새창으로 띄우시오.
- 소스코드
<!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>Document</title>
<h1>즐겨찾기 모음</h1>
</head>
<body>
<h2>쇼핑몰</h2>
<ul>
<li><a href="http://www.amazon.com">Amazon</a></li>
<li><a href="http://www.ebay.com">eBay</a></li>
<li><a href="http://www.bestbuy.com">Best Buy</a></li>
<li><a href="http://www.target.com">Target</a></li>
<li><a href="http://www.walmart.com">Walmart</a></li>
</ul>
<h2>프로그래밍</h2>
<ul>
<li><a href="http://www.python.org">Python</a></li>
<li><a href="http://www.java.com">Java</a></li>
<li><a href="http://www.php.net">PHP</a></li>
<li><a href="http://www.perl.org">Perl</a></li>
<li><a href="http://www.ruby-lang.org">Ruby</a></li>
</ul>
<h2>동영상</h2>
<ul>
<li><a href="http://www.youtube.com">YouTube</a></li>
<li><a href="http://www.vimeo.com">Vimeo</a></li>
<li><a href="http://www.dailymotion.com">Dailymotion</a></li>
<li><a href="http://www.metacafe.com">MetaCafe</a></li>
<li><a href="http://www.veoh.com">Veoh</a></li>
</ul>
</body>
</html>- 실행 화면
★ 문제 8
- 상단의 항목을 클릭하여 아래 컨텐츠로 이동하시오.
- a 태그의 앵커 기능을 사용하시오.
- ol 태그와 ul 태그로 목록을 구현하시오.
- 최상단 메뉴로 돌아오는 앵커를 구현하시오.
- 소스코드
<!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>Document</title>
<h1><a name="main">이미지 모음</a></h1>
</head>
<body>
<ol>
<li>사진</li>
<ul>
<li><a href="#item1">고양이</a></li>
<li><a href="#item2">강아지</a></li>
</ul>
<li>이미지</li>
<ul>
<li><a href="#item3">고양이</a></li>
</ul>
<li>아이콘</li>
<ul>
<li><a href="#item4">원</a></li>
<li><a href="#item5">사각형</a></li>
</ul>
</ol>
<hr>
<a>[더테크웨이브] 요즘 정보기술(IT) 업계에선 작년 전 세계를 강타했던 '메타버스' 광풍이 수그러들고 있다는 말이 나옵니다. 거품이 꺼지고 있다는 것이죠. 사실 메타버스 시장이 본격적으로 확대되기 위해서는 두 가지 필요 조건이 있습니다. 첫째, 하드웨어 인프라스트럭처(VR·AR·HMD)의 보급 확대입니다. 2021년 기준으로 세계 가상현실(VR)·증강현실(AR) 기기 시장 규모는 연간 1000만대 수준에 그치고 있습니다. 한국투자신탁운용은 올해 메타(옛 페이스북), 마이크로소프트(MS), 애플 등의 관련 신제품 출시로 약 3000만대까지 시장이 형성될 것으로 전망하고 있습니다. 작년에 디바이스로 누적 1000만대를 판매한 기기가 등장했지만 스마트폰 시장과 비교한다면 여전히 1%가 안 되는 보급률입니다. 내년과 후년 다수 기업의 출시가 예상되지만, 네트워크 효과를 발생시키기 위한 10%에 도달하기 위해서는 상당 기간이 걸릴 것이라는 예상입니다. 카운터포인트는 2022년 VR 시장 규모를 2900만대, AR 시장 규모는 2100만대 수준으로 전망했습니다. 둘째로는 소프트웨어 인프라의 고도화입니다. 즉 '3D 세계'를 실제로 구축할 수 있는 기술이 갖춰져야 한다는 것인데요. 시장조사기관 옴디아는 내년부터 VR 콘텐츠 시장이 VR 하드웨어 시장을 능가할 수 있다고 전망했습니다. ◆메타버스 바라보는 빅테크의 전략 차이 VR·AR 기기에 대한 빅테크의 전략에는 뚜렷한 차이가 있습니다. 기기 보급이 메타버스 상용화의 전제 조건임은 분명합니다. 소비될 수 있는 3D 콘텐츠의 다양화도 관건입니다. 빅테크 기업들은 이 둘을 모두 준비하고 있습니다. 애플은 AR 기기를 출시해 소프트웨어 구독모델 강화를, 메타는 기존 사회관계망서비스(SNS) 플랫폼 비즈니스의 메타버스 전환을 중요한 목표점으로 삼고 있다는 분석입니다. 애플 AR글래스 가상 이미지. ◆애플 AR 글라스 출시 가시화 애플은 VR 기기보다는 AR 기기에 더 많은 관심을 두고 있습니다. 최근 IT 전문매체 더인포메이션은 애플이 이르면 내년 안경 형태의 AR 헤드셋 출시를 목표로 연구개발을 진행 중이라고 분석했습니다. 애플이 VR 기기 대신에 안경 형태의 AR 헤드셋이 VR 기기의 하드웨어적 단점을 대부분 해소할 수 있을 것이라고 판단했다는 것이죠. 전자 전문매체 나인투파이브맥은 애플이 2023년 출시할 AR 헤드셋이 2000~3000달러에 출시될 것으로 전망했습니다.</a>
<hr>
<h2><a name="item1">사진 > 고양이</a></h2>
<img src="images/cat01.jpg">
<img src="images/cat02.jpg">
<img src="images/cat03.jpg">
<img src="images/cat04.jpg">
<img src="images/cat05.jpg">
<img src="images/cat01.jpg">
<img src="images/cat02.jpg">
<img src="images/cat03.jpg">
<img src="images/cat04.jpg">
<img src="images/cat05.jpg">
<p align="right"><a href="">목록으로</a></p>
<hr>
<h2><a name="item2">사진 > 강아지</a></h2>
<img src="images/dog01.jpg">
<img src="images/dog02.jpg">
<img src="images/dog03.jpg">
<img src="images/dog04.jpg">
<img src="images/dog05.jpg">
<img src="images/dog01.jpg">
<img src="images/dog02.jpg">
<img src="images/dog03.jpg">
<img src="images/dog04.jpg">
<img src="images/dog05.jpg">
<p align="right"><a href="#main">목록으로</a></p>
<hr>
<h2><a name="item3">이미지 > 고양이</a></h2>
<img src="images/catty01.png">
<img src="images/catty02.png">
<img src="images/catty03.png">
<img src="images/catty04.png">
<img src="images/catty05.png">
<img src="images/catty06.png">
<img src="images/catty07.png">
<img src="images/catty08.png">
<img src="images/catty09.png">
<img src="images/catty10.png">
<img src="images/catty11.png">
<img src="images/catty12.png">
<img src="images/catty13.png">
<img src="images/catty14.png">
<img src="images/catty15.png">
<p align="right"><a href="#main">목록으로</a></p>
<hr>
<h2><a name="item4">아이콘 > 원</a></h2>
<img src="images/circle_icon01.png">
<img src="images/circle_icon02.png">
<img src="images/circle_icon03.png">
<img src="images/circle_icon04.png">
<img src="images/circle_icon05.png">
<p align="right"><a href="#main">목록으로</a></p>
<hr>
<h2><a name="item5">아이콘 > 사각형</a></h2>
<img src="images/rect_icon01.png">
<img src="images/rect_icon02.png">
<img src="images/rect_icon03.png">
<img src="images/rect_icon04.png">
<img src="images/rect_icon05.png">
<p align="right"><a href="#main">목록으로</a></p>
<hr>
<p>여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다. 여백을 만들기 위한 임시 텍스트입니다.</p>
<hr>
</body>
</html>- 실행 화면
★ 문제 9
- 제공된 이미지를 출력하시오.
- 각각 사이즈에 맞게 출력하시오.
- 소스코드
<!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>Document</title>
<h1>Picture</h1>
</head>
<body>
<h2>200x200</h2>
<img src="images/placeimg_200_200_animals.jpg" height="200", width="200">
<img src="images/placeimg_200_200_arch.jpg" height="200", width="200">
<img src="images/placeimg_200_200_nature.jpg" height="200", width="200">
<img src="images/placeimg_200_200_people.png" height="200", width="200">
<img src="images/placeimg_200_200_tech.jpg" height="200", width="200">
<hr>
<h2>500x200</h2>
<img src="images/placeimg_500_200_animals.jpg" height="200", width="500">
<img src="images/placeimg_500_200_people.jpg" height="200", width="200">
<hr>
<h2>200x400</h2>
<img src="images/placeimg_200_400_animals.jpg" height="400", width="200">
<img src="images/placeimg_200_400_arch.jpg" height="400", width="200">
<img src="images/placeimg_200_400_nature.jpg" height="400", width="200">
<img src="images/placeimg_200_400_people.jpg" height="400", width="200">
<img src="images/placeimg_200_400_tech.jpg" height="400", width="200">
<hr>
<h2>Mixed</h2>
<img src="images/placeimg_200_300_arch.jpg" height="300", width="200">
<img src="images/placeimg_500_300_animals.jpg" height="300", width="500">
<img src="images/placeimg_300_300_animals.jpg" height="300", width="300">
</body>
</html>- 실행 화면
728x90
'웹페이지' 카테고리의 다른 글
| HTML STEP 12 - Table 예제 (2) | 2023.04.12 |
|---|---|
| HTML STEP 11 - FORM (0) | 2023.04.12 |
| HTML STEP 9 - TABLE (0) | 2023.04.11 |
| HTML STEP 8 - TAG (0) | 2023.04.11 |
| VSCode로 HTML 환경구축 (0) | 2023.04.11 |
