티스토리 뷰

카테고리 없음

웹 개발의 기초! 반드시 알아야 할 CSS 이론 3가지

퀸도도 2025. 5. 28. 21:55

목차



    반응형

    CSS 박스 모델, 우선순위, 단위는 웹 개발의 핵심 개념입니다.

    이 글에서는 시각적 예시와 실습 예제를 통해 CSS 이론을 이해하기 쉽게 설명합니다.

     

    실습 결과물

     

     

     

    웹 페이지를 만들다 보면 다양한 스타일을 적용하게 됩니다.

    하지만 똑같이 스타일을 작성했는데, 적용되지 않거나 예상과 다르게 보인 적이 있으신가요?

    그 원인은 대부분 CSS 기본 이론에 대한 이해 부족에서 출발합니다.

     

    이 글에서는 CSS를 배우는 모든 분이 반드시 이해해야 할 세 가지 핵심 이론,

    즉 박스 모델, 우선순위, 단위에 대해 자세히 알아보겠습니다.

    실습 예제와 함께 따라 하다 보면 CSS가 한층 더 친숙하게 느껴질 거예요.

     

    CSS 박스 모델(Box Model)

    박스 모델의 핵심 개념

    CSS에서 모든 요소는 박스 형태로 표현됩니다.

    이 박스는 내용(Content), 패딩(Padding), 보더(Border), 마진(Margin) 네 부분으로 구성됩니다.

     

    • Content: 텍스트나 이미지가 들어가는 실제 콘텐츠 공간
    • Padding: 콘텐츠와 테두리 사이의 내부 여백
    • Border: 요소의 테두리, 디자인에 영향을 미침
    • Margin: 요소와 요소 사이의 외부 간격

    이 구조를 이해하면, 박스의 크기나 위치가 어떻게 결정되는지 명확해집니다.

    시각적 이해와 실습 예시

    .box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}
    <div class="box">이것은 박스 모델입니다!</div>

     

    위 코드를 브라우저에서 실행해 보면서

    padding, border, margin의 값을 조절해 보세요.

    눈으로 확인하면서 이해하는 것이 가장 효과적입니다.

     

    CSS 우선순위(Specificity)

    왜 우선순위가 중요한가?

    여러 CSS 규칙이 하나의 요소에 동시에 적용된다면,

    어떤 스타일이 최종적으로 적용될까요?

    이때 결정되는 것이 바로 CSS의 우선순위입니다.

    우선순위의 계산 방법

     

    • 인라인 스타일 (style="") > ID 선택자(#id) > 클래스 선택자(.class) > 태그 선택자 (div, p 등)
    • !important는 어떤 규칙보다 우선 적용되지만, 남용은 금물입니다.

     

    예제 코드로 쉽게 이해하기

    <style>
  p { color: blue; }              /* 태그 선택자 */
  .highlight { color: red; }     /* 클래스 선택자 */
  #unique { color: green; }      /* ID 선택자 */
  p.inline-style { color: yellow !important; } /* !important */
</style>
<p id="unique" class="inline-style highlight">CSS 우선순위 예시입니다!</p>

     

    이 코드에서 실제로 적용되는 색상은 무엇일까요?

    !important가 적용된 yellow입니다.

    이처럼 실제 적용 결과를 예측하고 확인해보는 것이 중요합니다.

     

    CSS 단위(Units)

    다양한 단위의 세계

    CSS는 크기나 위치를 지정할 때 다양한 단위를 사용합니다.

    각 단위는 용도와 상황에 따라 적절히 선택해야 합니다.

     

    • px (픽셀): 고정 단위로, 항상 일정한 크기를 유지
    • em, rem: 글꼴 크기에 비례한 상대 단위
    • %: 부모 요소 크기에 따른 백분율
    • vw, vh: 브라우저 화면(viewport)의 너비/높이 백분율

    실습 예제

    .container {
  width: 50%;     /* 부모 요소의 50% */
  padding: 1rem;  /* 루트 글꼴 크기의 1배 */
  margin: 20px;   /* 20 픽셀 */
  font-size: 2em; /* 부모 글꼴의 2배 */
}

     

    이 코드를 바탕으로 em, rem, %, px 단위를 다양하게 조절해 보면서

    화면이 어떻게 변하는지 직접 확인해보세요.

     

    실습 코드 적용 모습

     

    결론

     

    CSS 이론은 처음에는 다소 복잡해 보일 수 있지만,

    핵심 개념을 명확히 이해하고 실습을 통해 직접 경험해 보면 어렵지 않습니다.

     

    • 박스 모델은 요소의 구조를 이해하는 기본
    • 우선순위는 스타일 충돌을 해결하는 핵심 원리
    • 단위는 디자인을 유연하게 조정할 수 있게 해주는 도구

     

    이 세 가지를 이해하고 자유롭게 활용할 수 있다면,

    CSS의 절반은 마스터했다고 해도 과언이 아닙니다.

    꾸준히 실습하고 프로젝트에 적용해보며 실력을 키워보세요!

     

    이제 여러분도 CSS의 기본기를 탄탄히 다졌습니다.

    웹 개발의 다음 단계로 한 걸음 나아가 보세요!

    반응형