마리언니 -

« 2008/01 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

'2008/01'에 해당되는 글 20건

2008/01/24 14:17

이렇게 이미지를 나열하는 경우는 별루 없었지만, 
혹, 이미지를 UL 태그를 써서 나열하시고자 하시면, 공백버그가 생기게 됩니다.
그럴 때 요렇게 하면 해결!
   











<style type="text/css">

ul {list-style: none; margin: 0; padding: 0; overflow: hidden;}
ul li {display: block; line-height: 0; font-size: 0;} ul li img {display: block;}
</style>

<ul>
<li><img src="a.jpg" alt="" /></li>
<li><img src="b.jpg" alt="" /></li>
<li><img src="c.jpg" alt="" /></li>
<li><img src="d.jpg" alt="" /></li>
</ul>

혹은 ul 태그 대신 dl 태그를 사용하게되면 공백버그 안생긴다네요.

혹, 메뉴를 이미지로 만드시고 ul 태그로 처리하실 때에는..
이미지와 코드를 분리해서 만드시는게 더 좋은 방법이죠.
이미지를 백그라운드 처리해서~~~
요건 다음에 올리지용~~

Trackback0 : Comment0

Trackback Address :: http://marie1114.tistory.com/trackback/33

익스플로러에서 투명 png 적용하기

2008/01/16 10:47

[기타]

익스플로러에서 투명 png 적용하기

투명 gif보다 훨씬 유연한 투명한 png 파일.
익스플로러 6.0 이하 버젼에서는 투명한 부분이 제대로 적용이 안된다.
이런 경우 아래와 같이 살짝 손을 대주면 완벽히 처리!

<script language="javascript">
<!--
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter =

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
obj.src='';
return '';
}
//-->
</script>
<style type="text/css">
.png24 {
tmp:expression(setPng24(this));
}
</style>

-----------------------------------------------

<img src="icon_search.png" width="50" height="41" border="0" class="png24" alt="logo">

------------------------------------------------------
http://www.marie.co.kr/marie/temp/temp01.html 에서 확인.

투명 png

Trackback0 : Comment0

Trackback Address :: http://marie1114.tistory.com/trackback/31

국내외 웹 접근성 표준 동향

2008/01/11 16:54

[웹표준/웹 접근성 (Web Accessibility)]

시각장애인의 인터넷 사용
시각장애인들은 기본적으로 컴퓨터에 Screen Reader 를 설치한 후에 사용한다.

과연 시각장애인 전용으로 웹 페이지를 운영하는 방법이 대안일까?
- 온/오프 기능이 없는 TTS 엔진을 웹 페이지에 탑재를 하고 시각장애인용으로 표현해주는 방식은..
스크린 리더기와 충돌이 되므로 사용자에게 혼란만을 가져오게 된다.

- 2차 차별이자 분리,격리 정책의 연장이며, 일반 사이트와 동일한 서비스가 제공되지 못하고 형식적으로 운영된다.

국내외 웹 접근성 표준 동향

- 외국에서는 장애인 차별금지법, 장애인 기본법 등과 맞물려 웹 접근성 지침이 마련되어 있으며,
미국(2001년), 호주(2000년), 영국(2004년), 일본(2000년) 에서는 이미 수년 전에 강제화시켰다.
한국에서는 현재 웹 접근성 지침이 권장사항으로만 마련되어 있지만..
현재 관심이 높아지고 있는 추세므로 2007년도에는 강제화 되지 않을까~하는 예상을 하고 있다.

영국의 동향
웹 접근성 인증마크 제도 시행하고 있다. (인증마크 명 : 'See it Right')
전체를 웹 표준으로 표현하지 못할 경우 조건부 마크 제도도 마련되어 있다.
(예- The 'See it Right' logo does not include the online shop.)

호주의 동향
시드니 올림픽을 계기로 장애인의 정보통신 권리에 대한 사회적 관심이 증대했다. (관심 증대가 강제화로 이어짐)

소송 대상 : 시드니 올림픽 조직위원회
소송 내용 : 입장권 주문 시 정보를 점자로 제공하지 않음, 웹 사이트 시정을 요구하였으나 보완하지 않음.
판결 결과 : 장애인이 웹 사이트 접근이 어려우며, 장애인 차별 금지법을 침해하였다는 판결을 내리고 20,000 달러 배상

