CSS란 무엇이고 왜 사용할까요?

HTML_CSS

by 헬로제이콥 2024. 11. 1. 10:15

CSS(Cascading Style Sheets)는 웹 페이지의 디자인을 담당하는 언어입니다. 마치 건물을 지을 때 설계도가 건물의 구조를 결정하듯이, HTML이 웹 페이지의 기본 구조를 만든다면 CSS는 그 구조에 색깔을 입히고 디자인을 더하는 역할을 합니다.

쉽게 말해서, CSS는 웹 페이지를 예쁘게 꾸미는 화장 도구라고 생각할 수 있습니다.

CSS를 사용하는 이유

웹 페이지의 디자인을 일관되게 유지: 한 번 작성한 CSS를 여러 HTML 페이지에 적용하여 통일된 디자인을 만들 수 있습니다.
웹 페이지를 더욱 효율적으로 관리: HTML 코드와 CSS 코드를 분리하여 각각 관리하면 코드의 가독성을 높이고 유지 보수를 쉽게 할 수 있습니다.
다양한 화면 크기에 맞는 반응형 웹 디자인 구현: CSS를 사용하면 스마트폰, 태블릿, 데스크톱 등 다양한 기기에서 웹 페이지가 최적화되어 보이도록 만들 수 있습니다

CSS 사용 예시

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS 예시</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 18px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>제목입니다</h1>
  <p>이것은 본문 내용입니다.</p>
</body>
</html>

위 코드에서 style 태그 안에 작성된 CSS는 h1 태그에 적용된 글자 색깔을 파란색으로, 가운데 정렬하도록 지정하고, p 태그에 적용된 글자 크기를 18px, 줄 간격을 1.5로 설정합니다.

CSS의 특징 및 주의사항

선택자: 어떤 HTML 요소에 스타일을 적용할지 지정하는 부분입니다. (예: h1, p, .class, #id)
속성: 변경하고 싶은 스타일의 종류를 나타냅니다. (예: color, font-size, background-color)
값: 속성에 해당하는 값을 지정합니다. (예: blue, 18px, #ffffff)
우선순위: 여러 스타일이 충돌할 경우 우선순위가 높은 스타일이 적용됩니다.
상속: 부모 요소의 스타일이 자식 요소에 상속될 수 있습니다.
브라우저 호환성: 모든 브라우저가 CSS를 동일하게 해석하지 않을 수 있으므로, 브라우저별 호환성을 고려해야 합니다.

'HTML_CSS' 카테고리의 다른 글

HTML에서 캐스케이딩 스타일 (CSS) 쉽게 이해하기 (1)	2024.11.01
CSS 속성 명령: 웹 페이지 디자인의 핵심 (0)	2024.11.01
HTML 텍스트 태그 실습 문제 (2)	2024.10.28
HTML이란 (0)	2024.10.28
HTML 초보자를 위한 쉬운 예제 5가지 (1)	2024.10.28