게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
브라우저 첫화면 바꾸기 대작전. 짜잔~
게시물ID : it_3564짧은주소 복사하기
작성자 : 까만무지개
추천 : 2
조회수 : 904회
댓글수 : 12개
등록시간 : 2015/05/21 17:12:02
옵션
  • 창작글
브라우저 첫 화면 다들 어떤 사이트로 설정해 놓고 쓰세요?

대부분 네이버, 다음, 구글 과 같은 검색엔진이 첫페이지 일거고 특이한 분들이 빈화면, 더 특이한 분들이 오유 일거라고 생각해요. 아님 말구요.

많은 사이트들과 광고를 포함한 무료 프로그램들이 이 첫화면을 가져 가려고 전쟁을 치르고 있는건 다들 알거에요. 뭔 프로그램만 설치 하려면 브라우저의 첫화면을 지들거로 고정 하는 옵션이 설명 아래에 작게 숨어 있는지...

그런데 말이죠...
생각을 조금만 해보면 말이죠.

100만명쯤 되는 사람들의 브라우저 첫화면이 "A 사이트" 일때 하루에 브라우저를 평균 10번 실행 시킨다면 "A 사이트"는 공짜로 하루 방문자가 1,000만명이 되는거죠. 사람들이 일부러 찾아가는 사이트도 아닌건데 그냥 하루 방문자 1,000만명을 먹고 시작하는거에요. 그러다보니 브라우저의 첫화면을 서로 가져 가려고 싸움을 안할 수가 없을거에요. 방문자 숫자가 돈이 되는 세상이잖아요. 내 생각에는 이로인한 허수의 방문자 수가 포함되어 광고 통계에 사용될거라고 봐요.

그리고 사용자는 브라우저를 실행 할때마다 첫 화면의 사이트에 가서 데이타를 받아와야해요. 가뜩이나 느린 컴퓨터인데 브라우저 실행 하면 1~2초 둠칫둠칫해요. 실행이 되었다고 해도 많은 사용자들은 첫 화면에서 뭔가를 하지 않고 URL을 직접 입력하거나 즐겨찾기를 클릭해서 다른 사이트로 이동을 해요. 뭔가 불편하지 않아요?

회사가려고 집나왔는데 집근처 마트 입구 보고 돌아서 회사가는 거죠. 왜죠?

그래서 저는 브라우저의 첫 화면을 그냥 만들어써요.
실제 화면은 아니지만 브라우저를 실행 하면 이렇게 나오죠. 내가 가장 많이 가는 사이트를 아주 쉬운 html로 만들어서 PC에 저장한 다음 그걸 불러 오는거에요.

01.png

이 html은 이렇게 되어 있어요.
<br><br><br>
<center>

<table border=1><tr>

<td width=150 align=right>
<a href=http://www.todayhumor.co.kr/>오유</a><br>
<a href=http://www.ilwar.com/>일워</a><br>
<a href=http://www.slrclub.com/>스르륵</a><br>
</td>

</tr></table>

아주 간단하죠? 아마 이글을 보는 사람중 95%는 이 html을 알거에요. 나머지 5%를 위해서 간단하게 설명할께요.

* <br> 한줄 넘긴다는거에요. 
  문서 작성할때 Enter 치는거랑 같아요. 이게 없으면 브라우저에서 볼때 다음줄로 넘어가지지 않아요.
* <center> 아래 내용을 브라우저에서 볼때 가운데 정렬하라는거에요. 가운데 정렬 안하려면 사용안하면되요.
* <table> 글로만 설명하기 어려운데 <table><tr><td></td></tr></table>가 한세트에요. 
  셀처럼 구성해서 보기 편하게 하려고 만들때 사용해요. 여기서는 다른 글 참고 하시라고 링크만 남길께요.
  https://www.google.co.kr/?gws_rd=ssl#newwindow=1&q=html+table+%EC%86%8D%EC%84%B1
