HTML
CSS와 함께 HTML 사용하기

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
수색…


소개

CSS 는 페이지의 HTML 요소에 스타일을 제공합니다. 인라인 스타일은 태그에서 스타일 속성을 사용하는 것을 포함하며 권장하지 않습니다. 내부 스타일 시트는 <style> 태그를 사용하며 페이지의 지정 부분에 대한 규칙을 선언하는 데 사용됩니다. 외부 스타일 시트는 CSS의 외부 파일을 취하여 문서에 규칙을 적용하는 <link> 태그를 통해 사용될 수 있습니다. 이 주제에서는 세 가지 첨부 메소드 사용에 대해 다룹니다.

통사론

  • <link rel="stylesheet" type="text/css" href="stylesheet.css">
  • <style></style>

외부 스타일 시트 사용

문서 head 에 link 속성을 사용하십시오. 

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

웹 사이트에서 제공하는 스타일 시트를 콘텐츠 전달 네트워크 또는 CDN을 통해 사용할 수도 있습니다. (예 : 부트 스트랩) : 

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

일반적으로 웹 사이트에서 프레임 워크에 대한 CDN 지원을 찾을 수 있습니다.

내부 스타일 시트

<style> 태그를 사용하여 내부적으로 CSS 요소를 포함 할 수도 있습니다. 

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

여러 개의 내부 스타일 시트가 프로그램에도 포함될 수 있습니다. 

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

인라인 스타일

style 속성을 사용하여 특정 요소의 스타일을 지정할 수 있습니다. 

<span style="color: red">This text will appear in red.</span>

참고 : CSS를 사용하면 콘텐츠를 프레젠테이션과 분리하는 것이 좋습니다.

여러 스타일 시트

여러 스타일 시트를로드 할 수 있습니다. 

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

이후의 파일과 선언은 이전 파일과 선언을 덮어 씁니다 . 따라서 general.css 에 다음 내용이 포함되어있는 경우 

body {
    background-color: red;
}

specific.css 에는 다음이 포함됩니다. 

body { 
    background-color: blue;
}

둘 다 사용하면 문서의 배경이 파란색으로 표시됩니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow