CSS와 스타일시트 종류

8946 단어 CSSwebCSS

CSS 란?

Cascading Style Sheets
HTML같은 마크업 언어가 실제로 표시되는 방법을 기술하는 언어

CSS는 스타일시트 종류에 따라 다르게 표시할 수 있습니다.

  • 인라인 스타일시트
  • 내부 스타일시트
  • 외부 스타일시트

아래의 기본적인 코드를 이용해서 스타일시트마다 어떻게 다른지 알아보겠습니다.

기본 코드

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
</head>

<body>
    <div>test</div>
</body>

</html>

인라인 스타일시트

요소의 style 속성을 사용합니다.

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
</head>

<body>
    <div style="color: red;">test</div>
</body>

</html>

내부 스타일시트

head 태그 안에 style 태그를 사용합니다.

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <style>
        div { color: red; }
    </style>
</head>

<body>
    <div>test</div>
</body>

</html>

외부 스타일시트

head 태그 안에 link 태그를 사용합니다.

rel 은 현재문서와 연결문서와의 관계를 표시합니다.
href 는 적용할 css 파일의 위치를 가르킵니다.

일반적으로 외부 스타일시트를 사용합니다.

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div>test</div>
</body>

</html>

+ 결론

내부 스타일시트와 인라인 스타일시트는 재사용성이 떨어지고, 개발 규모가 커졌을 때 관리가 힘들 수 있습니다.
따라서 외부 스타일시트를 사용하는 것이 적절해 보입니다.

최적화 문제 결정 문제로 바꿔 풀기
Java 함수 프로그래밍(10): 컬렉터

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage