'web style'에 해당되는 글 2건
2008. 9. 23. 10:06
오늘도 어김없이 이사이트 저 사이트 돌아다니는 와중에 CSS로 메뉴를 손쉽게 꾸밀 수 있도록 만들어주는 사이트를 소개하는 포스트를 발견했다.
CSS Menu Builder라는 사이트로 홈페이지를 만들거나 혹은 블로그의 메뉴를 수정하고자 한다면 CSS를 직접적으로 수정해줘야 하는 경우가 생기는데 이때 편하게 사용할 수 있을거 같다. 머 직적 자신이 CSS를 작성할 수 있는 스킬을 가지신 분들이야 상관없지만 나같이 이리저리 잘 모르는 사람은 편하게 사용할 수 있을거 같다.
사용법은 아주 간단하다. 첫 화면에서 자신이 원하는 메뉴 스타일을 선택하고 "View All" 버튼을 클릭하면 해당하는 서브 메뉴들이 나타나게 되 고 이 곳에서 다시한 "Build 선택스타일 menu" 버튼을 클릭하면 해당하는 메뉴를 구성하는 화면을 만날 수 있다.
아래 화면은 해당하는 메뉴를 구성하고 구성된 내용을 확인하고 해당 메뉴를 만들기위한 HTML및 CSS코디와 이미지등을 확인할 수있는 화면입니다.
다양하고 이쁘다고 생각되는 이미지는 많이 없는거 같지만 그래도 기초적인 메뉴를 만들고 그 상태에서 이미지를 변경하면서 추가적인 메뉴를 만들어 가는데는 확실히 도움이 될거 같다는 생각이 드네요! 그리고 아직 CSS코딩 자체가 부족하다라고 생각되는 나같은 사람에게는 절대적으로 필요한거 같다는 생각도 들고!
머 이리저리 간단하게 사용할 수 있는 다양한 서비스들과 툴이 나타나는건 좋은 현상이라 할만한다.!
그럼 일 글을 읽는 모든 분들에게 오늘 하루 즐겁고 행복만 가득한 하루 되시길!!^_^;
CSS Menu Builder라는 사이트로 홈페이지를 만들거나 혹은 블로그의 메뉴를 수정하고자 한다면 CSS를 직접적으로 수정해줘야 하는 경우가 생기는데 이때 편하게 사용할 수 있을거 같다. 머 직적 자신이 CSS를 작성할 수 있는 스킬을 가지신 분들이야 상관없지만 나같이 이리저리 잘 모르는 사람은 편하게 사용할 수 있을거 같다.
사용법은 아주 간단하다. 첫 화면에서 자신이 원하는 메뉴 스타일을 선택하고 "View All" 버튼을 클릭하면 해당하는 서브 메뉴들이 나타나게 되 고 이 곳에서 다시한 "Build 선택스타일 menu" 버튼을 클릭하면 해당하는 메뉴를 구성하는 화면을 만날 수 있다.
아래 화면은 해당하는 메뉴를 구성하고 구성된 내용을 확인하고 해당 메뉴를 만들기위한 HTML및 CSS코디와 이미지등을 확인할 수있는 화면입니다.
다양하고 이쁘다고 생각되는 이미지는 많이 없는거 같지만 그래도 기초적인 메뉴를 만들고 그 상태에서 이미지를 변경하면서 추가적인 메뉴를 만들어 가는데는 확실히 도움이 될거 같다는 생각이 드네요! 그리고 아직 CSS코딩 자체가 부족하다라고 생각되는 나같은 사람에게는 절대적으로 필요한거 같다는 생각도 들고!
머 이리저리 간단하게 사용할 수 있는 다양한 서비스들과 툴이 나타나는건 좋은 현상이라 할만한다.!
그럼 일 글을 읽는 모든 분들에게 오늘 하루 즐겁고 행복만 가득한 하루 되시길!!^_^;
:: 관련글 ::
CSS로 메뉴를 손쉽게 꾸며보자! CSS Menu Builder - Blognawa
CSS로 메뉴를 손쉽게 꾸며보자! CSS Menu Builder - Blognawa
'ººº::Development™:: > ::WEB™::' 카테고리의 다른 글
[Javascript] 실수 소수점 처리 - 반올림, 버림 (0) | 2009.10.01 |
---|---|
[PHP] 내림 / 올림 / 반올림 함수 (0) | 2009.07.09 |
[Javascript] Dragtable - Table정렬 스크립트.. (0) | 2008.07.16 |
[JavaScript] Giva Labs이 만든 콤보박스 (0) | 2008.07.09 |
투명한 iFrame 만들기 (0) | 2007.04.04 |
2007. 4. 4. 13:11
투명한 iFrame 만들기
iFrame을 사용해 웹 페이지 중간에 다른 페이지의 내용을 넣을 경우가 있다.
하지만 웹 페이지의 백그라운드 부분에 다른 이미지가 있는 상태에서 iFrame을 넣을 경우 백 그리운드 이미지와 매칭되지 않는 경우가 있는데 이럴 때 투명한 iFrame을 사용하면 된다.
iFrame을 삽입할 페이지에 위와 같이 주고
iFrame에 삽입될 패이지의 body 부분의 스타일을 위와 같이 주면 된다.
또한 iFrame을 투명하게만 주는것이 아니라 반투명 효과를 줄수고 있는데 이는 iFrame의 style을 적용해 주면 된다.
위와 같이 Alpha값의 Opacity값을 변경해 주면 도니다. Opacity값이 낮을수록 투명도가 증가한다.
iFrame을 사용해 웹 페이지 중간에 다른 페이지의 내용을 넣을 경우가 있다.
하지만 웹 페이지의 백그라운드 부분에 다른 이미지가 있는 상태에서 iFrame을 넣을 경우 백 그리운드 이미지와 매칭되지 않는 경우가 있는데 이럴 때 투명한 iFrame을 사용하면 된다.
<iFrame src="웹페이지 주소" allowTransparency="true" width="가로크기" height="세로크기>
iFrame을 삽입할 페이지에 위와 같이 주고
<body style="background:transparent">
iFrame에 삽입될 패이지의 body 부분의 스타일을 위와 같이 주면 된다.
또한 iFrame을 투명하게만 주는것이 아니라 반투명 효과를 줄수고 있는데 이는 iFrame의 style을 적용해 주면 된다.
<iFrame src="" style="filter:Alpha( Opacity=65 );">
위와 같이 Alpha값의 Opacity값을 변경해 주면 도니다. Opacity값이 낮을수록 투명도가 증가한다.
'ººº::Development™:: > ::WEB™::' 카테고리의 다른 글
[Javascript] 실수 소수점 처리 - 반올림, 버림 (0) | 2009.10.01 |
---|---|
[PHP] 내림 / 올림 / 반올림 함수 (0) | 2009.07.09 |
[CSS] 메뉴를 손쉽게 꾸며보자 (0) | 2008.09.23 |
[Javascript] Dragtable - Table정렬 스크립트.. (0) | 2008.07.16 |
[JavaScript] Giva Labs이 만든 콤보박스 (0) | 2008.07.09 |