본문 바로가기

■ 블로그꾸미기/HTML/css

[ HTML ] img/ 이미지태그의 모든것 이미지 테두리 가장 기본적인 이미지 태그 입니다. 그럼 그냥 요로케 이미지가 나타나게 됩니다. 이미지에 테두리를 줘보겠습니다. 그럼 이미지에 1 만큼의 두께의 테두리가 생겼습니다. 당연히 border="숫자"의 크기가 높을수록 테두리 두께가 두꺼워 지겠지요. 이미지 링크 이미지에 그냥 링크를 걸면 , 이미지 주위로 파란색 테두리가 생기게 됩니다. 이럴때는 뒤에 border="0" 을 적어주면 파란색 테두리가 사라지게 됩니다. 이미지옆의 글자 위치 그림의 위쪽과 텍스트의 위쪽을 나란히 하여 한 줄의 텍스트만 들어갑니다. 그림의 중간부분을 기준으로 한 줄의 텍스트만 들어갑니다. 그림의 아래쪽을 맞추어 한 줄의 텍스트만 들어갑니다. 이미지옆에 글을 적어보자 이곳에다가 글을 막 써주세요 ^^ = 그림은 왼쪽, .. 더보기
[ HTML ] 테이블에 색상을 넣어보자/ 테두리도 꾸미기 테이블에 색을 입혀서 꾸며보기 희야의웹하우스 옆에 bgcolor= 소스를 넣으면 테이블 전체에 색이 들어갑니다. 희야의웹하우스 안에 bgcolor= 소스를 넣으면 해달 셀 부분만 배경색이 입혀집니다. 희야의웹하우스 와 에 각각 bgcolor 색을 넣었습니다. 셀부분의 색이 바깥쪽 테이블 색을 덮었더니, 에 넣은 배경색이 테두리 색으로 보입니다. 희야의웹하우스 위쪽 테이블과의 차이점이 보이시나요 ? 위쪽 테이블은 기본적인 border(테두리) 소스가 들어가있고, 아랫쪽에는 테두리 소스가 없습니다. 그랬더니 왠지 더 매끄럽고 깔끔한 테이블이 만들어졌습니다. 테이블 테두리 가늘게 만들어보자 희야의웹하우스 뒤쪽에 cellspacing=1 이라는 소스가 들어가서 테이블의 테두리를 가늘게 만들어주는 역활을 하고 있.. 더보기
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 칸 안에서의 여백 조정 희야의 웹하우스 결과물 숫자가 커질수록 칸 안쪽의 여백이 넓어집니다. 이젠 위 속성들을 이용하여 , 같이 사용해 보겠습니다. 희야의 웹하우스에 어서오세요^^ 결과물 속성을 조금 넣었는데도 제법 깔끔한 테이블이 만들어 졌습니다. 여백과 색상 두께를 잘 조절해서 깔끔한 테이블을 만들어 보세요 ^^ 더보기
[ HTML ] TABLE 에 대해 알아보자 가장 기본적인 테이블에 대해서 알아보도록 하겠습니다. ■ 먼저 가장 기본적인 테이블 태그는 아래와 같습니다. 희야의 웹하우스 위와 같이 태그를 적용하면 결과물은 이렇게 나오게 됩니다. ■ 가로로 테이블 칸을 늘이고 싶다면 희야의웹하우스 http://heeya1004.tistory.com/ 이렇게 하시면 됩니다. 글자 이렇게 반복 하시면 옆으로 칸을 계속 늘일 수 있습니다. ■ 반대로 세로로 칸 수를 늘이고싶다면 희야의웹하우스 http://heeya1004.tistory.com/ 이렇게 하시면 됩니다. 글자 을 계속 반복 하면, 아래로 칸 수를 늘릴 수 있습니다. 가장 기본이 되는 테이블 태그에 대해서 알아보았습니다. 아무런 장식은 없지만, 뼈대가 되므로 꼭 알아두세요 ^^ 태그의 속성 값과 의미 bord.. 더보기
[ HTML] body 태그 HTML 의 기본 구성은 ? -------> 웹페이지의 시작을 나타냄 -------->웹페이지의 내용을 넣는 태그 희야의웹하우스 이런식으로 구성이 됩니다. ■ 태그  태그를 어떻게 사용하느냐에 따라서, 웹 문서를 분위기있게 꾸밀수 있습니다. (속성) (값) 위 body 태그는 웹문서의 전체 배경을 바꿔주는 태그 입니다. 태그의 속성을 살펴 보겠습니다. 태그의 속성 값 설명 bgcolor 색상 웹문서의 배경에 색상을 지정합니다. background 이미지 파일명 웹문서의 배경에 이미지를 지정합니다. text 색상 웹문서에 나타나는 글자의 색상을 지정합니다. link 색상 웹문서에 나타나는 하이퍼링크 글자의 색상을 지정합니다. alink 색상 하이퍼링크 글자가 클릭될 때의 색상을 지정합니다. vlink.. 더보기