반응형
CSS는 HTML과 함께 웹 표준 개발의 기본 개념이다. HTML이 텍스트나 이미지 등 각 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 텍스트 색상이나 크기, 이미지 등 디자인 요소를 담당한다고 할 수 있다. 따라서, CSS를 이용하면 한층 더 업그레이드된 웹 디자인을 할 수 있다.
1. 스타일 시트
여러 가지의 스타일 규칙이 사용되는 경우가 많아서 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓는 것을 '스타일 시트'라고 한다.
내부 스타일 시트
웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것이다. <head>태그 안에 작성한다.
<head>
<style>
내부 스타일 시트
</style>
</head>외부 스타일 시트
스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와서 사용하는 것이다.
<link rel="stylesheet" href="외부 스타일 파일 경로">2. 주요 선택자
전체 선택자
말 그대로 스타일을 모든 요소에 적용할 때 사용한다.
* {
속성:속성 값; 속성: 속성값; ...
}태그 선택자
특정한 태그가 쓰인 모든 요소에 스타일을 적용할 수 있다.
태그 {
스타일
}클래스 선택자
같은 태그이지만 다른 스타일을 사용하고 싶다면 클래스 선택자를 이용한다.
.클래스명 {
스타일
}id 선택자
클래스 선택자와 차이점은 id 선택자는 문서 안에서 한 번만 적용할 수있다. 따라서, 중복해서 사용할 수 없다.
#아이디명 {
스타일
}본 내용은 이지스퍼블리싱의 'Do it! HtML5 + CSS3 웹 표준의 정석'을
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| 색상과 배경 (0) | 2021.01.08 |
|---|---|
| 텍스트 관련 스타일 (0) | 2021.01.07 |
| 폼 관련 태그들 (1) | 2021.01.05 |
| 이미지와 하이퍼링크 (0) | 2021.01.04 |
| 텍스트 관련 태그 (0) | 2021.01.04 |