견고한 UI 설계를 위한 마크업 가이드 강의를 봅시다.
CSS reset
많은 CSS reset 코드가 대부분이 쓸모 없거나 덮어 쓰게 된다.
그러면 어떤 reset이 좋을까
CSS reset reinvent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
"margin":0;
"overflow-wrap":break-word;
}
:lang(ko){
word-break:keep-all;
}
img{
max-width:100%:
height:auto;
}
break-word 속성을 사용할 때 한국어 단어가 잘리지 않도록 keep-all을 사용해주면 좋다.
위 img 코드를 사용하면 이미지를 자연스럽게 넣을 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
[class]{
margin:0;
padding:0;
box-sizing:border-box;
list-style:none; // ol,ul
border:0; // button, table, fieldset, input, textarea, select, iframe
background-color:transparent; // button, dialog, input, mark, meter, prograss
border-collapse:collapse; // table/
border-spacing:0; //table
-webkit-appearence:none;
appearance:none; //button, input, textarea, select, meter, progress
}
위 코드도 많이 쓰는 코드라 참고하자.