Posts 견고한 UI 설계를 위한 마크업 가이드 - CSS의 절대 권력 초기화
견고한 UI 설계를 위한 마크업 가이드 - CSS의 절대 권력 초기화
Cancel

견고한 UI 설계를 위한 마크업 가이드 - CSS의 절대 권력 초기화

견고한 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
}

위 코드도 많이 쓰는 코드라 참고하자.

This post is licensed under CC BY 4.0 by the author.

견고한 UI 설계를 위한 마크업 가이드 - 이미지 마크업 최적화

견고한 UI 설계를 위한 마크업 가이드 - 검색 엔진 밥상 차려주기

Comments powered by Disqus.