CSS 스타일 무엇. CSS란 무엇인가, CSS와 HTML의 기본. 스타일은 특정 속성이 있는 태그에만 적용됩니다.
CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)를 나타냅니다. CSS는 웹페이지에 특정 요소를 표시하는 데 사용되는 매개변수 집합입니다. 이러한 매개변수는 별도의 파일에 지정하거나 페이지의 HTML 코드에 직접 작성할 수 있습니다. 예를 들어, 당사 웹페이지에는 기사 제목, 단락, 인용문, 각주, 사진, 비디오, 링크 등의 요소가 있을 수 있습니다. 크기, 색상, 프레임 두께 등 특정 표시 스타일을 설정할 수 있습니다.
웹사이트 작업 시 스타일 설정이 포함된 코드를 개별 페이지에 삽입하기보다는 스타일이 포함된 별도의 파일을 사용하는 것이 좋습니다. 이렇게 하면 시간이 크게 단축됩니다. 스타일 시트의 위치를 알면 언제든지 특정 스타일을 빠르게 찾아 편집할 수 있습니다. 스타일 파일의 확장자는 .css이며 일반적으로 style.css라는 이름을 갖습니다.
CSS 파일 연결CSS 파일을 포함하는 방법에는 여러 가지가 있습니다. 웹사이트를 만들 때 가장 자주 사용되는 두 가지 방법에 대해 이야기하겠습니다.
1. 연결. 이 방법은 사이트의 모든 페이지에 대한 스타일을 하나의 파일로 설정해야 할 때 사용됩니다. 이 방법은 웹사이트를 만들 때 자주 사용됩니다. 스타일 시트를 연결하려면 태그 본문에 배치해야 하는 명령을 사용하십시오.
처음 두 속성은 사이트가 CSS를 사용한다는 것을 브라우저에 알리고 스타일시트 파일의 주소가 표시됩니다.
2. 문서 태그에 포함. 이 방법을 사용하면 특정 페이지 요소의 스타일이 HTML 코드에서 직접 설정됩니다. 예를 들어:
여기서는 컨테이너 및 에 대한 스타일을 작성했습니다. 이러한 스타일은 해당 스타일에만 적용됩니다.
스타일 시트의 예를 들어보겠습니다. style.css 파일을 만들고 스타일을 추가합니다.
body (font-family: Arial, Verdana, Sans-serif; /* 글꼴 모음 */font-size: 12pt; /* 기본 글꼴 크기(포인트) */ background-color: #f0f0f0; /* 웹 페이지 배경 색상 * / color: #000000; /* 본문 텍스트 색상 */ ) h1 ( color: #a52a2a; /* 제목 색상 */ 글꼴 크기: 24pt; /* 글꼴 크기(포인트) */ 글꼴 패밀리: Georgia, Times, serif ; /* 글꼴 계열 */font-weight: /* 일반 텍스트 스타일 */ )여기에서는 페이지 본문과 헤더에 대한 스타일을 설정했습니다. 웹사이트의 다른 페이지 요소에 대해 특정 스타일을 설정할 수도 있습니다.
이제 스타일 시트를 사이트에 연결해 보겠습니다.
CSS를 Hello World 웹사이트에 연결합니다!이것은 CSS 스타일이 포함된 첫 번째 페이지입니다.
이로써 우리는 CSS가 무엇인지, 왜 이 기술을 사용하는지 알아보고, 스타일을 사이트에 연결하는 방법을 배웠습니다. 이번 강의는 캐스케이딩 스타일 시트(Cascading Style Sheet)에 대한 일종의 소개입니다. 다른 강의에서는 CSS 기술에 대해 더 자세히 이야기하겠습니다.
CSS의 목적웹 사이트 디자인은 브라우저 창의 클라이언트 영역에서 HTML 페이지 구성 요소를 서로 상대적으로 정확하게 배치하는 것입니다.
웹 디자인에 대한 이러한 정의의 단점은 명백합니다. HTML 페이지 구성 요소의 색상, 모양 또는 기타 속성은 고려되지 않습니다. 이 정의에서 가장 중요한 것은 HTML 마크업의 한계를 보여주는 것입니다. 페이지에서 구성 요소 위치를 지정하는 것은 HTML의 가장 약한 점 중 하나입니다.
페이지 구성 요소에는 텍스트 블록, 그래픽 및 내장된 응용 프로그램이 포함됩니다. HTML 마크업 내 각 구성 요소의 크기와 경계는 다양한 정밀도로 지정됩니다. 그래픽과 애플리케이션의 크기를 픽셀 단위로 줄일 수 있습니다. HTML의 텍스트 블록 크기는 설정할 수 없으며 상대적인 기본 글꼴 크기를 기준으로 브라우저에서 계산됩니다.
이는 브라우저 개발자가 이러한 상황을 바꾸려고 시도하지 않았다는 의미는 아닙니다. NEXT 플랫폼과 WWWC 브라우저용 CERN 브라우저의 초기 버전에서는 페이지 작성자가 HTML 마크업을 통해 기본 브라우저 설정을 재정의할 수 있었습니다. 그러나 이러한 접근 방식은 상용 제품에서는 지속되지 않았습니다.
브라우저 설정을 제어하는 또 다른 방법은 JavaScript 프로그래밍을 이용하는 것입니다. 이 언어의 급속한 발전은 HTML 페이지 표시 프로세스를 완벽하게 제어할 수 있는 가능성을 제시합니다. JavaScript의 단점은 마크업의 선언적 특성을 포기하고 마크업 요소의 속성을 재정의하기 위한 코드의 양이 상대적으로 많다는 것입니다.
CSS(Cascading Style Sheets) 사양을 사용하면 페이지 마크업의 선언적 특성을 유지하고 HTML 마크업 요소의 표시 형식을 완전히 제어할 수 있습니다.
계단식 스타일 시트는 그림과 응용 프로그램의 크기를 결정하는 정확성과 텍스트 블록의 크기와 스타일을 결정하는 정확성 사이의 모순을 해결하도록 설계되었습니다.
또한 스타일 시트를 사용하면 텍스트 조각의 색상과 스타일을 정의하고, 텍스트 블록 내에서 이러한 매개변수를 변경하고, 다른 블록 및 페이지 구성 요소를 기준으로 텍스트 블록을 정렬할 수 있습니다.
이러한 기능이 있으면 문서의 논리적 구조와 프레젠테이션 형식을 분리하는 수단으로 CSS에 대해 이야기할 수 있습니다. 문서의 논리적 구조는 HTML 마크업 요소에 의해 결정되는 반면, 이러한 각 요소의 표시 형식은 요소의 CSS 설명자에 의해 결정됩니다.
CSS를 사용하면 마크업 요소의 기본 표현을 완전히 재정의할 수 있습니다. 예를 들어, ...텍스트를 기울임꼴로 표시할지 여부를 결정합니다.
이제 마크업 요소 I(열림)의 표시 스타일을 재정의해 보겠습니다.
쌀. 8.1.이 예는 CSS를 사용하여 요소의 일반적인 표시 스타일을 완전히 변경할 수 있음을 보여줍니다. 이 기술에서 HTML 마크업은 본질적으로 순전히 선언적입니다.
웹 엔지니어링(웹 사이트 개발 및 유지 관리를 위한 일련의 기술)을 위한 CSS의 실질적인 중요성은 사이트 생성 프로세스가 형식화되어 일련의 작업으로 제시될 수 있다는 것입니다.
- 페이지의 명명법을 결정해야 합니다. 디자인된 웹 사이트의 모든 페이지는 홈 페이지, 탐색 페이지, 정보 페이지, 커뮤니케이션 페이지 등과 같은 유형으로 구분되어야 합니다. 각 노드는 자체 목록을 가질 수 있습니다.
- 각 페이지 유형에 대해 특정 논리적 구조(표준 페이지 구성 요소 집합)를 개발하는 것이 필요합니다.
- 노드의 탐색 맵과 페이지 구현을 위한 양식을 생성해야 합니다.
- 각 표준 페이지 구성 요소에 대해 표시 스타일(CSS 설명자)을 개발해야 합니다.
- 이제 남은 것은 그림을 그리고, 애니메이션을 만들고, 프로그램을 작성하고, 텍스트와 그래픽을 수동으로 입력하거나, 액세스할 때 페이지 콘텐츠를 자동으로 생성하는 것뿐입니다.
다양한 웹 기술 중에서 CSS의 역할과 목적을 설명한 후 캐스케이딩 스타일 시트 사용에 대한 논의로 바로 넘어갑니다.
CSS를 사용하는 방법이 섹션에서 CSS를 사용하는 방법이란 HTML 페이지에서 스타일을 선언하는 형식과 마크업 요소의 표시 스타일에 대한 설명을 요소 자체에 연결하는 형식을 의미합니다. 페이지 작성자(또는 디자이너)가 스타일을 어디서, 어떤 형식으로 설명하는지, 그리고 이를 어떻게, 어떤 형식으로 참조하는지에 대한 것입니다.
따라서 스타일을 적용하는 방법에는 네 가지가 있습니다.
- 마크업 요소의 스타일을 재정의합니다.
- STYLE 요소의 문서 헤더에 스타일 설명을 배치합니다.
- LINK 요소를 통해 외부 설명에 대한 링크를 배치합니다.
- 스타일 설명을 문서로 가져오기.
여기에서는 Microsoft의 George Young(Internet Explorer 4.0의 계단식 스타일 시트, Microsoft, 1997)을 따릅니다. 다른 제조업체의 브라우저에서는 스타일 가져오기가 지원되지 않는다는 점에 유의하는 것이 중요합니다. 그러나 CSS1 특허는 Microsoft의 소유이므로 설명에서 가져오기를 생략하는 것은 올바르지 않습니다.
스타일 재정의첫 번째 수준 헤더
스타일 속성은 모든 마크업 요소 내에 적용될 수 있습니다. 예를 들어, 스타일을 사용하여 hr 요소(가로 취소선)의 너비와 정렬을 정의할 수 있습니다.
분명히 특정 마크업 요소에 대해 모든 스타일 옵션을 설정할 수 있는 것은 아닙니다. “블록 및 인라인 요소 이해” 섹션에서 요소 유형과 해당 스타일 매개변수에 대해 설명하겠습니다.
여기서는 다음 사항에 유의해야 합니다. 스타일은 주로 텍스트 표시를 제어하기 위해 설계되었습니다. 텍스트가 아닌 HTML 마크업 요소의 표시를 제어할 때 스타일에 너무 집착하지 마세요.
스타일 요소STYLE 요소를 사용하는 것은 CSS 스타일 시트를 HTML 문서의 구조에 삽입하는 기본 방법입니다. STYLE 요소를 사용하면 마크업 요소의 표시를 제어하는 것 외에도 JavaScript로 프로그래밍할 때 변경할 수 있는 요소의 스타일 속성을 설명할 수 있습니다.
STYLE 요소를 사용하면 다음에 대한 표시 스타일을 정의할 수 있습니다.
- 표준 HTML 마크업 요소;
- 임의 클래스(선택자 CLASS);
- HTML 개체(ID 선택기).
불행하게도 다양한 제조업체의 브라우저에서 선택기를 사용하면 온갖 종류의 놀라움이 나타날 수 있습니다. 이는 특히 ID 선택기에 해당됩니다. 이 경우 Microsoft를 CSS 사양에 대한 특허 보유자로 간주합니다.
"구문"과 "상속 및 재정의" 섹션에서 선택기의 개념, 선택기의 사용, CSS의 형식적 구문에 대해 논의할 것입니다.
표준 마크업 요소는 STYLE 요소에 다음과 같이 설명됩니다.
p ( 색상: 어둡게; 텍스트 정렬: 양쪽 맞춤; 글꼴 크기: 8pt; ) ...
우리는 표준 HTML 마크업 요소에 스타일 설명을 적용하는 예로 이 단락을 사용합니다.
...이제 스타일이 어떤 방식으로 재정의되지 않는 한 문서의 모든 단락은 STYLE 요소의 스타일로 렌더링됩니다. STYLE을 사용하면 모든 마크업 요소의 스타일을 정의할 수 있습니다.
외부 설명 링크문서 외부에 있는 스타일 설명에 대한 연결은 HEAD 요소에 있는 LINK 요소를 사용하여 수행됩니다. 외부 설명은 스타일 설명이 포함된 파일일 수 있습니다. 이 파일의 스타일 설명은 STYLE 요소의 내용과 동일한 구문을 갖습니다.
여기서는 REL 및 TYPE 속성의 값이 중요합니다. REL 속성은 스타일시트로 설정되어야 합니다. 유형은 text/css 또는 text/javascript 일 수 있습니다. 두 번째 유형의 스타일 설명은 Netscape에서 도입되었습니다. 이 교육 과정에서는 이에 대해 논의하지 않습니다.
HREF 속성은 외부 스타일 시트 파일에 대한 URL(Uniform Resource Locator)을 지정합니다. 이는 *.css 확장자를 가진 파일뿐만 아니라 모든 이름의 파일에 대한 링크일 수 있습니다.
스타일 설명 가져오기스타일 설명자를 가져오는 것은 어떤 면에서는 위에 제시된 외부 스타일 설명자에 대한 참조와 경쟁합니다.
STYLE 요소 내부 또는 스타일 설명자인 외부 파일 내부에서 스타일을 가져올 수 있습니다. 스타일 가져오기 문은 다른 모든 스타일 지정자보다 앞에 있어야 합니다.
@import:url(http://intuit.ru/style.css) A ( 색상: 청록색; 텍스트 장식: 밑줄; )
가져온 스타일은 STYLE의 요소 지정자 또는 요소의 STYLE 속성을 통해 재정의될 수 있습니다.
통사론공식적으로 마크업 요소의 표시 스타일은 스타일 선택기에 대한 마크업 요소의 링크로 지정됩니다. 일반적으로 스타일을 설명하는 구문은 다음과 같습니다.
선택기[, 선택기[, ...]] (속성:값; )
선택기 선택기(속성:값; )
첫 번째 옵션은 이 스타일 설명이 적용되는 선택기를 나열합니다. 두 번째 옵션은 스타일이 정의된 컬렉션에 대한 선택기의 중첩 계층 구조를 지정합니다. 이 경우에는 text/css 표기법의 스타일 설명에 대해 이야기하고 있다는 점을 기억하세요. 스타일 설명은 STYLE 요소 내부 또는 외부 파일에 배치됩니다.
HTML 페이지의 마크업 요소 이름, 클래스 이름 및 개체 식별자를 선택기로 사용할 수 있습니다.
속성은 단락의 왼쪽 여백(왼쪽 여백)과 같이 표시되는 요소의 속성을 지정하고, 값은 10개의 인쇄 포인트(10pt)와 같은 해당 속성의 값을 지정합니다.
선택기 - 마크업 요소 이름웹 사이트 작성자가 모든 페이지의 전체 스타일을 정의하려는 경우 해당 페이지에 사용될 모든 HTML 마크업 요소에 대한 스타일을 작성하기만 하면 됩니다. 이를 통해 논리적 요소로 페이지를 구성하고 외부 파일의 요소 표시 스타일을 설명할 수 있습니다.
외부 파일은 다음과 같습니다.
I, EM(색상:#003366;글꼴 스타일:보통) A I(글꼴 스타일:보통;글꼴-가중치:굵게; 텍스트 장식:선 통과)
이 설명의 첫 번째 줄에는 동일하게 표시되는 요소 선택기가 나열됩니다.
마지막 줄은 하이퍼텍스트 링크에 포함된 기울임꼴 표시 스타일을 정의합니다.
이 경우 하이퍼텍스트 링크 내부의 텍스트가 굵은 선으로 표시되어 무시됩니다.
선택기 - 클래스 이름클래스 이름은 표준 HTML 마크업 요소 이름이 아닙니다. 동일하게 렌더링될 마크업 요소 클래스에 대한 설명을 정의합니다. 특정 클래스에 마크업 요소를 할당하려면 해당 CLASS(open) 속성을 사용해야 합니다.
.test (색상:흰색;배경색:검정색;) ...
이 단락은 검정색 배경에 흰색으로 표시됩니다.
...
쌀. 8.2.
따라서 모든 마크업 요소에서 표시 클래스에 대한 설명을 참조할 수 있습니다. 이 경우 마크업 요소가 동일한 유형일 필요는 전혀 없습니다. 예제에서는 단락과 다른 단락의 하이퍼텍스트 링크가 모두 하나의 클래스에 할당됩니다.
클래스 이름 앞의 마침표는 생략할 수 있습니다. 설명의 통일성을 유지하기 위해 설정되었습니다. 예를 들어 유사한 마크업 요소를 표시하기 위한 클래스를 정의할 수 있습니다.
a.메뉴 ( 색상: 빨간색; 배경 색상: 흰색; 텍스트 장식: 없음; ) a. 단락 ( 색상: 네이비; 텍스트 장식: 밑줄; )
이 예에서 하이퍼텍스트 링크 클래스 메뉴에는 하나의 스타일 설명이 있고 하이퍼텍스트 링크 클래스 단락에는 완전히 다른 스타일이 있습니다. 그러나 이러한 각 클래스는 단락이나 목록과 같은 다른 마크업 요소에 적용될 수 없습니다. 마크업 요소 이름이 지정되지 않으면 클래스가 모든 마크업 요소(스타일 설명의 루트 클래스)에 적용될 수 있음을 의미합니다. 이는 도메인 이름 시스템의 루트 도메인 이름 지정과 매우 유사합니다. 사실 여기서는 놀랄 일이 아니거든요. 왜냐하면... HTML 페이지의 객체 클래스 시스템은 트리입니다. 마크업 요소는 트리 노드입니다.
선택기 - 객체 식별자문서 개체 모델은 문서를 개체 트리로 설명합니다. 개체는 문서 자체, 해당 섹션(DIV 요소), 그림, 단락, 응용 프로그램 등입니다. 각 개체에는 이름을 지정하고 이름으로 참조할 수 있습니다. 이 기능은 클라이언트 측에서 페이지를 프로그래밍할 때 사용됩니다.
객체 식별자의 사용은 CSS 설명에서 특정 객체에 대한 스타일 설명 속성을 수정하는 경우에도 정당화됩니다. 매개변수 중 하나만 다른 두 개의 클래스 정의 대신 하나의 클래스 정의와 객체 식별자 설명을 생성할 수 있습니다. 개체에 대한 스타일 설명은 문자열로 지정됩니다. 여기서 선택자는 앞에 "#" 문자가 있는 이 개체의 이름입니다.
a.mainlink ( 색상: 어두운색; 텍스트 장식: 밑줄; 글꼴 스타일: 기울임꼴; ) #blue ( 색상:#003366 ) ... 메인 하이퍼텍스트 링크 수정된 하이퍼텍스트 링크
Internet Explorer와 Netscape Navigator의 개체 식별자 해석은 서로 다릅니다. 마크업 요소에 대한 이름 속성도 있습니다. 개체를 식별할 때 Netscape Navigator는 일반적으로 이 속성을 처리하고 Internet Explorer는 일반적으로 ID 속성을 처리합니다.
CSS를 선언적으로 사용할 때 브라우저가 ID를 해석하는 방법의 차이는 그다지 큰 문제가 아닙니다. 저자가 스타일을 프로그래밍하기로 결정하는 것은 또 다른 문제입니다. 스타일 설명자 속성의 값을 변경합니다. 이 경우 Netscape Navigator와 Internet Explorer의 문서 개체 모델 간의 차이점이 완전히 입증됩니다. 실제로 각 브라우저마다 완전히 다른 페이지를 개발해야 합니다.
상속과 재정의기술 사양을 논의할 때 이름의 의미를 이해하는 것이 유용한 경우가 많습니다. 이름은 일반적으로 표준이나 사양의 본질과 목적을 정확하게 정의합니다. HTML 마크업 요소의 표시 스타일에 대한 설명을 "계단식 스타일 시트"라고 합니다. "스타일"이라는 단어를 사용하면 모든 것이 다소 명확해집니다. "테이블"이라는 단어는 속성 테이블의 행으로 표시될 수 있는 마크업 요소의 속성 집합으로 이해되어야 합니다. 마크업 요소는 행이고 속성은 열입니다. 그러나 "계단식"이라는 단어에는 설명이 필요합니다.
첫째, 마크업 요소의 계층 구조(페이지의 개체 트리)가 있습니다. 둘째, 이러한 객체의 속성은 상속될 수 있습니다. 따라서 개체 트리에는 트리의 리프(예: 목록 요소 또는 단락과 같은 마크업 요소)로 연결되는 가지가 형성됩니다. 해당 속성은 요소가 중첩된 마크업 요소와 해당 요소의 스타일 설명자에 의해 결정됩니다.
이전 텍스트는 다음과 같이 섹션 및 목록 측면에서 인코딩됩니다.
이는 단락의 왼쪽 가장자리를 기준으로 오른쪽으로 10픽셀, 표준 단락 테두리를 기준으로 10픽셀 아래로 오프셋된 첫 번째 섹션의 시작입니다. 이것은 두 번째 섹션의 시작 부분으로, 이전 섹션을 기준으로 10픽셀, 단락을 기준으로 20픽셀만큼 이동합니다. 이 섹션에는 10픽셀만큼 들여쓰기되고 이전 섹션에서 20픽셀만큼 오프셋된 빨간색 선이 있습니다.
- 목록의 첫 번째 요소
- 목록의 두 번째 요소
모든 스타일 속성을 상속받을 수 있는 것은 아닙니다. 예를 들어, BODY 요소의 "패딩"(경계에서 요소 내용의 들여쓰기)은 중첩된 요소에 의해 상속되지 않으며 기본적으로 결정되거나 각 요소에 대해 별도로 지정됩니다. Internet Explorer와 Netscape Navigator의 상속 알고리즘은 서로 다르기 때문에 요소 표시의 통일성을 보장하려면 가능한 한 많은 속성을 사용하여 스타일을 지정해야 합니다.
이 장에서는 CSS를 HTML 문서에 구현하는 방법, 즉 요소의 스타일 설명을 요소 자체, 일부 HTML 태그에 직접 연결하는 방법에 대해 설명합니다.
이 작업은 다음 세 가지 방법으로 수행할 수 있습니다.
- 요소 자체에 스타일 설명을 직접 작성합니다. 이 방법은 HTML 문서에 별도의 스타일 설명이 필요한 요소가 하나만 있는 경우에만 유용합니다.
- HTML 문서의 모든 동일한 요소에 대한 스타일 설명을 작성합니다. 이 방법은 페이지 스타일이 사이트의 전체 디자인(상호 연결된 페이지 그룹)과 근본적으로 다른 경우에 적합합니다.
- HTML 요소의 스타일 설명을 별도의 CSS 파일로 추출합니다. 이를 통해 전체 사이트, CSS 파일에 대한 참조가 표시된 사이트의 각 페이지의 디자인을 관리할 수 있습니다. 이 방법은 계단식 스타일 시트를 가장 효과적으로 사용하는 방법입니다.
각 옵션을 자세히 살펴보고 동시에 CSS 작성 구문 규칙에 대해 알아 보겠습니다.
스타일 속성입니다.거의 모든 HTML 태그에는 스타일 속성이 있는데, 이는 일부 스타일 설명이 이 태그에 적용됨을 나타냅니다.
다음과 같이 작성되었습니다.
스타일 속성의 따옴표 사이에 쓰여진 모든 내용은 이 요소에 대한 스타일 설명이 됩니다.
예를 들면 다음과 같습니다.
개인적인 스타일이 있는 단락입니다.
이 경우 이 단락은 빨간색으로 표시되고 글꼴 크기는 12픽셀로 지정되었습니다. 다음 장에서는 따옴표로 묶인 내용에 대해 자세히 설명하겠지만 지금은 HTML 태그에 CSS를 적용하는 방법에 대해 설명합니다.
동일한 원칙을 사용하여 거의 모든 HTML 요소에 대해 개별 스타일을 지정할 수 있습니다.
스타일 속성
코끼리에 관한 모든 것
코끼리를 사세요
코끼리를 빌리세요
그러나 다시 한 번 말씀드리지만, CSS를 도입하는 이 방법은 소수의 HTML 요소에 대해 특정 스타일을 설정해야 하는 경우에만 좋습니다.
꼬리표전체 페이지에서 필요한 요소를 동시에 설명하기 위해 필요한 요소에 대한 설명이 발생하는 HTML 문서의 헤드에 태그가 도입됩니다(동일한 이름의 속성과 혼동하지 마십시오).
예제를 살펴보면 아래에 설명이 있습니다.
스타일 태그
h2(색상: #0000ff; 글꼴 크기:16px)
p(색상: #ff0000; 글꼴 크기:14px)
코끼리에 관한 모든 것
이 사이트에서는 코끼리에 관한 모든 정보를 찾을 수 있습니다.
코끼리를 사세요
우리와 함께 당신은 경쟁력 있는 가격으로 최고의 코끼리를 구입할 수 있습니다!!
코끼리를 빌리세요
여기서만 코끼리를 빌릴 수 있어요!!
예제에서 볼 수 있듯이 첫 번째 경우와 정확히 동일한 결과를 얻었습니다. 이제는 각 요소에 개별적으로 스타일을 할당하지 않고 문서의 "헤드"에 배치하여 모든 제목이 파란색으로 표시되고 단락이 표시됩니다.
- 빨간색. 페이지에 그러한 단락이 100개 있고 제목이 약 15개 있고 각 개별 요소에 대해 반복되는 모든 스타일 설명을 "제거"하여 문서 자체의 무게가 줄어들면 작업이 얼마나 쉬울지 상상해 보십시오.
이제 약속된 코멘트는 다음과 같습니다.
태그는 일반적으로 태그 사이의 HTML 문서 헤드에 포함됩니다.
type 태그 속성은 스타일을 올바르게 해석하는 데 사용할 구문을 브라우저에 알려줍니다. CSS가 브라우저에서 올바르게 해석되려면 type(MIME 데이터 유형) 값이 text/css 와 같아야 합니다.
태그 내부에는 다음 구문에 따라 특정 HTML 요소의 스타일이 직접 선언되어 있습니다.
스타일 선언 블록에 요소의 여러 속성이 지정된 경우 세미콜론으로 구분됩니다.
별도의 외부 파일에 CSS가 있습니다.시간이 얼마나 걸리나요? 제 생각에는 CSS의 장점, 즉 사이트 디자인과 관련된 모든 정보를 별도의 외부 파일에 저장하는 기능에 대해 설명하겠습니다.
따라서 메모장(또는 다른 편집기)을 열고 다음 텍스트를 작성하세요.
본문(배경색: #c5ffa0)
a (색상:#000060; 글꼴 두께: 굵은 글씨;)
a:hover (색상:#ff0000; 글꼴 두께: 굵게; 텍스트 장식:없음)
h1(색상: #0000ff; 글꼴 크기:18px)
h2(색상: #ff00ff; 글꼴 크기:16px)
p(색상: #600000; 글꼴 크기:14px)
나는 이 교과서의 다음 장에서 이 이상한 것에 대해 우리가 쓴 내용에 대해 자세히 설명하려고 노력할 것입니다.
모두! 스타일 설명 파일이 생성되었습니다! 이제 남은 것은 우리 사이트의 필요한 페이지가 이 파일에서 정보를 가져오도록 강제하는 것뿐입니다.
이는 태그(링크)를 사용하여 수행됩니다. 태그는 다목적이며 적절한 작동을 보장하는 추가 외부 파일과 HTML 문서를 "링크"하는 역할을 합니다. 태그는 사용자를 위한 것이 아니라 브라우저 프로그램을 위한 일종의 링크입니다. 서비스 정보만을 담고 있기 때문에 HTML 문서의 태그 사이 헤더에 위치하며, 브라우저에서는 화면에 표시되지 않습니다.
태그에는 다음과 같은 속성이 있습니다.
href - 파일 경로입니다.rel - 현재 문서와 참조되는 파일 간의 관계를 정의합니다.
- 바로가기 아이콘 - 포함된 파일이 .
- 스타일시트 - 포함된 파일에 스타일시트가 포함되도록 지정합니다.
- application/rss+xml - 뉴스 피드를 설명하는 XML 형식의 파일입니다.
CSS(Cascading Style Sheet)를 외부 파일로 포함하므로 서비스 링크는 다음과 같은 형식을 취합니다.
나는 가능한 오해를 확실히 없애기 위해 반복합니다. 계단식 스타일 시트를 외부 파일로 연결하고 CSS 파일에 대한 경로를 지정하기 때문에 rel 속성에 스타일시트 값을 할당합니다(이 예에서 파일은 mystyle.css라고 하며 이 링크가 있는 HTML 문서 옆에 있습니다). 작성됨) 또한 이 파일이 텍스트이고 스타일 설명이 포함되어 있음을 나타냅니다. type="text/css"
이제 이 줄을 사이트의 페이지 헤더에 삽입하고 결과를 즐기세요..
mystyle.css 파일
본문(배경색: #c5ffa0)
a (색상:#000060; 글꼴 두께: 굵은 글씨;)
a:hover (색상:#ff0000; 글꼴 두께: 굵게; 텍스트 장식:없음)
h1(색상: #0000ff; 글꼴 크기:18px)
h2(색상: #ff00ff; 글꼴 크기:16px)
p(색상: #600000; 글꼴 크기:14px)
index.html 파일
계단식 스타일 시트
메뉴:
코끼리에 관한 모든 것.
코끼리를 사세요.
코끼리를 빌려보세요.
코끼리에 관한 모든 것
이 사이트에서는 코끼리에 관한 모든 정보를 찾을 수 있습니다.
파일 Elephant.html
계단식 스타일 시트
메뉴:
코끼리에 관한 모든 것.
코끼리를 사세요.
코끼리를 빌려보세요.
코끼리를 사세요
우리와 함께 당신은 경쟁력 있는 가격으로 최고의 코끼리를 구입할 수 있습니다!!
파일 Elephant1.html
계단식 스타일 시트
메뉴:
코끼리에 관한 모든 것.
코끼리를 사세요.
코끼리를 빌려보세요.
코끼리를 빌리세요
여기서만 코끼리를 빌릴 수 있어요!!
위의 예인 "코끼리에 관한 사이트"에는 현재 3개의 페이지가 있으며, 각 페이지는 단일 외부 CSS 파일인 mystyle.css와 연결되어 있습니다. 따라서 우리는 이를 크게 "언로드"하고 전체 사이트의 디자인을 "모바일 친화적"으로 만들었습니다. 만약 이 사이트가 100개의 완전한 페이지를 가지고 있다면 우리가 얼마나 많은 킬로바이트를 얻을 수 있을지 상상해 보십시오!? 또한 디자인을 변경해야 할 경우 얼마나 많은 시간을 절약할 수 있을까요?
이번 장에서는 HTML 문서에 CSS를 삽입하는 세 가지 방법을 살펴보았습니다. 어느 것을 사용하는 것이 더 낫습니까?
- 다른 요소와 스타일이 다른 이 요소가 전체 사이트에서 유일한 요소인 경우 모든 요소에 대해 스타일 속성을 사용하세요.
- 페이지에 사이트의 다른 페이지와 완전히 다른 개별 디자인이 있어야 하는 경우 스타일 설명이 포함된 태그를 사용하세요.
- 대부분의 경우 계단식 스타일 시트를 별도의 CSS 파일에 넣는 것이 좋습니다.
그러나 어느 시점부터 페이지 코드가 너무 복잡해지고 읽을 수 없게 되어 이 경로가 "아무데도" 연결되지 않는다는 것이 분명해졌습니다. 그런 다음 페이지 마크업(HTML)과 시각적 디자인(CSS)을 분리하기로 결정했습니다. 곧 알게 되겠지만, HTML과 CSS를 함께 사용하면 놀라운 일을 할 수 있습니다.
CSS(Cascading Style Sheets)란 무엇입니까? CSS(Cascading Style Sheets) - 계단식 스타일 시트입니다.스타일- 객체의 외부 표현을 정의하는 매개변수 집합입니다. 예를 들어 모든 첫 번째 수준 제목(태그)을 원한다고 가정해 보겠습니다. ) 한 페이지에는 빨간색, 크기 - 24, 기울임꼴로 기록되고 다른 페이지에는 파란색, 크기 - 12입니다. 제목은 개체이고 색상, 크기 및 스타일은 매개변수입니다. 단지 우리 개체의 매개변수가 페이지마다 다르다는 것입니다. 그들은 스타일이 다릅니다.
페이지의 각 요소는 고유한 스타일(단락, 제목, 줄, 텍스트...)을 가질 수 있습니다. 모든 요소의 스타일 집합을 호출합니다. 스타일 시트.
제목이 있는 예에서와 같이 하나의 요소에 대해 여러 스타일이 지정된 경우 계단식, 특정 스타일의 우선순위를 결정합니다.
CSS의 장점- CSS를 사용하면 코드 크기를 크게 줄이고 읽기 쉽게 만들 수 있습니다.
- CSS를 사용하면 HTML만으로는 설정할 수 없는 매개변수를 설정할 수 있습니다. 예를 들어 링크에서 밑줄을 제거합니다.
- CSS를 사용하면 페이지 모양을 쉽게 변경할 수 있습니다. 모든 제목이 파란색인 50페이지짜리 웹사이트를 만들었다고 상상해 보세요. 얼마 후 파란색을 녹색으로 변경하고 싶었습니다. 50페이지를 모두 살펴보고 해당 속성의 색상을 변경해야 합니다. CSS를 사용하면 스타일 시트에서 이 작업을 한 번만 수행하면 됩니다.
- CSS는 소위 웹사이트의 블록 레이아웃과 연관되어 있습니다.
광대역 인터넷 액세스의 확산이 증가함에도 불구하고 HTML 페이지 로딩 속도 문제는 특히 광대한 구소련 지역의 많은 인터넷 사용자에게 여전히 무관심하지 않습니다. CSS(Cascading Style Sheets)는 이 문제에 도움을 주어 시간과 트래픽을 절약해 줍니다.
1. 페이지 레이아웃에 테이블을 사용하지 마십시오.
페이지 레이아웃에 표 대신 CSS를 사용하는 것이 더 나은 6가지 이유는 다음과 같습니다.
브라우저는 테이블을 두 번 구문 분석합니다. 한 번은 테이블의 구조를 평가하고, 한 번은 내용을 결정합니다.
테이블은 로드되는 즉시 표시되지 않고 전체 내용이 즉시 표시됩니다.
테이블은 열의 너비 등을 결정하기 위해 투명한 그림을 강제로 사용합니다.
CSS에는 오버로드된 테이블보다 훨씬 적은 코드가 필요합니다.
모든 CSS 코드는 외부 파일로 내보낼 수 있으며, 외부 파일은 한 번만 로드되어 브라우저 캐시에 저장됩니다.
CSS를 사용하면 페이지 요소가 로드되는 순서를 제어할 수 있습니다.
2. 텍스트를 표시하기 위해 그림을 사용하지 마십시오
대부분의 버튼과 라벨은 CSS를 사용하여 렌더링할 수 있습니다. 예를 살펴보십시오.
A:link.example, a:visited.example, a:active.example(
색상:#fff;
배경:#f90;
글꼴 크기:1.2em;
글꼴 두께:굵게;
텍스트 장식:없음;
패딩:0.2em;
테두리:4px #00f 시작
}
a:hover.example(
색상:#fff;
배경:#fa1;
글꼴 크기:1.2em;
글꼴 두께:굵게;
텍스트 장식:없음;
패딩:0.2em;
테두리:4px #00f 삽입
이 CSS는 마우스를 올리면 모양이 바뀌는 간단한 버튼을 정의합니다. 이렇게 하면 더 복잡한 개체를 만들 수 있습니다.
일부 배경 이미지는 CSS를 통해 더 잘 로드됩니다. 예를 들어 200x100 이미지를 표시하려면 다음 코드를 사용할 수 있습니다.
그리고 해당 CSS는 다음과 같습니다.
예쁜 이미지( 배경: url(filename.gif); 너비: 200px; 높이: 100px )
처음에는 무의미해 보일 수 있지만 실제로는 페이지 로드 속도가 훨씬 빨라질 수 있습니다. 이 경우 브라우저는 동시에가 아니라 모든 텍스트가 표시된 후에만 이미지 로드를 시작합니다. 이런 방식으로 사용자는 이미지가 로드되는 동안 페이지 작업을 할 수 있습니다.
이 기술은 순전히 장식적인 배경 페이지 요소를 로드하는 데 가장 적합합니다. 이미지가 콘텐츠의 일부인 경우에도 IMG 태그를 사용해야 합니다.
4. 상황에 맞는 스타일 사용
이 코드는 효과적이지 않습니다.
이것은 문장이다
이건 또 다른 문장이에요
이건 또 다른 문장이야
또 한 문장이에요
텍스트( 색상: #03c; 글꼴 크기: 2em )
각 단락에 클래스를 할당하는 대신 동일한 클래스를 가진 단일 DIV 요소로 그룹화할 수 있습니다.
이것은 문장이다
이건 또 다른 문장이에요
이건 또 다른 문장이야
또 한 문장이에요
텍스트 p ( 색상: #03c; 글꼴 크기: 2em )
이 코드는 클래스 텍스트가 있는 요소 내의 각 단락의 색상은 #03c이고 글꼴 크기는 2em임을 브라우저에 알려줍니다.
여기서 색상은 6자가 아닌 3자로만 표시된다는 점을 눈치채셨을 것입니다. 이 경우 #03c는 색상 값 #0033cc의 약칭입니다.
5. 약어 사용
다음과 같이 작성하는 것이 좋습니다.
글꼴: 1em/1.5em 굵은 이탤릭 세리프체
대신에
글꼴 크기: 1em;
줄 높이: 1.5em;
글꼴 두께: 굵게;
글꼴 스타일: 기울임체;
글꼴 모음: serif
테두리: 1px 검정색 단색
대신에
테두리 너비: 1px;
테두리 색상: 검정색;
테두리 스타일: 단색
배경: #fff url(image.gif) 왼쪽 상단 반복 없음
대신에
배경색: #fff;
배경 이미지: url(image.gif);
background-repeat: 반복하지 않음;
배경 위치: 왼쪽 위;
패딩과 테두리
사용:
여백: 2px 1px 3px 4px
(위, 오른쪽, 아래, 왼쪽)
대신에
여백 상단: 2px
여백 오른쪽: 1px;
여백 하단: 3px;
여백 오른쪽: 4px
비슷하게:
여백: 5em 1em 3em
(위, 왼쪽, 오른쪽, 아래)
대신에
여백 상단: 5em;
여백-하단: 1em;
여백 오른쪽: 1em;
여백 오른쪽: 4em
여백: 5% 1% (상하, 좌우)
대신에
마진 최고: 5%;
여백-하단: 5%;
오른쪽 여백: 1%;
여백-오른쪽: 1%
이러한 규칙은 여백, 테두리 및 패딩 속성에 적용됩니다.
6. 공백, 줄바꿈, 주석을 최소화하세요.
각 문자(문자 또는 공백)는 1바이트를 차지합니다. 각 추가 문자는 페이지 크기만 증가시킵니다. 따라서 레이아웃 프로세스 중에 Enter 키와 Tab 키를 덜 누르십시오. 또한 CSS 스타일을 결합하는 것을 잊지 마십시오.
절대 링크는 상대 링크보다 훨씬 더 많은 공간을 차지합니다. 게다가 브라우저에 추가 부하가 발생한다는 점이 더 중요합니다. 절대 링크의 예: . 쓰는 것이 훨씬 더 정확할 것입니다. . 하지만 필요한 파일이 다른 디렉터리에 있으면 어떻게 될까요? 다음은 이 문제를 이해하는 데 도움이 되는 몇 가지 예입니다.
- http://www.URL.com 사이트의 루트 페이지 호출
- 루트 디렉토리 http://www.URL.com/filename.html에 있는 페이지 호출
- "루트" 하위 디렉토리 http://www.URL.com/directory/filename.html에 있는 파일
- 현재 디렉토리 및 index.html에 접근
- 현재 및 index.html의 상위 디렉토리
- 같은 일, 파일 지정
- 현재 디렉토리 위의 두 디렉토리에 있는 index.html
8. META 태그 사용에 너무 집착하지 마세요
대부분의 META 태그는 전혀 필요하지 않습니다. 관심이 있으시면 기존 옵션을 모두 살펴보실 수 있습니다. 가장 중요한 태그(키워드 및 설명)는 검색 엔진 최적화에 사용됩니다. META 태그에 content 속성을 사용할 때는 200자 미만으로 유지하세요. 설명이 너무 길고 키워드가 많으면 검색 엔진에서 스팸으로 인식될 수 있습니다.
9. CSS와 JavaScript를 별도의 파일에 보관하세요
모두가 이것을 알고 있지만 항상 사용하지는 않습니다. 외부 파일에서의 CSS 호출은 다음과 같습니다.
따라서 JavaScript는 다음과 같습니다.
모든 외부 파일은 한 번만 다운로드된 후 로컬 캐시에 저장됩니다. "연결된" 외부 파일 수에는 제한이 없습니다.
10. 디렉토리 링크 끝에 /(슬래시)를 넣습니다.
다음과 같이 작성해야 합니다.
이것은 매우 간단하게 설명됩니다. 첫 번째 경우, 브라우저는 링크가 파일 또는 디렉토리로 연결되는 것을 알지 못합니다. "슬래시"는 이 링크가 디렉터리로 연결되므로 추가 확인이 필요하지 않음을 즉시 분명히 합니다.