css란?
Cascading Style Sheets
- 웹문서를 꾸며주기 위해 사용하는 언어.
- CSS 코드는 CSS파일에 작성한다. 확장자는 *.css이다.
- CSS 코드는 HTML 문서에 스타일을 추가(정의)하는 언어. 따라서 HTML 문서가 존재하지 않을 때는 단순 텍스트에 불과하다.
CSS의 기본 문법
선택자 {
속성명: 속성값;
/* 이것은 주석입니다 */
}선택자: 어떤 요소에 스타일을 적용할지에 대한 정보
{중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역
속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보
속성값: 어떻게 정의하고 싶은지에 대한 정보
주석: 주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. 코드에 메모를 남기기 위한 용도로 사용
HTML에 CSS를 더하려면
인라인 스타일: 태그에 직접 기술하기
<p style="color:red";>
빨간색 글자입니다.
</p>
- 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식 (선택자 필요 없음)
- 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 것이 좋음
스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기
<style>
/* style 태그 안에는 CSS 코드를 작성해야 한다 */
p{ color: red; }
</style>
- HTML 문서에
style태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다
문서 간의 연결: 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
<link href="./styel.css" rel="stylesheet">
- href: 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel: 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
=>link태그는 HTML 문서의head내부에서 사용해야 한다
CSS 선택자
기본 선택자
전체 선택자
- 모든 요소를 선택한다
- *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.
*{ color: blue; }=> 문서 내 모든 요소의 글자색을 파란색으로 지정
태그 선택자 (유형 선택자)
- 주어진 이름을 가진 요소를 선택한다
- 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다
p{ color: blue; }=> 문서 내 모든
p태그 요소의 글자색을 파란색으로 지정
클래스 선택자
- 주어진 class 속성값을 가진 요소를 선택한다
- 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다
.text{ color: blue; }=> 문서내 class가 "text"인 모든 요소의 글자색을 파란색으로 지정
아이디 선택자
- 주어진 id 속성값을 가진 요소를 선택한다
- id는 고유한(unique) 식별자 역할을 하는 전역 속성이다
#topic{ color: blue; }=> 문서내 id가 "topic"인 요소의 글자색을 파란색으로 지정
그룹 선택자
- 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용
- 쉼표(,)를 이용해 선택자를 그룹화한다
h1, p, div{ color: blue; }=> 문서 내 모든 h1, p, div 태그 요소의 글자색을 파란색으로 지정한다
선택자가 겹치는 경우
- 선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다
- 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다
