미디어쿼리 설정 (flex layout) - 티스토리 스킨 제작하기 (HTML/CSS/JS) 2
미디어쿼리
블로그의 기본 뼈대를 설계한 후 다음은 세부 레이아웃을 잡고 미디어쿼리로 반응형 스크린을 만들어 줍니다. 요즘 개발하는 웹사이트는 반응형이 기본입니다만, 웹서핑을 하다보면 공기관 등 의외로 아직도 반응형으로 전환하지 않은 사이트도 많습니다. 그런 경우는 시스템이 너무 무거워서 비용문제로 업그레이드가 안된 것일 수도 있고 또 여러 이유가 있습니다. 혹은 네이버 처럼 m. 도메인으로 시작하는 모바일 전용 사이트를 따로 만들거나 앱으로 출시하는 경우도 있지요.
티스토리 개인 블로그 같은 경우는 구성이 단순하고, 티스토리의 3차 도메인이기 때문에 그렇게 만들 일은 없고 스킨 하나로 모든 디바이스에 대응하도록 합니다. skin.html 과 style.css 두개 파일로 반응형 블로그를 만드는 것입니다. (+자바스크립트 파일)
미디어쿼리는... 어렵게 생각하면 한없이 어려운 것 같고 한편으로 단순하게 생각할 수도 있습니다. 그런데 블로그 스킨은 그렇게 복잡한 구조가 아니니까 단순하게 나눠도 사용하는데는 별 지장이 없는 정도입니다. 현재 많이 사용되는 무료 스킨들을 봐도 media 쿼리를 그렇게 많이 쓰지 않습니다. 많이 사용되는 스킨들 중에는 미디어 쿼리를 10개 이상 사용하기도 하는데 폰트 사이즈 조정 등 세부적인 부분 큰틀에서 좀 쓰는 것 같고, 레이아웃을 짜는데는 그렇게 많이 필요는 없습니다.
스크린사이즈
우선은 스크린 사이즈를 어떤 식으로 구분하는게 좋냐는 의문이 있을 수 있습니다. 저도 처음에 미디어쿼리 스크린 사이즈를 보고 너무 종류가 많아서 막연했던 기억이 나는데요. 웹프레임워크 표준이 되고 있는 부트스트랩의 breakpoint를 사용하는 것도 하나의 방법입니다.
다음은 부트스트랩5의 breakpoint 입니다.
X-Small none <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
이 기준의 사이즈 마다 레이아웃, 폰트사이즈 등을 바꿔줄 수도 있습니다만, 어디까지 세분화 시킬까는 각 스킨 제작자에게 달려있습니다.
여기서 기본적으로 나누는 방법은 나열하는데, 적당히 본인이 작성하는 스킨에 필요한 만큼 사용하면 됩니다.
/* Small: 577~768px */
@media(max-width: 768px) and (min-width: 577px) {
}
/* Medium: 769~992px */
@media(max-width: 992px) and (min-width: 769px) {
}
/* Large: 993px~1200px */
@media(max-width: 1200px) and (min-width: 993px) {
}
/* Extra Large: 1201~1400px */
@media(max-width: 1400px) and (min-width: 1201px) {
}
/* Extra extra Large: 1401px 이상 */
@media (min-width: 1401px) {
}
/* X-Small: 576px 이하 */
@media (max-width: 576px) {
}이 안에 스크린 사이즈별로 표시되는 레이아웃을 보면서 작업을 할 수 있습니다. 그런데 블로그 치고는 너무 많지요. 블로그는 커뮤니티가 아니기 때문에 검색유입을 목적으로 모바일 중심으로 디자인 할 필요가 있습니다. 예를 들어 구글검색 유입으로 블로그에 들어왔습니다. 필요한 것은 하나입니다. 키워드에 맞는 본문글 내용 그리고 애드센스 배치입니다. 어차피 모바일 화면에는 본문 글이 주로 나올 것이고 데스크탑은 옆에 사이드 바 등 여러가지가 있지만 목적은 본문 글입니다.
저렇게 세분화 시킬 수도 있겠지만 퉁쳐서 992px 기준으로 본문글만 보여줄 것인가 사이드바도 보여줄 것인가만 정해도 됩니다. 네비게이션 메뉴도 992px를 기준으로 잡아도 충분합니다. 데스크탑은 스크린 사이즈가 길기 때문에 더 세부적인 적용이 가능하지요.
특정 카테고리의 스킨을 제작할 때 고려해야할 사항은, 모바일 사용자와 PC사용자의 비율입니다. 티스토리 블로그에서 조회수가 좀 많이 나왔을 때를 기준으로 모바일과 PC 비율을 보면 알 수 있습니다. 티스토리 관리자 - 통계에 보면 아래와 같이 디바이스가 나와있습니다. 태블릿 PC 등 좀더 세분화된 구분을 안하는 건 블로그에는 이 두가지만 고려하면 충분하기 때문입니다.
워드프레스의 플러그인 중에는 장치 및 기종까지 분석하는 통계도 있습니다만 크게 데스크탑과 모바일로 나눠집니다. 태블릿 PC도 많이 쓰는 것 같지만 태블릿 PC사용자도 스마트폰을 더 많이 사용하니까요.
요점은 반응형 블로그의 스크린은 두 종류라는 것 입니다. (더 세분화 할 수 있지만 대부분 경우 이 정도가 충분하다)
미디어쿼리와 flex 레이아웃을 사용해서 아래와 같이 두 종류 디바이스 화면을 만듭니다. 가장 기본적인 형태죠? 세컨더리 네비와 세컨더리 푸터는 없어도 무관합니다. 나중에 확장성을 위해 여분 자리로 만든 겁니다.
PC와 모바일 차이는 아래 이미지에서 보이는 것 처럼 콘텐츠와 사이드바가 세로로 정렬되는가의 차이입니다. 네비는 펼침과 버튼 두가지만 있으면 됩니다.
예제 코드
다음은 예제 코드인데 이 블로그에서 사용할 목적으로 제작중인 스킨의 초기 코드이기도 합니다. html 은 어렵지 않을 겁니다. 적당히 시멘틱 코드와 컨테이너를 섞어서 쓰면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./src/app.js" defer></script>
<title>미디어쿼리 설정 (flex layout) - 티스토리 스킨 제작하기 (HTML/CSS/JS) 2</title>
</head>
<body id='tt-body-page'>
<h2>Hello World (최상단)</h2>
<!-- master container -->
<div class="container clr-lsb p-1">
<b class="h1">마스터 컨테이너</b>
<!-- primary header -->
<header id="header" class="primary-header clr-gd p-1 mb-1">
<!-- <span>프라이머리 헤더</span> -->
<div class="logo clr-sn p-1">블로그 로고</div>
<!-- primary nav -->
<nav id="nav" class="primary-nav clr-cn p-1">
프라이머리 네비
</nav>
</header>
<!-- secondary nav -->
<nav class="secondary-nav clr-bg p-1 mb-1">
세컨더리 네비
</nav>
<!-- section contents -->
<section id="section" class="section clr-kk p-1">
<!-- <b>섹션</b> -->
<article id="article" class="contents clr-yg p-1">
콘텐츠(블로그 포스팅 등)
</article>
<aside id="aside" class="sidebar clr-cr p-1">
사이드바(플러그인)
</aside>
</section>
<!-- primary footer -->
<footer id="footer" class="primary-footer clr-am p-1 mb-1">
프라이머리 푸터
</footer>
<!-- secondary footer -->
<footer class="secondary-footer clr-dgr p-1">
세컨더리 푸터
</footer>
</div>
</body>
</html>
문제는 CSS인데 CSS 까막눈이라면 별도로 공부가 필요합니다. flex 레이아웃과 미디어쿼리 사용법을 안다면 아래 코드를 이해할 수 있습니다. CSS는 공부할게 많아서 앉아서 교과서의 1페이지 부터 학습하기는 쉽지 않습니다. 어떨때 보면 백엔드 언어보다 더 공부하기 힘들 수도 있는데, 연습 프로그램이던 뭐든 잡고 하다보면 뭔가 깨닫는 날이 올겁니다. 한 가지 추천은 기능 위주로 학습하는게 좋습니다. grid layout, flex layout 같은 기능을 하나씩 써보며 기능을 습득합니다.
구글에 키워드로 검색하면 여러가지 설명과 예제가 많이 나오고요. 필자도 CSS에 대해 포스팅을 좀 더 할겁니다. (구글 검색에 나오도록) codepen 도 추천합니다.
코드팬(codepen)을 활용한 프론트엔드 웹개발 학습 (HTML/CSS)
코드팬(codepen)을 활용한 프론트엔드 웹개발 학습 (HTML/CSS)
언제부터인가 온라인에 Repl.it 같은 쓸만한 코딩 도구들이 많이 늘어나기 시작했는데 프로그래밍 언어는 종류에 따라 컴파일러나 인터프리터가 필요하고 또 의존성(dependency)이 있기 때문에 때로
digiconfactory.tistory.com
다음의 CSS 코드를 보면 미디어 쿼리의 자리만 잡아놓고 레이아웃은 992px 기준으로 PC와 모바일을 나눕니다. 레이아웃을 만드는 방법은 워낙 다양하기 때문에 하나의 참고일 뿐 입니다. 세부적인 설명은 하지 않겠습니다. 필자는 먼저 화면에 어떻게 보일지 그림을 그리고 거기에 맞춰서 코드를 짜는 방식으로 합니다. 코드에서 시작하면 막연하니까요.
:root {
--gap: 1rem;
}
/* Google Webfont */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
/* css basic reset */
* {
box-sizing: border-box;
font-size: 100%;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
body {
background-color: rgb(202, 202, 202);
font-family: 'Noto Sans KR', sans-serif;
}
/* ================= */
/* utilities for dev */
/* ================= */
.clr-yg {
background-color: yellowgreen;
}
.clr-am {
background-color: aquamarine;
}
.clr-bg {
background-color: beige;
}
.clr-cn {
background-color: cyan;
}
.clr-lsb {
background-color: lightskyblue;
}
.clr-cr {
background-color: coral;
}
.clr-gd {
background-color: gold;
}
.clr-dgr {
background-color: darkgoldenrod;
}
.clr-sn {
background-color: snow;
}
.clr-kk {
background-color: khaki;
}
.p-1 {
padding: 1rem;
}
.mb-1 {
margin-bottom: 1em;
}
.h1 {
font-size: 1.7rem;
}
/* 레이아웃 */
.container {
/* min-height: 100vh; */
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
}
#section {
max-width: 1200px;
min-height: 30vh;
margin: auto;
margin-bottom: 1em;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--gap, 1rem);
}
#article {
flex-basis: 70%;
min-height: inherit;
}
#aside {
flex-basis: 30%;
min-height: inherit;
}
/* 블로그 타이틀 */
.logo {
font-weight: 700;
font-size: 1.5rem;
}
/* ====================== */
/* bootstrap 5 breakpoint */
/* ====================== */
/*
X-Small none <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
*/
/* Small */
/* @media(max-width: 768px) and (min-width: 577px) {
body {
color: blue;
}
} */
/* Medium */
@media(max-width: 992px) /* and (min-width: 769px) */ {
body {
color: green;
}
#section {
flex-direction: column;
}
#article {
width: 100%;
}
#aside {
width: 100%;
align-self: flex-start;
}
}
/* Large */
@media(max-width: 1200px) and (min-width: 993px) {
body {
color: black;
}
}
/* Extra Large */
@media(max-width: 1400px) and (min-width: 1201px) {
body {
color: red;
}
}
/* Extra extra Large */
@media (min-width: 1401px) {
body {
color: gray;
}
#section {
max-width: 1400px;
}
#article {
flex-basis: 75%;
}
#aside {
flex-basis: 25%;
}
}
/* X-Small */
@media (max-width: 576px) {
body {
color: brown;
}
.secondary-nav {
display: none;
}
}
작업하면 깃허브에 그때그때 커밋을 하고 있습니다. 레이아웃만 잡히면 그 다음은 단순 반복 작업일 뿐 어렵지 않습니다.
*깃허브:
npm-project/tistory-basic at master · neokayken/npm-project (github.com)
