250x250

Link

Notice

관리 메뉴

오봉이와 함께하는 개발 블로그

CSS 개요 본문

FE/CSS

오봉봉이 2021. 12. 3. 17:14

728x90

Cascading Style Sheets : 계단형 스타일 시트
단계적으로 스타일 적용
여러 스타일이 겹치면 맨 마지막 스타일 적용
HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어
일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용 가능
가능한 작업
- HTML문서 내의 폰트, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정
- 정렬 방식, 그림자, 동적 기능 등 다양한 효과
장점
- 자유롭게 원하는 형태로 웹 문서 편집 가능
- 통일감 있는 문서 작성
  - 한 번만 정의하여 문서에 일관되게 적용 가능
- 편리한 문서 관리
  - 외부 스타일 시트 파일을 사용하여, 여러 웹 문서에 동일한 스타일 시트 사용 가능
  - 한 번만 한 곳에서 수정하여 모든 웹 문서의 스타일을 동시에 변경 가능
적용 방법
- 문서 내부에 정의(Embedded Style)
- 외부 문서에서 연결(Linked Style)
- 태그에 직접 정의(Inline Style)

<head>
    <style type="text/css">
        태그명 {속성:값;}
    </style>
</head>

<head>
    <<link rel="stylesheet" type="text/css" href="파일명">
</head>

<body style="font-size; 15pt; color:blue;">
<button onclick="green()" style="width:120; height:30;">
<태그명 style="속성:값;">

하나의 요소에 대하여 외부, 내부, 인라인 스타일이 서로 다르게 지정되어 있는 경우 적용되는 스타일
맨 마지막 스타일 적용됨(덮어씀)
스타일 적용 순서
1. 웹브라우저 디폴트 값
2. 외부 스타일
3. <head> 부분의 내부 스타일
4. 태그에 직접 정의된 인라인 스타일(제일 우선순위가 늦다)

728x90

'FE/CSS' Related Articles

Comments