오늘부터 우리는 12편에 걸쳐 블로그에 화려하고 깔끔한 옷을 입히는 핵심 과정, 바로 [CSS(Cascading Style Sheets)]의 세계로 들어가 보겠습니다. HTML이 블로그의 ‘뼈대’라면, CSS는 그 위에 입히는 ‘세련된 인테리어’입니다.
오늘은 그 시작으로, HTML과 CSS가 어떻게 만나서 여러분의 블로그를 멋지게 바꾸는지 그 원리를 파헤쳐 보겠습니다. css를 알게되면 블로그가 아름다워 집니다.
[CSS는 왜 필요한가요?]
지금까지 우리는 <h1>으로 제목을 쓰고, <p>로 본문을 작성했습니다. 그런데 기본 설정대로라면 글씨 크기도 똑같고, 색깔도 검은색뿐이라 너무 심심하죠?
CSS는 '글자 색을 파란색으로 바꿔줘', '글자 크기를 20px로 키워줘', '제목에 밑줄을 그어줘' 같은 디자인 명령을 내리는 언어입니다. HTML이 "여기에 제목이 있다"라고 구조를 만들면, CSS가 "그 제목을 굵게 하고 배경은 노란색으로 칠해"라고 꾸며주는 것이죠.
[HTML과 CSS의 만남: 스타일 태그]
HTML 파일 안에서 CSS를 사용하는 가장 기초적인 방법은 바로 <style> 태그를 사용하는 것입니다.
사용법:
여기서 '선택자'는 꾸미고 싶은 태그 이름을 말합니다. 예를 들어 p 태그를 꾸미고 싶다면 p { ... }라고 적으면 됩니다.
[실전 연습: 메모장에 스타일 입히기]
여러분의 글에 색깔과 크기를 직접 입혀봅시다. 아래 코드를 메모장에 적어보세요.
작성 후 저장해서 브라우저로 열어보세요. 평소 보던 밋밋한 글씨가 아니라, 훨씬 가독성 좋고 전문적인 느낌으로 변한 것을 확인할 수 있을 겁니다.
[디자인 전략]
많은 분이 디자인에 너무 욕심을 내서 블로그를 화려하게 꾸미곤 합니다. 하지만 구글 심사에서 가장 중요한 것은 ‘가독성’입니다.
너무 화려한 배경색은 피하세요: 하얀 배경에 검은색이나 짙은 회색 글씨가 가장 좋습니다.
폰트 크기는 16px 이상으로: 모바일에서 읽을 때 글씨가 너무 작으면 독자들이 바로 이탈합니다.
줄 간격(line-height)을 확보하세요: 1.6에서 1.8 정도의 줄 간격을 주면 글이 훨씬 편안하게 읽힙니다.
[에코노트허브의 조언]
CSS를 처음 배울 때는 이것저것 다 바꿔보고 싶어서 마음이 들뜰 수 있습니다. 하지만 기억하세요. 블로그의 주인은 '글'입니다. 디자인은 그 글을 더 돋보이게 만드는 보조적인 수단일 뿐입니다. 너무 많은 효과를 넣기보다는, 독자가 오직 글에만 집중할 수 있는 깔끔한 환경을 만드는 것이 승인의 지름길입니다.
핵심 요약
HTML은 뼈대, CSS는 블로그에 입히는 인테리어(디자인)입니다.
<style>태그를 사용하면 HTML 문서 안에서 직접 디자인 명령을 내릴 수 있습니다.디자인의 핵심은 화려함이 아니라 독자가 읽기 편한 '가독성'입니다.
글자 크기와 줄 간격 조절만 잘해도 여러분의 블로그 품질이 몇 단계는 올라갑니다.
다음 편 예고: 13편에서는 디자인의 가장 기본이 되는 [글자 색상과 폰트 크기 조절법]을 통해 내 블로그만의 개성을 살리는 방법을 자세히 배워보겠습니다.
여러분이 평소 자주 방문하는 블로그 중에서 "와, 이 블로그는 참 읽기 편하다"라고 느꼈던 곳은 어디인가요? 그 블로그의 어떤 점이 좋았나요? 댓글로 공유 부탁드립니다.