태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

'이미지'에 해당되는 글 2건

  1. 2012.09.17 한국의 100대 한식당
  2. 2007.10.25 HTML 초보도 할 수 있다. (이미지 넣기)



유용한 정보네요.  
 

신고

'상대적인 백과사전' 카테고리의 다른 글

[제주] 소희네 해산물천국  (2) 2012.12.02
한국의 100대 한식당  (0) 2012.09.17
2008 Can-Am Spyder  (0) 2012.09.13
술 즐겁게 먹고 빨리 깨는 방법  (0) 2010.04.13
Posted by 이대표 이대표님
한동안 리눅스의 망령에 쫓겨서
HTML을 정복하는데 시간을
많이 할애하지 못했다.
어렵지 않다 금방 익힐 수 있다.
다만 꾸준한 반복과 연습만이 100줄로 표현할 일을
30줄로 표현할수 있는 능력을 길러 줄뿐이다.
연습들 많이 해보고 명령어들이 손에 익도록 하라.
그리고 오늘부터 하는 이야긴 어느정도
HTML의 코드의 기본을 안다는 전제하에 시작하도록 하겠다.
어떻게 ,어디서 HTML을 시작해야하는지에 관한 기초적인 질문은
댓글로 남겨 주면 따로 대답을 해드리록 하겠다.

이번에는 웹페이지에 이미지를 넣는 법을 배워보도록 하겠다.
여기서 중요한건 이미지를 맞게 삽입하였다고 하여서 무조건 배경이
나오는건 아니다.어느정도 기초가 있으신 분들은 이 말을 이해하겠지만
초보분들에겐 무슨 소린지 통 해석이 되질 않겠지요?
그림을 삽입하는건 어디에 저장되어 있는 그림을 불러온다는
이야기로 바꾸어 말을 할 수 있다.
그래서 그 이미지가 저장된 공간에서 삽입될 이미지를 불러와야지
제대로 삽입된 이미지를 보실수 있다.
그 저장 장소가 내 컴퓨터의 어느 폴더안이 될수 있고
웹 서버안의 어느 부분이 될 수 있다.
우리는 초보니 쉽게 가겠다.
우선
간단한 편집기 EDITPLUS를 추천해 보죠.
뭐 돈을 내야하는데 30일 무료 체험판이 있으니 걱정마시고 꾸준히 연습
하시면 한 달뒤면 모두 고수가 되어 있을것 같다.

완전 초보를 위해서 간단하게 사용법을 설명해 드리면
위의 에디트플러스를 다운받아서 설치하면 바탕화면에
바로가기 아이콘이 보인다.그럼 그걸 클릭하여~실행하면된다.
다운받아 설치하는 방법은 간단하다.겁먹지 말고 설치부터 하도록 하여라
그리고 프로그램이 실행이 되면 이것 저것 놀러보면서 뭐가 있나
일단 눈으로 익혀보고 시작을 하여라.
나중에 어떤게 있나 찾지말고 말이다 .
그리고 여기에 보면
oldfile 이란 폴더가 보일텐데 여기에 앞으로 할 예제들을
저장하고 실행해 보도록 하겠다.
굳이 이걸 안쓰고 메모장으로 할려면 바탕화면에 새폴더를 하나 만들고 거기에
HTML코드로 짠 내용을 저장하도록 하라.

시작하겠다.
우선 어떤 그림을 웹 이미지로 삽입할려면 삽입할려는
이미지가 있어야 한다.
각자 취향에 맞는 이미지를 찾고 찾았으면 일단~~
이 그림을 에디트플러에선 oldfile
그리고 메모장이면 바탕화면에 만든 새 폴더안에 옮겨놓아라.
왜냐하면 앞으로 우리는 여기에 저장된 이미지들을 불러서
HTML코드로 작성하여 출력하도록 할 것이기 때문이다.
다른 폴더를 지정해도 되는데 초보자를 위한 설명이기에
쉽게 가도록 하겠다. 익숙해지고 서버에 대해서
알게 되면 그때 지금 배운 것들을 응용하면 된다.
초반부터 고수들이 하는 것을 따라 갈려고 하지마라.
자 이제 이미지가 저장되었다.
그리고 아래와 같은 코드를 입력해보도록 하자.

