CSS란? 초보자를 위한 개념 설명

by

안녕하세요! 웹 디자인의 세계에 막 발을 들여놓으셨나요? 반갑습니다! 💖 세상에 멋진 웹사이트들이 정말 많죠? 그 웹사이트들을 예쁘게 꾸며주는 마법, 바로 CSS(Cascading Style Sheets) 덕분이에요. CSS는 웹사이트의 뼈대를 구성하는 HTML에 색깔을 입히고, 글꼴을 바꾸고, 레이아웃을 잡아주는 스타일 언어랍니다. 마치 화장처럼요! 😊 이 글에서는 CSS가 무엇인지, 어떻게 사용하는지 초보자분들을 위해 쉽고 친절하게 알려드리려고 해요.

CSS 선택자를 이용해 원하는 요소를 선택하고, 속성과 값을 설정해서 스타일을 적용하는 방법까지 차근차근 배워볼 거예요. 어렵게 생각하지 마세요! 저와 함께라면 CSS 기본 문법 정복, 어렵지 않아요! ✨

 

 

CSS 기본 문법

자, 이제 본격적으로 CSS의 세계에 발을 들여놓아 볼까요? 마치 새로운 언어를 배우는 것처럼 처음엔 조금 낯설 수도 있지만, 기본 문법만 익히면 생각보다 훨씬 쉽고 재밌다는 걸 알게 되실 거예요! 마법같은 스타일링의 세계로 함께 떠나보자구요~!✨

CSS 기본 구조

CSS는 기본적으로 ‘선택자‘와 ‘선언 블록‘으로 이루어져 있어요. “무엇을 스타일링할 것인가?”를 나타내는 선택자와 “어떻게 스타일링할 것인가?”를 나타내는 선언 블록! 이 두 가지가 핵심이랍니다. 마치 요리 레시피처럼 말이죠. 재료(선택자)를 정하고, 어떻게 요리할지(선언 블록)를 정하는 것과 같아요. 🍳

선언 블록 안에는 여러 개의 ‘속성‘과 ‘값‘이 존재해요. 속성은 스타일링할 요소의 특징(예: 색상, 크기, 위치 등)을 나타내고, 값은 그 특징에 대한 구체적인 설정을 의미해요. 예를 들어, 글자 색을 빨간색으로 바꾸고 싶다면 color: red; 와 같이 작성하면 된답니다. 참 쉽죠? 😊

CSS 문법

자, 이제 좀 더 자세히 살펴볼까요? 선택자와 선언 블록은 콜론(:)으로 연결되고, 각 속성과 값은 다시 콜론(:)으로 연결되어요. 그리고 각 속성-값 쌍은 세미콜론(;)으로 구분됩니다. 마치 문장의 마침표처럼 말이죠! 이러한 구조를 잘 기억해두면 CSS 코드를 읽고 쓰는 데 큰 도움이 될 거예요. 😉


선택자 {
  속성1: 값1;
  속성2: 값2;
  …
}

위의 코드는 CSS 기본 문법의 구조를 보여주는 예시입니다. 선택자 부분에는 스타일을 적용할 HTML 요소를 지정하고, 중괄호({}) 안에 속성: 값; 형태로 스타일 규칙을 정의합니다. 각 속성과 값은 세미콜론(;)으로 구분하고, 여러 개의 속성-값 쌍을 사용하여 다양한 스타일을 적용할 수 있어요. 마치 레고 블록을 조립하듯이 원하는 스타일을 만들어갈 수 있답니다! 🧱

CSS 예시

예를 들어, 웹 페이지의 모든 <p> 태그(문단)의 글자 색을 파란색으로, 글자 크기를 16px로 설정하려면 다음과 같이 작성할 수 있어요.


p {
  color: blue;  /* 글자 색을 파란색으로 설정 */
  font-size: 16px; /* 글자 크기를 16px로 설정 */
}

주석

주석은 /* */ 사이에 작성하며, 코드에 대한 설명이나 메모를 추가할 때 유용하게 사용할 수 있어요. 주석은 코드의 실행에 영향을 미치지 않으니 자유롭게 활용해 보세요! 📝

대소문자, 공백, 단위

