1. 웹 문서를 디자인하는 스타일시트 언어
CSS (Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어입니다.
HTML이 문서의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어합니다.
CSS는 주로 HTML 문서의 <head> 요소 안에서 <style> 태그를 사용하여 정의됩니다.
또는 외부 CSS 파일을 연결하여 사용할 수 있습니다.
🔹 인라인 스타일
<style> 요소 내부에 CSS 속성을 직접 입력할 수 있습니다.
🔹 외부 CSS 파일 연결
<link> 요소에 href 속성으로 CSS 파일명을 입력하면 HTML 문서와 외부에 있는 CSS 파일이 연결됩니다.
<link rel="stylesheet" href="styles.css">
2. 선택자 (Selectors)
CSS는 HTML 요소를 선택하기 위해 선택자를 사용합니다.
선택자는 스타일을 적용할 대상을 지정합니다.
예시 코드에서 <body>, <h1>, <p>는 각각 <body> 요소, <h1> 요소, <p> 요소를 선택하는 기본 선택자입니다.
같은 요소가 두 개 이상 있어서 각각의 스타일을 지정하고 싶을 때는 id, class 선택자를 사용합니다.
🔹 id 선택자 (사용법: #ID)
- 문서 내에서 유일한 식별자를 가진 요소를 선택합니다.
- HTML 문서 전체에서 동일한 ID를 가지는 요소가 2개 이상 있으면 안 됩니다.
- ID는 유일성을 보장하기 위해 사용됩니다.
🔹 class 선택자 (사용법: .class)
- 여러 요소를 그룹화하고, 해당 그룹에 스타일을 적용합니다.
- 하나의 요소가 여러 클래스를 가질 수 있으며, 여러 요소가 동일한 클래스를 가질 수 있습니다.
3. 속성과 값
스타일을 지정하기 위해서는 속성과 값의 쌍을 사용합니다.
위 예시처럼 속성(property)과 값(value)은 콜론(:)으로 연결되며, 세미콜론(;)으로 끝맺습니다.
실습
과제시작 전 체크!
<link rel="stylesheet" href="styles.css" />- 이 태그가 무슨 뜻인지 알아보고 css파일을 추가하세요!
- 배경색은
#f4f4f4로 지정하세요. - 폰트는 Arial로, Arial이 없는 경우 sans-serif로 지정하세요.
- 제목의 글자색은
#3498db로 지정하세요. - 할 일 목록의 글자 크기는 18px, 아래 마진(margin)을 10px로 지정하세요.
- 제목(오늘의 할 일)이 하이퍼링크라서 자동으로 적용된 스타일(파란색 글씨, 밑줄)을 제거하세요.
- ‘실습 도전하기’만 bold처리 하세요.
or
결과
안녕하세요.