CSS 튜토리얼
CSS 시작하기

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
수색…


비고

스타일은 여러 가지 방법으로 저작 될 수 있으므로 소스 HTML 문서에 지정된 경우 다양한 정도의 재사용 및 범위를 허용합니다. 외부 스타일 시트는 HTML 문서 전체에서 재사용 할 수 있습니다. 포함 된 스타일 시트는 지정된 스타일이 포함 된 전체 문서에 적용됩니다. 인라인 스타일은 지정된 개별 HTML 요소에만 적용됩니다.

버전

번역 출시일
1 1996-12-17
2 1998-05-12
삼 2015-10-13

외부 스타일 시트

외부 HTML 스타일 시트는 각 HTML 문서에 <link> 요소를 배치하여 여러 HTML 문서에 적용 할 수 있습니다.

<link> 태그의 속성 rel 은 "stylesheet" , href 속성은 스타일 시트의 상대 경로 또는 절대 경로로 설정되어야합니다. 상대 URL 경로를 사용하는 것이 일반적으로 좋은 방법으로 간주되지만 절대 경로도 사용할 수 있습니다. HTML5에서는 type 속성 을 생략 할 수 있습니다 .

스타일이 요소 스타일보다 먼저로드되도록 <link> 태그를 HTML 파일의 <head> 태그에 배치하는 것이 좋습니다. 그렇지 않으면 사용자에게 스타일이없는 콘텐츠의 플래시가 표시됩니다 .

예

hello-world.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css 

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

CSS 파일에 대한 정확한 경로를 href에 포함해야합니다. CSS 파일이 HTML 파일과 동일한 폴더에 있으면 위의 예와 같이 경로가 필요하지 않지만 폴더에 저장되어 있으면이 href="foldername/style.css" 와 같이 지정하십시오. 

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

외부 스타일 시트는 CSS를 처리하는 가장 좋은 방법으로 간주됩니다. 이것에 대한 간단한 이유가 있습니다 : 예를 들어 하나의 스타일 시트로 제어되는 100 페이지의 사이트를 관리 할 때 링크 색상을 파란색에서 녹색으로 변경하려면 변경하기가 훨씬 쉽습니다 귀하의 CSS 파일에서 변경 사항을 100 페이지에 걸쳐 "계단식"으로 변경하는 것은 100 개의 별도 페이지로 이동하여 동일한 변경을 100 번 반복하는 것입니다. 웹 사이트의 모양을 완전히 바꾸려면이 하나의 파일 만 업데이트하면됩니다.

필요에 따라 HTML 페이지에 많은 CSS 파일을로드 할 수 있습니다. 

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

CSS 규칙은 몇 가지 기본 규칙과 함께 적용되며 순서는 중요합니다. 예를 들어 main.css 파일에 코드가있는 경우 

