[HTML 요약정리] 04. 태그를 표현하는 CSS와 Advanced CSS(CSS3)

 

 

1. 태그를 표현하는 CSS

CSS (Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용된다.

태그를 표현하는 CSS는 HTML 요소의 스타일을 지정하는 기본적인 방법이다.

• 선택자 (Selectors): CSS는 HTML 요소를 선택하고 스타일을 적용하는 데 사용된다. 주요 선택자 유형은 다음과 같다.
  • 태그 선택자: 특정 HTML 태그에 스타일을 적용한다.
    

    p {
        color: blue;
    }

    
    
    
  • 클래스 선택자: 클래스 속성이 지정된 요소에 스타일을 적용한다. 클래스는 .으로 시작한다.
    

    .example {
        font-size: 16px;
    }

    
    
    
  • 아이디 선택자: 특정 ID가 지정된 요소에 스타일을 적용한다. ID는 #으로 시작한다.
    

    #unique {
        background-color: yellow;
    }

    
    
    
  • 속성 선택자: 특정 속성을 가진 요소에 스타일을 적용한다.
    

    input[type="text"] {
        border: 1px solid gray;
    }

    
    
    
• 스타일 속성: CSS 속성은 HTML 요소의 스타일을 정의한다.
                       일반적인 속성에는 색상, 폰트, 배경, 여백, 경계 등이 포함된다.
  • 색상: color, background-color
  • 폰트: font-family, font-size, font-weight
  • 여백과 패딩: margin, padding
  • 경계: border, border-radius
  • 위치와 레이아웃: display, position, float

 

2. Advanced CSS (CSS3)

CSS3는 CSS의 최신 버전으로, 웹 디자인에 새로운 기능과 향상된 스타일링 옵션을 제공한다.

주요 기능과 개념은 다음과 같다.

• 레이아웃 모듈:
  • Flexbox: 유연한 레이아웃을 생성하여 컨테이너 내의 요소를 정렬하고 분배한다.
    

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    
    
    
  • Grid: 2차원 레이아웃 시스템으로, 행과 열을 기반으로 복잡한 레이아웃을 구성한다.
    

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    
    
    
• 애니메이션:
  • 트랜지션: 요소의 상태 변화에 애니메이션 효과를 추가한다.
    

    .box {
        transition: background-color 0.3s ease;
    }
    .box:hover {
        background-color: red;
    }

    
    
    
  • 키프레임 애니메이션: CSS 애니메이션을 정의하여 요소의 스타일을 점진적으로 변경한다.
    

    @keyframes slide {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }
    .slide-in {
        animation: slide 0.5s ease-out;
    }

    
    
    
• 그라디언트:
  • 배경 그라디언트: 요소의 배경에 그라디언트를 적용한다.
    

    .gradient-background {
        background: linear-gradient(to right, red, yellow);
    }

    
    
    
• 반응형 디자인:
  • 미디어 쿼리: 다양한 화면 크기와 장치에 맞춰 스타일을 조정한다.
    

    @media (max-width: 600px) {
        .responsive {
            font-size: 14px;
        }
    }

    
    
    
• 텍스트와 폰트:
  • 웹 폰트: @font-face 규칙을 사용하여 웹 폰트를 추가한다.
    

    @font-face {
        font-family: 'MyWebFont';
        src: url('mywebfont.woff2') format('woff2');
    }
    .custom-font {
        font-family: 'MyWebFont', sans-serif;
    }

    
    
    
  • 텍스트 그림자: 텍스트에 그림자 효과를 추가합니다.
    

    .shadow-text {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

 

 

2024.08.26