나라하우징 | ◈ 배경화면&배경색 만들기 - Daum 카페

<link rel="stylesheet" href="http://editor.daum.net/services/blog/css/contents4view.css?ver=1.1.114" type="text/css"/><link rel="stylesheet" href="http://editor.daum.net/services/blog/css/theme4view.css?ver=1.1.114" type="text/css"/><script language="javascript" src="http://pimg.daum-img.net/UX-JS_2008/common_view.js?v=ux5.3"></script><script language="javascript"> var articleno = "153"; </script><P> <TABLE borderColorDark=white width=580 borderColorLight=black border=0> <TBODY> <TR> <TD width=578 colSpan=2> <P align=left><FONT face=굴림 color=#000000><STRONG>◈ 배경화면&배경색 만들기</STRONG></FONT></P></TD></TR> <TR> <TD width=578 colSpan=2> <P align=left><FONT face=굴림 color=#000000><STRONG>여러분이 만약 미술시간에 도화지에 그림을 그린다면...처음에는 하얀 도화지이지여? 그 도화지에서 이것 저것 그려놓고 마지막으로 넓은 배경을 칠하지여? 이와 같이 HTML은 그림그리기로도 비유할 수 있습니다. 무슨 말인고 하면, 이것저것 시시한 그림은 글과 컨텐츠에 비교하고, 또한 배경은 그림그릴 때 배경화면과 비교가 되기 때문이지요...특히 꽉찬 느낌을 좋아하는 사람이나 서양화의 패턴인 감성을 중시하는 분은 배경은 꼭 필수가 되겠지요...저는 여백을 중시하는 한국화를 좋아하고 공간감을 중시하기 때문에 태그대학도 그렇고 제 손을 거쳐간 홈페이지는 하얀 배경이 많지만(ㅡㅡㆀ) 어쨌든 배경화면은 조잡하지 않으면서 까리한 것을 선택하시는게 좋습니다. 게다가 너무 원색이 아니라 눈을 약간 편하게 해줄 수 있는 녹색이나 청색 계열이 좋습니다...어쨌든 자신이 젤 좋고 까리하고 멋있고 자신의 홈에 잘 맞는다 생각되시면 그걸 잡아야겠져?? 그것도 아니라면 배경화면 주는 사이트에 가셔야겠져?? 배경화면 주는 사이트는 검색엔진에서 배경화면 치시면 많이 나옵니다...</STRONG></FONT></P> <P align=left><FONT face=굴림 color=#000000><STRONG>배경을 퍼오시려면, 괜찮다고 생각되는 배경 위에 마우스 우측 버튼을 누릅니다. 그다음 맨밑에 등록정보를 누릅니다. </STRONG></FONT></P></TD></TR> <TR> <TD width=578 colSpan=2> <P align=left><STRONG><FONT color=#000000><IMG height=452 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpyw8888.com.ne.kr%2Ftage%2Fbg1.gif" width=441 border=0></FONT></STRONG></P></TD></TR> <TR> <TD width=578 colSpan=2> <P align=left><FONT face=굴림 color=#000000><STRONG>등록정보를 클릭하시면 이와 같은 창이 뜰 것입니다. 여기서 저기 주소 부분을 복사합니다. 그림에 빨간 동그라미로 표시된 부분 있져??그걸 긁어서(마우스로 드래그해서)오른쪽 버튼을 누르시고 복사를 누릅니다.</STRONG></FONT></P></TD></TR> <TR> <TD width=578 colSpan=2> <P align=left><A href="xxxxjavascript:na_open_window('win',%20'bg2.gif',%200,%200,%20450,%20550,%200,%200,%200,%200,%200)"><FONT face=굴림 color=#000000><STRONG><IMG height=479 src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fpyw8888.com.ne.kr%2Ftage%2Fbg2.gif" width=405 border=0></STRONG></FONT></A></P></TD></TR> <TR> <TD width=578 colSpan=2> <P align=left><FONT face=굴림 color=#000000><STRONG>방금 복사한 주소를 태그에 대입 해야겠지요? 배경화면 넣는 태그는입니다...저기 그림파일주소라고 된부분에 저 그림파일주소를 지우시고 방금 복사하신 주소를 살포시 붙여 놓으시면 됩니다^^ 아래처럼 하시면 되져...</STRONG></FONT></P> <P align=left><STRONG><FONT color=#000000></FONT></STRONG></P> <P align=left><FONT face=굴림 color=#000000><STRONG>바로 이 태그를 홈페이지의 아무곳에나 삽입하면되지요...그럼 여러분의 홈페이지에 배경화면이 뜬 것을 보실수 있습니다...그리구...배경화면의 선택에 대해서 한마디 하겠는데...배경화면은 글자 색깔을 잘 맞춰서 해야합니다...그러니까 어두운색 배경을 했으면 밝은색 글자를 해야 하고 밝은색 배경을 했으면 어두운색 글자로 해야 합니다...그 이유로는...글자와 배경이 대비가 되어야 하는데 대비가 되지 않으면 보기가 상당히 힘들겠져?? </STRONG></FONT></P></TD></TR> <TR> <TD width=292 background=bt16.gif> <P align=center><FONT face=굴림 color=#000000><STRONG>밝은색배경입니다.</STRONG></FONT></P></TD> <TD width=284 background=b026.jpg> <P align=center><FONT face=굴림 color=#000000><STRONG>어두운색배경입니다.</STRONG></FONT></P></TD></TR> <TR> <TD width=578 colSpan=2> <P align=left><FONT face=굴림 color=#000000><STRONG>밝은색 배경에 있는 "밝은색배경입니다"라는 글자는 잘 보이지요? 하지만 어두운 색 배경에 있는 "어두운색배경입니다"는 잘 안보이시지요? 아마 마우스를 긁어야지 무슨 글자가 쓰였는지 읽을 수 있을겁니다...따라서 배경화면을 하실 때는 꼭 글자의 색깔과 대비가 되는 색을 골라야겠져??아래의 예제를 보시면 잘 아시겠지만 하얀 글자를 해놓고 배경은 또 밝은거 하시면 안됩니다...</STRONG></FONT></P></TD></TR> <TR> <TD width=292 background=bt16.gif> <P align=center><FONT face=굴림 color=#000000><STRONG>밝은색배경입니다.</STRONG></FONT></P></TD> <TD width=284 background=b026.jpg> <P align=center><FONT face=굴림 color=#000000><STRONG>어두운색배경입니다.</STRONG></FONT></P></TD></TR> <TR> <TD width=578 colSpan=2> <P align=left><STRONG><FONT color=#000000>직접 보시면서 느끼셨겠지만 배경화면을 하실 때에는 글자의 색깔이 밝은색일 때는 어두운색 배경으로 글자의 색깔이 어두운색깔일 때는 밝은색 배경으로 해주시는게 좋습니다.이제 배경화면에 대해 감이 잡히나요? 그리고 배경화면을 해놓고 글자가 많아 스크롤이 생겼는데 배경화면이 자꾸 따라와서 불편하시져? 따라서 배경화면을 꽉 붙들어 줘야 하는데요...배경화면은 붙들어 놓고 글자만 움직이는 옵션을 줄 수 있습니다...bgproperties="fixed"를 그림파일 주소를 적은 뒤에 넣어 주시면 됩니다...따라서 배경화면 고정시키게 하는 배경화면 태그는 이렇게 되겠네요... <FONT face=굴림><body background="그림파일주소" </FONT>bgproperties="fixed"<FONT face=굴림>></FONT></FONT></STRONG></P> <P align=left><FONT face=굴림 color=#000000><STRONG>그리고 본 태그대학에 있는 오른쪽에 있고 안움직이는 배경은 어떻게 하냐구 하면은요...저건 스타일 서식을 지정해 줘야 하거든요...소스는 일단 저겁니다...저기 그림파일주소에 적당한 그림을 넣어주시면 됩니다...</STRONG></FONT></P></TD></TR> <TR> <TD width=578 colSpan=2> <STYLE type=text/css><br> body {background:url(그림파일주소);<br> background-repeat:no-repeat;background-position:right bottom;<br> background-attachment:fixed}<br> <style> </td> </tr> <tr> <td width="578" colspan="2" height="478"> <p> </p> <p>그리고...배경화면 말고 배경을 하나의 색깔로 칠하는 태그는 어떻게 만들까요?? 그건...Body 안에 몇가지 속성을 지정해 주는걸루 대신할 수 있습니다. Body태그 안에 bgcolor='배경색' 을 지정해 주는 걸루 끝났져... </p> <p><b>......이런식으로요...</b></p> <p>그리까 배경색을 지정해 주는 태그는 가 되겠네요...색깔 코드는 본 홈피의 잡덩사니메뉴→RGB색상표 가시면 있구요...여기에서 색깔 코드에 대해 또 주절거려야겠군요...배경색깔 배경화면과 마찬가지로 글자와 반전되는 색이 좋습니다...무슨 소리냐구요? 만약 자신이 검은색 배경을 하려구 했는데 글자가 검은색이면...글자가 안보이겠져...^^;; 그래서 검은색 배경일 때에는 흰색이나 회색 글자를 이용하셔야 합니다. 위에서 연한배경화면과 진한배경화면 둘하고 흰색과 검정색 글자로 비슷한 본보기를 보여 드렸습니다...요즘 추세는 배경색을 밝은 회색으로 하고 글자도 진한 회색으로 하는게 유행이네요... 참고로 회색은 웅장감과 다른 색깔을 돋보이게 합니다...단 회색을 많이 사용하면 화면자체의 채도가 낮아지기 때문에 다른 색깔도 적절히 활용해야겠져...회색은 무채색입니다...노란색이나 빨간색에 비해 눈에 잘 띄지 않습니다. 대신 눈이 편하게 되져...반면 노란색이나 빨간색을 배경화면으로 사용하게 되면 눈이 불편합니다...태그연습장에서 배경색 빨간색이나 노란색 해보시고 회색도 해보세요...회색이 가장 보기가 편할겁니다...</p> <p>혹시 학교에 지금 재학중인 분은 아시겠지만...매일 아침 교문앞에 서서 이름표 검사를 하는 선도부 쌤...짱나져...이름표 안매고 오면 잡아서 어떻게 하져...그나마 이름표는 낫습니다...머리꼬라지가 좀 그러면 머리를 자른다거나...신발꼬라지가 그러면 부모님을 부른다거나...울학겨 규율이 그리 쎄지는 않지만 약간 짱나는 건 사실입니다...이 이름표하구 배경화면하구 무슨 상관이 있을까요?? 이름표는 이름이 잘 보여야 합니다. 그리고 학년을 나타낼 수 있어야겠지요...참고로 김해 Y 중학교의 이름표 체계를 설명하자면...1학년 이름표는 초록색 바탕에 하얀색 이름/2학년 이름표(내가 현재 착용하는 이름표^^)는 노란색 바탕에 검은색 이름/3학년 이름표는 파란색 바탕에 하얀색 이름인데요...이름표와 배경색의 관계를 생각하시는게 이해가 약간 편할겁니다...</p> </td> </tr> <tr> <td width="578" colspan="2"> <ul> <ul> <ul> <ul> <ul> <ul> <ul> <p>↓울학겨 이름표들...^^</p> </ul> </ul> </ul> </ul> </ul> </ul> </ul> <table border="1" width="478" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr> <td width="163" bgcolor="green"> <p align="center" style="line-height:200%;"><font face="궁서" color="white"><span style="font-size:12pt;">(1학년)</span></font></p> </td> <td width="160" bgcolor="yellow"> <p align="center" style="line-height:200%;"><font face="궁서" color="black"><span style="font-size:12pt;">(2학년)</span></font></p> </td> <td width="141" bgcolor="blue"> <p align="center" style="line-height:200%;"><font face="궁서" color="white"><span style="font-size:12pt;">(3학년)</span></font></p> </td> </tr> </table> <p>음...1학년과 3학년의 이름표 이름 색깔은 하얀색인데...2학년 이름표 이름 색깔이 검은색이네요...왜 혼자서 검은색으로 했는지 궁금하네요...^^그럼 이제 2학년 이름표 이름색깔을 흰색으로 하고 나머지 학년들의 이름표 이름색깔을 검은색으로 해보면 어떨까요??</p> <table border="1" width="480" cellspacing="0" bordercolordark="white" bordercolorlight="black"> <tr> <td width="157" bgcolor="green"> <p align="center" style="line-height:200%;"><font face="궁서" color="black"><span style="font-size:12pt;">(1학년)</span></font></p> </td> <td width="164" bgcolor="yellow"> <p align="center" style="line-height:200%;"><font face="궁서" color="white"><span style="font-size:12pt;">(2학년)</span></font></p> </td> <td width="145" bgcolor="blue"> <p align="center" style="line-height:200%;"><font face="궁서" color="black"><span style="font-size:12pt;">(3학년)</span></font></p> </td> </tr> </table> <p>음...이름이 잘 보이나요?잘 안보이져??그나마 저건 이름표라서 약간 보이긴 보일겁니다. 하지만 엄청난 글자가 존재하는 홈페이지에서 바탕색을 노란색으로 하고글자색을 흰색으로 한다던지...바탕색을 초록색으로 하고...글자색을 검은색으로 하면 방문객이 좋아할까요??그리고 저거 보시면 약간 눈아프져??저거 보시다가 원래 이름표 색깔 보시면 좀 나아지져?? *^^* 따라서 배경과 글자는 항상 대비관계가 되어야 한다는 겁니다...그렇다고 배경색을 아예 저 원색으로 하시지 마시기를...이름표는 크기가 작기 때문에 잘 보이는 원색으로 한겁니다...홈페이지에도 작으면서 눈에 띄어야 할 것은 저런 원색을 사용해야합니다...하지만 배경색에 적용하시면...그건 할말 다 한거져...(^^;)따라서 배경색은 회색을 사용하시되 눈에 잘 띄어야 하는 부분에만 원색을 사용하시면 멋진 배경과 함께 멋진 홈페이지가 될 것입니다...또한 회색은 다른색깔을 돋보이게 하는 효과가 있기 때문에 제가 설명한대로 하면 금상첨화겠져...여러분의 홈페이지에 적절한 배경화면과 적절한 배경색,적절한 글씨색깔을 선택하시길 바라면서...저는 물러갑니다~</p> </td> </tr> </table> <p> <font color="black"><br><br> </font></p> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width="600" align="center"> <TR><TD BGCOLOR="#6666FF" width="613"> <p align="center"><font color="black"> <IMG SRC="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.busmania.com%2Fbar.gif" BORDER="0" WIDTH="600" HEIGHT="1"></font></TD></TR> </TABLE> <TABLE BORDER="0" WIDTH="600" HEIGHT="20" CELLPADDING="0" CELLSPACING="0" align="center"> <TR><TD BGCOLOR="#D4E2FF" WIDTH="120" ALIGN="CENTER" VALIGN="MIDDLE" height="19"><P STYLE="font-size:9pt;" align="center"><font color="black">배경화면과 배경색</font></P></TD> <TD BGCOLOR="#F2F6FF" VALIGN="MIDDLE" height="19" width="340"><P STYLE="font-size:9pt; margin-left:20;" align="left"> 홈관리자 <a href="mailto:<a href="http://go.daum.net/bin/go.cgi?relative=1&url=/Mail-bin/login_f.cgi%3Ferror%3Dlogin%26lu%3D/Mail-bin/send_mail.form.cgi%3FTO%3Dpyw8888@com.ne.kr">pyw8888@com.ne.kr</a>"><a href="http://go.daum.net/bin/go.cgi?relative=1&url=/Mail-bin/login_f.cgi%3Ferror%3Dlogin%26lu%3D/Mail-bin/send_mail.form.cgi%3FTO%3Dpyw8888@com.ne.kr">pyw8888@com.ne.kr</a></a> </P></TD> <TD BGCOLOR="#D4E2FF" WIDTH="120" ALIGN="CENTER" VALIGN="MIDDLE" height="19"><P STYLE="font-size:9pt;" align="center"> </P></TD> </TR></TABLE> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" align="center"> <TR><TD BGCOLOR="#6666FF" width="600"> <p align="center"><font color="black"> <IMG SRC="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.busmania.com%2Fbar.gif" BORDER="0" WIDTH="600" HEIGHT="1"></font></TD></TR> </TABLE> <p align="center"> </xbody> </xhtml> <xscript language='xxxxjavascript'> /* 문서 하단의 태그들은 통계를 위하여 자동으로 삽입된 태그 입니다. */ </xscript> <xscript language='xxxxjavascript'> /* 페이지 수정시 해당 태그들을 제거 하지 않으면 해당 태그가 두번 표시되어 */ </xscript> <xscript language='xxxxjavascript'> /* 페이지 통계가 정확하지 않으며 페이지가 늦게 로딩될수 있으니 제거하십시요 */ </xscript> <xscript language='xxxxjavascript'> /* 통계를 위하여 삽입된 태그의 시작입니다. */ </xscript> <xscript src=http://icons.com.ne.kr/toolbar/statics/></xscript> <xscript language='xxxxjavascript'> /* 통계를 위하여 삽입된 태그의 마지막 입니다. */ </xscript></STYLE> </TD></TR></TBODY></TABLE></P>