우리나라 동향
2005년 조사 당시, 모든 정부 기관의 웹 사이트가 웹 접근성을 준수하지 않았으며, 최소한의 대체 텍스트조차 완벽하게 제공하는 웹 사이트가 없었다.

- 외국에 비해 아직 웹 접근성에 대한 인식 및 준수가 낮은 실정
- 개발자, 발주자의 인식 개선 시급
- 접근성 지침에 대한 홍보활동 필요, 접근성을 준수한 컨텐츠 제작 기법 등이 필요
- 기본을 준수한 홈페이지 제작!

Trackback0 : Comment0

Trackback Address :: http://marie1114.tistory.com/trackback/30

웹 접근성 (Web Accessibility) ?

2008/01/11 16:53

[웹표준/웹 접근성 (Web Accessibility)]

웹 접근성 (Web Accessibility) ?

웹 접근성이란 일반 유저들처럼 장애인들도 웹에 효과적으로 (효율적이 아닌) 접근할 수 있게 하는 의미.
현란한 그래픽적 요소나 신기술들을 배제하더라도 최소한의 정보전달은 될 수 있도록 웹의 서비스를 구현하자~라는 것이다.

우리나라 웹의 현실 :
Interface 만을 위주로 작업이 되고 있기 때문에 Interaction(상호작용)에 문제가 발생한다.
다행스러운 것은 대규모 업체들을 중심으로 최근 HCI (Human-Computer Interaction)에 대한 중요성을 인식하고 연구가 활발히 진행되고 있다.

웹 접근성을 준수의 방법 :
1. 색약/색맹 장애우 들이 판단하기 쉽도록 색상의 충분한 명암을 이용한 디자인
2. 클릭할 수 있는 영역을 확장하여 좀 더 쉽게 클릭 가능하게 함 (마우스 컨트롤이 쉽지 않은 너무 작은 링크 지양)
3. Screen Reader 기로 읽어 들여도 충분히 인지 가능한 디자인 (웹 표준 : 의미에 맞는 정확한 태그 사용)
4. 청각장애자를 위해 동영상 플레이 시 캡션 제공
5. 키보드 만으로도 웹 컨텐츠가 제공하는 모든 기능을 할 수 있어야 한다.
6. 깜박이는 오브젝트 표현 자제 (특정 장애인이게 발작을 일으키게 하는 요인이 될 수도 있다-사용자에게 사전 경고. 사용자
   조작 가능하게~ )

웹 표준 디자인 가이드 라인 :
1. 의미에 맞는 정확한 태그를 사용 (헤드라인 태그, 리스트 태그, 데이타 태그, b 태그와 strong 태그 차이 등)
2. 레이아웃을 테이블의 형태로 구성하는 것이 아니고 CSS 를 이용하여 구성
3. 대체 텍스트 제공 : 이미지 태그의 경우 alt 태그 사용하여 의미 전달
4. input field : input에 title 속성을 사용하거나, lable 태그 사용
   (마우스 포인터가 field 안에 위치하면 대체 텍스트를 읽어준다)

*Issue*
웹 접근성을 준수하여 웹 표준으로 디자인할 때..
1. 이전 방식보다 많은 시간이 소요되는 문제
2. 리소스를 더 잡아 먹을 수 있는 문제
3. 트래픽이 증가하는 문제
4. Alt text really helps?

Trackback0 : Comment0

Trackback Address :: http://marie1114.tistory.com/trackback/29

인쇄용 스타일

2008/01/10 15:22

[웹표준/인쇄용 스타일]

인쇄용 스타일

1. media 속성 사용 (컴퓨터 화면에만 적용하는 스타일시트)
<link rel=“stylesheer” type=“text/css” media=“screen” href=“screenstyles.css” />
: 오직 컴퓨터 화면에 적용하기 위한 screenstyle.css 파일을 지정하는 방법

2. @media 혹은 @import
<style type=“text/css”>
@import url(“screenstyles.css”) screen;
@media print { 인쇄를 위한 스타일 시트 규칙을 정의합니다 }
</style>

@media 규칙을 이용해 인쇄를 위한 스타일을 지정할 수 있다.

