본문 바로가기
컴퓨터과학[2-1]/knou_[2-1]HtmlXml

HTML 2강.자기소개서, 3강 사진첩 실습 응용

by boolean 2015. 4. 8.
728x90
My Portfolio

HTML 2강.자기소개서, 3강 사진첩 실습 응용

응용보다 교재 내용에 충실히 따르려 하였다. 각 링크를 클릭해서 즐겁게 공부해보자.

자기소개서

교재에 나오는 보다 다양한 태그 활용을 위해 아마존 웹 서비스를 이용 하였다.



<!DOCTYPE HTML>

<head>
  <meta charset = "utf-8" /> 
  <title>My Portfolio</title>

                <style type="text/css">.another_category {
    border: 1px solid #E5E5E5;
    padding: 10px 10px 5px;
    margin: 10px 0;
    clear: both;
}

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

                
                <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/revenue.css"/>
<link rel="canonical" href="https://booolean.tistory.com/227"/>

<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://booolean.tistory.com/227","name":null},"url":"https://booolean.tistory.com/227","headline":"HTML 2강.자기소개서, 3강 사진첩 실습 응용","description":"My Portfolio HTML 2강.자기소개서, 3강 사진첩 실습 응용 응용보다 교재 내용에 충실히 따르려 하였다. 각 링크를 클릭해서 즐겁게 공부해보자. 자기소개서 교재에 나오는 보다 다양한 태그 활용을 위해 아마존 웹 서비스를 이용 하였다. 자기소개서 사진첩 1 사진첩 2 사진첩 3 자기 소개서 기본사항 Name : 홍 길동 Age : 18 Address :서울시 중구 Phone : 010-0123-4567 E-mail : hong@abc.com Tall : 180Cm Weight : 75KG Blood : O형 Hobby : Travel 학력사항 한국 초등학교 2000년 졸업 한국 중학교 2003년 졸업 한국 고등학교 2006년 졸업 한국 대학교 2010년 졸업 한국대학원 2012년졸업 main ..","author":{"@type":"Person","name":"boolean","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2015-04-08T00:23:02+09:00","dateModified":"2015-04-30T00:17:51+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/comment.js" defer=""></script>

                
                </head>

   <h1 align="center">자기 소개서</h1>
   <hr>
   <h2>기본사항</h2>
   <ul>
   <table>
   <tr>
     <td><li>Name   </td><td> :</td><td>   홍 길동</li></td>
   </tr>
   <tr>
     <td><li>Age    </td><td> :</td><td>   18</li></td>
   </tr>
   <tr>
     <td><li>Address</td><td> :</td><td><address>서울시 중구</address>   </li></td>
   </tr>
   <tr>
     <td><li>Phone  </td><td> :</td><td>   010-0123-4567</li></td>
   </tr>
   <tr>
     <td><li>E-mail </td><td> :</td><td>   hong@abc.com</li></td>
   </tr>
   <tr>
     <td><li>Tall   </td><td> :</td><td>   180Cm</li></td>
   </tr>
   <tr>
     <td><li>Weight </td><td> :</td><td>   75KG</li></td>
   </tr>
   <tr>
     <td><li>Blood  </td><td> :</td><td> <em>  O형</em></li></td>
   </tr>
   <tr>
     <td><li>Hobby  </td><td> :</td><td>   Travel</li></td>
   </tr>
     
   </table>
   </ul>
   <p><font size="5" color="darkblue" face="돋움, arial, 굴림">학력사항</font></p>
   <ul type="circle">
       <li>한국 초등학교 2000년 졸업</li>
       <li>한국 중학교 2003년 졸업</li>
       <li type="square">한국 고등학교 2006년 졸업</li>
       <li><b><i>한국 대학교 2010년 졸업</i></b></li>
       <li type="disc">한국대학원 2012년졸업</li>
   </ul>
   <hr>
   <div>
   <center>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02.html">main</a>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02-1.html">1</a>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02-2.html">2</a>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02-3.html">3</a>
  </center>
   </div>

사진첩 소스보기

[SOURCE VIEW]


<!DOCTYPE HTML>

                                                <head>
                <script type="text/javascript">if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":1560470,"name":"booolean","title":"Boolean","isDormancy":false,"nickName":"boolean","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://booolean.tistory.com/227","DEFAULT_URL":"https://booolean.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"};
window.T.entryInfo = {"entryId":227,"isAuthor":false,"categoryId":573479,"categoryLabel":"컴퓨터과학[2-1]/knou_[2-1]HtmlXml"};
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};

