zhaoJian의 기술 노트

IT 강좌 CSS 기초 019_HelloCSS

학습 / CSS 기초 약 5353자 · 14분 소요 - 조회

CSS란 무엇인가?

CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)는 HTML과 마찬가지로 진정한 프로그래밍 언어가 아니며, 마크업 언어도 아닙니다. CSS는 스타일 시트 언어로, HTML 요소에 스타일을 추가하고, HTML 문서의 외관을 설명하며, HTML 문서 요소의 색상, 크기, 글꼴, 레이아웃 등을 제어합니다.

CSS는 웹 개발의 중요한 구성 요소로, 아름답고 사용하기 쉬운 웹 페이지를 만드는 데 도움을 줍니다.

CSS의 기본 구조

CSS 스타일은 선택자와 속성으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 선택합니다. 속성은 스타일의 값을 지정합니다.

예시:

p {
    color: red;
}

결과:

예시 효과

구조 분석:

예시 효과

[!요약]

  • 선택자(Selector) HTML 요소의 이름이 규칙 세트의 시작에 위치합니다. 스타일을 추가할 하나 이상의 요소를 선택합니다(이 예시에서는 <p> 요소). 다른 요소에 스타일을 추가하려면 선택자를 변경하면 됩니다.

  • 선언(Declaration) color: red;와 같은 단일 규칙으로, 스타일을 적용할 요소의 속성을 지정합니다. CSS 선언은 항상 세미콜론 ;으로 끝나며, 중괄호 {}로 감싸집니다:

  • 속성(Properties) HTML 요소 스타일을 변경하는 방법입니다(이 예시에서 color는 <p> 요소의 속성). CSS에서 작성자가 어떤 속성을 수정할지 결정합니다.

  • 속성값(Property value) 속성 오른쪽, 콜론 뒤에 있는 속성값은 가능한 많은 외관 중 하나의 값을 선택합니다(red 외에도 color에 사용할 수 있는 많은 속성값이 있습니다).

CSS를 어떻게 포함하나요?

인라인 포함:

CSS 코드를 HTML 태그 안에 직접 작성하며, style 속성을 사용합니다.

인라인 포함은 스타일 코드를 HTML 태그에 직접 작성하는 간단하고 빠른 방법입니다. 장점: 편리하고 빠르며, 적은 양의 스타일에 적합합니다. 단점:

  • 스타일 재사용에 불리하고, 유지보수가 어렵습니다.
  • HTML 파일이 혼잡해지고, 분리 원칙에 맞지 않습니다.
  • 브라우저 캐싱에 불리하고, 성능에 영향을 줍니다.

예시:

  <div style="color: red; font-size: 16px;">이것은 빨간색 텍스트입니다</div>

결과:

예시 효과

내부 포함:

CSS 코드를 <style> 태그 안에 작성하고, <head> 태그 안에 배치합니다.

내부 포함은 HTML 파일의 style 태그에 스타일 코드를 작성하는 비교적 균형 잡힌 방법입니다. 장점: 스타일과 HTML 파일이 분리되어 유지보수가 쉽습니다. 또한 브라우저 캐싱으로 로딩 속도를 높일 수 있습니다. 단점:

  • 페이지 로딩 시 추가 네트워크 요청이 필요하여 상대적으로 비효율적입니다.
  • 스타일과 HTML 파일이 여전히 일정 수준의 결합도를 가집니다.

예시:

div {
    color: red;
    font-size: 16px;
}
  <div>이것은 빨간색 텍스트입니다</div>

결과:

예시 효과

외부 포함:

CSS 코드를 별도의 CSS 파일에 작성한 후 link 태그로 포함합니다.

외부 포함은 스타일 코드를 별도의 CSS 파일에 작성하는 표준적인 방법입니다. 장점: 스타일과 HTML 파일이 완전히 분리되어 유지보수가 쉽습니다. CDN 가속으로 로딩 속도를 높일 수 있습니다. 외부 포함은 압축과 병합을 지원하여 파일 크기를 줄일 수 있습니다. 단점:

  • 페이지 로딩 시 추가 네트워크 요청이 필요하지만 최적화 가능합니다.
  • 외부 리소스에 의존하여 차단이나 로딩 실패가 발생할 수 있습니다.
  • 개발 중 외부 파일에 대한 여러 요청이 필요할 수 있습니다.

예시:

<head>


<!-- 현재 디렉토리에서 하위 폴더 styles의 스타일시트 파일 참조 -->
<link rel="stylesheet" href="style.css" />


<!-- 현재 디렉토리에서 styles/general의 스타일시트 파일 참조 -->
<link rel="stylesheet" href="/style.css" />


<!-- 상위 디렉토리에서 하위 폴더 styles의 스타일시트 파일 참조 -->
<link rel="stylesheet" href="../styles/style.css" />


</head>
div {
    color: red;
    font-size: 16px;
}

결과:

