블로그홈 상단에 이미지 삽입 하기
오늘은 지난 시간에 공부 하면서 꾸몄든 메뉴바와 목록 들을 이용해 메뉴 바 상단과 바디부에 이미지를 삽입하는 방법에 대해 공부하는 시간을 갖도록 해 봅니다.
이렇게 아래 이미지 하나를 준비 해 두었는데요 앞서 포스팅한 모바일 웹앱으로 이미지 올리는 방법으로 얻어낸 이미지 의 소스 입니다.
이렇게 아래 이미지 하나를 준비 해 두었는데요 앞서 포스팅한 모바일 웹앱으로 이미지 올리는 방법으로 얻어낸 이미지 의 소스 입니다.
[###_1N|cfile21.uf@255528375469E7120585F1.png|width="480" height="50" filename="112212ff575e75312403ff5a3c7df27f.png" filemime="image/png"|_##]
위의 소스에 앞부분에 #하나를 더 주어 태그가 실행되는 것을 방지 해주었 습니다.
위의 이미지는 티스토리 앱의 치환자에 의해 캡슐화 되어 있어 통상 사용하는 방법으로 될지는 실험해 봐야 할것 같습니다.
그럼 이렇게 준비한 이미지를 메뉴바의 상단에 올려서 가상의 홈페이지를 만들어 보도록 합니다.
위의 이미지는 티스토리 앱의 치환자에 의해 캡슐화 되어 있어 통상 사용하는 방법으로 될지는 실험해 봐야 할것 같습니다.
그럼 이렇게 준비한 이미지를 메뉴바의 상단에 올려서 가상의 홈페이지를 만들어 보도록 합니다.
일단 이미지 를 상단에 올리는 것에는 별 무리가 없는것 같네요
이렇게 홈 상단에 이미지를 삽입 하고 dbale 라는 예전에 사용 하든 제 블로그의 타이틀을 이미지의 중간 하단에 position:relative를 주어 위치 시키고 이 타이틀에 현재 제블로그의 홈 페이지를 링크하도록 a태그로 링크를 걸어 두었습니다.
타겟버튼과 드롭다운메뉴를 갖춘 나름 가상의 홈페이지 까지 만들어 봤습니다.
위의 메뉴바와 버튼은 실제 작동이 되도록 마크업 되어 있습니다.
이미지를 올리기 위해 필요한 태그는 <img src="이미지 주소"/> 태그를 씁니다.
위에서 홈상단에 올려진 이미지 태그 작성 방법을 구현 하면 이렇습니다.
위의 경우 치환자에 의해 캡슐화 되어 있어 치환자의 소스를 그대로 입력 할경우 div태그내에서 이미지가 실행되어 버리게 됩니다.
그래서 #하나를 더 주고 소스를 만들어 보겠습니다.
우선div 태그로 감싼후 이미지 내에 블로그 타이틀을 올리고 타이틀을 클릭 했을때 홈에 접근 하기 위한 링크태그를 먼저 만들어 링크태그 안에 타이틀을 감싸 주어야 하겠죠 위의 경우처럼 이미지가 치환자로 감싸져 있는 이미지의 경우엔 치환자내에 이미지 태그가 들어가 있어 보이지 않습니다만 원래는
그래서 #하나를 더 주고 소스를 만들어 보겠습니다.
<div id="gg"><a href="http://eproo.tistory.com"><p class="bod"> dbale </p></a>[###_1N|cfile21.uf@255528375469E7120585F1.png|width="480px" height="30px" filename="112212ff575e75312403ff5a3c7df27f.png" filemime="image/png"|_##]</div>
이미지의 주소를 태그에 삽입해 주어야 합니다.
보통 이런식으로 작성 합니다.
<img width="00px" height="00px" border="0px" src="http:// naver.com/&bbs.?/. . . ."/>
이런식이 되겠죠
이미지의 폭과 높이는 반드시 들어가야 하며 이것을 빠뜨리게 되면 이미지 구현이 안되니 유의 하셔야 합니다.
한동안 사용 하든 노트북을 아들 학업용으로 주는 바람에 지금껏 줄곳모바일 에서만 포스팅 하다 오늘 노트북을 받아 컴퓨터로 제 블로그를 확인 을 하고 있는데요 상당히 충격 적이고 황당스런 상황들에 당황 하게 되었네요
모바일 상 으로 확인되는 브라우져와 컴퓨터의 브라우져에 출력되는 화면의 결과는 완전히 다르게 나타나고 있다는 것입니다.
특히 네이버로 로그인 해서 접근 해서 브라우져를 출력 해보니 아예 스타일이 적용이 안되고 있다는것입니다.
다시 컴퓨터에 맞도록 전면적으로 삽질을 해 스타일을 재수정 해야만 하지 않을수가 없는 상항 이네요.. . ..
처음 의도했든 페스트붓프레임워크로 만들어진 리디즈님의 오픈소스를 받아 만든 제 홈페이지를 대 해부 한다는 취지로 거의 5개월이란 긴 시간에 걸쳐 독학으로 html과css를 공부하면서 여기까지 진도가 나갔습니다.
물론 아직까지는 미비한 점들과 아직 깨우치지 못한 부분들이 많습니다만 우선은 기본적인 공부는 달성 한것 같네요 앞으로도 부족한 부분을 더 배우면서 공부한 내용을 포스팅 하도록 하겠습니다.