[웹디자인] 개발팁

웹 접근성 지침

모든 컨텐츠는 컨텐츠마다의 제목이 필요하다.

헤더 푸터 등 전문 용어 사용을 지양
제목을 사라지게 할때 display: none을 쓰면 화면 낭독기가 읽지 못함으로 css로 화면밖으로 보내는 방식 사용

<h2 class="hide">대메뉴</h2>
<div>콘텐츠</div>

## .hide {
  position: absolute;
  left: -5000px;
}

배경 이미지 삽입시 대체 텍스트를 넣어야한다.

<header>
  <h1><a id="logo" href="#a">서비스이름</a></h1>
</header>

#logo {
  display: block;
  width: 110px;
  height: 48px;
  color: transparent; /* 글씨는 투명으로 해서 안보이게 */
  background: url('../images/logo.png') no-repeat -300px 0;
}

그 외

헤더 영역이 3개의 영역으로 나누어질 경우, 양 끝은 position: absolute로 양 끝에 붙힌다.

header {
  position: relative;
  text-align: center;
}
header .left {
  position: absolute;
  left: 50px;
  top: 0;
}
header .right {
  position: absolute;
  right: 50px;
  top: 0;
}

클릭 영역은 패딩을 주어 가용범위를 넓힌다

세로 가운데 정렬

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 자기 높이의 절반 */
  /* 또는 margin-top: -3.5px */
  width: 1px;
  height: 7px;
}

넘치는 텍스트 ... 처리

IE는 제공x

span{
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

좌측 정렬일땐 우측 여백, 우측 정렬일땐 좌측 여백 주기