p.green { color: #00FF00; }

'녹색'클래스를 사용하는 모든 단락은 밝은 녹색으로 표시되지만, main.css 뒤에 다른 .css 파일을 포함 시키면 재정의 할 수 있습니다. 다음 코드를 사용하여 override.css를 가질 수 있습니다. main.css를 따르십시오. 예를 들면 다음과 같습니다. 

p.green { color: #006600; }

이제 '녹색'클래스를 사용하는 모든 단락은 밝은 녹색이 아닌 어두운 녹색으로 작성됩니다.

'중요'규칙, 특수성 및 상속과 같은 다른 원칙이 적용됩니다.

누군가 먼저 웹 사이트를 방문하면 브라우저는 현재 페이지의 HTML과 링크 된 CSS 파일을 다운로드합니다. 그런 다음 다른 페이지로 이동하면 브라우저는 해당 페이지의 HTML 만 다운로드하면됩니다. CSS 파일은 캐시되므로 다시 다운로드 할 필요가 없습니다. 브라우저가 외부 스타일 시트를 캐시하므로 페이지가 더 빨리로드됩니다.

내부 스타일

HTML 문서 내의 <style></style> 태그로 묶인 CSS는 별도의 파일 대신에 스타일이 적용되는 HTML 문서에 존재한다는 점을 제외하면 외부 스타일 시트와 같은 기능을합니다. 따라서이 스타일 시트가 적용된 문서에만 적용 할 수 있습니다 삶. 이 요소 는 HTML 유효성 검사를 위해 <head> 요소 내에 있어야합니다 ( body 배치 된 경우 모든 현재 브라우저에서 작동하지만). 

<head>
    <style>
        h1 {
            color: green;
            text-decoration: underline;
        }
        p {
            font-size: 25px;
            font-family: 'Trebuchet MS', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
</body>

인라인 스타일

인라인 스타일을 사용하여 특정 요소에 스타일을 적용합니다. 이것이 최적이 아님에 유의하십시오. 콘텐츠 규칙과 표현 규칙을 구분하기 위해 스타일 규칙을 <style> 태그 또는 외부 CSS 파일에 배치하는 것이 좋습니다.

인라인 스타일은 <style> 태그 또는 외부 스타일 시트의 모든 CSS보다 우선합니다. 이는 일부 상황에서 유용 할 수 있지만이 사실은 프로젝트의 유지 관리 가능성을 감소시킵니다.

다음 예제의 스타일은 첨부 된 요소에 직접 적용됩니다. 

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>

인라인 스타일은 일반적으로 다양한 이메일 클라이언트, 프로그램 및 장치에서 렌더링 호환성을 보장하는 가장 안전한 방법이지만 글쓰기에는 시간이 많이 소요되고 관리하기는 다소 어려울 수 있습니다.

CSS @ 수입 규칙 (CSS 규칙 중 하나)

@import CSS at-rule은 다른 스타일 시트에서 스타일 규칙을 가져 오는 데 사용됩니다. 이 규칙은 @charset 규칙을 제외하고 다른 모든 유형의 규칙보다 우선해야합니다. 중첩 된 명령문이 아니므로 @import는 조건부 그룹 at-rules 내에서 사용할 수 없습니다. @import .

@import 사용법

다음과 같은 방법으로 @import 규칙을 사용할 수 있습니다.

A. 내부 스타일 태그 사용 

   <style>
    @import url('/css/styles.css');
   </style>

B. 외부 스타일 시트 사용

다음 행은 루트 디렉토리의 additional-styles.css 라는 CSS 파일을 CSS 파일로 가져옵니다. 

@import '/additional-styles.css';

외부 CSS를 가져 오는 것도 가능합니다. 일반적인 사용 사례는 글꼴 파일입니다. 

@import 'https://fonts.googleapis.com/css?family=Lato';

@import 규칙의 선택적인 두 번째 인수는 미디어 쿼리 목록입니다. 

@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);

JavaScript로 CSS 바꾸기

순수 자바 스크립트

요소의 style 속성을 통해 JavaScript로 CSS 속성 값을 추가, 제거 또는 변경할 수 있습니다. 

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';

스타일 속성은 낙타의 경우 스타일로 명명됩니다. 이 예제에서 CSS 속성 font-family 는 javascript의 fontFamily 가됩니다.

요소에서 직접 작업하는 대신 JavaScript에서 <style> 또는 <link> 요소를 만들고 HTML 문서의 <body> 또는 <head> 에 추가 할 수 있습니다.

jQuery

jQuery를 사용하여 CSS 속성을 수정하는 것이 훨씬 간단합니다. 

$('#element').css('margin', '5px');

둘 이상의 스타일 규칙을 변경해야하는 경우 : 

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});

jQuery에는 하이픈이있는 CSS 규칙 (예 : font-size )을 변경하는 두 가지 방법이 있습니다. 스타일 규칙 이름을 따옴표 나 낙타의 경우에 넣을 수 있습니다. 

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});

또한보십시오

CSS로 목록 스타일 지정하기

스타일 목록 항목에는 list-style-type , list-style-image 및 list-style-position 세 가지 속성이 있습니다. list-style-type 순서 list-style-position 은이 순서로 선언해야합니다. 기본값은 각각 disc, outside 및 none입니다. 각 속성은 별도로 선언하거나 list-style 속기 속성을 사용하여 선언 할 수 있습니다.

list-style-type 은 각 목록 항목에 사용되는 글 머리표의 모양이나 유형을 정의합니다.

list-style-type 허용되는 값 중 일부는 다음과 같습니다.

  • 디스크
  • 원
  • 광장
  • 소수
  • 낮은 로마의
  • 위의 로마자
  • 없음

(전체 목록은 W3C 사양 wiki 참조)

예를 들어, 각 목록 항목에 대해 사각 점을 사용하려면 다음 속성 - 값 쌍을 사용합니다. 

li {
    list-style-type: square;
}

list-style-image 속성은 목록 항목 아이콘이 이미지로 설정되는지 여부를 결정하고 none 값 또는 이미지를 가리키는 URL을 허용합니다. 

li {
    list-style-image: url(images/bullet.png);
}

list-style-position 속성은 목록 항목 마커를 배치 할 위치를 정의하고 두 값 ( "inside"또는 "outside") 중 하나를 허용합니다. 

li {
  list-style-position: inside;
}


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