목록2016/12 (35)

무민이의 반반무많이

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" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/241FFE3A58456DC913"></a> <a href="/134" 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="list_content"> <a href="/133" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/2465603658426F2A04"></a> <a href="/133" class="link_post"> <strong class="tit_post ">HTML 활용하기 ③</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)아래와 같은 결과가 나오도록 HTML을 직접 코딩해보자.Log-out을 클릭하면 로그인 화면으로, 새글등록을 클릭하면 새글등록 화면으로 이동하도록 하이퍼 링크를 설정한다.① 제목 표시줄 설정② 제목 설정③ 내용- <font color = "green"> → 글꼴 색을 녹색으로 설정④ 표- <table width = "700px"> → 표의 너비를 700px로 설정⑤ 표- <u> → 밑줄을 그어주는 태그⑥ 전체 소스</p> </a> <div class="detail_info"> <a href="/category/HTML" class="link_cate">HTML</a> <span class="txt_bar"></span> <span class="txt_date">2016.12.03 16:12</span> </div> </div> <div class="list_content"> <a href="/132" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/254E144858426B5403"></a> <a href="/132" class="link_post"> <strong class="tit_post ">HTML 활용하기 ②</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)아래와 같은 결과가 나오도록 HTML을 직접 코딩해보자.① 제목 표시줄 설정② 제목 설정③ 표- size = "40px" → 크기를 40px로 설정. <input type = "text" size = "40px">의 경우 텍스트 상자의 크기가 40px이 된다.④ 전체 소스</p> </a> <div class="detail_info"> <a href="/category/HTML" class="link_cate">HTML</a> <span class="txt_bar"></span> <span class="txt_date">2016.12.03 15:53</span> </div> </div> <div class="area_paging"> <span class="inner_paging"> <a href='/archive/201612?page=2' class="btn_prev "><span class="ico_skin ico_prev"></span>Prev</a> <a href='/archive/201612?page=1' class="link_page"><span >1</span></a> <a href='/archive/201612?page=2' class="link_page"><span >2</span></a> <a class="link_page"><span class="selected">3</span></a> <a href='/archive/201612?page=4' class="link_page"><span >4</span></a> <a href='/archive/201612?page=4' class="btn_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>