반응형
CSS 스타일 적용
1. Inline Style Sheet 인라인 스타일
- 스타일을 주고자 하는 view파일 내에 style속성을 넣는 방식
- 인라인 스타일의 css 적용은 내가 원하는 선택자에 빠르게 적용할 수 있다는 장점이 있지만 많은 부분에 css를 적용하는 데에는 한계가 있으며 재사용도 불가능하다는 단점이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Inline Style Sheet 적용 예제</title>
</head>
<body>
<p style="color:blue">글자색 변경하기</p>
</body>
</html>
2. Internal Style Sheet 내부 스타일
- 스타일을 주고자 하는 view파일 내에 스타일을 정의하는 방식
- view파일 내에 스타일을 정의하기 때문에 여러 개의 파일을 만들 필요도 업로드할 필요도 없는 장점이 있지만 같은 파일 내에 정의하기 때문에 파일의 사이즈와 로딩 시간을 증가시키는 있는 단점이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Internal Style Sheet 적용 예제</title>
<style type="text/css">
p{color:red}
</style>
</head>
<body>
<p>글자색 변경하기</p>
</body>
</html>
3. External Style Sheet 외부 스타일
- 스타일이 정의된 파일을 별도로 생성하여 해당 파일을 불러와 스타일을 적용하는 방식
- 일반적으로 많이 쓰는 방식이며 css코드가 별도의 문서로 있어 view파일 구조가 깔끔해지고 유지보수 시 또는 협업을 할 때도 css파일만 수정하면 되기 때문에 효율을 극대화시키는 장점이 있고 크로스브라우징에 따라 권장하는 방식으로 전체 페이지를 잘 구조화하여야 하고 여러 개의 파일을 사용해야 하므로 파일 관리가 잘 이루어져야 하여 복잡할 수 있는 단점이 있다.
/* externalStyle.css 파일 생성 */
p{color:yello}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>External Style Sheet 적용 예제</title>
<link rel="stylesheet" type="text/css" href="externalStyle.css" />
</head>
<body>
<p>글자색 변경하기</p>
</body>
</html>반응형
'Web Programming > ----- CSS -----' 카테고리의 다른 글
| [CSS] css background-image 속성 (0) | 2021.11.25 |
|---|---|
| [CSS] css의 기본 문법 (0) | 2021.11.10 |
| [CSS] css 란 무엇인가? (0) | 2021.10.22 |