[CSS] CSS 문법

18 Jan 2025 in JavaScript

웹 개발 생산성을 극대화하는 Emmet의 강력한 기능과 활용법을 알아보자.

• CSS란?
• CSS 문법 기초
• CSS 적용 방법
• CSS 프로퍼티 값의 단위

---

CSS란?

• CSS : Cascading Style Sheets
• 웹 페이지의 시각적 표현을 담당하는 스타일 언어
  • 다양한 디바이스의 화면 크기에 대응하는 반응형 디자인 구현
  • 내용과 디자인의 분리로 유지보수성 향상
• HTML VS CSS
  • HTML
    • 웹페이지 구조와 콘텐츠 정의
  • CSS
    • HTML 요소의 스타일과 레이아웃 지정

CSS 문법 기초

• 선택자 (Selector)

  • 스타일을 적용할 HTML 요소 지정

  •     /* 요소 선택자 */
        p {
        color: blue;
        }
    
        /* 클래스 선택자 */
        .highlight {
        background-color: yellow;
        }
    
        /* ID 선택자 */
        #header {
        font-size: 24px;
        }
    
        /* 전체 선택자 */
        * {
        margin: 0;
        padding: 0;
        }
        /* 무조건 뒤에 오는게 이긴다. 뒤로 갈수록 덮어씌우는 개념 */
        /* 아이디랑 클래스 중 아이디가 이김 */
    
    
    

• 속성 (Property)
  • 변경하고자 하는 스타일의 종류
• 값 (Value)
  • 속성에 적용할 구체적인 스타일 값
• 선언 (Declaration)
  • 속성과 값의 쌍
• 규칙 (Rule)
  • 선택자와 선언 블록의 조합

    선택자 {
        속성: 값;
        속성: 값;
    }

    /* 구체적인 예시 */
    h1 {
        color: blue;
        font-size: 18px;
    }

CSS 적용 방법

1. 인라인 스타일
   • HTML 요소 내부에 직접 스타일 적용
2. 내부 스타일시트
   • head 섹션 내 style 태그에 CSS 작성
3. 외부 스타일시트
   • 별도의 .css파일에 스타일 정의
   • HTML 문서의 head 섹션에서 링크로 연결

CSS 프로퍼티 값의 단위

• 크기 단위
  • px : 픽셀 단위, 절대값
  • % : 백분율 단위, 상대값
  • em : 요소에 지정된 사이즈에 상대적인 배수 단위
  • rem : 최상위 요소(html)의 사이즈 기준 배수 단위
  • Viewport 단위 : vh, vw, vmin, vmax