HTML & CSS 활용

1. CSS 리셋

브라우저 마다 태그를 렌더링하는 기본 스타일이 다르다. 그러므로 크로스 브라우징 작업이 필수적이다.

크로스 브라우징이란 어떤 웹 브라우저를 써도 화면이 똑같이 나오고 브라우저에 따라 입력과 사용에 문제가 생기지 않게 하는 작업

모든 브루아저에서 동일한 화면을 볼 수 있도록 기본값을 초기화 시켜야함
아래는 자주 쓰이는 eric meyer의 reset css 이다. 프로젝트에 맞게 필요한 태그들만 뽑아서 사용하는 것이 좋다.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

1-1) 직접 제작하는 reset css

/*대부분의 프로젝트에서 margin과 padding을 0으로 초기화 해주는것이 좋다.*/

body, h1, h2, h3, h4, h5, h6,
ul, ol, dl, dd, p{
	margin : 0;
    	padding : 0;
}

/* 실무에서는 리스트 스타일도 커스텀해주기 때문에 보통 none으로 제거 */
ul, ol {
	list-style : none;
}


table{
	border-collapse: collapse;
}

table, th, td {
	list-style : none;
}

a {
	color : inherit;
    text-decoration : none;
}

a:hover {
	text-decoration : underline;
}

img{
	vertical-align : top;
}

2. IR 기법

IR 기법이란 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것

요소를 화면에서 숨기는 방법

나쁜 방법

visibility : hidden; 
display : none;
width : 0 ; height : 0; font-size : 0; line-height : 0;

그저 그런 방법

/*스크린 리더가 인식은 하지만 레이아웃, 성능 등 이슈 발생*/
opacity : 0;
text-indent : -9999px;
z-index : -1;

좋은 방법

position : absolute; /*레이아웃에 영향 X*/
clip : rect(0,0,0,0); /*clip속성은 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라냄*/
width : 1px; /*스크린 리더가 읽을 수 있도록 함*/
height : 1px; /*스크린 리더가 읽을 수 있도록 함*/
margin : -1px; /*화면 밖으로 쳐냄*/
overflow : hidden; /*화면 밖에 있는것 쳐냄*/

코드리뷰

1. 가상요소를 사용해서 float 해제 처리를 할 경우엔 부모요소에 적용하기
2. border 속성 초기화가 필요하면 border : 0 을 사용하자
3. 페이지 전반적으로 line-height, font-size 를 reset 해 주는것이 좋다.
4. css 시작 부분에는 항상 @charset 을 적용하자
5. em속성은 브라우저에 따라 약간씩 늘어나거나 줄어드는 현상이 있다. 특별한 이유가 없다면 px단위를 사용하자.
6. 컬러는 헥사값을 사용하자
7. 실무에서는 display : none 의 사용을 지양하고 (스크린 리더에서 읽어주지 못함) blind 클래스를 사용한다

.blind {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
}

8. 가상요소를 사용할 경우 content와 display 를 선언해 주어야함
9. section태그는 제목 요소를 자식으로 포함해야함
10. aside태그는 주요 내용과 간접적으로만 연관된 부분을 나타냄
11. br 태그는 레이아웃을 짤 때 사용하는 것이 아니라 문단 내에서 줄바꿈을 할 때 사용
12. footer 태그는 서비스 제공자 , 저작권 등 문서에 대한 정보를 표시할 때 사용
13. HTML Validator 와 CSS Validator를 실행해서 오류와 경고를 잡자
14. HTML문서 작성시 meta title link 순으로 작성
15. 굳이 공통적으로 겹치는 css를 뽑아내려 하지 않아도 된다.
16. 메인태그는 IE에서 지원을 안해서 header div footer 이런식으로 사용
17. 폰트가 들어간 부분은 대부분 line-height 를 넣어주는 것이 좋음
18. table 안에는 caption을 넣고 caption안에 span태그를 넣고 blind 속성을 주자. (캡션태그에 blind X)
19. table태그 사용시table-layout : fixed를 써주고 ColGroup도 사용하자 + scope
20. Form 태그에 스타일을 주지 말고 안에 있는 div에 스타일을 주자
21. input 태그 안의 요소에 type id class 순으로 써주자
22. input 여러개 사용시 title 요소를 주자 (기본적으로 label에 하나만 연결됨) 다만 placeholder랑 겹치면 안됨
23. 재선언은 다해주지말고 필요한 부분만 해주자 ex) 1px solid black => black
24. 뉴스 같은 레이아웃 꿀팁 왼쪽에 float : left / 오른쪽에 overflow : hidden
25. line-height는 font-size보다 보통 크게
26. inline-block 일 때 보통 vertical-align : top 을 준다.(초기화)
27. 글자의 수직정렬은 글자를 깜싸는 box와 같은 line-height를 주면 된다.
28. 클릭시 이동하는 경우는 a태그를 사용 (버튼 사용시 접근성에 문제가 있음)