* border=1 테두리선을 1로 쓰겠다라는거에요.
* width=150은 가로 픽셀을 150 픽셀로 고정 한다는거에요. 숫자를 조정해서 더 넓게 또는 더 좁게 조정하면되요.
* align=right <td>와 </td> 사이의 내용을 우측 정렬하겠다는거에요.
* <a href=주소>사이트명</a> 이 한세트에요. 주소에는 URL을 입력하고 사이트명을 넣으면 되요. 

이 것만 알면 일단은 첫 페이지를 저렇게 만들 수가 있어요.

그런데 뭔가 허전하죠. 

난 자주가는 사이트가 더 많은데...
그러면 <a href=주소>사이트명</a> 을 추가하면 되요. 
(뒤에 반드시 <br> 을 넣어야 다음줄로 넘어 간다는거 잊지 마시구요.
<br><br><br>
<center>

<table border=1><tr>

<td width=150 align=right>
<a href=http://www.todayhumor.co.kr/>오유</a><br>
<a href=http://www.ilwar.com/>일워</a><br>
<a href=http://www.slrclub.com/>스르륵</a><br>
<a href=http://www.site1.com/>사이트1</a><br>
<a href=http://www.site2.com/>사이트2</a><br>
<a href=http://www.site3.com/>사이트3</a><br>
<a href=http://www.site4.com/>사이트4</a><br>
<a href=http://www.site5.com/>사이트5</a><br>
<a href=http://www.site6.com/>사이트6</a><br>
<a href=http://www.site7.com/>사이트7</a>
</td>

</tr></table>
이렇게 하면 브라우저에서는 이렇게 보여요.

02.png


나는 카테고리 같은거 나눠서 보고 싶은데... 라면.

<br><br><br>
<center>

<table border=1><tr>

<td width=150 align=right>
<a href=http://www.todayhumor.co.kr/>오유</a><br>
<a href=http://www.ilwar.com/>일워</a><br>
<a href=http://www.slrclub.com/>스르륵</a><br>
<a href=http://www.site1.com/>사이트1</a><br>
<a href=http://www.site2.com/>사이트2</a><br>
<a href=http://www.site3.com/>사이트3</a><br>
<a href=http://www.site4.com/>사이트4</a><br>
<a href=http://www.site5.com/>사이트5</a><br>
<a href=http://www.site6.com/>사이트6</a><br>
<a href=http://www.site7.com/>사이트7</a>
</td>

<td width=150 align=right>
<a href=http://google.com>구글</a><br>
<a href=http://daum.net>다음</a><br>
<a href=http://sports.media.daum.net/sports/>다음스포츠</a><br>
<a href=http://naver.com>네이버</a>
</td>

<td width=150 align=right>
<a href=http://www.ohmynews.com/>오마이</a><br>
<a href=http://www.hani.co.kr/>한겨레</a><br>
<a href=http://www.etnews.com/>전자신문</a>
</td>

</tr></table>
이렇게 수정 합니다. 커뮤니티, 검색엔진, 신문사 카테고리를 표현했어요.

03.png


라인이 보기 싫은데 빼주세요.
라인이 보기 싫다면 border=1 을 삭제 하면 됩니다.

04.png


노안때문에... 글씨를 좀 더 크게 해주세요.
<font size=5>를 적당한 위치에 삽입합니다. size의 숫자를 노안 정도에 맞게 수정하세요.
<br><br><br>
<center>

<table><tr>

<td width=150 align=right><font size=5>
<a href=http://www.todayhumor.co.kr/>오유</a><br>
<a href=http://www.ilwar.com/>일워</a><br>
<a href=http://www.slrclub.com/>스르륵</a><br>
<a href=http://www.site1.com/>사이트1</a><br>
<a href=http://www.site2.com/>사이트2</a><br>
<a href=http://www.site3.com/>사이트3</a><br>
<a href=http://www.site4.com/>사이트4</a><br>
<a href=http://www.site5.com/>사이트5</a><br>
<a href=http://www.site6.com/>사이트6</a><br>
<a href=http://www.site7.com/>사이트7</a>
</td>

<td width=150 align=right>
<a href=http://google.com>구글</a><br>
<a href=http://daum.net>다음</a><br>
<a href=http://sports.media.daum.net/sports/>다음스포츠</a><br>
<a href=http://naver.com>네이버</a>
</td>

<td width=150 align=right>
<a href=http://www.ohmynews.com/>오마이</a><br>
<a href=http://www.hani.co.kr/>한겨레</a><br>
<a href=http://www.etnews.com/>전자신문</a>
</td>

</tr></table>
이렇게 바뀌네요.
07.png


링크 언더바 거슬리는데요...
음...html이 아니라 css를 사용해야 하는데요.
style="text-decoration:none"를 넣어 줍니다.
<br><br><br>
<center>

<table><tr>

<td width=150 align=right><font size=5>
<a href=http://www.todayhumor.co.kr/ style="text-decoration:none">오유</a><br>
<a href=http://www.ilwar.com/ style="text-decoration:none">일워</a><br>
<a href=http://www.slrclub.com/ style="text-decoration:none">스르륵</a><br>
<a href=http://www.site1.com/ style="text-decoration:none">사이트1</a><br>
<a href=http://www.site2.com/ style="text-decoration:none">사이트2</a><br>
<a href=http://www.site3.com/ style="text-decoration:none">사이트3</a><br>
<a href=http://www.site4.com/ style="text-decoration:none">사이트4</a><br>
<a href=http://www.site5.com/ style="text-decoration:none">사이트5</a><br>
<a href=http://www.site6.com/ style="text-decoration:none">사이트6</a><br>
<a href=http://www.site7.com/ style="text-decoration:none">사이트7</a>
</td>

<td width=150 align=right>
<a href=http://google.com>구글</a><br>
<a href=http://daum.net>다음</a><br>
<a href=http://sports.media.daum.net/sports/>다음스포츠</a><br>
<a href=http://naver.com>네이버</a>
</td>

<td width=150 align=right>
<a href=http://www.ohmynews.com/>오마이</a><br>
<a href=http://www.hani.co.kr/>한겨레</a><br>
<a href=http://www.etnews.com/>전자신문</a>
</td>

</tr></table>

이렇게 바뀌어 보이네요.
08.png


마지막으로 이렇게 수정을 했습니다.
<br><br><br>
<center>

<table><tr>

<td width=150 align=right>
<a href=http://www.todayhumor.co.kr/ style="text-decoration:none">오유</a><br>
<a href=http://www.ilwar.com/ style="text-decoration:none">일워</a><br>
<a href=http://www.slrclub.com/ style="text-decoration:none">스르륵</a><br>
<a href=http://www.site1.com/ style="text-decoration:none">사이트1</a><br>
<a href=http://www.site2.com/ style="text-decoration:none">사이트2</a><br>
<a href=http://www.site3.com/ style="text-decoration:none">사이트3</a><br>
<a href=http://www.site4.com/ style="text-decoration:none">사이트4</a><br>
<a href=http://www.site5.com/ style="text-decoration:none">사이트5</a><br>
<a href=http://www.site6.com/ style="text-decoration:none">사이트6</a><br>
<a href=http://www.site7.com/ style="text-decoration:none">사이트7</a>
</td>

<td width=150 align=right>
<a href=http://google.com style="text-decoration:none">구글</a><br>
<a href=http://daum.net style="text-decoration:none">다음</a><br>
<a href=http://sports.media.daum.net/sports/ style="text-decoration:none">다음스포츠</a><br>
<a href=http://naver.com style="text-decoration:none">네이버</a><br>
<br><br><br><br><br><br>
</td>

<td width=150 align=right>
<a href=http://www.ohmynews.com/ style="text-decoration:none">오마이</a><br>
<a href=http://www.hani.co.kr/ style="text-decoration:none">한겨레</a><br>
<a href=http://www.etnews.com/ style="text-decoration:none">전자신문</a><br>
<br><br><br><br><br><br>
</td>

</tr></table>
그러면 짜잔...
09.png


이 내용을 응용하면 본인이 자주 가는 사이트로 조금 더 빨리 이동할 수 있는 첫번째 페이지가 만들어지겠죠.

자. 그럼 안녕..

출처 직접 작성했으나
어느 게시판으로 가야할지 몰라서 일단은 이곳에.
전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호