월별 글 목록: 2013년 Jan월

반드시 알아야할 CSS 선택자들(Selectors).

1. *

*{margin:0;padding:0}

모든요소들에게 적용되는 스타일을 정의할 경우 별표(*)를 사용합니다.

이렇게도 사용가능합니다.


#contents *{padding:10px}

이 경우 #contents 안에 속해있는 모든 자식요소들에게 공통적으로 스타일이 적용됩니다.

2.#A


#header{width:960px; margin:0 auto}

ID선언자. 단, 사용시 주의점이 있다면 가장 기본적으로 공통으로 반복되는 부분에 사용하며,

해당 페이지에서 같은 ID가 중복으로 사용되는 일이 없어야합니다.

(반드시는 아니지만, 페이지의 레이아웃 부분을 나타내기 때문입니다. 헤더, 컨텐트, 푸터..)

3. .A


.post{

color: blue;

border-top:1px solid #000;

}

class선언자. ID와는 다른게 여러번 중복적으로 사용이 가능하며 여러개의 class를 조합하여 사용할 수도 있습니다.

4. A B


div a{

color:#212926;

font-size:1.2em;

}

처음에 선언된 태그 (div) 안에 속해 있는 하위 태그(a)의 스타일을 정의할 경우 사용됩니다.

조금 더 구체적으로 스타일을 선언할 경우 위와 같이 사용합니다.

반응형 웹! (Responsive web design)

행쇼~
기술개발그룹 강성봉 입니다.
드디어 제 차례가 와버렸군요!!
저는 반응형 웹에 대해 알아보도록 하겠습니다!

또한, NHN에 팀장으로 계신 찬명이 형이 NHN홈페이지를 반응형으로 리모델링 하면서 이슈가 되었던 부분들도 함께 알아보겠습니다~ 고고~~

img01

찬명이 형이 딜은 한것처럼 반응형 웹에 대해 작업을 하려면 알아두어야할 점과 신경 써야 할 점이 엄청나게 많아졌습니다.
당연히 기존에 작업분량보다 공수도 몇배는 많아졌죠!

시작하겠슴돠!

“반응형 웹 디자인이란?”

사용자 환경에 따라 유익하게 반응하는 디자인
사용자 환경 = PC, 모바일, OS, 화면크기

“반응형 웹 디자인의 장점”
- 다양한 해상도와 단말기에서 두루 잘 보임
- 신형 단말기가 등장해도 추가 대응 필요없음
- 서버 사이드 개발 이슈가 적어 투자대비 효율 높음

“반응형 웹 디자인의 한계”
- PC와 모바일 환경을 모두 고려해야 하기 때문에 디자이너는 성능과 타협할 필요가 있음
- 포털 사이트와 같이 복잡하고 무거운 사이트는 구현이 쉽지 않음

“반응형으로 적합한 곳”
- 가볍고 단순한 사이트
- 블로그, SNS
- 이벤트 페이지
- 기업 홍보 사이트

“반응형으로 적합하지 않은 곳”
- 무겁고 복잡한 사이트
- 대형포털
- 한국형 쇼핑몰
- 테이블레이아웃

“기존의 웹 홈페이지를 반응형 웹으로 가려면 생각해야 될 점”
- 가볍고 단순한가?
- 테이블 레이아웃인가?
- 유지보수가 유연한 구조인가?

“향후 반응형을 고려하고 있다면…”
1. PC용 웹 사이트 체질 개선이 선행
2. 테이블 레이아웃 걷어내기
3. Image Replacement
4. Image Sprite
5. HTML5

반응형 웹으로 페이지를 작업하기전에 알아두어야 할 내용들이므로! 작업 하시기전에 꼬옥 알아두셔야 합니다!
또한 반응형 웹으로 작업한다고 하면 대부분 “그냥 미디어 쿼리를 쓰면 되는게 아닌가?” 라고 생각하실텐데요!
“반응형 웹을 위한 코딩방식도 달라져야 합니다”
첫번째, 성능 개선 : CSS, JS, IMG 파일 병합, 모바일용 저용량 이미지 생성
두번째, HTML : HTML5로 전환, 시멘틱 마크업, forms 활용
세번째, CSS : 모바일 대응 위한 CSS3 Media Queries 활용

