목록HTML5 (30)

무민이의 반반무많이

table 태그로 표 만들기

(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)

태그를 이용하여 페이지에 표를 삽입할 수 있다. border 속성을 이용하여, 테두리의 두께를 설정할 수도 있다.우리가 만들고자 하는 표의 행과 열에 대한 속성을 하나도 지정하지 않으면, 위의 결과가 나타나게 된다. 태그를 이용하여 표의 행(줄),
태그를 이용하여 행(줄)의 제목, 태그를 이용하여 표의 열(칸)을 지정할 수 있다. (tr : table row, th : table header, td : table data) 태그나 태그 안에서 colspan 속성을 사용하면, 원하는 개수 만큼 열을 병합할 수 있고, rowspan 속성을 사용하면, 원하는 개수 만큼 행을 병합할 수 있다.

HTML5 2016.12.07 21:37
title 태그로 브라우저에 표시되는 제목 설정하기

(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.) 태그 안에 태그를 이용하여 브라우저에 표시되는 제목을 설정할 수 있다.<html> 태그의 lang 속성과 마찬가지로 검색 엔진에 웹 페이지의 제목과 관련된 정보를 주는데 사용되므로 꼭 입력해 주는 것이 좋다.</p> </a> <div class="detail_info"> <a href="/category/HTML5" class="link_cate">HTML5</a> <span class="txt_bar"></span> <span class="txt_date">2016.12.05 22:48</span> </div> </div> <div class="list_content"> <a href="/134?category=654352" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/241FFE3A58456DC913"></a> <a href="/134?category=654352" class="link_post"> <strong class="tit_post ">HTML5 페이지 구조</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)- Line 1 : 웹 브라우저가 현재 웹 페이지가 HTML5 문서 임을 인식하게 만들어 준다. (문서의 가장 첫번째 줄에 있어야 함)- Line 2 : HTML 페이지의 루트 요소 (lang 속성 생략 가능)국가 속성값 한국 ko 미국 en 일본 ja 러시아 ru 중국 zh 독일 de- Line 3 ~ 5 : body 태그에서 필요한 추가 정보, 자바스크립트 등을 제공하는데 사용태그 이름 설명 meta 웹 페이지에 추가 정보 전달 title 웹 페이지 제목 script 웹 페이지에 스크립트 추가 link 웹 페이지에 다른 파일 추가 style 웹 페이지에 스타일시트 추가 base 웹 페이지의 기본 경로 지정- Line 6 ~ 8 : 사용자에게 보이는 실..</p> </a> <div class="detail_info"> <a href="/category/HTML5" class="link_cate">HTML5</a> <span class="txt_bar"></span> <span class="txt_date">2016.12.05 22:35</span> </div> </div> <div class="area_paging"> <span class="inner_paging"> <a href='/category/HTML5?page=2' class="btn_prev "><span class="ico_skin ico_prev"></span>Prev</a> <a href='/category/HTML5?page=1' class="link_page"><span >1</span></a> <a href='/category/HTML5?page=2' class="link_page"><span >2</span></a> <a class="link_page"><span class="selected">3</span></a> <a class="btn_next no-more-next">Next<span class="ico_skin ico_next"></span></a> </span> </div> </div> </div> </div> <hr class="hide"> <div id="dkFoot" role="contentinfo" class="area_foot"> <small class="info_copyright"> Blog is powered by <a href="http://www.kakaocorp.com" class="emph_t" target="_blank">kakao</a> / Designed by <a href="http://www.tistory.com" class="emph_t" target="_blank">Tistory</a> </small> </div> </div> <script src="https://tistory1.daumcdn.net/tistory/2204343/skin/images/script.js"></script> <script type="text/javascript"> document.oncontextmenu = new Function ('return false'); document.ondragstart = new Function ('return false'); document.onselectstart = new Function ('return false'); document.body.style.MozUserSelect = 'none'; </script> <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/0ccc8ebc82d8ddff2b5d35df8bbed2d6312aba8f/blogs/plugins/PreventCopyContents/js/functions.js?_version_=0ccc8ebc82d8ddff2b5d35df8bbed2d6312aba8f"></script> <script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script> <script type="text/javascript"> if(!wcs_add) var wcs_add = {}; wcs_add["wa"] = encodeURI("7a063d6d8e578"); wcs_do(); </script><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-79834123-1', 'auto'); ga('send', 'pageview'); </script><script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script> <script> (function($) { $("body").bind('copy', function (e) { var url = document.location.href, decodedUrl = decodeURI(url), selection = window.getSelection(); if (typeof window.getSelection == "undefined") {//IE8 or earlier... event.preventDefault(); var pagelink = '\n\n 출처: ' + decodedUrl, copytext = selection + pagelink; if (window.clipboardData) { window.clipboardData.setData('Text', copytext); } return; } var body_element = document.getElementsByTagName('body')[0]; //if the selection is short let's not annoy our users if (("" + selection).length < 30) return; //create a div outside of the visible area var newdiv = document.createElement('div'); newdiv.style.position = 'absolute'; newdiv.style.left = '-99999px'; body_element.appendChild(newdiv); newdiv.appendChild(selection.getRangeAt(0).cloneContents()); //we need a <pre> tag workaround //otherwise the text inside "pre" loses all the line breaks! if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") { newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>"; } newdiv.innerHTML += '<br /><br />출처: <a href="' + url + '">' + decodedUrl + '</a> [무민이의 반반무많이]'; selection.selectAllChildren(newdiv); window.setTimeout(function () { body_element.removeChild(newdiv); }, 200); }); })(tjQuery); </script> <script> lightbox.option({ "fadeDuration": 200, "resizeDuration": 200, "wrapAround": false, "albumLabel": "%1 / %2", "fitImagesInViewport":true , "stopEvent": false }) </script><script type="text/javascript"> var _tiq = 'undefined' !== typeof _tiq ? _tiq : []; _tiq.push(['__setConfig', {enableScroll:true, enableClick:true, enableButton:true}]); _tiq.push(["__setParam", "svcdomain", "user.tistory.com"]); (function(d) { var se = d.createElement('script'); se.type = 'text/javascript'; se.async = true; se.src = location.protocol + '//m2.daumcdn.net/tiara/js/td.min.js'; var s = d.getElementsByTagName('head')[0]; s.appendChild(se); })(document); _tiq.push(['__setParam', 'param_ex', JSON.stringify({"userId":"1144682","blogId":"2204343","role":"guest","filterTarget":false})]); _tiq.push(['__trackPageview']); var addEvent = function (evt, fn) { window.addEventListener ? window.addEventListener(evt, fn, false) : window.attachEvent('on' + evt, fn); }; var removeEvent = function(evt, fn) { window.removeEventListener ? window.removeEventListener(evt, fn, false) : window.detachEvent('on' + evt, fn);}; var ua = navigator.userAgent.toLowerCase(); var isIOS = /iP[ao]d|iPhone/i.test(ua); var contentExStat = function() { _tiq.push(['__content', 't_content_ex', { 'data_type':'usage' }]); removeEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); }; addEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); </script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || []; window.roosevelt_params_queue.push({channel_id: "dk", channel_label: 'tistory'});</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async></script><script type="text/javascript">if(window.console!=undefined){setTimeout(console.log.bind(console,"%cTISTORY","font:8em Arial;color:#EC6521;font-weight:bold"),0);setTimeout(console.log.bind(console,"%c 나를 표현하는 블로그","font:2em sans-serif;color:#333;"),0);}</script><iframe style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//moomini.tistory.com/api" id="editEntry"></iframe><div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div><div id="tistoryEtcLayer" class="layer_post"></div><div id="tistorySnsLayer" class="layer_post"></div></body> </html>