태그에 대해서 한번 배워볼까요?

그림넣기

쿠욱키 2005. 10. 29. 18:00
우리가 홈페이지를 만들거나...게시판에 글을 써줄때...그림을 나타나게 해줌미돠... 그림을 나타나게 해주는 태그 명령어는...img src 를 씁니다.
형식을 보면 이러케 되어 있져...
<img src="그림 URL">또는 <img src="그림이 있는 컴퓨터 경로">
그럼 한번 예제로 알아보겠습니다.

Tag

<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":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/m/4875137","DEFAULT_URL":"https://pshto.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,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875137,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; 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: "/m", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "nQ4fjQjaClRpMATeqV/mei/KGwe52jMBprCpafWaaqTBQ80XGf517K5+85VLdEWa" }; var servicePath = ""; var blogURL = "";window.T.gnbContext = {"userId":0,"userName":"","profileSrc":"https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_03.png","storyServiceURI":{"storyHome":"https://storyhome.kakao.com/","brunchStory":"https://brunch.co.kr/","kakaoStory":"https://story.kakao.com/"},"blogs":[],"tryAutoLogin":false};</script> <title>그림 나타내기</title> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875137"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/m/4875137","name":null},"url":"https://pshto.tistory.com/m/4875137","headline":"그림넣기","description":"우리가 홈페이지를 만들거나...게시판에 글을 써줄때...그림을 나타나게 해줌미돠... 그림을 나타나게 해주는 태그 명령어는...img src 를 씁니다. 형식을 보면 이러케 되어 있져... &amp;lt;img src=&quot;그림 URL&quot;&amp;gt;또는 &amp;lt;img src=&quot;그림이 있는 컴퓨터 경로&quot;&amp;gt; 그럼 한번 예제로 알아보겠습니다. Tag 그림 나타내기 실행..","author":{"@type":"Person","name":"쿠욱키","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":"2005-10-29T18:00:54+09:00","dateModified":"2005-10-29T18:00:54+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 --> </head> <body> <img src="http://home.dreamx.net/bjjhy/pooh%5B4%5D.gif"><br> <img src="../image/html/piglet.gif"> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875137","customProps":{"userId":"0","blogId":"5625759","entryId":"4875137","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875137","entryTitle":"그림넣기","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/m/4875137","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>
실행결과




그림이 나타났져??? 그림의 URL을 어떻게 아냐구여??
이렇게 한번 해보세요..^^;;
  1. 마음에 드는 그림을 검색한다.
  2. 그림에 마우스 포인터 위치한다.
  3. 마우스 오른쪽 클릭.
  4. 등록정보 클릭.
  5. 거기 위치에 그림의 URL이 보인다.
  6. 복사한다.
  7. <img src="복사한 URL 붙여넣기">
위에 보시면....자기 컴퓨터 경로를 썼습니다. 저 경로는 제 컴퓨터에만 있는 겁니다. 자기 컴퓨터에서 불러 오구 싶으시면...그림을 우선 저장해 오셔야 합니다.
그림 저장 방법은
  1. 마음에 드는 그림을 검색한다.
  2. 그림에 마우스 포인터 위치한다.
  3. 마우스 오른쪽 클릭.
  4. 다른이름으로 그림저장 클릭.
  5. 그림을 저장하고 싶은 컴퓨터 경로로 저장.
  6. <img src="그림이 들어 있는 자기 컴퓨터 경로">
이해 가시나여??? 이해 가실껍니다..한번씩 해보시면 다되는 것들이니까..^^;;

그림도...정렬 가능하고...내가..그림의 크기도 조절할수 있습니다. 앞에서 했던거 기억하시는지.... 다들 아실껌미돠..~! width=수치
그럼 아래 내용을 한번 해볼께요...^^;;

Tag

<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":5625759,"name":"pshto","title":"Happy Everyday","isDormancy":false,"nickName":"쿠욱키","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://pshto.tistory.com/m/4875137","DEFAULT_URL":"https://pshto.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,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":4875137,"isAuthor":false,"categoryId":1191931,"categoryLabel":"태그에 대해서 한번 배워볼까요?"}; 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: "/m", url: "https://pshto.tistory.com", tistoryUrl: "https://pshto.tistory.com", manageUrl: "https://pshto.tistory.com/manage", token: "nQ4fjQjaClRpMATeqV/mei/KGwe52jMBprCpafWaaqTBQ80XGf517K5+85VLdEWa" }; var servicePath = ""; var blogURL = "";window.T.gnbContext = {"userId":0,"userName":"","profileSrc":"https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_03.png","storyServiceURI":{"storyHome":"https://storyhome.kakao.com/","brunchStory":"https://brunch.co.kr/","kakaoStory":"https://story.kakao.com/"},"blogs":[],"tryAutoLogin":false};</script> <title>그림 넣기</title> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-2ef475eebbdf9ed87a9c06169b5b6225203dbf8e/static/style/revenue.css"/> <link rel="canonical" href="https://pshto.tistory.com/4875137"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://pshto.tistory.com/m/4875137","name":null},"url":"https://pshto.tistory.com/m/4875137","headline":"그림넣기","description":"우리가 홈페이지를 만들거나...게시판에 글을 써줄때...그림을 나타나게 해줌미돠... 그림을 나타나게 해주는 태그 명령어는...img src 를 씁니다. 형식을 보면 이러케 되어 있져... &amp;lt;img src=&quot;그림 URL&quot;&amp;gt;또는 &amp;lt;img src=&quot;그림이 있는 컴퓨터 경로&quot;&amp;gt; 그럼 한번 예제로 알아보겠습니다. Tag 그림 나타내기 실행..","author":{"@type":"Person","name":"쿠욱키","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":"2005-10-29T18:00:54+09:00","dateModified":"2005-10-29T18:00:54+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 --> </head> <body> 그림 원본<br> <img src="http://home.dreamx.net/bjjhy/eeyore1%5B2%5D.gif"><br> 그림의 가로 크기를 키운상태<br> <img src="http://home.dreamx.net/bjjhy/eeyore1%5B2%5D.gif" width=500><br> 그림의 가로,세로 크기를 키운 상태<br> <img src="http://home.dreamx.net/bjjhy/eeyore1%5B2%5D.gif" width=500 height=500><br> 마지막으로 그림 정렬<br> <center> <img src="http://home.dreamx.net/bjjhy/eeyore1%5B2%5D.gif"><br> </center> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5625759-4875137","customProps":{"userId":"0","blogId":"5625759","entryId":"4875137","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"4875137","entryTitle":"그림넣기","entryType":"POST","categoryName":"태그에 대해서 한번 배워볼까요?","categoryId":"1191931","serviceCategoryName":null,"serviceCategoryId":null,"author":"5530530","authorNickname":"쿠욱키","blogNmae":"Happy Everyday","image":"","plink":"/m/4875137","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>
실행결과

그림원본

그림의 가로 크기를 키운상태

그림의 가로,세로 크기를 키운 상태

마지막으로 그림 정렬



어떠시나여???
한번 해보시니까..감이 팍~!! 오시져?? ^^;;
이제 뒷장에서...그림의 옵션에 대해서 알아보도록 하겠습니다...^^:;