성능 개선

img02

“JS 파일은 병합 후 문서 하단으로”
에서 JS 파일을 참조하면 JS 해석이 끝날때까지 파일을 로드하지 않으므로 JS 파일은끝으로 옮긴다.   http 요청 횟수를 줄이기 위해 여러개의 JS 파 일을 하나로 병합한다.
개선 전

<head>
<script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.8.4.custom.js”></script>
<script type=”text/javascript” src=”nhn.js”></script>
<script type=”text/javascript” src=”default.js”></script> <script type=”text/javascript” src=”lcslog.js”></script>
</head>

개선 후…

<body>
… 어쩌구 저쩌구 …
<script type=”text/javascript” src=”default.js”></script>
</body>

“이미지 조각 모음”
btn_on.gif btn_off.gif btn_over.gif   이렇게 조각낸 이미지는 http 요청 수를 줄이기 위해 하나로 병합한다.

“이미지 조각 모음”
개선 전 btn_on.gif btn_off.gif btn_over.gif   개선 후 btn.gif

“동일한 이미지로 큰 것과 작은 것을 준비 한 다음 IR 기법으로 배경 처리하고 미디어 쿼리로 해상도에 따라 분기하면 모바일에 서 큰 이미지는 전송 요청하지 않는다. 반 대의 경우도 마찬가지.”   (화면상으로만 숨기는 것이 아니라 실제로 http 요 청을 하지 않음)

“HTML5로 DTD 바꾸기” (어렵지 않아요~)
수정 전

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
수정 후

<!DOCTYPE html>

수정 전
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

수정 후

<meta charset=”utf-8″ />

수정 전
<link rel=”stylesheet” type=”text/css” href=”nhn.css”/> <style type=”text/css”>…</style>

수정 후
<link rel=”stylesheet” href=”nhn.css”/> <style>…</style>

수정 전

<script type=”text/javascript” src=”nhn.js”></script>

수정 후

<script src=”nhn.js”></script>

“구조를 더 의미있게”

img03

img04

img05

img06

 

“그런데 누구세요?!”

img07

img08

img09

 

 

“철 지난 브라우저 구하기”
HTML5 IE 6~8 enabling script http://html5shim.googlecode.com/svn/trunk/html5.js

“HTML5 shim”
<head>
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>

“IE 조건부 주석”
<!–[if lt IE 9]> if lt IE 9 = If less than IE 9 <![endif]–>
표준계열 브라우저는 이 부분을 주석으로 처리 하고 IE9 미만 버전의 브라우저는 포함된 내용 을 해석함. HTML 요소를 읽기 전에 참조해야 하므로…사이에 넣는다.

산 넘어 산!

“여전히 깨지는 이유”
HTML5 enabling script로 HTML 요소를 해석했지만 새로 추가된 태그는 ‘display:inline’ 상태로 렌더링 한다.

새로운 태그를 바르게 표시하는 방법
“CSS Reset”
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display: block }

HTML5 shim과 CSS reset을 통해 더 이상 낡은 브라우저에서 깨지지 않음

지금까지 반응형 웹에 대한 기본적인 개념 설명이였습니다. ㅉㅉㅉ

이 글을 읽어보시면 아시겠지만, 반응형 웹은 모바일도 고려하여 작업하기 때문에 html5도 알고있어야 하며, 이미지 IR기법도 알고있어야 합니다. 다들 좋은 하루 되세요~

 

웹접근성 폰트 컨트롤 스크립트

Untitled-1

글자크기

일단, 글자크기.html파일을 다운받아 열어보자
요즘에 웹접근성 사이트를 보면 상단에 글자크기 컨트롤 기능을 흔히 볼수 있다.
스크립트를 모르는 사람도 쉽게 수정 할 수 있기 때문에 한번 수정해보도록 하자

