본문 바로가기

■ 블로그꾸미기

라인 쇼핑체험단 - LG포켓포토 - 예쁜 공주님이 세상에 태어나니 이젠 공주님 사진을 한장 한장 쭉 보존 하고 싶어집니다. 그동안 스마트폰으로 찍은 사진은 수백장이었지만, 폰이 고장나거나 새걸로 바꾸게 된다거나, 이럴때마다 PC로 보관하지만 서도 PC 를 켜지 않는 이상 보고 싶을때 맘 껏 볼 수 가 없었지요~ 그런 아쉬운 맘들의 맘을 달래주듯 등장한 제품이 LG포켓포토 ... 줄여서 포포 라고 하지요 ^^ 요즘 잘나가는 걸그룹 걸스데이가 광고하고 있는 포켓포토 입니다. 가방 안에 쏙 들어갈정도로 작은 크기라서 휴대하기도 편하답니다. 들고다니면서 언제어디서나 원하는 사진을 바로바로 출력할 수 있답니다. 더군다나 따로 연결하는 선 없이 블루투스 연동으로 간편하게 사진을 찍고 , 전용앱으로 꾸민후 바로바로 출력 가능 ! 나만의 스타일로 편집할.. 더보기
깔끔한 css 메뉴 (가로사이즈) 메뉴 미리보기 깔끔한 세로형 CSS 메뉴입니다. CSS 스크립트 메뉴가 설치하기 힘든 분들은 , CSS 테이블 메뉴로 깔끔하게 메뉴를 꾸며도 될것같아요^^ 소스보기 ■ 사이에 들어갈 소스 ■ ~ 사이에 들어갈 소스 희야의웹하우스 포토샵강좌 블로그꾸미기 질문게시판 흔적남기기 위 소스를 보시고 정해진 위치에 제대로 넣어주시면 됩니다. line-height:30px; 은 메뉴바의 높이를 나타냅니다. -- 직접 바꿔서 보시면 바로 알겁니다 ^^; font-size:12px , color:#FFFFFF; 은 글자 사이즈, 그리고 글자 색을 나타납니다. menu36 a:hover 이부분이 마우스를 링크에 가따대었을때 하얀색으로 테두리가 생기지요 ? 그 효과를 설정하는 곳입니다. 본인의 사이트나 블로그에 맞게끔 수정.. 더보기
깔끔한 css 테이블 메뉴 - 4 깔끔한 CSS 메뉴 입니다. ■ 소스보기 다운받으시면 어느부분에 소스를 넣어야 할지 바로 아실 겁니다 ^^ 간단한 테이블 하나로도, 내 블로그의 분위기가 확 달라진답니다 ~ @_@ 더보기
서식을 이용하여 글내용 타이틀 만들기 글 내용을 작성할때 대부분 글 주제 타이틀을 큰 글씨로 작성합니다. 그럴때 매번 색상바꾸고 두껍게 하고 폰트크기 크게 하고...... 이러면 번거롭잖아요? 그럴때 서식을 이용하여 간편하게 바로 꺼내서 사용하시면 됩니다. 제가 사용하는 타이틀은 이 모양 입니다. 아래는 소스입니다. 글을적을때 서식에 체크를 하시고, 제목적으시고 내용에 아래 소스를 고대로 붙혀넣으시고 저장하기를 누르시면 됩니다. 메뉴 미리보기 두께 , 색상은 수정 가능 합니다. 사이트에 맞게 수정해서 사용하세요. 다른모양 타이틀 테이블 희야의웹하우스 // 이곳에 타이틀을 적으세요. 테이블 형식입니다. 하지만 서식으로 저장할꺼니깐 보기좋은게 좋겠지요 ^^ 글쓰기로 들어갑니다. 서식을 선택 하세요. 그리고 제목과 내용이 글을 적습니다. 다 적었.. 더보기
깔끔한 테이블 메뉴 - 3 메뉴 미리보기 마우스 오버시 타원형의 희미한 색상이 보이는 깔끔한 메뉴 입니다. 메뉴 소스보기 희야의웹하우스 ABOUT DIARY BBS LINK → ← 이 테이블도 설명부분이 들어가 있습니다. 수정하는것도 꽤 간편합니다. 잘 사용하세요 @_@ 더보기
깔끔한 테이블 메뉴 - 2 메뉴 미리보기 깔끔한 세로 메뉴 테이블 입니다. 소스 보기 희야의웹하우스 A B O U T D I A R Y B B S L I N K M A I L ■ ■ ■ ■ 테이블과 CSS 로 구성된 깔끔한 테이블 이라서, 수정또한 쉽고 소스도 간결합니다. 기본적으로 테이블 색상과 메뉴이름, 링크 부분을 자신의 사이트에 맞게 수정하시면 됩니다. 빨간색으로 표시된 부분은 메뉴에 마우스를 가따대었을때 테이블 하단에 메뉴에 관한 설명을 적는 곳입니다. 설명하는건 필요없다고 한다면, 하단 빨간색으로 표시된 테이블 부분을 삭제하시면 됩니다. 보라색으로 표시된 부분이 테이블 색상입니다. 전체적인 색상, 마우스 오버시 나타나는 색상입니다. 알맞게 수정해서 사용하세요. 더보기
깔끔한 CSS 메뉴 - 2 ■ 메뉴 미리보기 기본상태 메뉴 모습과 마우스오버시 메뉴 모습입니다. ■ 소스 사용법 = 전체적인 소스를 먼저 다운받으세요. = 위 css 와 js 소스 그리고 아래 4개의 이미지를 모두 다운받아야 합니다. 티스토리를 기준으로 설명하겠습니다. ( 그냥 웹계정에 올린다면, 모든 파일을 같은 폴더에 업로드하면 따로 주소를 적어줄 필요가 없습니다.) 드롭다운 메뉴를 사용해보면서 알게된건데......... css, js 소스를 먼저 업로드하고 이미지주소를 적으면 적용이 바로 안되더군요 -_-) 그래서 일단 이미지들 부터 티스토리에 먼저 업로드 해야합니다. 업로드 하는방법은 앞에 강좌에서 설명했습니다. 티스토리 파일업로드 방법과 주소알아내는 방법 = [■ 블로그꾸미기] - 사이드부분에 새로운 메뉴 추가하기 이곳을.. 더보기
[ HTML ] img/ 이미지태그의 모든것 이미지 테두리 가장 기본적인 이미지 태그 입니다. 그럼 그냥 요로케 이미지가 나타나게 됩니다. 이미지에 테두리를 줘보겠습니다. 그럼 이미지에 1 만큼의 두께의 테두리가 생겼습니다. 당연히 border="숫자"의 크기가 높을수록 테두리 두께가 두꺼워 지겠지요. 이미지 링크 이미지에 그냥 링크를 걸면 , 이미지 주위로 파란색 테두리가 생기게 됩니다. 이럴때는 뒤에 border="0" 을 적어주면 파란색 테두리가 사라지게 됩니다. 이미지옆의 글자 위치 그림의 위쪽과 텍스트의 위쪽을 나란히 하여 한 줄의 텍스트만 들어갑니다. 그림의 중간부분을 기준으로 한 줄의 텍스트만 들어갑니다. 그림의 아래쪽을 맞추어 한 줄의 텍스트만 들어갑니다. 이미지옆에 글을 적어보자 이곳에다가 글을 막 써주세요 ^^ = 그림은 왼쪽, .. 더보기
[ HTML ] 테이블에 색상을 넣어보자/ 테두리도 꾸미기 테이블에 색을 입혀서 꾸며보기 희야의웹하우스 옆에 bgcolor= 소스를 넣으면 테이블 전체에 색이 들어갑니다. 희야의웹하우스 안에 bgcolor= 소스를 넣으면 해달 셀 부분만 배경색이 입혀집니다. 희야의웹하우스 와 에 각각 bgcolor 색을 넣었습니다. 셀부분의 색이 바깥쪽 테이블 색을 덮었더니, 에 넣은 배경색이 테두리 색으로 보입니다. 희야의웹하우스 위쪽 테이블과의 차이점이 보이시나요 ? 위쪽 테이블은 기본적인 border(테두리) 소스가 들어가있고, 아랫쪽에는 테두리 소스가 없습니다. 그랬더니 왠지 더 매끄럽고 깔끔한 테이블이 만들어졌습니다. 테이블 테두리 가늘게 만들어보자 희야의웹하우스 뒤쪽에 cellspacing=1 이라는 소스가 들어가서 테이블의 테두리를 가늘게 만들어주는 역활을 하고 있.. 더보기
깔끔한 테이블 메뉴 - 1 테이블 상자는 CSS, 자바스크립트에 비해서 많이 화려하지 않기때문에, 디자인을 아주 중요시하는 고수분들에게는 솔직히 별로 인기가 없을지 몰라요 ^^ 하지만, 어디까지나 블로그나 사이트를 막 접하는 분들이나 , 좀 더 깔끔하고 간편한 메뉴를 찾는 분들에게 조금이나마 도움이 되고자 올립니다. ^^ Table 과 CSS 를 혼합해서 만들어지므로, 그냥 일반적인 테이블 보다는 다양한 테두리와 색깔, 마우스온 효과도 있어서 훨씬더 모양도 이쁘고, 수정도 간편해서 초보분들도 쉽게 사용할 수 있을거라고 생각합니다. -・- MENU -・- 포토샵강좌 베가스강좌 자유게시판 HTML/CSS 희야의웹하우스 -・-・-・-・-・-・- -・- MENU -・- 포토샵강좌 자유게시판 희야의웹하우스 -・-・-・-・-・-・- -・- .. 더보기
깔끔한 언더라인 메뉴 ■ 메뉴 미리보기 지금 제 블로그에도 CSS 메뉴를 이용해서 만들었습니다. 복잡한 자바스크립트보단 소스도 더 간결하면서, 수정하기도 쉬어서 요즘 많이들 사용하고 있지요 ~ ■ 소스 살펴보기 먼저 소스를 다운받아주세요. 먼저 소스를 열어보시면 어디서 부터 어디까지가 head 와 body 에 들어갈 소스인지 알게됩니다. 위 소스에서 다른 부분은 그다지 수정하지 않아도 상관없고요, 자신의 홈피색에 맞게 하려면 빨간 네모난 부분만 수정하셔도 됩니다. color : 메뉴 색을 나타냅니다. border-bottom : 메뉴 아래 라인 부분 두께를 조절합니다. solid gray 메뉴 라인부분의 색을 나타냅니다. border-bottom-color : black 마우스를 가따대었을때 색을 말합니다. ■ 소스 적용하기.. 더보기
IFRAME 아이프레임 아이프레임은 HTML 문서의 어느 한 부분에 다른 웹 문서를 보여주려고 할때 사용합니다. 내부 프레임 (Inline frame)라고 합니다. 기본적인 아이프레임 태그는 위 소스대로 실행을 하면, 이렇게 나타나게 됩니다 .......... (스크롤 내리지마세요 -_- 이미지 입니다 ;;;) 소스에 좀 더 옵션을 주도록 하겠습니다. ^^ 결과를 한번 보도록 할께요. 한결 깔끔해 졌죠? 옵션 빨간 부분의 부가 설명을 해 드릴께요. marginwidth="0" , marginheight="0" 은 창 내부의 여백을 주는 것입니다. scrolling="auto"는 스크롤바를 자동으로 생기게 하는겁니다. "no" 로 하면 스크롤바가 안나타납니다. "yes"로 하면 항상 있습니다. style="border:1 sol.. 더보기
[ HTML ] 배경음악을 넣어보자 bgsound/ embed 음악태그에 대해서 알아보겠습니다. bgsound 먼저 전체적인 배경음악을 넣을때는 bgsound 라는 태그를 넣어주시면 됩니다. bgsound 는 페이지에서 눈에는 플레이어창이 아무것도 보이지 않지만 저절로 음악이 흐르게 해줍니다. 이렇게 적어주시면 해당 소스가 삽입 된 페이지에서는 음악이 흘러 나오게 됩니다. 뒤에 loop="Infinite" 를 넣어주시면 배경음악을 무한 반복 시켜줍니다. loop="5" 이렇게 하면 배경음악을 5번만 반복을 하게 됩니다. embed bgsound 와는 다른 속성으로 원하는 위치에 플레이어창을 보이게 해줍니다. embed 태그의 기본 소스 입니다. embed 태그는 몇가지 속성을 붙힐 수 가 있답니다 . 위 소스를 보시면 "autostart" 라는 속성이 있는데 뒤에 .. 더보기
[ CSS ] 스타일 시트는 ? 간단하게 말하면, HTML 만으로 홈페이지를 만드는 것보다, 더 많은 페이지의 디자인을 업그레이드 하고자 할때 사용합니다. 문자의 크기를 자신이 생각하는 크기로 정하거나, 줄 간격을 적당하게 조절하여 읽기 편하고 만들 수도 있고, 문자 색상, 등등 좀 더 자유롭게 만들 수가 있습니다. 그리고 스타일시트를 사용하는 큰 장점은 스타일시트 설정을 스타일시트 파일로 저장하여, 여러개의 HTML 파일에 적용시킬 수도 있습니다. ■ 스타일시트는 크게 세 가지로 구분이 되어 집니다. 독립적인 스타일 문서 - External 스타일시트 하나의 웹 문서에만 영향을 주는 - Internal 스타일시트 웹 문서안의 특정 영역에만 영향을 주는 - Inline 스타일시트 ■ 스타일을 지정하는 일반적인 방법은 아래의 문법을 따릅.. 더보기
[ HTML ] 테이블 테두리/색상/cellspacing/cellpadding 테이블의 두께와 색상을 바꿔보겠습니다. 희야의 웹하우스 결과물 border="3" 은 테두리의 두께를 정하는 것입니다. bordercolor="red" 테두리의 색상을 정합니다. cellspacing 칸과 칸사이의 여백 희야의 웹하우스 결과물 숫자가 커질수록 간격이 더 넓어지겠지요~ cellpadding 칸 안에서의 여백 조정 희야의 웹하우스 결과물 숫자가 커질수록 칸 안쪽의 여백이 넓어집니다. 이젠 위 속성들을 이용하여 , 같이 사용해 보겠습니다. 희야의 웹하우스에 어서오세요^^ 결과물 속성을 조금 넣었는데도 제법 깔끔한 테이블이 만들어 졌습니다. 여백과 색상 두께를 잘 조절해서 깔끔한 테이블을 만들어 보세요 ^^ 더보기