코딩/CSS

CSS 표현 방식 정읭

tomsdaily 2024. 6. 25. 22:51
반응형

CSS(Cascading Style Sheets)는 웹 페이지의 시각적 표현을 담당하는 스타일링 언어입니다. HTML이나 XML로 작성된 문서의 레이아웃, 색상, 글꼴 등을 정의할 수 있습니다. CSS는 여러 가지 방식으로 웹 페이지에 적용될 수 있습니다.

  1. 인라인 스타일(inline style): HTML 요소 내에 직접 스타일을 작성하는 방식입니다. 예를 들어, <p style="color: blue;">파란색 텍스트</p>와 같이 사용할 수 있습니다. 그러나 유지보수가 어렵고 코드의 가독성을 떨어뜨리기 때문에 권장되지 않습니다.
  2. 내부 스타일(internal style): HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 정의하는 방식입니다. 예를 들어:이는 특정 HTML 문서에만 적용되며, 재사용성이 낮습니다. 
    <head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
  3. 외부 스타일(external style): 별도의 CSS 파일을 작성하고 HTML 문서에서 이를 링크하여 사용하는 방식입니다. 예를 들어, styles.css라는 파일을 만들고 HTML 문서의 <head> 섹션에서 <link> 태그로 연결합니다.이는 재사용성이 높고 유지보수가 용이하며, 여러 HTML 문서에서 동일한 스타일을 적용할 수 있습니다. 
    <head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS는 계층적(Cascading) 구조를 가지므로, 동일한 요소에 대해 여러 스타일 규칙이 적용될 경우 우선순위에 따라 최종 스타일이 결정됩니다. 우선순위는 인라인 스타일 > 내부 스타일 > 외부 스타일 순으로 적용됩니다.

또한, CSS는 미디어 쿼리(Media Query)를 통해 다양한 디바이스와 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어, 데스크탑과 모바일에서 다른 레이아웃을 적용하는 것이 가능합니다.

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

CSS를 잘 활용하면 웹 페이지의 디자인을 더욱 풍부하고 일관성 있게 만들 수 있습니다. 최신 CSS 기능과 프레임워크를 활용하면 보다 효율적으로 스타일을 관리할 수 있으며, 반응형 웹 디자인(responsive web design)을 구현하는 데 큰 도움이 됩니다. 앞으로도 CSS의 발전을 통해 더욱 다양한 디자인 가능성을 탐구해 보시기 바랍니다.

도움이 되었기를 바랍니다. 추가로 궁금한 사항이 있으면 언제든지 질문해 주세요!

반응형