CSS(Cascading Style Sheet) 이해 CSS(Cascading Style Sheet)는 웹 페이지 콘텐츠의 모양을 제어하는 일련의 서식 규칙입니다. CSS를 사용하여 페이지 형식을 지정할 때 콘텐츠와 프레젠테이션을 분리하세요. 페이지의 콘텐츠(즉, HTML 코드)는 HTML 파일 자체에 있는 반면, 코드 표시를 정의하는 CSS 규칙은 다른 파일(외부 스타일 시트)이나 HTML 문서의 다른 부분( 일반적으로 파일 헤더) . CSS를 사용하면 정확한 레이아웃 위치 지정부터 특정 글꼴 및 스타일에 이르기까지 페이지의 정확한 모양을 유연하게 제어할 수 있습니다.
CSS를 사용하면 HTML만으로는 제어할 수 없는 많은 속성을 제어할 수 있습니다. 예를 들어 선택한 텍스트에 대해 다양한 글꼴 크기와 단위(픽셀, 포인트 크기 등)를 지정할 수 있습니다. CSS를 사용하여 글꼴 크기를 픽셀 단위로 설정하면 여러 브라우저에서 페이지 레이아웃 및 모양에 대한 보다 일관된 접근 방식을 보장할 수도 있습니다.
텍스트 서식 지정 외에도 CSS를 사용하여 웹 페이지에서 블록 수준 요소의 서식 지정 및 위치 지정을 제어할 수 있습니다. 예를 들어 블록 수준 요소의 여백과 테두리를 설정하고 다른 텍스트 주위에 텍스트를 띄우는 등의 작업을 수행할 수 있습니다.
CSS 형식 지정 규칙은 선택기와 선언이라는 두 부분으로 구성됩니다. 선택자는 형식 요소(예: P, H1, 클래스 이름 또는 ID)를 식별하는 용어이며 선언은 요소의 스타일을 정의하는 데 사용됩니다. 다음 예에서 H1은 선택기이고 대괄호({}) 사이의 모든 내용은 선언입니다
.
글꼴 크기:16픽셀;
글꼴 모음:Helvetica;
글꼴 두께:굵게
}
선언은 속성(예: 글꼴 모음)과 값(예: Helvetica)의 두 부분으로 구성됩니다. 위의 CSS 규칙은 H1 태그에 대한 특정 스타일을 생성합니다. 이 스타일에 연결된 모든 H1 태그의 텍스트는 크기가 16픽셀이고 Helvetica 글꼴이며 굵게 표시됩니다.
계단식이라는 용어는 동일한 요소에 여러 스타일을 적용하는 기능을 나타냅니다. 예를 들어 하나의 CSS 규칙을 만들어 색상을 적용하고 다른 CSS 규칙을 만들어 여백을 적용한 다음 두 규칙을 모두 페이지의 동일한 텍스트에 적용할 수 있습니다. 정의된 스타일은 웹 페이지의 요소에 "단계적으로" 적용되어 궁극적으로 원하는 디자인을 만들어냅니다.
CSS의 주요 장점은 편리한 업데이트 기능을 제공한다는 것입니다. 한 곳에서 CSS 규칙을 업데이트하면 정의된 스타일을 사용하는 모든 문서의 서식이 자동으로 새 스타일로 업데이트됩니다.
Dreamweaver에서는 다음 스타일 유형을 정의할 수 있습니다.
사용자 정의 CSS 규칙(클래스 스타일이라고도 함)을 사용하면 텍스트 범위나 블록에 스타일 속성을 적용할 수 있습니다. (클래스 스타일 적용을 참조하세요.)
HTML 태그 스타일은 특정 태그(예: h1)의 형식을 재정의합니다. h1 태그의 CSS 스타일을 생성하거나 변경하면 h1 태그로 서식이 지정된 모든 텍스트가 즉시 업데이트됩니다.
CSS 선택기 스타일(고급 스타일)은 특정 요소 조합 또는 CSS가 허용하는 다른 선택기 양식에 대한 형식을 재정의합니다(예: h2 헤더가 표 셀 내에 나타날 때마다 선택기 td h2 적용). 고급 스타일은 특정 id 속성이 포함된 태그의 형식을 재정의할 수도 있습니다. 예를 들어 #myStyle로 정의된 스타일은 속성 값 쌍 id="myStyle"이 포함된 모든 태그에 적용될 수 있습니다.
CSS 규칙은 다음 위치에 있을 수 있습니다.
외부 CSS 스타일 시트는 HTML 파일이 아닌 별도의 외부 CSS(.css) 파일에 저장된 일련의 CSS 규칙입니다. 문서는 문서 파일의 헤더 부분에 있는 링크를 사용하여 웹 사이트의 하나 이상의 페이지에 연결됩니다.
내부(또는 포함된) CSS 스타일 시트는 HTML 문서 헤더의 스타일 태그 내에 포함된 일련의 CSS 규칙입니다.
인라인 스타일은 전체 HTML 문서 내에서 특정 태그 인스턴스로 정의됩니다.
Dreamweaver는 CSS 스타일 지침을 준수하는 한 기존 문서에 정의된 스타일을 인식합니다.
힌트
Dreamweaver에 포함된 O'Reilly CSS 참조 안내서를 표시하려면 도움말 > 참조를 선택한 다음 참조 패널의 팝업 메뉴에서 O'Reilly CSS 참조를 선택합니다.
수동으로 설정된 HTML 형식은 CSS를 통해 적용된 형식보다 우선 적용됩니다. 단락 서식을 제어하는 CSS 규칙의 경우 수동으로 설정된 모든 HTML 서식을 제거해야 합니다.
Dreamweaver는 문서 창에서 직접 적용하는 대부분의 스타일 속성을 렌더링합니다. 브라우저 창에서 문서를 미리 보고 스타일이 어떻게 적용되는지 확인할 수도 있습니다. 일부 CSS 스타일 속성은 Microsoft Internet Explorer, Netscape Navigator, Opera 및 Apple Safari에서 다르게 나타나며 일부는 현재 어떤 브라우저에서도 지원되지 않습니다.