[HTML/CSS] CSS의 모든 것

Tech/Web

[HTML/CSS] CSS의 모든 것

철테코 2022. 1. 22. 11:27

CSS는 Cascading Style Sheets의 약자로 콘텐츠의 글꼴, 색상, 크기 및 간격을 조정하거나 여러 열로 분할하거나 애니메이션 및 기타 기능을 추가하는 웹 페이지 스타일과 레이아웃에 사용된다.

# CSS 적용 방법

1. 외부 CSS 파일 적용 방법

CSS 파일의 적용은 .css 파일을 별도로 작성하고, HTML의 <link>에 참조한다.

이러한 방식을 가장 많이 사용한다. 구조와 스타일의 분리를 통해 유지보수성을 높여주기 때문이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>나의 CSS 실험</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>헬로우 월드!</h1>
    <p>이것은 나의 첫 번째 CSS 예제입니다</p>
  </body>
</html>

2. 내부 CSS 적용 방법

외부 CSS 파일 대신, HTML의 <head>안에 <style> 내부에 CSS를 배치하는 것이다.

많은 사람들은 내부 CSS 적용 방식을 선호하지 않는다. 유지보수성이 떨어지고, 성능면에서 효율적이지 않기 때문이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>나의 CSS 실험</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>헬로우 월드</h1>
    <p>이것은 나의 첫 번째 CSS 예제입니다</p>
  </body>
</html>

3. 인라인 스타일

인라인 스타일은 style 속성을 두어 한 요소(태그)에만 영향을 주는 CSS 선언 방식이다.

이러한 방법 또한 유지보수성이 떨어지고, CSS와 HTML의 구조가 혼합되어 있는 형태로

코드를 읽고 이해하는데 어려움을 준다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>나의 CSS 실험</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">헬로우 월드!</h1>
    <p style="color:red;">이것은 나의 첫 번째 CSS 예제입니다</p>
  </body>
</html>

# CSS Selectors - 선택자

선택자는 스타일을 지정할 웹 페이지의 HTML 요소(tag)를 대상으로 하는데 사용된다.

스타일을 지정할 tag를 선택할 때 사용한다.

선택자의 유형은 다음과 같다.

1. 태그 직접 지정 - <h1>과 같은 HTML 태그를 대상으로 하는 선택자

h1 { }

2. Class - class를 대상으로 하는 선택자

.box { }

3. ID - ID를 대상으로 하는 선택자

#unique { }

4. 속성 선택자

이 선택자 그룹은 요소(tag)에 특정 속성이 있는지에 따라 요소를 선택하는 방법을 제공한다.

a[title] { }

또는 속성에서 특정 값을 가졌을 때를 기반으로 선택한다.

a[href="https://example.com"] { }

5. Pseude-class 및 pseudo-elements

이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다.
예를 들어 :hover 은 마우스 포인터가 위에 있을때의 스타일을 지정하는 것으로 버튼에 마우스가 올라가면 색상이 변경되는 그런 방식으로 사용할 수 있다.

a:hover { }

또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함된다.

예를 들어, ::first-line 은 항상 <span> 이 첫 번째 라인을 감싸는 것처럼 작동하여,

첫 번째 텍스트 라인 (아래의 경우 <p>) 을 선택합니다.

p::first-line { }

6. 결합자 Combinators

최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다.

예를 들어 다음은 자식 결합자 (>) 를 사용하여 <article> 의 자식 <p>를 선택합니다:

article > p { }