카페정보

나라하우징

카페 전체 메뉴

▲

카페 게시글

목록 이전글

│◀△…태그 ♡ 강좌 │ 스크랩 ◈ 배경화면&배경색 만들기

谷山府院君 추천 0 조회 30 10.03.01 01:26 댓글 0

게시글 본문내용

◈ 배경화면&배경색 만들기
여러분이 만약 미술시간에 도화지에 그림을 그린다면...처음에는 하얀 도화지이지여? 그 도화지에서 이것 저것 그려놓고 마지막으로 넓은 배경을 칠하지여? 이와 같이 HTML은 그림그리기로도 비유할 수 있습니다. 무슨 말인고 하면, 이것저것 시시한 그림은 글과 컨텐츠에 비교하고, 또한 배경은 그림그릴 때 배경화면과 비교가 되기 때문이지요...특히 꽉찬 느낌을 좋아하는 사람이나 서양화의 패턴인 감성을 중시하는 분은 배경은 꼭 필수가 되겠지요...저는 여백을 중시하는 한국화를 좋아하고 공간감을 중시하기 때문에 태그대학도 그렇고 제 손을 거쳐간 홈페이지는 하얀 배경이 많지만(ㅡㅡㆀ) 어쨌든 배경화면은 조잡하지 않으면서 까리한 것을 선택하시는게 좋습니다. 게다가 너무 원색이 아니라 눈을 약간 편하게 해줄 수 있는 녹색이나 청색 계열이 좋습니다...어쨌든 자신이 젤 좋고 까리하고 멋있고 자신의 홈에 잘 맞는다 생각되시면 그걸 잡아야겠져?? 그것도 아니라면 배경화면 주는 사이트에 가셔야겠져?? 배경화면 주는 사이트는 검색엔진에서 배경화면 치시면 많이 나옵니다... 배경을 퍼오시려면, 괜찮다고 생각되는 배경 위에 마우스 우측 버튼을 누릅니다. 그다음 맨밑에 등록정보를 누릅니다.

