미니멀 블로그

이 블로그는 jrl.ninja를 보고 영향을 받아 만들어졌습니다. 그에 따라 블로그에 들어가는 CSS를 최소한으로 줄여 보았습니다.

:focus-visible {outline: 3px solid red;}
:focus:not(:focus-visible) {outline: 0;}
body {font-family: Helvetica, Arial, sans-serif; background: #e7f1f3;}
main {max-width: 38rem; padding: 2rem; margin: auto;}
a {text-decoration: none; color: #0554bb;}
a:hover {text-decoration: underline;}

해당 CSS는 메인 페이지에서 이용되는 CSS입니다. 즉 이 CSS는 이 블로그 어디에서나 적용됩니다. 코드를 하나하나 살펴봅시다.

:focus-visible {outline: 3px solid red;}

접근성을 높이기 위해서 키보드로 선택된 요소에 외곽선을 줍니다.

:focus:not(:focus-visible) {outline: 0;}

그리고, focus-visible이 아닌 focus에는 외곽선을 날려버립니다. 더 자세한 내용은 이곳을 참고해 주세요.

body {font-family: Helvetica, Arial, sans-serif; background: #e7f1f3;}

웹폰트 따위 사용하지 않습니다. 기본 폰트인 Helvetica와 Arial만 사용해 페이지를 로드합니다.

main {max-width: 38rem; padding: 2rem; margin: auto;}

웹브라우저에선 1rem이 보통 16px입니다. 38×16=608px이므로 블로그의 최대 너비는 600px쯤 됩니다.

블로그를 보는 기기의 너비가 600px 이하인 경우에는, 컨텐츠가 너무 답답해 보입니다. padding: 2rem; 을 주면 답답한 느낌이 확 사라집니다.

블럭 요소인 main을 가운데 정렬시킵니다. margin: 0 auto;를 쓸 수도 있었지만 글자 수를 좀 줄여 보기 위해 이런 선택을 했습니다.

a {text-decoration: none; color: #0554bb;}

a 태그에 기본으로 달려 잇는 밑줄을 없애고, 색깔을 줍니다.