입문자를 위한 CSS 기초 강의(1)

CSS란?

---

• Cascading Style Sheets를 의미한다.
• HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다.
• CSS는 HTML 문서에 스타일을 더해준다.
• CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다.
  
  

CSS 기본 문법

---

선택자{ 속성명: 속성값; }

• 선택자: 여떤요소에 스타일을 적용할지에 대한 정보
• {중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역
• 속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상,크기 등)
• 속성값: 어떻게 정의하고 싶은지에 대한 정보

HTML에 CSS를 더하려면..

---

HTML문서에 CSS문서(코드)를 적용하고자 할 때는 다음과 같은 방식들을 사용할 수 있다.

1) 인라인 스타일

• 태그에 style 속성을 추가하여 요소에 직적접으로 스타일을 정의하는 방식이라서 선택자는 필요없다.
• 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.

<p style="color: blueviolet;"></p>

2) 스타일 태그

• HTML 문서에 style 태그를 추가하여 그안에 CSS 코드를 작성할 수 있다.

<style>
p{ color: chocolate;}
</style>

3) 문서 간의 연결

• 확장자가 *.CSS인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고, HTML문서에 이를 연결해줄 수 있다.
• link 태그를 사용한다.
• link는 HTML문서의 head 내부에서 사용해야 한다.

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

href: 연결하고자 하는 외부 소스의 url을 기술하는 속성
rel: 현재문서(HTML)와 외부소스의 연관 관계를 기술하는 속성