호호~ 당금 4 월이군요~
유난히 겨울엔 무덥더니만 이제 봄날에
맹추위가 몰아치는군요. 뭔 날씨가 -_-;
북경쪽엔 황사가 몰아친다던데...
그 황사가 서울까지 가서 보기드물게..
엽기적으로 몰아친다 하여 일명 [연변황사] 라 하더군요.
어느 게시판에서 봤더라? 쩝~ 생각않남 -_-; 흐....
자 이제 강좌를 시작하겠습니다.
오늘은
img 태그 일명
그림넣는 태그를 배워보도록 하겠습니다.
그림을 넣다...
홈페이지랑 돌아다니며 그림을 보셨죠?~
그 그림은 어떻게 들어 갔을까요?
그냥 홈페이지에 풀로 딱 붙이는거도 아니고...
태그를 사용해야 원하는 위치에 정확하게
딱~ 들어 박힙니다.
그림을 넣는데 쓰는 태그
img 용법을 보도록 합시다.
역시 먼저 예제 소스를 보시고 하나하나 집어봅시다.
<html>
<head>
<title>그림을 넣자 - img 로</title>
</head>
<body>
<center>
<p>
<img src="http://life.moyiza.kr/~noa/img/taji.jpg" border="0" widht="250" height="270" align="center">
<p>
안녕하세요 ^_^ <br>처음 만드는 홈페이지 입니다.<p>
아직 많이 부족하지만요 ^^; 열심히 배워서<br>
이쁜 홈페이지 만들겁니다. 기대해 주세요 ^^<p>
저의 메일 :<a href="mailto:나의 메일주소">나의 메일주소<p>
</center>
</body>
</html>
|
예제를 보시려면 이곳을 클릭해보세요.
위 소스에서 처음 나오는 생소한 것들을 봅시다.
붉게 표시된 줄이 이번강에 배울 내용입니다.
(다음부터는 그 시간에 배울 내용을 요렇게 붉게 혹은 푸르게 칠하겠습니다.
물론 다른 색일수도 있습니다 -_-; 그냥 소스중에 색을 넣어서 좀 환~하게..해보려고..)
<img src="http://life.moyiza.kr/~noa/img/taji.jpg" border="0" widht="250" height="270" align="center">
이곳에서 img src 가 그림 넣어주는 태그 입니다.
용법은?
#########################################################
<img src="그림 위치를 주루룩~">
border="0" --- 그림테두리가 0 이란 말이고..
width="250" ---그림 넓이가 250 픽셀이란 말이고...
height="270" --그림 길이가 270 픽설이란 말입니다.
align="center" -이미지 정렬을 중간에 한단 말입니다.
#########################################################
이상 입니다.
이제 자세하게 해석해 볼까요?
처음것 : <img src="그림 위치를 주루룩~">
img src 해주시고 ="그림위치"를 적습니다.
그림위치란 뭔가면요...
그림+위치 = 그림이 있는 곳입니다. -_-;
그림 있는곳은 어덴가?
지금 바로 따라해 보세요~
1. 시선을 천천히 우로 올립니다.
2. 모이자 제일 위에 노오란 그림을 봅니다.
3. 아~ 이쁘구나~ 감탄합니다.
4. 파란색 지구를 세명의 조선족(?) 이 감싸안은 그림우에
마우스를 올려놓고 마우스 오른쪽 버튼을 누릅니다.
5. 쭈~욱 튕겨나오는 메뉴에서 제일 밑쪽에 [등록정보]를 선택합니다.
6. 이제 봅니다.
7. 정확히 따라하셨다면 중간쯤에
----------------------------------------------
주소: http://www.moyiza.org/img/img_0_2.jpg
(URL)
----------------------------------------------
요런 정보가 있을겁니다.
8. 이것이 그림이 있는 위치입니다.
♨ 그 곳에서 약간 아래로 보시면
---------------------------------
해상도: 144 * 76 픽셀
---------------------------------
이라고 있습니다. 이건 좀 있다 가르칩니다.
먼저 기억을 하십시요.
음~~ 아~~ 이제 그림 위치는 아시겠죠..
내 컴퓨터에 있는 경로는 전번 파일저장 강의때
말씀 드렸습니다. 모르시면 질문을 --*
다음것 : border="0"
해석이 필요없습니다. 그냥 테두리가 0 이란 말입니다.
의문이 가시면 손수 border="1" 로 해보시고 확인하세요.
그 다음 두개 : width="250" 와 height="270"
그림의 넓이와 길이 입니다.
그림 넓이가 250 픽셀 길이가 270 픽셀이란 말입니다.
현재 서태지 그림은 250 * 270 으로 되였죠~
그림 크기 정보역시 [등록정보] 에서 확인합니다.
아까 모이자 제일위에 그림은
---------------------------------
해상도: 144 * 76 픽셀
---------------------------------
요렇게 나와 있었죠~ ^_^
여기서 잠깐~!
그림을 넣을적엔 width 와 height 를 써주지 않아도
기본으로 출력됩니다. 하지만 써도 출력됩니다. -_-;
1. 넓이랑 길이랑 적어 줬을때
그림이 채 나오기(로딩)전에 한 페이지에 있는
글자가 먼저 출력됩니다.
2. 넓이랑 길이랑 적어 않줬을때
그림이 다~~ 나온(로딩된)후 한페이지에 있는
글자가 나옵니다.
그림이 아주아주 클적에 알립니다.
작으면 그냥 글이랑 함께 파딱파딱 뜨죠~~
크기를 먼저 써주냐 않써주냐는 요런 차이가 있답니다..^^
마지막것 : align="center"
hr 태그 배울때 접해본 늠입니다.
align 은 정렬 태그입니다. 뒤에는 항상
center -- 중간
left -- 왼쪽
right -- 오른쪽
요런 값들이 붙습니다.
하나하나 바꿔가면서 연습해 보세요..^^*
따르릉~~~~~~~~~~~ (종소리 -_-;)
공부 끝났습니다.
별거아닌거 가지고 또 거창하네요~~
전번 강의부터 12 일이 지났군요...
1~2주에 한 회는 꼬~옥 올리겠다 약속했는데..
호호 하마트면 2 주 될번 했습니다. ^_^
다음 시간부턴 좀 난도있는 프레임 강좌를 진행할렵니다.
몇회에 나눠서 진행해야 될듯...
여러모로 자료를 찾아보고 올리도록 하겠습니다.~헥헥~
그럼 건강하세요~ ^.^
3 월 28 일 새벽 0 시 21 분에 ~
* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:07)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >> 웹 프로그래밍
* 이동후 위치 : 웹 공부 >>
* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:12)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >>
* 이동후 위치 : 웹 공부 >> 웹 프로그래밍
|
2002.03.28 00:23:59
수고 많으십니다. 간단명료한 강좌 잘 들었습니다.
2주 안 넘기시겠죠? 오늘이 벌써 11일 인데요... 기다리는 맘도 생각하셔야죠 ㅎ.ㅎ.ㅎ.ㅎ
와!!~~~죽이네
덕분에 많은걸 배웠어요....... 감사.......^^
새벽까지 수고 많으십니다.
노아님의 수고로 홈페이지 맹이였던 제가
눈을 뜨게 됩니다.
고맙습니다..........
좋은 강의에 감사합니다
꼭 열심히 배워서 좋은 홈페이지 만들어보겠습니다.