목록전체 (166)

무민이의 반반무많이

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="list_content"> <a href="/133?category=653483" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/2465603658426F2A04"></a> <a href="/133?category=653483" 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?category=653483" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/254E144858426B5403"></a> <a href="/132?category=653483" 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="list_content"> <a href="/131?category=653483" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/260DB04F5842674032"></a> <a href="/131?category=653483" class="link_post"> <strong class="tit_post ">HTML 활용하기 ①</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)아래와 같은 결과가 나오도록 HTML을 직접 코딩해보자.① 제목 표시줄 설정② 제목 설정③ 표- border = "1" → 표 테두리 두께 1px로 설정- cellpadding = "0" → 셀의 안쪽 여백을 0px로 설정- cellspacing = "0" → 셀과 셀 사이의 간격을 0px로 설정- align = "left" → 왼쪽 정렬(center : 가운데 정렬, right : 오른족 정렬)- bgcolor = "yellow" → 배경색을 노란색으로 설정- colspan = "2" → 2개의 열을 하나로 합침④ 전체 소스</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:41</span> </div> </div> <div class="list_content"> <a href="/130?category=653483" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/2241C937584262DA26"></a> <a href="/130?category=653483" class="link_post"> <strong class="tit_post ">input 태그로 Button(버튼) 만들기</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)<input> 태그를 이용하여 Button(버튼)을 삽입할 수 있다. type 속성을 button으로 지정하면 된다.value 속성을 이용하여 Button(버튼) 안에 텍스트를 삽입할 수 있다.</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:16</span> </div> </div> <div class="list_content"> <a href="/129?category=653483" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/2619774C584260A817"></a> <a href="/129?category=653483" class="link_post"> <strong class="tit_post ">select 태그로 Select Box(선택 상자) 만들기</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)<select> 태그를 이용하여 Select Box(선택 상자)를 삽입할 수 있다.<Option> 태그를 이용하여 Select Box(선택 상자) 안에 항목들을 추가할 수 있다.사용자가 선택하지 않았을 때, 기본적으로 첫 번째 항목이 선택되지만, selected 속성을 통해 기본적으로 선택되는 값을 바꿀 수 있다. Radio Button(라디오 버튼)이나 Check Box(체크 박스)의 checked 속성과 헷갈리지 않도록 주의하자.</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:10</span> </div> </div> <div class="list_content"> <a href="/128?category=653483" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/2642F03D58425E8807"></a> <a href="/128?category=653483" class="link_post"> <strong class="tit_post ">input 태그로 Check Box(체크 박스) 만들기</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)<input> 태그를 이용하여 Check Box(체크 박스)를 삽입할 수 있다. type 속성을 checkbox로 지정하면 된다.Radio Button(라디오 버튼)은 한 가지만 선택 가능하지만, Check Box(체크 박스)는 여러개를 동시에 선택할 수 있다는 차이점이 있다.사용자가 선택하지 않아도 기본적으로 선택되어 있도록 하기 위해, 선택을 원하는 Check Box(체크 박스)에 checked 속성을 추가해주면 된다.</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 14:59</span> </div> </div> <div class="list_content"> <a href="/127?category=653483" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/2320BC4358425BFD0E"></a> <a href="/127?category=653483" class="link_post"> <strong class="tit_post ">input 태그로 Radio Button(라디오 버튼) 만들기</strong> <p class="txt_post">(공감과 댓글 하나는 글쓴이에게 큰 힘이 됩니다.)<input> 태그를 이용하여 Radio Button(라디오 버튼)을 삽입할 수 있다. type 속성을 radio로 지정하면 된다.아래와 같이 입력하고 실행해보면, 정상적으로 표시가 되지만, 여러개를 선택할 수 있다는 문제가 있다.한 개만 선택할 수 있도록 하기 위해서, 각각의 Radio Button(라디오 버튼)에 name 속성을 동일하게 지정해주면 된다.사용자가 선택하지 않아도 기본적으로 한 개가 선택되어 있도록 하기 위해, 기본 선택을 원하는 Radio Button(라디오 버튼)에 checked 속성을 추가해주면 된다.</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 14:51</span> </div> </div> <div class="area_paging"> <span class="inner_paging"> <a href='/category/?page=3' class="btn_prev "><span class="ico_skin ico_prev"></span>Prev</a> <a href='/category/?page=1' class="link_page"><span >1</span></a> <a href='/category/?page=2' class="link_page"><span >2</span></a> <a href='/category/?page=3' class="link_page"><span >3</span></a> <a class="link_page"><span class="selected">4</span></a> <a href='/category/?page=5' class="link_page"><span >5</span></a> <a href='/category/?page=6' class="link_page"><span >6</span></a> <a href='/category/?page=7' class="link_page"><span >7</span></a> <a class="link_page"><span >···</span></a> <a href='/category/?page=17' class="link_page"><span >17</span></a> <a href='/category/?page=5' 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>