등록정보를 클릭하시면 이와 같은 창이 뜰 것입니다. 여기서 저기 주소 부분을 복사합니다. 그림에 빨간 동그라미로 표시된 부분 있져??그걸 긁어서(마우스로 드래그해서)오른쪽 버튼을 누르시고 복사를 누릅니다.

방금 복사한 주소를 태그에 대입 해야겠지요? 배경화면 넣는 태그는입니다...저기 그림파일주소라고 된부분에 저 그림파일주소를 지우시고 방금 복사하신 주소를 살포시 붙여 놓으시면 됩니다^^ 아래처럼 하시면 되져... 바로 이 태그를 홈페이지의 아무곳에나 삽입하면되지요...그럼 여러분의 홈페이지에 배경화면이 뜬 것을 보실수 있습니다...그리구...배경화면의 선택에 대해서 한마디 하겠는데...배경화면은 글자 색깔을 잘 맞춰서 해야합니다...그러니까 어두운색 배경을 했으면 밝은색 글자를 해야 하고 밝은색 배경을 했으면 어두운색 글자로 해야 합니다...그 이유로는...글자와 배경이 대비가 되어야 하는데 대비가 되지 않으면 보기가 상당히 힘들겠져??
밝은색배경입니다.	어두운색배경입니다.
밝은색 배경에 있는 "밝은색배경입니다"라는 글자는 잘 보이지요? 하지만 어두운 색 배경에 있는 "어두운색배경입니다"는 잘 안보이시지요? 아마 마우스를 긁어야지 무슨 글자가 쓰였는지 읽을 수 있을겁니다...따라서 배경화면을 하실 때는 꼭 글자의 색깔과 대비가 되는 색을 골라야겠져??아래의 예제를 보시면 잘 아시겠지만 하얀 글자를 해놓고 배경은 또 밝은거 하시면 안됩니다...
밝은색배경입니다.	어두운색배경입니다.
직접 보시면서 느끼셨겠지만 배경화면을 하실 때에는 글자의 색깔이 밝은색일 때는 어두운색 배경으로 글자의 색깔이 어두운색깔일 때는 밝은색 배경으로 해주시는게 좋습니다.이제 배경화면에 대해 감이 잡히나요? 그리고 배경화면을 해놓고 글자가 많아 스크롤이 생겼는데 배경화면이 자꾸 따라와서 불편하시져? 따라서 배경화면을 꽉 붙들어 줘야 하는데요...배경화면은 붙들어 놓고 글자만 움직이는 옵션을 줄 수 있습니다...bgproperties="fixed"를 그림파일 주소를 적은 뒤에 넣어 주시면 됩니다...따라서 배경화면 고정시키게 하는 배경화면 태그는 이렇게 되겠네요... <body background="그림파일주소" bgproperties="fixed"> 그리고 본 태그대학에 있는 오른쪽에 있고 안움직이는 배경은 어떻게 하냐구 하면은요...저건 스타일 서식을 지정해 줘야 하거든요...소스는 일단 저겁니다...저기 그림파일주소에 적당한 그림을 넣어주시면 됩니다...

다음검색

출처: 라이언 원문보기 글쓴이: 호랑이

댓글

검색 옵션 선택상자

댓글내용선택됨 옵션 더 보기

댓글내용

댓글 작성자

연관검색어

환율

환자

환기

최신목록