이 글은 boostcourse의 '웹 UI 개발'을 수강하고 적는 글입니다.
📌 1. CSS 리셋
1) CSS 리셋 소개
- 웹 표준, 웹 접근성, 시멘틱 마크업, 크로스브라우징
크로스브라우징 : 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음
단계 1) 브라우저 리셋하기 - 브라우저마다 태그를 렌더링 하는 방식이 다르므로 모든 브라우저에서 동일한 화면을 볼 수 있도록 기본값 초기화
- CSS Reset
2) reset.css 제작
3) CSS 리셋 요약 정리
- 브라우저마다 태그를 렌더링하는 기본 스타일이 다르다.
- 모든 브라우저에서 동일한 화면을 볼 수 있도록 기본값을 초기화한다.
- reset CSS는 각 프로젝트에 맞춰서 사용한다.
📌 2. IR 기법
1) IR 기법 소개
IR 기법 : Image REplacement 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것
- 이미지 태그의 alt 속성에 대체 텍스트를 입력해야 하는데 대체 텍스트가 너무 긴 경우 또는 이미지 태그가 아니라, 배경으로 처리한 의미 있는 이미지는?
- 마크업으로 대체 텍스트를 제공
2) 요소 숨김 처리
시멘틱 마크업 + CSS로 요소를 화면에서 숨김 -> 스크린 리더가 인식
스크린 리더가 인식하지 못함
1) visibility: hidden;
2) display: none;
3) width:0; height:0; font-size: 0; line-height: 0;
스크린 리더가 인식하지만 레이아웃이나 성능 등에 이슈가 발생할 수 있음
1) opacity: 0;
- 투명해진 것 뿐, 위치를 그대로 잡고 있음 따라서 단독으로 사용 불가능
2) text-indent: -9999px;- 전체 레이어의 크기가 지나치게 크게 잡힘 : 성능 이슈
3) z-index:-1;- position 속성 추가해야 함 : 성능 이슈
BEST
/* 레이아웃에 영향을 끼치지 않도록 */ position: absolute; /* 스크린 리더가 읽을 수 있도록 */ width: 1px; height: 1px; /* 눈에 보이는 부분을 제거 */ clip: rect(0 0 0 0); margin: -1px; overflow: hidden;
3) 프로모션 페이지 제작
4) IR 기법 요약 정리
- img 태그 사용시, 대체 텍스트가 너무 긴 경우
- 배경 이미지로 처리한 의미 잇는 이미지
HTML
- 시멘틱 마크업 유지
CSS - 스크린 리더 인식 가능
- 레이아웃과 성능에 영향이 없어야 함
- .blind 클래스를 활용
📌 3. float 해제
1) float 해제
- 부모요소 height 부여
- 부모요소 float 속성포함
- 부모요소의 overflow(visible 제외) 속성
- 뒤에 인접하는 형제요소의 clear 속성
- 가상요소를 이용한 clear 속성
📌 4. 레이아웃
1) 레이아웃 소개
- 1단 레이아웃
- 상단 고정 레이아웃
- 상, 하단 고정 레이아웃
- 2단 레이아웃
- 3단 레이아웃
- 다단 레이아웃
2) 1단 레이아웃 제작
- max-width를 이용한 최대길이 설정
- min-width를 이용한 최소길이 설정
3) 다단 레이아웃 제작
*table-cell을 이용한 2단 구성
.container {
display: table;
table-layout: fixed;
}
.content{
display: table-cell;
}
.aside{
display:table-cell;
}*float을 이용한 2단 구성
-> clear 꼭 필요
4) 고정 레이아웃 제작
.header {
position:fixed;
top:0; right:0; left:0;
}
.containe {
min-height: 100%;
margin-top: -100px;
}
.footer {
height: 100px;
}- position:fixed를 이용한 영역 고정
- height의 상속
- 음수 margin을 이용한 높이 100% 확보