Untitled-1

소스 수정 Tip

1.baseFont 는 body에 폰트사이즈 크기와 동일하게 준다.
2.baseFont>=15 기본사이즈 12폰트 이상이거나 15보다 작을때 (15일 떄는 “최대크기입니다” 알림창이 뜬다)
3.baseFont<=9 기본사이즈 12폰트 이하이거나 9보다 클때 (9일 떄는 “최소크기입니다” 알림창이 뜬다)

웹접근성이 up되는 table만들기

스타트를 제가 끊는군요…OMG…

안녕하세요 엘에이치 기술개발그룹 늙은 막내 김유리입니다
어제 웹접근성 교육을 가서
다들 이 생각 저 생각 많이 하셨겠져.
저는 스크린리더언니의 차가운 음성을 듣고 눈물이 왈칵 솟아서..
언니가.. 조금 더 친절해지셨으면 하는 바램이 있네요..

개인적인 바람은 뒤로하고..
오늘은 웹접근성을 높힌 date table 작성법을 포스팅 하려 합니다.
고작 table?이라 여기실 수 있겠으나
기본을 알고 가자는 차원에서 열린 마음으로 읽어주시기 바랍니다.

 

01. 웹표준 table 작성시 필요한 것들

먼저 필요한 요소들만 간단하게 짚고 넘어갈게요~

  1. summary – 비 시각적인 웹 표시 장치이며 화면 낭독시 요약 정보로서 제공됩니다.
  2. caption – 표의 제목. 시각적으로 표현됩니다. 당연히 css로 조정 가능하겠져.
  3. 제목 요소 – table의 구조를 짤때 쓰이는 요소로 (반드시 있어야 하는 것은 아니지만)
    행 (row)은 thead , tbody, tfoot로 구분할 수 있습니다.
    선언 순서는 thead → tfoot → tbody 이렇게 됩니다.
    tfoot을 먼저 선언하는 이유는 스크린리더로 읽을때 얼마나 될지 모르는 데이터를 다 읽어야 결론에 도달하는 불편함을 줄이기 위한 것입니다.
    tbody는 table의 요소로 caption, colgroup, thead, tfoot요소 뒤에 선언되며,
    table에 tbody만 사용하거나, tfoot없이 thead, tbody만 사용하는 경우, thead, tbody, tfoot을 모두 생략할 수도 있으며 한 테이블에 여러번 사용도 가능합니다.
    tbody등의 요소로 구분하여 그룹화하면 css설정시 유용하겠네요.

    * 이같은 행단위 구분을 위한 테그는 웹접근성마크 평가시 조건을 만족하는 데이터 테이블의 수/ 전체 데이터 테이블 수 행의 개수가 매우 많은(약 50개)경우 평가한다고 합니다.

 

02. 웹접근성을 up하기 위한 table 만들기

비시각장애인인 경우에는 쉽게 인식이 가능할 수 있으나
청각에만 의존해야 하는 경우에는
스크린리더가 어떻게 읽어주느냐에 따라서 이해도의 차이가 확연하겠져.
그녀의 친절한 설명을 돕는 퍼블리싱을 하는 방법은 무엇일까요?

예시표이미지

예시 표입니다.

표현방법에 앞서  어떤 식으로 음성출력이 되는지 알아보겠습니다.

- 먼저 caption을 음성 출력하고(예)학자금 지급안내),
- 테이블 시작 을 알리고
- 테이블의 행과 열의 수(5행 4열), 그리고 전체 테이블 수 (1)와 현재 문서 내에서 몇 번째 테이블인지 (1) 를 음성출력합니다.
- 테이블에 위치한 상태에서 테이블 셀을 읽을때에는 Ctrl + Alt + 키보드 방향키로 셀간을 이동하며 읽게 됩니다.

 

*caption의 표현

caption 이 보이질 않네요. 어떻게 css를 주었는지 확인해볼까요?

