# 글을 읽기 편하게 해주는 CSS 코드 100바이트

> Clean Markdown view of GeekNews topic #5277. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=5277](https://news.hada.io/topic?id=5277)
- GeekNews Markdown: [https://news.hada.io/topic/5277.md](https://news.hada.io/topic/5277.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-10-29T09:36:01+09:00
- Updated: 2021-10-29T09:36:01+09:00
- Original source: [swyx.io](https://www.swyx.io/css-100-bytes/)
- Points: 11
- Comments: 2

## Topic Body

- 사용자 스타일시트 확장에 넣어서 웹사이트를 보기 편하게

html {

ㅤmax-width: 70ch;  /* 70글자로 좌우 넓이 설정 */

ㅤpadding: 3em 1em; /* 상하 여백 */

ㅤmargin: auto; /* 가운데로 */

ㅤline-height: 1.75; /* 읽기 편한 라인 높이. 글꼴 크기에 따라 조정되도록 일부러 단위는 생략 */

ㅤfont-size: 1.25em; /* 이 값은 자신이 원하는 크기로 조정 가능. em으로 스케일 가능하게 */

}

- 추가 100 바이트

h1,h2,h3,h4,h5,h6 {

ㅤmargin: 3em 0 1em;

}

p,ul,ol {

ㅤmargin-bottom: 2em;

ㅤcolor: #1d1d1d;

ㅤfont-family: sans-serif;

}

## Comments



### Comment 7418

- Author: lunamoth
- Created: 2021-10-29T16:19:34+09:00
- Points: 1

자주 보는 웹페이지의 경우

  font-family: Lato,나눔바른고딕;

  font-size: 17px;

  line-height: 200%;

  word-break: keep-all;

넣어서 보고 있는데

이것도 한번 넣어봐야겠네요. 감사합니다

### Comment 7401

- Author: xguru
- Created: 2021-10-29T09:37:01+09:00
- Points: 1

브라우저 확장 Stylebot https://github.com/ankit/stylebot

북마클릿으로 비슷한 걸 하는

- Water.css https://watercss.kognise.dev/

- Sakura Bookmarklet https://oxal.org/projects/sakura/bookmark/