CSS는 대소문자를 구분하지 않는 경우가 많지만, 일부 속성 값이나 선택자에서는 대소문자를 구분하는 경우도 있으니 주의해야 해요! 🤔 그리고 공백은 속성과 값 사이, 선택자와 중괄호 사이에 적절히 사용하여 코드의 가독성을 높이는 것이 좋습니다. 가독성이 높은 코드는 유지보수에도 좋고, 다른 개발자와 협업할 때도 효율적이랍니다. 👍

또한, CSS에서는 다양한 단위를 사용하여 값을 지정할 수 있어요. 길이를 나타내는 px, em, rem, %, viewport 단위(vw, vh) 등 다양한 단위가 존재하며, 각 단위의 특징을 이해하고 적절히 사용하는 것이 중요해요. 예를 들어, font-size: 16px;는 글자 크기를 16픽셀로 고정하는 반면, font-size: 2em;는 부모 요소의 글자 크기를 기준으로 두 배 크기로 설정하는 상대적인 단위입니다. 상황에 맞는 단위를 선택하여 유연하고 반응형 웹 디자인을 구현할 수 있답니다. 📱💻

CSS의 힘

이처럼 CSS 기본 문법은 간단하지만, 다양한 속성과 값, 선택자, 단위 등을 활용하여 무궁무진한 스타일을 만들어낼 수 있어요. 마치 화가의 팔레트처럼 다채로운 색상과 도구를 사용하여 웹 페이지에 생명을 불어넣는 마법사가 되는 거죠! ✨ 처음에는 어려워 보일 수 있지만, 꾸준히 연습하고 다양한 예제를 통해 익숙해지면 웹 디자인의 세계를 자유롭게 누빌 수 있을 거예요! 자, 이제 여러분의 손으로 멋진 웹 페이지를 만들어 보세요! 😄

 

CSS 선택자 이해하기

자, 이제 CSS의 꽃이라고 할 수 있는 선택자에 대해 알아볼까요? HTML 문서에서 스타일을 적용할 요소를 정확하게 콕! 집어내는 마법 지팡이 같은 역할을 하는 게 바로 선택자랍니다! 마치 숨바꼭질에서 술래가 “찾았다!” 외치는 것처럼 말이죠. 선택자를 제대로 이해하면 원하는 요소만 쏙쏙 골라 스타일을 입힐 수 있어요. 얼마나 편리하고 신나는지 몰라요!

CSS 선택자는 종류가 굉장히 다양해요. 처음에는 좀 복잡해 보일 수 있지만, 하나씩 차근차근 알아가면 전혀 어렵지 않아요. 마치 새로운 게임을 배우는 것처럼 재미있을 거예요! ^^

요소 선택자(Element Selector)

먼저 가장 기본적인 선택자가 바로 요소 선택자(Element Selector)예요. <p>, <h1>, <div>처럼 HTML 태그 이름을 그대로 사용하는 거죠. 예를 들어 p { color: blue; }라고 쓰면 페이지의 모든 <p> 태그 안에 있는 텍스트 색상이 파란색으로 바뀐답니다. 참 쉽죠?

클래스 선택자(Class Selector)

하지만 모든 <p> 태그에 같은 스타일을 적용하고 싶지 않을 때도 있잖아요? 그럴 땐 클래스 선택자(Class Selector)를 사용하면 돼요! 클래스 선택자는 특정 HTML 요소에 이름표를 붙이는 것과 같아요. .highlight { font-weight: bold; }처럼 점(.)으로 시작하는 이름을 정하고, HTML에서 class="highlight" 속성을 추가하면 해당 요소에만 굵은 글씨 스타일이 적용된답니다. 마치 특별한 요소에게만 주는 선물 같죠?🎁

ID 선택자(ID Selector)

한편, 단 하나의 요소에만 스타일을 적용하고 싶을 땐 ID 선택자(ID Selector)가 딱이에요! ID 선택자는 #main-title { font-size: 2em; }처럼 #으로 시작하는 고유한 이름을 사용해요. HTML에서는 id="main-title"처럼 ID를 지정하면 되죠. 마치 주민등록번호처럼, 웹 페이지 전체에서 단 하나의 요소만 가질 수 있는 특별한 이름이랍니다!

자손 선택자(Descendant Selector)