<HTML>
  <HEAD>
  </HEAD>
     <BODY>
         <img src="004.jpg" width="400" height="400" border="10">
     </BODY>
</HTML>
자 위의 코드를 설명하겠다.
<HTML>는 코드를 짜는것을 알리는 시작의 의미를 가지고 있다.
이 코드 다음에 <HEAD>라는 코드는 제목~이란 뜻으로 알고 있으면 편하겠다
그리고 <BODY>라는 부분에 우리가 출력하고자 하는 이미지를 넣는 것이다.
<BODY>이부분에서 실수없이 코드를 잘 쓴다면 원하는 이미지가 잘 나올 것이다.
<img src="004.jpg" width="400" height="400" border="10">
<BODY>다음에 나오는 이부분이 이미지을 넣으라는 명령어인데 함 알아보자.
배경을 삽입하는 명령어는
img src 이며 이다음에 "  " 안에 들어가는게 우리가 출력하게될 이미지의 이름되겠다.
각자 틀리겠으니 저장할때 쓴 이미지의 이름을 입력해보도록 하라.
그 다음에 보이는 명령어가 width="400" 인데 이건 이미지의 넓이를 지정하는
부분이다."   " 안의 숫자만 바꾸어 주면 이미지의 크기가 달라진다.
이 숫자를 "50%"란 비율로 정해주어도 출력이 된다 확인해 보도록 하라/
그리고  height="400" 는 이미지의 높이를 지정하는 명령어이고
width와 마찬가지로 %를 입력하여도 된다.
그리고 마지막에 나와있는 border="10"이란 명령어는
이미지의 테두리 굵기를 "   "안의 숫자만큼 하란 이야기이다.
그리고 각 명령어를 종료하는 부분은 </>으로 마무리 해준다.
신발도 짝이 있듯이 HTML에서도 짝이 있다는걸 숙지하도록 하자.
위의 코드처럼 입력을 다했다면 이제 저장을 하도록 하자 .
에디트플러스는 다른이름으로 저장하기 위하여 간단한 이름뒤에.html
그리고 메모장도 마찬가지로 .html을 꼭 붙여주자.
그리고 저장된 폴더에서 우리가 저장했던 파일을 클릭해보자 .원하던 배경이 나오는가?

위의 코드와 동일하게 입력하였는데도 나오지 않는다면
이미지를 저장할때
엉뚱한 곳에 저장했던가 아니면 엉뚱한 곳의 이미지를 불러와서
보이지 않는 것일 수도 있다.그리고 저장할때 확장자를 확인하지 않고 저장
했을 시에도 마찬가지다.
안된다면 아래 그림을 보고 다시 만들어 보자
사용자 삽입 이미지
에디트플러스로 만들어본 것이다.왼쪽에 저장될 폴더 oldfile이 보이고 이곳에
이미지가 같이 저장되어 있다는 것을 볼 수 있다.
한가지 팁은 에디트 플러스에선 ctrl +b 를 눌러주면 미리 보기를
할 수 있다.
저장을 시키고 ctrl +b를 누르면
사용자 삽입 이미지
위와 같은 이미지가 뜨는 것을 확인 할 수 있다.
(참고로 난 박한별팬이다.그래서 앞으로 모든 예제에는
박한별의 사진을 사용하도록 하겠다.그런데 이거 저작권에 걸리는
짓이 아닌지 몰라~~)

메모장으로 출력을 할려면 위의 코드가 저장된 폴더에서
익스플로러로 저장된 파일을 클릭하면 웹 상에 자기가 삽입했던 그림이 뜨게 된다.
(이미지와 저장한 코드가 한 폴더안에 있어야 이미지가 보인다.왜 우린 초보니깐 ㅎ)
얼마나 쉬운가~그러니 겁 먹지 말고 차근차근 하나씩 해나가도록 하자.
자 질문할 사항이 있다면 댓글로 남겨주시기 바란다.
성심성의껏 아는 범위안에서 설명을 해드리도록 하겠다.






신고
Posted by 이대표 이대표님
태터데스크를 설정하시기 바랍니다.



티스토리 툴바