예시 효과 예시 효과

캐스케이드 순서와 우선순위

CSS 캐스케이드 순서(Cascading Order)와 명시도(Specificity)는 CSS 스타일 효과를 결정하는 두 가지 핵심 요소입니다.

캐스케이드 순서: CSS 캐스케이드 순서는 스타일 규칙의 가중치를 정의하며, 높은 것에서 낮은 순으로:

  1. 중요도(!important): !important로 선언된 스타일 규칙은 가장 높은 우선순위를 가집니다. 남용하면 유지보수가 어려워지므로 신중하게 사용해야 합니다.
  2. 작성자 스타일(Author Styles): 웹 개발자가 정의한 스타일로, 외부, 내부, 인라인 스타일을 포함합니다. 우선순위는 사용자 스타일과 사용자 에이전트 스타일 사이입니다.
  3. 사용자 스타일(User Styles): 사용자가 브라우저 플러그인이나 설정을 통해 설정한 스타일로, 사용자 에이전트 스타일보다 우선순위가 높습니다. 예: 글꼴 플러그인.
  4. 사용자 에이전트 스타일(User Agent Styles): 브라우저의 기본 스타일로, 가장 낮은 우선순위를 가집니다. 예: 글꼴.

우선순위: 같은 레벨의 여러 스타일 규칙이나 충돌하는 규칙이 있을 때, CSS는 우선순위에 따라 스타일을 표시합니다.

  1. 인라인 스타일(Inline Styles): HTML 태그 내에 지정된 스타일로, 가장 높은 우선순위.
  2. ID 선택자(id): ID 선택자로 지정된 스타일, 예: #header.
  3. 클래스, 속성, 의사 클래스 선택자(class): 클래스 선택자, 예: .container. 속성 선택자, 예: [type="text"]. 의사 클래스 선택자, 예: :hover.
  4. 요소 선택자: HTML 요소 이름의 선택자, 예: div, p.

우선순위가 같은 경우, 나중에 정의된 규칙이 우선합니다.

예시:

#header {
    color: red;
}


.container p {
    color: blue;
}


p {
    color: green;
}
CSS 상속

CSS 상속은 자식 요소가 부모 요소로부터 일부 속성값을 상속받는 특성입니다. 상속은 CSS의 중요한 특성으로, 스타일 작성을 간소화하고 코드의 유지보수성을 향상시킵니다. 모든 CSS 속성이 상속 가능한 것은 아니며, 일부 속성만 상속 가능으로 정의되어 있습니다.

상속 가능한 CSS 속성은 주로:

  • 텍스트 속성: font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
  • 색상 속성: background-color, border-color, color, outline-color
  • 테두리 속성: border-width, border-style, border-color
  • 박스 모델 속성: margin, padding, width, height, display, float, position, z-index

상속되지 않는 CSS 속성으로는 width, height, margin, padding 등의 박스 모델 속성, 위치 지정(position), 플로트(float), 플로트 해제(clear) 등의 레이아웃 속성이 있습니다.

자주 사용하는 CSS 속성과 기능:

기본 속성 width, height: 요소의 너비와 높이 설정. margin: 요소의 외부 여백 설정. padding: 요소의 내부 여백 설정. color, background-color: 요소의 색상과 배경색 설정. font-size, font-family, font-weight, font-style: 글꼴 크기, 글꼴 종류, 글꼴 굵기, 글꼴 스타일 설정.

레이아웃 속성 display: 요소의 표시 방식 설정. float: 요소의 플로트 방식 설정. position: 요소의 위치 설정. top, left, right, bottom: 상단, 좌측, 우측, 하단 위치 설정. z-index: 요소의 쌓임 순서 설정.

텍스트 속성 text-align: 텍스트 정렬 방식 설정. text-decoration: 텍스트 장식 설정. line-height: 줄 높이 설정. font-variant: 글꼴 변형 설정. text-transform: 텍스트 변환 설정. letter-spacing, word-spacing: 자간과 단어 간격 설정.

테두리 속성 border: 요소의 테두리 스타일 설정. border-width: 테두리 너비 설정. border-style: 테두리 스타일 설정. border-color: 테두리 색상 설정. border-radius: 테두리 둥근 모서리 설정.

배경 속성 background: 요소의 배경 설정. background-color: 배경색 설정. background-image: 배경 이미지 설정. background-repeat: 배경 이미지 반복 방식 설정. background-position: 배경 이미지 위치 설정. background-size: 배경 이미지 크기 설정.

전환 속성 transition: 요소의 전환 효과 설정. transition-property: 전환 속성 설정. transition-duration: 전환 시간 설정. transition-timing-function: 전환 함수 설정. transition-delay: 전환 지연 설정.

IT 강좌 HTML 강좌 CSS 강좌 JavaScript 강좌 Java 강좌 컴퓨터 시스템과 네트워크 hello css CSS 기초
공유:

댓글