자, 이제 좀 더 복잡한 선택자들을 살펴볼까요? 자손 선택자(Descendant Selector)는 특정 요소의 자손 요소를 선택하는 강력한 도구예요. 예를 들어 div p { line-height: 1.5; }라고 쓰면 <div> 요소 안에 있는 모든 <p> 태그에 줄 높이 1.5 스타일이 적용된답니다. 계층 구조를 이용해서 스타일을 적용하는 거죠!

자식 선택자(Child Selector)

자식 선택자(Child Selector)는 자손 선택자보다 좀 더 범위를 좁혀서, 바로 아래에 있는 자식 요소만 선택해요. div > p { font-style: italic; }라고 쓰면 <div> 바로 아래에 있는 <p> 태그에만 이탤릭체 스타일이 적용되죠. 자손 선택자와 비슷하지만, 한 단계 더 구체적인 선택이 가능하답니다.

인접 형제 선택자(Adjacent Sibling Selector)

인접 형제 선택자(Adjacent Sibling Selector)는 특정 요소 바로 다음에 오는 형제 요소를 선택해요. h2 + p { margin-top: 0; }라고 쓰면 <h2> 바로 다음에 오는 <p> 태그에만 위쪽 여백을 없애는 스타일이 적용되죠. 레이아웃을 섬세하게 조정할 때 아주 유용해요!

일반 형제 선택자(General Sibling Selector)

일반 형제 선택자(General Sibling Selector)는 인접 형제 선택자와 비슷하지만, 바로 다음에 오는 형제뿐 아니라 그 이후에 오는 모든 형제 요소를 선택한답니다. h2 ~ p { font-size: 0.9em; }라고 쓰면 <h2> 뒤에 오는 모든 <p> 태그의 글꼴 크기가 0.9em로 설정되죠. 좀 더 넓은 범위에 스타일을 적용하고 싶을 때 사용하면 좋겠죠?

이 외에도 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자 등 다양한 선택자가 존재해요! 각 선택자의 특징과 사용법을 잘 이해하면 CSS로 디자인의 가능성을 무궁무진하게 펼칠 수 있답니다! 마치 화가가 팔레트에 다양한 물감을 가지고 그림을 그리는 것처럼 말이죠.🎨

처음에는 다소 어려워 보일 수 있지만, 꾸준히 연습하고 다양한 예제를 통해 경험을 쌓다 보면 어느새 CSS 선택자 마스터가 되어 있을 거예요! 자, 이제 여러분도 CSS 선택자의 세계로 뛰어들어 웹 디자인의 마법을 경험해 보세요! ✨

 

CSS 속성과 값

자, 이제 CSS의 핵심 중 하나인 속성과 값에 대해 알아볼까요? 마치 요리 레시피처럼, CSS 속성은 재료, 값은 그 재료의 양이나 상태라고 생각하면 이해하기 쉬워요! 예를 들어, 글자 색을 바꾸고 싶다면 color라는 속성을 사용하고, 어떤 색으로 바꿀지는 red, blue, #F0F0F0 같은 값으로 지정하는 거죠. 간단하죠?! ^^

CSS에는 엄청나게 많은 속성들이 존재하는데, 처음부터 모든 속성을 다 알 필요는 없어요~. 자주 사용되는 몇 가지 중요한 속성들을 먼저 파악해두면 충분해요! 차근차근 하나씩 알아가면 되니까 너무 걱정하지 마세요~!

1. 글꼴 스타일링

  • font-family: 글꼴을 지정해요. 예를 들어 font-family: Arial, sans-serif; 처럼요! Arial이 없으면 sans-serif 계열 글꼴이 사용돼요. 웹폰트를 사용할 수도 있답니다~.
  • font-size: 글자 크기를 설정해요. px, em, rem, % 등 다양한 단위를 사용할 수 있죠. font-size: 16px; 처럼 말이에요!
  • font-weight: 글자 굵기를 조절해요. normal, bold, bolder, lighter, 100부터 900까지의 숫자 값도 사용 가능해요. font-weight: 700;은 꽤 굵은 글씨가 되겠죠?
  • font-style: 글자 스타일을 지정해요. normal, italic, oblique 등이 있어요. font-style: italic;은 기울임꼴을 만들어 줍니다.
  • line-height: 줄 높이를 설정해요. line-height: 1.5;는 글자 크기의 1.5배로 줄 높이를 설정하는 거예요. 가독성에 큰 영향을 미치는 중요한 속성이에요!
  • color: 글자 색상을 지정해요. red, blue 같은 색상 이름, #RRGGBB 형식의 Hex 코드, rgb(255, 0, 0) 같은 RGB 값, hsl(0, 100%, 50%) 같은 HSL 값 등 다양한 방법이 있답니다. color: #336699;처럼 사용하면 되겠죠?

