꿈꾸는느티나무

링크 스타일 링크도 스타일시트로 꾸밀 수 있습니다. 링크는 변화상태마다 지정이 가능한데 변화가능한 옵션은 아래와 같습니다. 속성 구분 설명 a 태그명 하이퍼링크에 대한 모든 설정 a:link 가상클래스 한번도 방문하지 않은 하이퍼링크 a:visited 가상클래스 방문한 적이 있는 하이퍼 링크 속성 a:active 가상클래스 하이퍼링크를 클릭하는 순간의 속성 a:hover 가상클래스 마우스가 하이퍼링크 위로 올라왔을때의 속성 링크옵션을 사용하기전의 규칙이 있습니다.hover옵션은 link와 visited 뒤에 와야합니다.active 옵션은 hover 뒤에 와야 합니다. Example/* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:v..

속성 설명 background 한 줄에서 모든 배경 속성을 정의한다. background-attachment 배경이미지가 고정되어 있는지 스크롤되는지 지정한다. background-color 배경색을 지정한다. background-image 배경 이미지를 정의한다. background-position 배경 이미지의 시작 위치를 지정한다. background-repeat 배경 이미지의 반복 여부를 지정한다. background-size 배경이미지 크기를 조절한다. 배경색 지정하기 body를 선택자로 지정한 배경관련 스타일은 아래와 같이 적용할 수 있습니다.주로 사용하는 CSS 색깔 속성은 아래와 같습니다. HEX값 지정 방식 - #0000ff RGB값 지정 방식 - "rbg(0,0,255)" 색깔 이름 지..

CSS 삽입방법 CSS삽입방법에는 아래와 같이 3가지 방법이 있습니다.- 외부(External) 스타일시트- 내부(Internal) 스타일시트- 라인(Inline) 스타일시트 외부(External) 스타일시트 외부 스타일시트가 가장 이상적이라고 생각됩니다. 외부에서 불러오기 대문에 여러페이지에 적용시킬 수 있 습니다. 외부스타일 시트를 여러페이지에서 사용하고 있고 각 페이지마다 변경해야 할 때 외부에서 적용되는 스타일 시트만을 수정함으로써 작업량을 대폭 줄일 수 있습니다. Example메모장에 아래의 파일을 작성 후 test.css 이름으로 저장합니다. test.css hr { height:10px;} p { margin-left: 30px; font-size: 30px; color:red;} body ..

선택자란? CSS 선택자는 HTML요소들을 조작하기 위해서 사용된다고 배웠습니다 CSS 선택자는 요소(element)선택자 이외에도 id, classes, grouping 등등이 있습니다. 이번 블로그에서는 기본 선택자 외의 선택자에 대해서 알아봅시다. 아래의 예제는 HTML요소들을 가운데로 정렬하고 색깔을 빨강색으로 지정하는 예제입니다. 전체 선택자 현재 있는 모든 요소들을 선택하여 속성값을 지정할수 있습니다. 가나다라마바사 가나다라마바사 요소(element) 선택자 이 선택자는 요소의 기본적인 이름을 사용하는 선택자 입니다.HTML의 요소인 을 사용한다면 아래와 같이 사용할 수 있습니다. 가나다라마바사 가나다라마바사 하위 선택자 div안의 p태그만 영향을 받게 됩니다. 가나다라마바사 가나다라마바사 가..

메뉴제작하기 메뉴 소스! 볼만한 사이트 http://www.cssplay.co.uk/menus/pro_horizontal.html#nogo http://cssmenumaker.com/ http://www.webmadang.net/javascript/javascript.do?boardid=8001&categoryid=1005

사진에 특수효과를 주는 필터 gray 컬러 사진을 흑백 사진으로 변환 invert 그림 반전 xray X-Ray 촬영사진 chroma 배경색을 투명하게 해줌 문자와 그림을 꾸며주는 필터 pliph 수평 뒤집기 flipv 수직 뒤집기 alpha 그림 경계를 투명하게 해줌 blur 번짐 효과 waver 물결 효과 문자에 주로 사용되는 필터 dropshadow 원한느 위치에 그림자 생성 shadow 원하는 각도로 번지는 그림자 생성 glow 외부 광채 Blur Filter alpha 필터의 속성 속성 설명 opacitiy 불투명도로 값의 범위는 0~100(기본 값은 100) 0은 완전 투명, 100은 완전 불투명 style 불투명하게 할 그림의 경게 모양 설정 style=0; 기본값 style=1;선형 sty..

속성 설명 값 레이어에서 주로 사용되는 스타일 속성 레이어의 계층 순서 정수 값 z-index 보이기 형식 visible,hidden visibility 레이어 숨기기 display:none display 정렬과 어울림 left,right, float 어울림 해제 left,right,both overflow 스크롤 바 표시 여부 visible,hidden,scroll,auto direction 글자 방향 ltr, rtl 레이어 위치 지정 position 표시 방법 static, relative, absolute, fixed top 시작점의 수직(y)좌표 실수 값+단위, % bottom 끝점의 수직(y)좌표 실수 값+단위, % left 시작점의 수평(x)좌표 실수 값+단위, % right 끝점의 수평(x)..

cursor의 종류 속성 설명 crosshair 십자가 모양 text 문자를 적을 때 나타나는 대문자 I 모양 wait 프로그램이 실행중임을 알리는 모래시계 모양 help 화상표에 물음표가 붙은 모양 move 십자가 끝마다 화살표가 붙은 모양 e-resize 동쪽 방향 양방향 화살표 모양 ne-resize 북동쪽 방향 양방향 화살표 모양 nw-resize 북서쪽 방향 양방향 화살표 모양 n-resize 북쪽 방향 양방향 화살표 모양 se-resize 남동쪽 방향 양방향 화살표 모양 sw-resize 남서쪽 방향 양방향 화살표 모양 s-resize 남쪽 방향 양방향 화살표 모양 w-resize 서쪽 방향 양방향 화살표 모양 사용법 가나다라 예제) 아래에 커서를 가져다 대시오 가나다라

속성 설명 값 background-color 배경색 yellow, transparent background-image 배경 그림 지정 url(파일명) background-repeat 배경 그림 정렬 repeat(반복, repeat-(가로 반복), repeat-y(세로 반복), no-repeat(한 번만 표시) background-position 배경 그림 위치 %,px,left,center,right,top, center, bottom background-positionX 가로축 고정 위치 left,center,right background-positionY 세로축 고정 위치 top, center, bottom background-attachment 그림 고정 fixed, scroll background..

속성 설명 값 color 글자색 color,#FFFFFF,rgb{ , , } font-size 글자크기 숫자pt, xp, %,smaller, larger, xx-small, x-small, small, large, x-large, xx-large font-family 글자체 ex)굴림체, serif font-weight 글자굵기 숫자 100~900 font-style 글꼴모양 nomal(표준), oblique(이탤릭) italic(기울임) text-decoration 글꼴장식 none, underline, overline, line-through text-transform 대소문자 구분 capitalize(첫 글자 대문자), lowercase(모두 소문자), uppercase(모두 대문자) font-va..