-
CSS (스타일 시트)란?프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:15
스타일 시트 (CSS)
- Cascading Style Sheets : 계단형 스타일 시트
- 단계적으로 스타일 적용
- 여러 스타일이 겹치면 맨 마지막 스타일 적용
- HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어
- 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용
가능한 작업
- HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정
- 정렬 방식, 그림자, 동적인 기능 다양한 효과
스타일 시트 장점
- 자유롭게 웹 문서 편집
- 원하는 형태로 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집
- 통일감 있는 문서 작성
- 한 번만 정의하여 문서에 일관되게 적용 가능
- 편리한 문서 관리
- 외부스타일 스타일 시트 파일을 사용하여
- 여러 웹 문서에 동일한 스타일 시트 사용 가능
- 한 번만 한 곳에서 수정하여 모든 웹 문서의 스타일을 동시에 변경 가능
스타일 시트 적용 방법
- (1) 문서 내부에 정의 (Embedded Style)
- (2) 외부 문서에서 연결 (Linked Style)
- (3) 태그에 직접 정의 (Inline Style)
(1) 문서 내부에 정의 (Embedded Style)
- <head> 태그에 삽입
문서 전체에 특정 효과 주기 위해 사용
(2) 외부 문서에서 연결 (Linked Style)
- 별도의 스타일 시트 문서(파일 xx.css) 만들어 놓고
- 필요한 HTML 문서에 연결하여 사용
- 웹 사이트의 모든 문서에 동일한 효과를 적용하여 웹 사이트에 통일감을 주고 편리하게 관리 가능
(3) 태그에 직접 정의 (Inline Style)
- 특정 태그에만 스타일 시트를 적용할 때 사용
다중 스타일 시트
- 하나의 요소에 대하여 외부, 내부, 인라인 스타일이 서로 다르게 지정되어 있는 경우 적용되는 스타일
- 맨 마지막 스타일 적용됨 (덮어씀)
- 스타일 적용 순서
- (1) 웹 브라우저 디폴트 값
- (2) 외부 스타일
- (3) <head> 부분의 내부 스타일
- (4) 태그에 정의된 인라인 스타일 (최종 적용된 스타일)
'프론트엔드 프로그래밍 > CSS' 카테고리의 다른 글
반응형 웹 (가변 그리드, 미디어 쿼리, 뷰 포트, 플렉서블 박스) (0) 2022.01.26 CSS 연습문제 (0) 2022.01.26 자식 / 자손 선택자 (상속 선택자) + 효과(스크롤, 투명도, 그림자) (0) 2022.01.26 CSS 속성 선택자 (0) 2022.01.26 CSS의 기본 형식 + 선택자(태그, 아이디, 클래스) (0) 2022.01.26