HTML 썸네일형 리스트형 깔끔한 테이블 메뉴 - 2 메뉴 미리보기 깔끔한 세로 메뉴 테이블 입니다. 소스 보기 희야의웹하우스 A B O U T D I A R Y B B S L I N K M A I L ■ ■ ■ ■ 테이블과 CSS 로 구성된 깔끔한 테이블 이라서, 수정또한 쉽고 소스도 간결합니다. 기본적으로 테이블 색상과 메뉴이름, 링크 부분을 자신의 사이트에 맞게 수정하시면 됩니다. 빨간색으로 표시된 부분은 메뉴에 마우스를 가따대었을때 테이블 하단에 메뉴에 관한 설명을 적는 곳입니다. 설명하는건 필요없다고 한다면, 하단 빨간색으로 표시된 테이블 부분을 삭제하시면 됩니다. 보라색으로 표시된 부분이 테이블 색상입니다. 전체적인 색상, 마우스 오버시 나타나는 색상입니다. 알맞게 수정해서 사용하세요. 더보기 [ HTML ] img/ 이미지태그의 모든것 이미지 테두리 가장 기본적인 이미지 태그 입니다. 그럼 그냥 요로케 이미지가 나타나게 됩니다. 이미지에 테두리를 줘보겠습니다. 그럼 이미지에 1 만큼의 두께의 테두리가 생겼습니다. 당연히 border="숫자"의 크기가 높을수록 테두리 두께가 두꺼워 지겠지요. 이미지 링크 이미지에 그냥 링크를 걸면 , 이미지 주위로 파란색 테두리가 생기게 됩니다. 이럴때는 뒤에 border="0" 을 적어주면 파란색 테두리가 사라지게 됩니다. 이미지옆의 글자 위치 그림의 위쪽과 텍스트의 위쪽을 나란히 하여 한 줄의 텍스트만 들어갑니다. 그림의 중간부분을 기준으로 한 줄의 텍스트만 들어갑니다. 그림의 아래쪽을 맞추어 한 줄의 텍스트만 들어갑니다. 이미지옆에 글을 적어보자 이곳에다가 글을 막 써주세요 ^^ = 그림은 왼쪽, .. 더보기 [ HTML ] 테이블에 색상을 넣어보자/ 테두리도 꾸미기 테이블에 색을 입혀서 꾸며보기 희야의웹하우스 옆에 bgcolor= 소스를 넣으면 테이블 전체에 색이 들어갑니다. 희야의웹하우스 안에 bgcolor= 소스를 넣으면 해달 셀 부분만 배경색이 입혀집니다. 희야의웹하우스 와 에 각각 bgcolor 색을 넣었습니다. 셀부분의 색이 바깥쪽 테이블 색을 덮었더니, 에 넣은 배경색이 테두리 색으로 보입니다. 희야의웹하우스 위쪽 테이블과의 차이점이 보이시나요 ? 위쪽 테이블은 기본적인 border(테두리) 소스가 들어가있고, 아랫쪽에는 테두리 소스가 없습니다. 그랬더니 왠지 더 매끄럽고 깔끔한 테이블이 만들어졌습니다. 테이블 테두리 가늘게 만들어보자 희야의웹하우스 뒤쪽에 cellspacing=1 이라는 소스가 들어가서 테이블의 테두리를 가늘게 만들어주는 역활을 하고 있.. 더보기 깔끔한 테이블 메뉴 - 1 테이블 상자는 CSS, 자바스크립트에 비해서 많이 화려하지 않기때문에, 디자인을 아주 중요시하는 고수분들에게는 솔직히 별로 인기가 없을지 몰라요 ^^ 하지만, 어디까지나 블로그나 사이트를 막 접하는 분들이나 , 좀 더 깔끔하고 간편한 메뉴를 찾는 분들에게 조금이나마 도움이 되고자 올립니다. ^^ Table 과 CSS 를 혼합해서 만들어지므로, 그냥 일반적인 테이블 보다는 다양한 테두리와 색깔, 마우스온 효과도 있어서 훨씬더 모양도 이쁘고, 수정도 간편해서 초보분들도 쉽게 사용할 수 있을거라고 생각합니다. －・－ MENU －・－ 포토샵강좌 베가스강좌 자유게시판 HTML/CSS 희야의웹하우스 －・－・－・－・－・－・－ －・－ MENU －・－ 포토샵강좌 자유게시판 희야의웹하우스 －・－・－・－・－・－・－ －・－ .. 더보기 [ CSS ] 스타일 시트는 ? 간단하게 말하면, HTML 만으로 홈페이지를 만드는 것보다, 더 많은 페이지의 디자인을 업그레이드 하고자 할때 사용합니다. 문자의 크기를 자신이 생각하는 크기로 정하거나, 줄 간격을 적당하게 조절하여 읽기 편하고 만들 수도 있고, 문자 색상, 등등 좀 더 자유롭게 만들 수가 있습니다. 그리고 스타일시트를 사용하는 큰 장점은 스타일시트 설정을 스타일시트 파일로 저장하여, 여러개의 HTML 파일에 적용시킬 수도 있습니다. ■ 스타일시트는 크게 세 가지로 구분이 되어 집니다. 독립적인 스타일 문서 - External 스타일시트 하나의 웹 문서에만 영향을 주는 - Internal 스타일시트 웹 문서안의 특정 영역에만 영향을 주는 - Inline 스타일시트 ■ 스타일을 지정하는 일반적인 방법은 아래의 문법을 따릅.. 더보기 [ HTML ] 테이블 테두리/색상/cellspacing/cellpadding 테이블의 두께와 색상을 바꿔보겠습니다. 희야의 웹하우스 결과물 border="3" 은 테두리의 두께를 정하는 것입니다. bordercolor="red" 테두리의 색상을 정합니다. cellspacing 칸과 칸사이의 여백 희야의 웹하우스 결과물 숫자가 커질수록 간격이 더 넓어지겠지요~ cellpadding 칸 안에서의 여백 조정 희야의 웹하우스 결과물 숫자가 커질수록 칸 안쪽의 여백이 넓어집니다. 이젠 위 속성들을 이용하여 , 같이 사용해 보겠습니다. 희야의 웹하우스에 어서오세요^^ 결과물 속성을 조금 넣었는데도 제법 깔끔한 테이블이 만들어 졌습니다. 여백과 색상 두께를 잘 조절해서 깔끔한 테이블을 만들어 보세요 ^^ 더보기 [ HTML] body 태그 HTML 의 기본 구성은 ? -------> 웹페이지의 시작을 나타냄 -------->웹페이지의 내용을 넣는 태그 희야의웹하우스 이런식으로 구성이 됩니다. ■ 태그 태그를 어떻게 사용하느냐에 따라서, 웹 문서를 분위기있게 꾸밀수 있습니다. (속성) (값) 위 body 태그는 웹문서의 전체 배경을 바꿔주는 태그 입니다. 태그의 속성을 살펴 보겠습니다. 태그의 속성 값 설명 bgcolor 색상 웹문서의 배경에 색상을 지정합니다. background 이미지 파일명 웹문서의 배경에 이미지를 지정합니다. text 색상 웹문서에 나타나는 글자의 색상을 지정합니다. link 색상 웹문서에 나타나는 하이퍼링크 글자의 색상을 지정합니다. alink 색상 하이퍼링크 글자가 클릭될 때의 색상을 지정합니다. vlink.. 더보기 이전 1 다음