예제
<style type=“text/css”>
@import url(“screenstyles.css”) screen;
@media print { body {color:black; background:none;} }
</style>

3. 여러값 지정

①
<link rel=“stylesheer” type=“text/css” media=“screen, print” href=“screenstyles.css” />
화면과 인쇄 모두에 적용

②
<style type=“text/css”>
@import url(“screenstyles.css”) screen, print;
@media print { 인쇄를 위한 스타일 시트 규칙을 정의합니다 }
</style>

screenstyles.css 는 화면과 인쇄용 모두에 적용이 되고, @media 뒤에 나오는 규칙들은
인쇄에만 적용된다.

4. 화면 스타일과 인쇄 스타일 분리하기
<link rel=“stylesheer” type=“text/css” media=“screen” href=“screenstyles.css” />
<link rel=“stylesheer” type=“text/css” media=“print” href=“print.css” />

예제 – print.css
body {font-family:serif; font-size:12pt; background:none;}
#nav, #sidebar, #advertising, #search {
display:none;}

인쇄용 스타일 시트에서 display:none으로 지정한 항목들은 인쇄 시 표시되지 않는다.
배경도 나오지 않게 정의

Trackback0 : Comment0

Trackback Address :: http://marie1114.tistory.com/trackback/28

레이아웃

2008/01/10 15:16

[웹표준/레이아웃]

레이아웃

2단 레이아웃 (css-2-column-layout-01 예제 참고)

http://marie.co.kr/web/2column_layout_01/

<body>
<div id="wrapper">

   <div id="header">
This is my Header
   </div>

   <div id="leftcolumn">
Left Column
   </div>

   <div id="centercolumn">
<p>This Column is My Main Content Area</p>
   </div>

   <div id="footer">Footer</div>

</div>

-------------------------------------------------------------------------------------------------------

* {padding: 0; margin: 0;}
body {font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 12px;}
#wrapper {width: 770px; margin: 0 auto;}
#header {border: 1px solid #ccc; margin: 5px; height: 70px; padding: 10px; background-color: #ccc;}
#leftcolumn {margin: 0 5px 5px 5px; padding: 4px; display: inline; /* IE Hack */ width: 24%; float: left; border: 1px solid #ccc; background-color: #dac8bf; min-height: 300px;}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */

#centercolumn {border: 1px solid #ccc; margin: 0 0px 5px 0px; display: inline; /* IE Hack */ padding: 4px; width: 71.4%; float: left; min-height: 300px;}
* html #centercolumn {height:300px} /* IE Min-Height Hack */

#rightcolumn {border: 1px solid #ccc; margin: 0 5px 5px 0; display: inline; /* IE Hack */ padding: 4px; width: 159px; float: left; background-color: #c99; min-height: 300px;}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */

#footer {background-color: #cc9; margin: 0 5px 5px 5px; padding: 4px; clear: left; width: 97.8%;}

레이아웃

Trackback0 : Comment0

Trackback Address :: http://marie1114.tistory.com/trackback/27

이미지

2008/01/10 15:13

[웹표준/CSS 요소들]

이미지

display 속성을 이용하여 텍스트를 숨기는 방법

div#logo {width:200px; height:50px; margin:0; padding:0; background:#eee url(img/test.gif) no-repeat top left;}
div#logo p {display:none;}
.
.
.
<div id=“logo” title=“사이버가든”>
<p>사이버가든</p>
</div>

text-indent 속성을 이용하여 텍스트를 숨기는 방법

div#logo {width:200px; height:50px; margin:0; padding:0; background:#eee url(img/test.gif) no-repeat top left; text-indent:-3000px;}
div#logo p {margin:0; padding:0; }
.
.
.
<div id=“logo” title=“사이버가든”>
<p>사이버가든</p>
</div>

Trackback0 : Comment0

Trackback Address :: http://marie1114.tistory.com/trackback/26

폼

2008/01/10 15:12

[웹표준/CSS 요소들]

폼

fieldset 요소 – 입력 양식을 그룹화하기 위한 요소, 주변에 자동으로 선이 그어진다

legend 요소 – 그룹 캡션을 지정하기 위한 요소, fieldset 요소의 상부의 선을 가로질러 표현된다.

<form action=“” method=“