[pico css] 쉬운 반응형 페이지 작성 순수HTML 활용
난 복잡한 부트스트랩이나 테일윈드 같은것 사용하기 싫고 순수 html 로만 페이지를 만들고 싶다.
보통 백오피스 페이지가 그렇습니다.(시간이 들어가니 그렇지요. 집에서 양복 입지 않는것과 같은 이치~)
하지만 반응형은 필요하고 보여지는 것은 좀 괜찮아야 한다면 pico css를 추천합니다.
폰트사이즈만 약간 줄여서 사용하면 그만.
아래는 폰트사이즈 때문에 테스트 해본것입니다.
결론 부터 말하면
1rem은 16px
pico css 기본은 21px 입니다. 부트스트랩5도 이정도 될듯.
그렇다면 내가 보기엔 왜? 폰트사이즈가 무지막지 하게 크냐!
나 같은 시력이 좋은 사람을 위한것이 아니라 항상 그렇듯이 기준은 나쁜쪽에 둬야 하기 때문에 그렇습니다.
폰트크기가 크다고 해서 표현 못할것은 없지요 같은 지면에 표현할것이 적기는 하지만 안보이는것 보다는 낳습니다.
![[pico css] 쉬운 반응형 페이지 작성 순수HTML 활용](https://www.pabburi.co.kr/content/bbs/view_image.php?fn=%2Fdata%2Feditor%2F2404%2Fdb9af7ecfd0797a755090bc50218c8a6_1712455352_5654.png "[pico css] 쉬운 반응형 페이지 작성 순수HTML 활용")
폰트 크기에 대한 부분은 최상위 주석 처리한곳 풀어서 테스트 해보시면 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark" />
<!-- <link rel="stylesheet" href="css/pico.min.css"> -->
<title>페이지 네비게이션</title>
<style>
html {
/* font-size: 1rem; */
}
</style>
</head>
<body>
<main class="container">
<h1>기본 폰트 사이즈 확인</h1>
<p>백오피에서 사용하기엔 너무 큰 폰트사이즈. 그렇기 때문에 확인 후 줄여서 사용하기 위함이다. </p>
<div id="ffsize"></div>
</main>
</body>
</html>
<script>
window.onload = function() {
var htmlFontSize = window.getComputedStyle(document.documentElement).getPropertyValue('font-size');
document.getElementById('ffsize').innerHTML = "<p>현재 페이지의 기본 폰트 사이즈는: <strong> " + htmlFontSize + " </strong> 입니다.</p>";
};
</script>