2. 박스 모델

웹 페이지의 모든 요소는 박스 형태로 이루어져 있다는 것을 기억하시나요? 이 박스들을 다루는 속성들도 아주 중요해요!

  • width: 요소의 너비를 지정해요. px, %, vw, em 등 다양한 단위를 사용할 수 있답니다.
  • height: 요소의 높이를 지정해요. 너비와 마찬가지로 다양한 단위를 사용할 수 있어요.
  • margin: 요소 바깥쪽의 여백을 설정해요. margin-top, margin-right, margin-bottom, margin-left처럼 각 방향을 따로 설정할 수도 있고, margin: 10px 20px 30px 40px;처럼 한 번에 설정할 수도 있어요 (위, 오른쪽, 아래, 왼쪽 순서!).
  • padding: 요소 안쪽의 여백을 설정해요. 마진과 사용법은 동일해요.
  • border: 요소의 테두리를 설정해요. border-width, border-style, border-color를 각각 설정하거나 border: 1px solid black;처럼 한 번에 설정할 수도 있어요. 테두리 스타일에는 solid, dashed, dotted 등 다양한 옵션이 있답니다.
  • box-sizing: 박스 모델의 계산 방식을 지정해요. content-box는 기본값으로, 너비와 높이에 패딩과 테두리가 더해져요. border-box는 너비와 높이에 패딩과 테두리가 포함돼요. box-sizing: border-box;를 사용하면 계산이 훨씬 편해지니 꼭 기억해두세요!

3. 배경 스타일링

  • background-color: 요소의 배경색을 지정해요. 글자 색과 마찬가지로 다양한 방법으로 색상을 표현할 수 있어요.
  • background-image: 요소의 배경 이미지를 설정해요. url("image.jpg");처럼 이미지 경로를 지정하면 돼요.
  • background-repeat: 배경 이미지의 반복 여부를 설정해요. repeat, repeat-x, repeat-y, no-repeat 등의 옵션이 있어요.
  • background-position: 배경 이미지의 위치를 지정해요. top, bottom, left, right, center 등의 키워드나 픽셀 단위, 백분율 등을 사용할 수 있답니다.
  • background-size: 배경 이미지의 크기를 조정해요. cover, contain, 픽셀 단위, 백분율 등을 사용할 수 있어요. cover는 요소 전체를 덮도록 이미지 크기를 조정하고, contain은 요소 안에 이미지 전체가 보이도록 크기를 조정해요.

4. Display 속성

  • display: 요소의 표시 방식을 결정하는 중요한 속성! block, inline, inline-block, none, flex, grid 등 다양한 값이 있어요. 레이아웃을 구성할 때 아주 중요한 역할을 하죠. display: none;은 요소를 화면에서 완전히 숨겨요.

휴~, 정말 많은 속성과 값들이죠?! 하지만 걱정 마세요. 처음부터 모든 것을 다 알 필요는 없어요. 꾸준히 사용하다 보면 자연스럽게 익숙해질 거예요! 그리고 혹시 궁금한 점이 있다면 언제든지 MDN 웹 문서 같은 좋은 자료들을 참고하면 된답니다! 다음에는 더 재미있는 내용으로 찾아올게요~!

 

CSS 활용 예시

자, 이제 드디어! CSS가 실제로 어떻게 활용되는지 볼 시간이에요~! 앞에서 배운 문법, 선택자, 속성들을 가지고 마법처럼 웹 페이지를 꾸며볼 거예요. 두근두근하지 않나요? ^^

버튼 스타일링

먼저 간단한 예시부터 시작해 볼까요? 가장 흔하게 쓰이는 버튼 스타일링을 해볼게요. 버튼에 마우스를 올렸을 때(hover) 배경색이 바뀌고, 클릭했을 때(active)는 살짝 어두워지는 효과를 줄 거예요. 어렵지 않으니 잘 따라와 주세요!

