스타일시트는 이미 이 시리즈에서 여러 번 언급했습니다. 이러한 스타일시트를 사용하면 레이아웃과 디자인을 엄격하게 분리할 수 있습니다. CSS 덕분에 HTML 요소는 웹 문서의 논리적 또는 의미론적 설명만 담당합니다.
경험에 따르면 스타일시트가 실제로 어떻게 생겼는지 아는 것이 처음에 도움이 되는 것으로 나타났습니다. 첫 번째 예를 살펴보세요.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; } p { font-family:Geneva, Arial, Helvetica, sans-Serif; color:#0066FF; } </style> </head> <body> <h1>PSD-Tutorials.de</h1> <p>당신의 그래픽, 웹 및 사진 포털</p> </body> </html>브라우저에서 문서는 다음과 같이 표시됩니다:
HTML 파일의 본문 영역에 두 가지 요소가 정의되어 있습니다:
- 제목
- 텍스트 단락
이 두 요소는 CSS를 사용하여 서식이 지정됩니다. 이를 위해 스타일을 사용하여 머리글 영역에 스타일시트 영역이 정의됩니다. 요소는 이 영역 내에서 서식이 지정됩니다.
다음은 제목 h1에 대한 정의입니다:
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
표시된 구문은 두 가지를 정의합니다:
- 글꼴 패밀리가 결정됩니다.
- 글꼴 크기가 정의됩니다.
이 시점에서 먼저 일반적으로 사용되는 구문에 대해 설명하겠습니다. 모든 CSS 명령어는 기본적으로 선택자와 CSS 선언의 두 부분으로 구성됩니다. 선택기는 서식을 지정할 요소를 정의하는 데 사용됩니다. CSS 선언은 이 서식이 궁극적으로 어떻게 보일지 결정합니다. 선택기는 항상 왼쪽에, CSS 선언은 오른쪽에 중괄호로 묶인 괄호 안에 있습니다.
실제 CSS 선언은 프로퍼티와 값이라는 두 가지 요소로 구성됩니다. 프로퍼티와 값은 콜론으로 구분됩니다. 값 뒤에는 세미콜론으로 구분됩니다.
선택기 { 속성: 값; }스타일시트 통합하기
스타일시트를 웹 페이지에 통합하는 방법에는 여러 가지가 있습니다. 첫째, HTML 태그에 직접 스타일 지침을 할당할 수 있습니다. 예시입니다:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
이 예에서는 제목이 파란색으로 표시됩니다.
HTML 태그에 여러 개의 스타일 문을 추가할 수도 있습니다.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
세미콜론으로 구분하여 하나씩 차례로 적으면 됩니다.
원칙적으로 이러한 인라인 스타일은 페이지 내의 개별 영역을 개별적으로 서식을 지정해야 하는 경우에만 유용합니다. 그러나 일반적으로 이러한 유형의 직접 서식은 HTML 코드를 너무 혼란스럽게 만들 수 있으므로 피해야 합니다.
머리글 영역의 중앙 정의
HTML 파일의 헤드 영역에 중앙 스타일시트를 정의할 수 있습니다. 이렇게 하면 이 파일에 적용해야 하는 모든 스타일이 정의됩니다.
<head> <스타일 유형="text/css"> .text { font-family: "Courier New", Courier, monospace; font-size: 200%; } </style> </head>
이 변형의 장점: 인라인 변형과 달리 정의된 형식을 문서에서 여러 번 사용할 수 있습니다. 이전 예제에서는 CSS 클래스 텍스트가 정의되었습니다. (여기서 사용된 클래스와 같은 선택기에 대한 자세한 정보는 다음 튜토리얼에서 이어집니다). 이제 이 클래스는 문서에서 필요한 만큼 자주 사용할 수 있습니다.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">그래픽, 웹 및 사진 포털</p>
인라인 변형과 달리 이러한 정의는 매우 빠르게 변경할 수 있다는 장점도 있습니다.
아웃소싱 CSS 지침
CSS 정의의 가장 실용적인 변형은 스타일을 외부 파일로 아웃소싱하는 것입니다. 이렇게 하면 여러 개의 HTML 파일이 동일한 CSS 파일에 액세스할 수 있습니다. 이렇게 하면 웹 프로젝트에 속한 모든 파일의 형식을 쉽게 표준화할 수 있습니다. 따라서 모든 페이지에 영향을 미치는 후속 변경 사항을 문제 없이 구현할 수 있습니다.
<link rel="stylesheet" type="text/css" href="css/styles.css">
링크 요소는 HTML 파일의 파일 헤더에 정의됩니다. 링크 내에서 먼저 속성-값 조합 rel="stylesheet" 를 지정합니다. 그 다음에는 type="CSS". 관련 CSS 파일이 href 속성에 할당됩니다. 이미지를 임베드할 때와 마찬가지로 여기에서도 올바른 경로에 주의를 기울이세요. 현재 예제에서는 CSS 파일 styles.css가 실제 HTML 파일과 같은 수준인 css 디렉터리에 있다고 가정합니다.
참조된 CSS 파일은 접미사 css가 붙은 일반 텍스트 파일입니다. 해당 CSS 명령어는 외부 CSS 파일에 정의되어 있습니다.
h1 { font-family: "Courier New", Courier, monospace; font-size: 200%; }
표시된 링크 변형의 대안으로 스타일시트를 가져올 수도 있습니다. 여기에서도 CSS 지침은 외부 파일에 있습니다. 이를 위해 다음 구문이 사용됩니다:
<스타일 유형="text/css"> @import url("CSS/styles.css"); </style>
괄호 안에 가져올 CSS 파일의 경로를 지정합니다. 참고로 @import는 CSS 구문입니다. 따라서 @import 문은 CSS 파일 내에서도 사용할 수 있습니다. 이렇게 하면 스타일시트에서 다른 스타일시트를 불러올 수 있으므로 스타일시트를 더 잘 구성할 수 있습니다.
자연스럽게 링크와 @import 중 어느 것을 사용해야 하는지 의문이 생깁니다. 원칙적으로 저는 링크가 더 빠르고 페이지의 성능이 더 좋기 때문에 링크를 선호합니다.
미디어별 스타일시트
프린터나 화면 등 완전히 다른 미디어에 대한 스타일시트를 정의할 수 있습니다. 이를 위해 미디어 속성이 사용됩니다. 쉼표로 구분하여 여러 미디어에 스타일시트를 할당할 수도 있습니다.
<link rel="stylesheet" media="screen" href="CSS/styles.css"> <link rel="stylesheet" media="print" href="CSS/druck.css">.
이 경우 두 개의 스타일시트가 호출되었는데 하나는 화면에 대한 것이고 다른 하나는 페이지가 인쇄될 때를 위한 것입니다. 따라서 브라우저의 인쇄 기능이 호출될 때 CSS 파일 print.css가 로드됩니다. 다음과 같은 미디어 값을 사용할 수 있습니다:
- all - 모든 출력 미디어에 적용됩니다.
- aural - CSS 파일이 음성 출력 시스템에 사용됩니다.
- 점자 - 촉각 피드백이 있는 점자 프린터용 CSS 파일로, 소위 '점자'를 생성할 수 있습니다.
- 엠보싱 - 점자 페이지 프린터를 대상으로 합니다.
- 핸드헬드 - 핸드헬드 장치용입니다.
- print - 종이에 인쇄하기 위한 CSS 파일입니다. 브라우저는 인쇄 기능이 호출될 때 이 파일을 자동으로 사용해야 합니다.
- 프로젝션 - 이 변형은 프로젝션 프레젠테이션용입니다.
- screen - 화면 표시용입니다.
- tty - 고정 문자 그리드를 사용하는 미디어에 적용되는 CSS 파일입니다. 예를 들어 텔레타이프 및 터미널이 될 수 있습니다.
- tv - TV와 같은 디바이스를 처리하는 데 사용됩니다. 이러한 디바이스는 해상도가 낮고 제한된 범위까지만 스크롤할 수 있다고 가정합니다.
링크 요소를 통해 표시되는 HTML 구문 외에도 특별한 CSS 변형도 있습니다. 여기서는 @import 또는 @media가 사용됩니다.
<스타일 유형="text/css"> @media 화면, 프로젝션 { /* 화면용 형식 */ } @media 인쇄 { /* 인쇄용 형식 */ } </style> 스타일 요소 내에서 @media는 특정 출력 매체를 위한 형식 정의 영역을 정의하는 데 사용됩니다. 이미 설명한 미디어 유형 중 하나를 @media 뒤에 공백으로 구분하여 지정해야 합니다. 여러 미디어 유형은 쉼표로 구분해야 합니다.