window.TistoryBlog = {
    basePath: "",
    url: "https://booolean.tistory.com",
    tistoryUrl: "https://booolean.tistory.com",
    manageUrl: "https://booolean.tistory.com/manage",
    token: "WxFJy3hYEUnUmHex8RtyNsBthk+MRItz9XA5CwmokTckMsiquEWNfkqTDRBljxDk"
};
var servicePath = "";
var blogURL = "";</script>

                
                
                
  <meta charset = "utf-8" /> 
  <title>My Portfolio</title>

                <style type="text/css">.another_category {
    border: 1px solid #E5E5E5;
    padding: 10px 10px 5px;
    margin: 10px 0;
    clear: both;
}

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

                
                <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/revenue.css"/>
<link rel="canonical" href="https://booolean.tistory.com/227"/>

<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://booolean.tistory.com/227","name":null},"url":"https://booolean.tistory.com/227","headline":"HTML 2강.자기소개서, 3강 사진첩 실습 응용","description":"My Portfolio HTML 2강.자기소개서, 3강 사진첩 실습 응용 응용보다 교재 내용에 충실히 따르려 하였다. 각 링크를 클릭해서 즐겁게 공부해보자. 자기소개서 교재에 나오는 보다 다양한 태그 활용을 위해 아마존 웹 서비스를 이용 하였다. 자기소개서 사진첩 1 사진첩 2 사진첩 3 자기 소개서 기본사항 Name : 홍 길동 Age : 18 Address :서울시 중구 Phone : 010-0123-4567 E-mail : hong@abc.com Tall : 180Cm Weight : 75KG Blood : O형 Hobby : Travel 학력사항 한국 초등학교 2000년 졸업 한국 중학교 2003년 졸업 한국 고등학교 2006년 졸업 한국 대학교 2010년 졸업 한국대학원 2012년졸업 main ..","author":{"@type":"Person","name":"boolean","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2015-04-08T00:23:02+09:00","dateModified":"2015-04-30T00:17:51+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-c9fbfae426e43fbd9d07ad246065fb3a17523cb3/static/script/comment.js" defer=""></script>

                
                </head>

   <center>
   <h1><font color="red">
   <img src="https://t1.daumcdn.net/cfile/tistory/2345B44B51F2C7DB1A" width="50px" border="3"></font>
   PHOTO ALBUM
   <img src="https://t1.daumcdn.net/cfile/tistory/225C584C51F2C7DE16" width="50px" border="3">
   </h1>
   </center>

   <hr color = "red">
   <a href = "https://t1.daumcdn.net/cfile/tistory/2546484B51F2C7CB18" target="_blank">
   <img src="https://t1.daumcdn.net/cfile/tistory/2546484B51F2C7CB18" width="150" align="right"> </a> 
   1page의 첫번째 그림<br />
    &lt;... align = "right" &gt; ...&lt;br clear="right" /&gt;

   <br clear="right" />
   <hr color = "green">
   <a href = "https://t1.daumcdn.net/cfile/tistory/253F9A4B51F2C7D01A" target="_blank">
   <img src="https://t1.daumcdn.net/cfile/tistory/253F9A4B51F2C7D01A" width="150" align="middle"></a>
   1page의 두번째 그림
   &lt;... align = "middle" &gt; ...&lt;br clear="left" /&gt;
   <br clear="left" />
   <hr color = "blue">
  <a href = "https://t1.daumcdn.net/cfile/tistory/2447A34B51F2C7D619" target="_blank">
   <img src="https://t1.daumcdn.net/cfile/tistory/2447A34B51F2C7D619" width="150" align="top"></a>
  
   1page의 세번째 그림
   &lt;... align = "top" &gt; ...&lt;br clear="left" /&gt;
   
   <br clear="left" />
   <hr color = "orange">
    <a href = "https://t1.daumcdn.net/cfile/tistory/235C864C51F2C7E015" target="_blank">
   <img src="https://t1.daumcdn.net/cfile/tistory/235C864C51F2C7E015" width="150" align="bottom"></a>
  
   1page의 세번째 그림
   &lt;... align = "bottom" &gt; ...&lt;br clear="left" /&gt;
   
   <br clear="left" />
   <hr color = "blueviolet">
   <div>
   <center>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02.html">main</a>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02-1.html">1</a>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02-2.html">2</a>
     <a href="http://ec2-54-64-231-37.ap-northeast-1.compute.amazonaws.com/WebContent/20150201/study_html/_html/html02-3.html">3</a>
  </center>
   </div>


저작자표시 비영리 변경금지

'컴퓨터과학[2-1] > knou_[2-1]HtmlXml' 카테고리의 다른 글

HTML/XML 2014 1학기 중간시험 예상문제 풀이  (0) 2015.04.08
HTML/XML 2014 1학기 중간시험 문제 풀이  (0) 2015.04.08
HTML 기본태그 [Text 관련태그 : 논리적 태그]  (0) 2015.04.07
XML 이란  (0) 2015.01.02
HTML 기본태그 [Text 관련태그 : 물리적 태그]  (0) 2013.08.20

관련글

댓글

티스토리툴바