.btn {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px; /* 둥근 모서리! */
  transition: background-color 0.3s, box-shadow 0.3s; /* 부드러운 변화를 위해 transition 추가! */
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* 살짝 그림자 효과~ */
}

.btn:hover {
  background-color: #3e8e41; /* Darker green */
  box-shadow: 0px 4px 8px rgba(0,0,0,0.3); /* 그림자 좀 더 진하게! */
}

.btn:active {
  background-color: #27642a; /* Even darker green */
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2); /* 그림자 다시 연하게~ */
  transform: translateY(1px); /* 꾹 눌린 효과! */
}

어때요? 생각보다 간단하죠? .btn이라는 클래스를 가진 모든 요소에 이 스타일이 적용될 거예요. transition 속성을 사용해서 색상과 그림자 변화가 부드럽게 이루어지도록 했어요. box-shadow로 입체감도 더했고요! transform: translateY(1px);를 통해 버튼이 눌렸을 때 살짝 아래로 내려가는 효과까지 넣었답니다. 세세한 부분까지 신경 써서 더욱 멋진 버튼이 되었죠?

네비게이션 바 만들기

자, 그럼 조금 더 복잡한 예시를 볼까요? 이번에는 네비게이션 바를 만들어 볼게요. 가로로 배치된 메뉴 항목에 마우스를 올리면 밑줄이 뿅! 하고 나타나는 효과를 줄 거예요.

nav ul {
  list-style: none; /* 기본 리스트 스타일 제거 */
  padding: 0;
  margin: 0;
  background-color: #f2f2f2; /* 배경색 설정! */
  overflow: hidden; /* float 효과를 위해! */
}

nav li {
  float: left; /* 가로로 배치~ */
}

nav li a {
  display: block; /* a 태그를 블록 요소처럼! */
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; /* 밑줄 없애기! */
  position: relative; /* 밑줄 위치 잡기 위해! */
}

nav li a:hover {
  background-color: #ddd; /* 마우스 올리면 배경색 변화! */
}

nav li a::after { /* 밑줄 만들기! */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff; /* 밑줄 색상! */
  transform: scaleX(0); /* 처음에는 밑줄 안 보이게! */
  transition: transform 0.3s; /* 부드러운 변화! */
}

nav li a:hover::after {
  transform: scaleX(1); /* 마우스 올리면 밑줄 뿅! */
}

여기서는 ::after라는 가상 요소 선택자를 사용했어요! 이 선택자는 요소의 내용 뒤에 콘텐츠를 추가할 수 있게 해준답니다. transform: scaleX(0);을 사용해서 처음에는 밑줄이 안 보이게 숨겨두고, 마우스를 올렸을 때 transform: scaleX(1);로 밑줄이 나타나도록 했어요! transition 속성 덕분에 밑줄이 부드럽게 나타나죠? 정말 신기하지 않나요?!

이 외에도 CSS를 활용하면 정말 다양한 효과를 줄 수 있어요. 글자에 그림자를 넣거나, 배경 이미지를 설정하거나, 애니메이션 효과를 주는 등… 상상하는 거의 모든 것을 구현할 수 있답니다! 다양한 CSS 속성과 값들을 익히고, 여러 가지 예시들을 직접 만들어보면서 CSS의 매력에 푹 빠져보세요~! CSS는 웹 디자인의 꽃이라고 할 수 있을 만큼 중요하고 재미있는 분야니까요! 화이팅!

 

와, 드디어 CSS 기본 개념 설명이 끝났네요! 어때요, 이제 좀 CSS가 친근하게 느껴지나요? 처음엔 낯설고 어려워 보였던 CSS 문법, 선택자, 속성들이 이제 조금은 눈에 익숙해졌기를 바라요. 직접 코드를 작성하고 결과를 확인하면서 CSS의 매력에 푹 빠져보는 것도 좋겠죠? 작은 변화 하나로 웹 페이지가 확 달라지는 모습을 보면 정말 신기하고 재밌을 거예요. 앞으로 여러분이 만들어갈 멋진 웹 페이지들을 응원할게요! CSS와 함께 즐거운 코딩 여정을 시작해 보세요!

 

Leave a Comment