<style type=”text/css”> caption {display:none;} </style>

저런, display:none; 속성으로 숨기고 있네요.
음성 출력을 했다면 caption 부분이 빠져있었겠네요…
이 속성은 모든 장치에서 읽지 않아야 한다는 명령으로 다른 보조 공학기기에서는 인식하지 못할 수 있기때문에 시각적으로만 숨겨야 하는 경우라면 visibility:hidden; 을 이용하는 것을 권장합니다.

<style type=”text/css”> caption {position:absolute; visibility:hidden; width:0; height:0; overflow:hidden; font:0;} </style>

이렇게요.

 

*scope의 표현

scope은 이 th가 어떤 td의 제목인지 알려주기 위해 사용되는데요,
위와 같이 복잡한 표에서는 사용하기 조금 애매하지만
가로/세로 정도로 표시 하면 될 정도의 간단한 표일 경우
유려하게 사용됩니다.

예를 들어보자면,
‘고등학교 학자금’ 이라는 내용은 ‘학자금’ 이라는 제목에 할당된 것이니

<thead>
<tr>
<th scope=”col”>학자금</th>
<th scope=”col”>소요재원</th>
</tr>
</thead>
<tbody>
<tr>
<td>고등학교 학자금</td>
<td>사내근로복지기금</td>
</tr>
<tr>
<td>대학 학자금</td>
<td>사내근로복지기금</td>
</tr>
</tbody>

이런식이 됩니다.

scope=”col” 에서 col은 세로방향의 항목일때 쓰이는 것으로, 가로일 경우는 row가 되겠네요.

 

*id/headers의 표현

간단한 표의 경우에는 scope으로 충분하지만 표가 복잡해진 경우
id와 headers가 필요합니다.
제목에 각각의 id를 부여한 후
headers 안에 해당하는 id명을 넣어주면 됩니다.

<table summary=”유상지급과 무상지급되는 학자금, 소요재원, 수혜인원을 나타냅니다.”>
<caption>
학자금 지급안내
</caption>
<thead>
<tr>
<th rowspan=”2″ scope=”col”>구분</th> → 제목셀에 scope=”col”로 세로열의 내용과의 상관관계 부여
<th colspan=”3″ scope=”col” id=”detail>상세내역</th> → 복잡한 데이터를 보여주는 테이블의 경우 id를 부여해 상관관계를 명확히 나타낼 수 있음.
</tr>
<tr>
<th scope=”col” id=”sloan>학자금</th>
<th scope=”col” id=”source”>소요재원</th>
<th scope=”col” id=”number”>수혜인원</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan=”3″ id=”c” scope=”row”>합계</th>
<td headers=”detail number c”>150</td> → id값을 headers값으로 받아오면서 제목셀과 짝지움
</tr>
</tfoot>
<tbody>
<tr>
<th scope=”row” id=”a>무상지급</th>
<td headers=”detail sloan a>고등학교 학자금</td>
<td headers=”detail source a”>사내근로복지기금</td>
<td headers=”detail number a”>50</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope=”row” id=”b”>유상지급</th>
<td headers=”detail sloan b”>대학 학자금</td>
↑ 예를 들어 headers값으로 추론할때 이 셀의 경우 상세내역에 속하는 학자금의 유상지급에 관련된 내용이란 뜻!!
<td headers=”detail source b”>사내근로복지기금</td>
<td headers=”detail number b”>100</td>
</tr>
</tbody>
</table>

 

headers 에 id 입력 순서는 순서대로 읽게 되어 있기 때문에
3행 2열을 읽게 될 경우 상세내역 학자금 무상지급 고등학교 학자금으로 출력되게 됩니다.
오옷~

위와 같이 scope, id, headers 요소를 이용하면
훨씬 이해하기 수월한 table 코딩이 됩니다.

이상 웹표준을 준수하며 웹접근성을 올리는 table 포스팅을 마치겠습니다~ 짝짝짝.