태그강좌

돌아가기
아래로
위로

CSS

html문서에 그라데이션 적용하기

오작교 15년 전 27177

스타일시트의 필터기능만으로 html 문서 내에 그라데이션 효과를 넣을 수 있습니다. 지금 보고 계신 테이블에는 수직그라데이션을 적용했습니다.

이렇게 가로방향으로 수평그라데이션을 적용할 수도 있습니다. <body>태그 안에 삽입할 경우, 문서 전체배경의 배경이 그라데이션으로 표현됩니다. →이렇게요~

의 원하는 위치에 아래처럼 테이블을 만들고 <table>태그 안에 style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B1C7F9, EndColorStr=#EEF2FC)" 를 추가합니다.


	<table style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B1C7F9, EndColorStr=#EEF2FC)"> <tr> <td>내용</td> </tr> </table>

0 은 그라데이션의 타입.
0은 수직그라데이션으로 그라데이션효과가 상하방향로 표현됩니다. 1은 수평그라디에션으로 그라데이션효과가 좌우방향으로 표현됩니다.

#B1C7F9는 그라디에션이 시작되는 지점의 색, #EEF2FC는 그라데이션이 끝나는 지점의 색입니다.

<table>태그가 아닌 다른 태그 안에도 적용해보세요^_^

참고로, 문서 전체에 그라데이션을 넣고자 한다면, 아래처럼 하시면 됩니다.
<body style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B1C7F9, EndColorStr=#EEF2FC)">

검색어 : 202409

번호	분류	제목	글쓴이	날짜	조회	추천
공지	HTML	HTML 기초 다지기 4	오작교	08.06.17.16:26	291212	0
공지	HTML	HTML과 CSS의 종합 정리 1	오작교	07.10.01.10:21	350187	0
공지	일반	스타일시트의 총정리	오작교	06.09.14.13:08	294819	+14
300		normal window.open() 사용례	오작교	23.12.10.09:32	14565	0
299	Script	normal window.open() 함수 사용법	오작교	23.12.10.09:29	19913	0
298	CSS	normal 스크롤바 디자인 하기 1	오작교	21.01.09.14:18	40874	0
297	HTML	normal html 특수문자 리스트	오작교	15.09.17.08:58	116450	0
296	HTML	normal html4와 5의 요소와 속성 차이	오작교	15.09.13.21:38	21721	0
295	HTML	normal html4와 5의 차이	오작교	15.09.13.21:30	25302	0
294	HTML	normal 테이블 프레임 속성	오작교	15.08.30.12:19	52894	0
293	Script	normal 윈도우 객체.. 새 창 관련	오작교	15.05.12.14:06	21297	0
292	HTML	file 미디어 재생 type=audio_x-ms-wma 1	오작교	12.03.08.13:51	36053	0
291	HTML	normal html 요소 이름의 플어쓴 말과 한국말 표현	오작교	11.06.03.10:44	40882	0
290	CSS	normal CSS 글꼴 크기 대조표	오작교	11.06.03.10:29	70789	0
289	Script	normal 싸이트 머문 시간 표시하기	오작교	11.03.22.11:19	43581	0
288	Script	normal 싸이트 접속시 다른 곳으로 유도하기	오작교	11.03.22.11:15	38360	0
287	Script	normal 방문자의 모니터 해상도를 나타내는 소스	오작교	11.03.22.11:07	37237	0
286	HTML	normal iframe 태그에 관하여....	오작교	11.01.25.10:27	36345	0
285	CSS	normal 간단한 폰트 속성 지정	오작교	11.01.24.10:40	35517	0
284	HTML	normal 셀렉트 박스에서의 정열	오작교	11.01.24.10:39	37226	0
283	Script	normal a href="#" 사용을 할 때 유의사항	오작교	11.01.24.10:34	38235	0
282	CSS	normal 간단히 탭 메뉴 만들기	오작교	11.01.24.10:31	37873	0
281	CSS	normal 간단히 링크 점선 없애는 방법 1	오작교	11.01.24.10:27	36349	0

검색돌아가기 쓰기

이전첫 페이지입니다

12 3 4 5 6 7 8 9 10 ... 15끝

태그강좌

신고

댓글 삭제

공유

검색

로그인