[CSS 핵심강좌] 1. 소개

CSS (Cascading Style Sheets)은 HTML로 작성된 문서의 외관과 형식을 설명하는 스타일 시트 언어입니다. HTML, XHTML 및 XML로 작성된 웹 페이지와 사용자 인터페이스의 프리젠테이션을 제어하는 데 사용됩니다.

CSS를 사용하면 색상, 글꼴, 크기, 레이아웃 등 HTML 요소에 스타일을 적용할 수 있습니다. 이를 통해 웹 페이지의 내용과 프리젠테이션을 분리하여 웹 사이트를 유지 관리하고 업데이트하기 쉬워집니다.

HTML 문서에 CSS 스타일을 적용하는 세 가지 방법이 있습니다:

1. 인라인 스타일

스타일은 "style" 속성을 사용하여 HTML 요소에 직접 적용됩니다.

<p style="color: red;">This text will be displayed in red.</p>

위의 HTML 코드는 "p" 요소에 직접 적용된 스타일 속성을 사용하여 텍스트 색상을 빨간색으로 지정합니다.

스타일은 HTML 문서의 head 섹션에 "style" 태그를 사용하여 정의됩니다.

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>This text will be displayed in blue.</p>
</body>

위의 HTML 코드는 "head" 섹션 내부에 "style" 태그를 사용하여 "p" 요소의 텍스트 색상을 파란색으로 지정합니다.

스타일은 별도의 CSS 파일에 정의되고 head 섹션에서 "link" 태그를 사용하여 HTML 문서에 연결됩니다.

<head>
  <link rel="stylesheet" href="style.css">
</head>

위의 HTML 코드는 "head" 섹션 내부에서 "link" 태그를 사용하여 "style.css" 파일에 정의된 스타일을 HTML 문서에 연결합니다.

style.css 파일 내부:

p {
  color: green;
}

위의 CSS 코드는 "p" 요소의 텍스트 색상을 초록색으로 지정합니다.

CSS에는 선택자와 같은 여러 고급 기능이 있으며, 페이지의 특정 요소를 대상으로 하는 기능과 동일한 요소에 여러 스타일이 적용될 때 우선순위를 결정하는 기능 등이 있습니다.

결론적으로, CSS는 시각적으로 매력적이고 잘 구성된 웹 사이트를 만드는 데 필수적인 도구입니다.

[CSS 핵심강좌] 2. 선택자

CSS 선택자는 웹 페이지에서 요소를 선택하고 스타일을 적용하는 데 사용되는 메커니즘입니다. 여러 유형의 선택자가 있습니다 1. 요소 선택자 특정 유형의 모든 요소를 선택합니다. 예를 들어,

ccusean.tistory.com