지난 시간에 만든 HTML 뼈대는 튼튼하지만, 아직 시각적으로 매력적이지 않습니다. 텍스트만 쭉 나열된 화면을 보며 “이게 정말 웹사이트가 맞나?” 싶으셨을 수도 있어요. 이번 시간에는 CSS(Cascading Style Sheets) 를 사용하여 웹사이트의 전반적인 스타일을 잡아보겠습니다.
CSS는 이름처럼 ‘폭포처럼 위에서 아래로 흐르며 스타일을 적용하는 언어’입니다. HTML이 무엇을 보여줄지 정한다면, CSS는 어떻게 보여줄지를 결정합니다. 색상, 폰트, 간격, 배치 등 시각적인 모든 것이 CSS의 영역입니다.
1. CSS 연결하고 기본 설정하기
CSS 파일 만들고 연결하기
먼저 프로젝트 폴더(my-portfolio) 안에 style.css 파일을 새로 만듭니다. 그리고 HTML이 이 CSS 파일을 사용하도록 연결해야 합니다. HTML의 <head> 태그 안에 아래 한 줄을 추가하세요.
<!-- index.html의 <head> 태그 안에 추가하세요 -->
<link rel="stylesheet" href="style.css" /><link> 태그는 외부 파일을 HTML 문서에 연결하는 역할을 합니다. rel="stylesheet"는 연결할 파일이 스타일시트(CSS)임을 알려주고, href="style.css"는 파일의 경로를 지정합니다. 이 한 줄 덕분에 브라우저는 HTML을 읽다가 CSS 파일도 함께 불러와 스타일을 적용합니다.
브라우저 기본 스타일 초기화
연결이 됐다면, 가장 먼저 해야 할 일은 브라우저 기본 스타일을 초기화하는 것입니다. 크롬, 파이어폭스, 사파리 등 각 브라우저는 자체적으로 정해둔 기본 스타일(여백, 폰트 크기 등)이 있습니다. 이 기본값들이 브라우저마다 조금씩 달라서, 초기화 없이 개발하면 특정 브라우저에서만 디자인이 어긋나는 문제가 생깁니다.
/* style.css */
/* 모든 요소(*)에 대해 여백을 0으로 만들고, 테두리까지 포함해서 크기를 계산하도록 설정합니다. */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 매우 중요! 요소 크기 계산을 직관적으로 만들어줍니다. */
}여기서 *는 CSS의 전체 선택자로, 페이지의 모든 요소를 대상으로 합니다. margin과 padding을 0으로 설정해 브라우저가 임의로 넣어주는 여백을 제거합니다.
box-sizing: border-box는 조금 생소할 수 있는데, 매우 중요한 속성입니다. 기본값(content-box)은 요소의 너비(width)를 계산할 때 테두리(border)와 안쪽 여백(padding)을 제외합니다. 즉, 너비 100px 짜리 박스에 padding 10px을 주면 실제로는 120px이 되어버립니다. 반면 border-box로 설정하면 padding과 border를 포함해서 100px을 유지합니다. 훨씬 직관적이죠? 대부분의 현업 개발자들이 이 설정을 필수로 사용합니다.
💡 잠깐! CSS 주석은 HTML 주석과 다릅니다
CSS에서는
/* 이 부분 */형태로 주석을 작성합니다. HTML의<!-- -->와는 문법이 다릅니다.
HTML CSS 주석 형식 <!-- 내용 -->/* 내용 */여러 줄 가능 O O /* 한 줄 주석 */ /* 여러 줄도 가능합니다 */ color: red; /* 줄 끝에도 달 수 있어요 */HTML 파일 안의
<style>태그 내부나.css파일에서는 반드시/* */방식을 사용해야 합니다.<!-- -->를 CSS에 쓰면 무시되거나 오류가 생길 수 있습니다.
2. 구글 폰트 적용하기
기본 폰트는 밋밋하죠. 운영체제마다 기본 폰트가 달라서 사용자 환경에 따라 다르게 보이는 문제도 있습니다. 이를 해결하기 위해 구글 폰트(Google Fonts) 를 사용합니다. 구글이 무료로 제공하는 수백 가지 웹 폰트를 간단한 코드 한 줄로 적용할 수 있습니다.
구글 폰트 적용 방법은 두 단계입니다.
1단계: fonts.google.com에 접속해 원하는 폰트를 선택합니다. 한글 지원 폰트인 ‘Noto Sans KR’ 을 검색해 선택한 뒤, 원하는 굵기(Weight)를 고르고 @import 코드를 복사합니다.
2단계: 복사한 @import 코드를 style.css 최상단에 붙여넣고, font-family 속성으로 적용합니다.
/* style.css 최상단에 붙여넣으세요 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
* {
/* 모든 요소에 Noto Sans KR 폰트를 적용합니다. */
font-family: 'Noto Sans KR', sans-serif;
}'Noto Sans KR', sans-serif에서 쉼표 뒤의 sans-serif는 폴백(fallback) 폰트입니다. 어떤 이유로 구글 폰트를 불러오지 못했을 때 브라우저가 대신 사용할 폰트 계열을 지정한 것입니다. 이처럼 폰트는 항상 폴백을 함께 적어두는 것이 좋은 습관입니다.
3. CSS 변수(:root) 활용하기
웹사이트 전체에서 공통으로 사용할 색상을 변수로 등록해 두면, 나중에 색상을 바꿀 때 한 곳만 수정하면 됩니다. 예를 들어 메인 색상을 보라색에서 파란색으로 바꾸고 싶을 때, 변수를 사용하지 않으면 파일 전체에서 보라색 코드(#6c5ce7)가 사용된 곳을 모두 찾아 일일이 바꿔야 합니다. 하지만 변수를 쓰면 변수 선언 한 줄만 수정하면 끝입니다. 이것이 바로 ‘디자인 시스템’의 기초 개념입니다.
CSS 변수는 이름 앞에 반드시 --(대시 두 개)를 붙여서 선언합니다. 그리고 :root 안에 선언하면 페이지 어디서든 사용할 수 있는 전역 변수가 됩니다.
/* :root는 문서의 최상위 요소(html)를 의미하며, 전역 변수를 선언하기 좋은 곳입니다. */
:root {
--primary: #6c5ce7; /* 메인 포인트 컬러 (보라색 계열) */
--secondary: #a29bfe; /* 보조 컬러 (연한 보라색) */
--dark: #2d3436; /* 본문 텍스트용 진한 회색 */
--light: #f9f9f9; /* 배경용 연한 회색 */
--glass: rgba(255, 255, 255, 0.1); /* 유리 효과를 위한 반투명 흰색 */
}
body {
background-color: var(--light); /* 변수 사용 예시 */
color: var(--dark);
overflow-x: hidden; /* 가로 스크롤 생성을 방지합니다. */
}선언한 변수를 사용할 때는 var(--변수명) 형태로 씁니다. body에 적용한 overflow-x: hidden은 가로 스크롤바가 생기지 않도록 막아주는 속성입니다. 애니메이션 효과를 넣다 보면 요소가 화면 밖으로 살짝 삐져나와 가로 스크롤이 생기는 경우가 있는데, 이를 미리 방지합니다.
4. 부드러운 스크롤 효과
네비게이션 메뉴(Home, About 등)를 클릭했을 때 해당 섹션으로 ‘틱’ 하고 순간이동하는 대신, 부드럽게 스르륵 이동하면 훨씬 고급스러워 보입니다. 놀랍게도 CSS 한 줄이면 충분합니다!
html {
scroll-behavior: smooth; /* 스크롤 이동을 부드럽게 만듭니다. */
}scroll-behavior: smooth는 페이지 내 앵커 링크(href="#about" 처럼 #으로 시작하는 링크)를 클릭할 때 스크롤이 부드럽게 이동하도록 만들어줍니다. 1화에서 만든 네비게이션 링크들이 바로 이 방식을 사용했습니다. 이 설정이 없으면 클릭 즉시 해당 위치로 점프하지만, 이 설정을 추가하면 0.3~0.5초 정도에 걸쳐 자연스럽게 이동합니다.
5. 전체 소스 코드
/* style.css */
/* 구글 폰트 임포트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
/* 기본 설정 및 변수 */
:root {
--primary: #6c5ce7;
--secondary: #a29bfe;
--dark: #2d3436;
--light: #f9f9f9;
--glass: rgba(255, 255, 255, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans KR', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--light);
color: var(--dark);
overflow-x: hidden;
}“기존의 브라우저가 강제로 입혀놓았던 낡은 옷을 벗겨냈습니다. 이제 화면은 여백 하나 없는 **’순백의 상태’**가 되었죠. 글자들이 왼쪽 구석에 옹기종기 모여 있는 모습은 마치 이사를 막 마친 빈집처럼 어색하지만, 이제부터 우리가 이 공간을 나만의 여백과 질서로 채워 나갈 차례입니다.”
마무리
오늘 작업한 내용을 정리해 보겠습니다.
<link>태그로 HTML에 CSS 파일을 연결하는 방법*선택자와box-sizing: border-box로 브라우저 기본 스타일을 초기화하는 이유- 구글 폰트를 가져와
font-family로 적용하는 방법 :root에 CSS 변수(--변수명)를 선언하고var()로 사용하는 방법scroll-behavior: smooth로 부드러운 스크롤 적용하기
아직 화면 배치는 엉망일 텐데요, 다음 시간에는 Flexbox라는 강력한 도구를 사용하여 메뉴와 요소들을 예쁘게 가로로 배치하는 방법을 배워보겠습니다. Flexbox를 익히고 나면 그동안 답답했던 레이아웃 문제가 한방에 해결되는 경험을 하게 될 거예요!
오늘의 핵심 코드:
:root {
--primary: #6c5ce7;
}
* {
box-sizing: border-box;
}다음 시간에 만나요!
감사합니다.