CSS 개요 및 CSS 기본 사용법

개요

CSS (Cascading Style Sheets): HTML 문서의 스타일을 정의하는 언어.
CSS는 웹 페이지의 디자인, 레이아웃, 색상, 폰트 등 다양한 시각적 요소를 제어하는 데 사용된다.

CSS는 Cascading(계단식) 방식으로 스타일을 적용한다. 여러 개의 스타일 규칙이 있을 때, 우선순위에 따라 스타일이 적용된다.

CSS 기본 사용법

1. CSS 작성 방법

인라인, 내부 스타일 시트, 외부 스타일 시트

1. 인라인 스타일
   HTML 태그 내에 직접 CSS를 삽입하는 방식. 주로 간단한 스타일을 적용할 때 사용함.

   <p style="color: blue; font-size: 18px;">이 텍스트는 파란색입니다.</p>

2. 내부 스타일 시트 (Internal CSS)
   HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 CSS를 정의하는 방법.

   <html>
   <head>
       <style>
           body {
               background-color: #f0f0f0;
               font-family: Arial, sans-serif;
           }
   
           p {
               color: red;
           }
       </style>
   </head>
   <body>
       <p>텍스트</p>
   </body>
   </html>

3. 외부 스타일 시트 (External CSS)
   스타일을 별도의 .css 파일로 작성하고, HTML 문서에서 <link> 태그를 통해 연결하는 방법.
   ex) 웹 폰트 적용.

   • styles.css 파일:

     body {
         background-color: #f0f0f0;
         font-family: Arial, sans-serif;
     }
     
     p {
         color: red;
     }

   • HTML 파일:

     <html>
     <head>
         <link rel="stylesheet" type="text/css" href="styles.css">
     </head>
     <body>
         <p>텍스트</p>
     </body>
     </html>

2. CSS 선택자 (Selectors)

CSS에서 선택자는 스타일을 적용할 HTML 요소를 지정하는 부분.
선택자에는 우선순위가 있기 때문에 잘 확인해야한다.

• 기본 선택자

  • 태그 선택자: 특정 태그에 스타일 적용

    p {
        color: blue;
    }

    <p> 태그에 파란색 적용

  • 아이디 선택자:

    #header {
        font-size: 24px;
    }

  • 클래스 선택자:

    .important {
        font-weight: bold;
    }

• 복합 선택자

  • 자식 선택자: 부모 요소 안의 자식 요소 선택

    div > p {
        color: green;
    }

    <div> 요소의 직접적인 자식인 <p> 태그에 스타일을 적용한다.

  • 후손 선택자: 부모 요소 내 모든 후손 요소 선택

    div p {
        color: yellow;
    }