티스토리 뷰
이전시간에는 HTML을 이용해서 기본적인 문서형태를 출력하는것을 해봤습니다.
지난시간에 공부했던내용이 기억이 안나시면 밑에 이미지를클릭하시면 이동하십니다.
이번시간에는 어제 했던 내용에다가 이미지, 링크들어가기 를 해보도록 하겠습니다.
제일 먼저 링크들어가기를 해보도록 하겠습니다.
저는 제 개인 페이스북에 들어가도록 할것인데요
일단 <a></a>라는것을 적어보도록 하겠습니다. 이것을 A태그 라고하는데요
이와같이 적어줌니다.
여기서 A태그란 무엇인가?
A태그에는 몇가지의 속성들이 있는데요
이왕 쓰는거 제대로 공부해두면 좋으니 A태그속성에대해 알아보도록 하겠습니다.
_self : 현재의 문서가 로드된 프레임, 현재 문서 사라짐_blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드_parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로 로드
A태그가 무엇인지 알아봤으니 이제 사용해보도록 하겠습니다.
사진과 같이 입력을 해주시기 바랍니다. 이것을 해석해본다면
[해석]
href는 링크이름와 연결되어 있는 리소스 주소라고 위에서 설명드렸습니다.
여기서 링크이름이란 <a>페이스북으로가기</a>
바로 "페이스북으로가기"가 링크의 이름입니다.
"페이스북으로가기"를 클릭해주시면 밑에 사진과같이 자기자신이 설정해놓은 링크로 들어가지게 됩니다.
이제 이미지를 나타내도록 하겠습니다.
방금전 페이스북링크주소 설정했던 소스뒤에다가 <br>을 붙여주십니다.
<br>을 붙여주시는 이유는 만약 <br>을 안붙여주시면
이미지가 "페이스북으로가기" 바로옆에 나타나지기 때문에 <br>을 붙여넣는겁니다.
일단 간단하게 하기위해서 바탕화면에다가 아무 이미지를 가지고옵니다.
가지고온 이미지파일명을 자기가 관리를 잘할수있게 이름을 지정해줌니다.
ExPhoto라고 설정하겠습니다.
여기서 가장중요한거!! 이미지사진파일에 마우스를 같다대고
오른쪽마우스클릭 → 속성 을 클릭하시면
이렇게 나옴니다. 위에 파일형식 을보시면 확장자가 나와잇는데 이걸 잘 기억하셔야 합니다. 저는 확장자가 .png입니다.
이제 EditPlus프로그램으로 돌아가셔서 소스를 입력해보겠 습니다.
이렇게 입력해 줍니다.
여기서 <img> 라는 태그가 사용되었는데요 이 태그는
쉽게말해서 이미지를 보여주는 태그입니다.
이렇게 치시고 Ctrl+B(실행)을 해보면
아주 잘나오내요~^^
평소에 작업을할때 이미지파일을 바탕화면에다가 놔두면 바탕화면이 지저분해지고 어지럽겠죠?
그래서 폴더을 만들어봅시다. 바탕화면에 img라는 폴더를 만들고 그 폴더에다가 ExPhoto.png파일을 집어넣고
Ctrl+B(실행)을 해보도록 하겠습니다.
그러면 이렇게 x박스로 출력이 됩니다.
왜이러는걸까요??
이유는 바로 경로명이 맞지 않기 때문입니다. 저희가 맨처음에 그냥 이미지파일명을 코딩한이유는
초기경로가 바탕화면이기때문에 별다른 경로설정을 하지 않아도 이미지출력이 잘된것입니다.
그러나 이번경우는 다름니다.
그래서 경로를 바꿔보도록 할텐데요
EditPlus프로그램으로 돌아가셔서 소스를 변경해보도록 하겠습니다.
저는 현재 바탕화면->img폴더->Exphoto.png 이 있습니다.
그래서 경로설정을
이렇게 바꾸어 줍니다.
여기서 개념정리하고 넘어가도록 하겠습니다.
./는 현재폴더이고
../는 상위폴더입니다.
[3주차]간단한 개인홈페이지 만들기(드림위버사용)-part2-강의를
맞치도록 하겠습니다.
글 잘보셧다면
네이버 블로그 이웃 추가 부탁드립니다.~^^
이웃 추가하시면 바로 티스토리로 넘어오실수 있어요 ㅎㅎㅎ
이 글이 좋으시다면 손가락 버튼 클릭!!!
'허접한 프로그래밍 > 드림위버 홈페이지 만들기' 카테고리의 다른 글
| [3주차]간단한 개인홈페이지 만들기(드림위버사용)-part5- (4) | 2013.08.14 |
|---|---|
| [3주차]간단한 개인홈페이지 만들기(드림위버사용)-part4- (0) | 2013.08.14 |
| [3주차]간단한 개인홈페이지 만들기(드림위버사용)-part3- (2) | 2013.08.14 |
| [3주차]간단한 개인홈페이지 만들기(드림위버사용)-part1- (2) | 2013.08.14 |
