본문 바로가기

CSS

깔끔한 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" 을 적어주면 파란색 테두리가 사라지게 됩니다. 이미지옆의 글자 위치 그림의 위쪽과 텍스트의 위쪽을 나란히 하여 한 줄의 텍스트만 들어갑니다. 그림의 중간부분을 기준으로 한 줄의 텍스트만 들어갑니다. 그림의 아래쪽을 맞추어 한 줄의 텍스트만 들어갑니다. 이미지옆에 글을 적어보자 이곳에다가 글을 막 써주세요 ^^ = 그림은 왼쪽, .. 더보기
깔끔한 테이블 메뉴 - 1 테이블 상자는 CSS, 자바스크립트에 비해서 많이 화려하지 않기때문에, 디자인을 아주 중요시하는 고수분들에게는 솔직히 별로 인기가 없을지 몰라요 ^^ 하지만, 어디까지나 블로그나 사이트를 막 접하는 분들이나 , 좀 더 깔끔하고 간편한 메뉴를 찾는 분들에게 조금이나마 도움이 되고자 올립니다. ^^ Table 과 CSS 를 혼합해서 만들어지므로, 그냥 일반적인 테이블 보다는 다양한 테두리와 색깔, 마우스온 효과도 있어서 훨씬더 모양도 이쁘고, 수정도 간편해서 초보분들도 쉽게 사용할 수 있을거라고 생각합니다. －・－ MENU －・－ 포토샵강좌 베가스강좌 자유게시판 HTML/CSS 희야의웹하우스 －・－・－・－・－・－・－ －・－ MENU －・－ 포토샵강좌 자유게시판 희야의웹하우스 －・－・－・－・－・－・－ －・－ .. 더보기
깔끔한 언더라인 메뉴 ■ 메뉴 미리보기 지금 제 블로그에도 CSS 메뉴를 이용해서 만들었습니다. 복잡한 자바스크립트보단 소스도 더 간결하면서, 수정하기도 쉬어서 요즘 많이들 사용하고 있지요 ~ ■ 소스 살펴보기 먼저 소스를 다운받아주세요. 먼저 소스를 열어보시면 어디서 부터 어디까지가 head 와 body 에 들어갈 소스인지 알게됩니다. 위 소스에서 다른 부분은 그다지 수정하지 않아도 상관없고요, 자신의 홈피색에 맞게 하려면 빨간 네모난 부분만 수정하셔도 됩니다. color : 메뉴 색을 나타냅니다. border-bottom : 메뉴 아래 라인 부분 두께를 조절합니다. solid gray 메뉴 라인부분의 색을 나타냅니다. border-bottom-color : black 마우스를 가따대었을때 색을 말합니다. ■ 소스 적용하기.. 더보기
[ CSS ] 스타일 시트는 ? 간단하게 말하면, HTML 만으로 홈페이지를 만드는 것보다, 더 많은 페이지의 디자인을 업그레이드 하고자 할때 사용합니다. 문자의 크기를 자신이 생각하는 크기로 정하거나, 줄 간격을 적당하게 조절하여 읽기 편하고 만들 수도 있고, 문자 색상, 등등 좀 더 자유롭게 만들 수가 있습니다. 그리고 스타일시트를 사용하는 큰 장점은 스타일시트 설정을 스타일시트 파일로 저장하여, 여러개의 HTML 파일에 적용시킬 수도 있습니다. ■ 스타일시트는 크게 세 가지로 구분이 되어 집니다. 독립적인 스타일 문서 - External 스타일시트 하나의 웹 문서에만 영향을 주는 - Internal 스타일시트 웹 문서안의 특정 영역에만 영향을 주는 - Inline 스타일시트 ■ 스타일을 지정하는 일반적인 방법은 아래의 문법을 따릅.. 더보기

티스토리툴바