마크업 언어 - title_HTML/Xhtml_웹페이지 제작-HTML 튜토리얼-php.cn

표준화된 디자인 솔루션 - 마크업 언어 및 스타일 핸드북
웹 표준 솔루션 마크업 및 스타일 핸드북
1부: 마크업 구문에서 시작하는 마크업 살펴보기
제2장 제목
개요:
모든 웹 페이지에는 제목이 필요할 뿐만 아니라 올바르게 마크업하면 웹 디자인과 유용성을 높일 수 있습니다.
외관상 웹 페이지 제목은 일반적으로 더 큰 글꼴 크기를 사용하며, 본문과 다른 색상이나 글꼴을 사용할 수 있습니다. 제목의 기능은 '에서 논의된 주제를 간략하게 설명하는 것입니다. 다음 장", W3C는 이를 이렇게 설명합니다. - 웹 페이지의 각 단락에 대한 요약을 표시합니다.
표시하려는 정보를 가장 효과적으로 활용하기 위해 페이지 제목을 만드는 방법은 무엇입니까? 이 장에서는 제목 처리에 일반적으로 사용되는 몇 가지 방법을 연구하고 그 중 가장 유용한 방법을 찾은 다음 몇 가지 CSS 팁과 요령을 사용하여 가장 좋은 방법을 꾸며보겠습니다. 문서 제목을 만들려면 어떤 좋은 방법이 있나요?
질문에 답하기 전에 이제 제목을 문서 상단에 배치한다고 가정하고 비슷한 효과를 얻을 수 있는 세 가지 방법을 살펴보겠습니다.
방법 A: 말이 되나요?
매우 멋진 페이지 제목
태그는 편리한 태그이지만 페이지 제목에는 큰 의미가 없습니다. 이 방법을 사용하면 제목 클래스에 CSS 스타일을 지정할 수 있다는 점입니다. 텍스트는 제목처럼 보입니다.
.heading {
글꼴 크기: 24px; 글꼴 두께: 굵게;
색상: 파란색;
}

이제 제목 클래스로 표시된 모든 제목이 모두 더 커지고 두꺼워지며 파란색이 됩니다. 참 좋습니다. 그런데 CSS를 지원하지 않는 브라우저를 사용하여 이 페이지를 방문하면 어떻게 될까요? 브라우저가 지원하지 않는 외부 스타일 시트 파일에 이전 CSS 스타일을 넣습니다. 또는 스크린 리더가 장애가 있는 사용자를 위해 페이지를 읽으면 어떻게 됩니까? 이러한 방법을 통해 페이지에 액세스하는 사용자는 볼 수 없게 됩니다. ) 제목과 본문 텍스트의 차이점입니다. class="heading"과 같은 주석 방법은 태그 내용의 의미를 약간 설명하지만 .
검색 엔진이 이 페이지를 크롤링할 때 태그가 없는 것처럼 건너뛰며 포함될 수 있는 키워드의 가중치를 늘리지 않습니다. 이에 대해서는 이 장의 뒷부분에서 설명하겠습니다.
마지막으로 태그는 인라인 요소이므로 메소드 A의 콘텐츠를 다른 태그에 배치해야 합니다. 예를 들어

또는

이렇게 하면 필요한 컨테이너를 추가하더라도 CSS를 지원하지 않는 브라우저가 많이 생성됩니다. 사용자가 볼 수 있도록 원래 방식으로 텍스트를 표시합니다.
#p#

방법 B: P와 B의 조합

매우 멋진 페이지 제목

방법 B는 우리가 원하는 블록 수준 요소 표시를 제공하는 단락 태그를 사용하고 태그는 텍스트를 굵게 표시합니다(대부분의 브라우저에서). , 우리는 여전히 의미론적 결과가 부족하다는 점에 직면해야 합니다. 방법 A와 달리 CSS 스타일의 정의가 부족하더라도 태그의 존재는 대부분의 브라우저에서 여전히 굵게 표시됩니다. 그러나 태그와 마찬가지로 검색 엔진에서는 단락 내의 굵은 텍스트에 대해 키워드 가중치를 늘리지 않습니다.
스타일을 추가하기가 어렵습니다

p 및 b 태그를 사용하면 이 제목에 다른 단락과 다른 스타일을 추가할 수 없습니다. 아마도 고유한 방식으로 제목을 강조하고 페이지 콘텐츠에 정의와 구조를 추가하고 싶지만 이 방법을 사용하면 굵게 표시됩니다. , 우리는 이런 일을 할 방법이 없습니다.방법 C: 스타일과 본질

Super Cool Page Title

하하 제목 태그는 처음부터 사용되어 왔지만 여전히 많은 웹 디자이너가 제대로 사용하면 페이지 콘텐츠에 대한 앵커 포인트를 제공하고 유연하고 색인화 가능하며 스타일 변경이 가능한 구조입니다. 태그 자체의 관점에서 보면 추가 컨테이너 태그가 필요하지 않습니다. 처음 두 가지 방법은 무시할 수 있지만 바이트가 작아질수록 변경됩니다.
부터
은 각각 가장 중요한
에서 가장 중요하지 않은
까지 6개의 제목 레이어를 나타내며 그 자체로 추가 컨테이너 없이 자체적으로 포함될 수 있습니다. . 간단하고 효율적인 한 줄 - 작업에 가장 적합한 도구입니다.
스타일 정의가 쉽습니다

태그는 텍스트에서 여러 번 사용되므로 CSS를 사용하여 다양한 스타일을 추가할 수 있습니다(이 장의 "추가 기술"에서 자세히 설명합니다). 스타일 정의를 추가하면 제목 태그가 제목처럼 보입니다. 모든 스타일 정의가 페이지에서 제거되더라도 브라우저는 큰 글꼴과 굵은 글꼴을 사용하여

의 내용을 렌더링합니다. 올바른 제목 태그는 프레젠테이션이 아닌 내용의 의미를 설명하기 때문입니다. (그림 2-1)

그림 2-1: 스타일에서 벗어난 후 제목 태그 사용 페이지 콘텐츠
스크린 리더, PDA, 휴대폰 및 기타 시각적 및 비시각적 브라우저도 제목 태그의 내용을 인식하고 올바르게 처리하여 페이지의 다른 콘텐츠보다 제목 태그의 중요성을 강조할 수 있습니다. CSS를 지원하지 않는다(또는 지원할 수 없다)는 그것이 특별한 것이라고 생각하지 않을 것이다.

귀찮은 기본 스타일웹 디자인의 역사에서 디자이너들은 단지 제목 태그를 사용하는 것을 기피한다. 스타일이 없으면 제목 태그는 괴물처럼 보입니다. 그 중 일부는 기본 글꼴 크기가 너무 크기 때문에
를 사용하지 않습니다.
하지만 강조할 만한 중요한 점이 있습니다. CSS를 정의하여 원하는 대로 제목 태그의 스타일을 쉽게 변경할 수 있습니다. 예를 들어
나중에 CSS 스타일을 사용하여 제목 태그를 정의하여
에 대한 두려움을 극복하는 방법을 보여 드리겠습니다.

검색 엔진에 적합 이것이 가장 큰 장점입니다. 태그나 단락의 굵은 글꼴은 검색 엔진에 큰 의미가 없습니다. 하지만 이는 검색 엔진이 귀하의 페이지를 색인화하고 사용자가 귀하의 페이지를 더 쉽게 찾을 수 있도록 하는 데 도움이 될 수 있습니다.
검색 엔진 로봇은 제목 태그의 콘텐츠에 큰 중요성을 부여합니다. 및 <meta> 태그를 처리한 후 페이지 콘텐츠의 제목 태그를 처리합니다. 페이지에 제목 태그를 사용하지 않으면 제목에 있는 키워드가 관심을 끌지 않습니다. 그래서 다른 사람들이 쉽게 페이지를 찾을 수 있도록 하려면 시간이 조금 걸립니다. 콘텐츠별로 페이지를 찾는 것이 좋을 것 같죠? 태그 순서에 대한 참고사항위의 예에서 페이지에서 가장 중요한 것은 제목입니다. 전체 문서의 제목이므로 W3C에 따르면 가장 중요한 제목 태그인 <h1>을 사용합니다. 사람들은 제목 레이어를 건너뛰는 것이 좋은 습관이 아니라고 생각합니다. 예를 들어 다음과 같은 웹페이지가 있다고 가정해 보겠습니다. <h1>Super Cool Page Title</h1> 그런 다음 다음 제목(다른 <h1>이 아닌 경우)은 <h2>여야 하며, <h3> 등을 사용하면 특정 수준의 제목을 건너뛸 수 없습니다. 예를 들어 <h3> <h1> 이후에 동의하며, 구조와 개요가 동일하며 각 레벨을 순서대로 사용해야 한다고 생각합니다. 이를 통해 기존 페이지에 제목과 스타일을 동시에 추가할 수 있습니다. 앞에서 언급했듯이 디자이너는 기본 글꼴 크기가 <h1>만큼 크지 않기 때문에 페이지에서 가장 중요한 제목을 사용할 수 있습니다. 하지만 먼저 구조를 작성한 다음 스타일을 조정할 수 있습니다. CSS를 통해 제목 태그의 글꼴 크기를 변경하는 것이 좋습니다. #p# 요약페이지 내 제목을 표시하기 위해 제목 태그(<h1> ~ <h6>)를 사용하는 것이 더 좋은 이유를 간략하게 살펴보겠습니다. 방법 A:비주얼 브라우저는 CSS 기능이 비활성화되거나 지원되지 않는 경우 제목과 제목 사이의 관계를 전혀 알 수 없는 경우 일반 텍스트와 동일한 스타일로 제목을 표시합니다. 이라고 표시된 제목에는 특별한 주의를 기울이지 않습니다. 하지만 제목을 추가하면 제목 클래스에 갇히게 됩니다. 방법 B:시각적 브라우저는 콘텐츠를 굵게 표시하고 기본 글꼴 크기를 계속 사용합니다. 본문 텍스트와 다른 제목에 고유한 스타일을 추가할 수 없습니다 검색 엔진도 <에 특별한 주의를 기울이지 않습니다. ;p> 생성된 타이틀의 내용입니다. 방법 C: 은 제목 태그에 있는 텍스트의 정확한 의미를 전달합니다. 시각적 브라우저이든 비시각적 브라우저이든 상관없이 제목 콘텐츠를 올바르게 처리합니다. 읽는 형식 검색 엔진은 제목 태그의 키워드에 주의를 기울일 것입니다. 기술의 확장 여기서 방법 C를 채택하고 이를 사용하여 간단한 CSS를 실험해 보겠습니다. 스타일 타이틀 태그의 고유성을 최대한 활용하겠습니다. 타이틀 태그는 어떤 브라우저나 기기에서든 올바르게 처리될 수 있으므로 안심하고 사용할 수 있습니다. 들고 나가서 (가져갈 수 있다면 html 태그로 거리에 나가면...) 간단한 스타일 CSS를 사용하면 가장 간단하고 쉽다 효과는 CSS 규칙을 작성한 다음 페이지의 모든 <h1> 태그에 적용할 수 있다는 것입니다(외부 스타일 시트를 사용하는 경우 전체 웹사이트에 스타일을 적용할 수 있습니다). . 나중에 전체 웹사이트를 변경하려면 각 <h1> 색상, 크기 또는 글꼴에 대해 몇 가지 CSS 규칙만 수정하면 수정 사항의 효과를 즉시 확인할 수 있습니다. 우리 자신에게 말할 수 있는 매우 멋진 제목: <h1>매우 멋진 페이지 제목</h1> CSS를 사용하여 색상, 글꼴 및 크기를 변경해 보겠습니다. h1 { 글꼴 계열: Arial, sans-serif; 글꼴 크기: 24px; 색상: #369; } 방금 했던 것처럼 내가 말한 내용은 매우 간단합니다. 전체 페이지의 모든 <h1>은 그림 2-2와 같이 크기가 24픽셀이고 파란색 Arial(또는 기본 sans-serif) 글꼴로 설정되어 있습니다. <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif"> 그림 2-2: 제목 스타일 예 다음으로 제목 텍스트 아래에 1픽셀 너비의 회색 테두리를 계속 추가합니다(그림 2-3). h1 { 글꼴 패밀리 : Arial, sans-serif; 글꼴 크기: 24px; 색상: #369; 패딩 하단: 4px; 테두리 하단: 1px 솔리드 #999; } <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif"> 그림 2-3: 하단 테두리가 회색인 제목 스타일의 예 하단 테두리가 숨쉬기 힘들지 않도록 텍스트 하단에 내부 패치를 더 남겨두었습니다. 제목 때문에 레이블은 블록 수준 요소이므로 테두리가 텍스트 하단을 채울 뿐만 아니라 전체 페이지 너비를 채울 때까지 오른쪽으로 계속 확장됩니다. 또한 언급할 가치가 있습니다. 테두리의 약어를 사용합니다. 즉, 선언은 너비, 스타일 및 색상도 정의하여 다른 효과가 있는지 확인할 수 있습니다. #p# 배경 추가 배경에 배경색과 여백만 추가하면 제목에 은은한 효과를 더할 수 있어 산뜻하고 산뜻한 느낌을 연출할 수 있습니다. 그림을 사용하지 않습니다. 예: h1 { 글꼴 계열: Arial, sans-serif; 글꼴 크기: 24px; 색상: #fff; padding: 4px; background-color: #696; } 제목의 텍스트를 흰색으로 변경하고 그 주위에 4픽셀 내부 패치 공간을 남겨두고 배경을 변경합니다. 예를 들어 그림 2-4와 같이 당구대 색상의 넓은 녹색 띠가 페이지 전체에 걸쳐 두 개의 단락을 구분합니다. 4: 내부 패치 및 배경색 설정 타이틀 예시 <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif">배경 및 테두리 타이틀 아래 얇은 테두리와 밝은 배경만 추가하면 별도의 사용 없이 입체적인 효과를 연출할 수 있습니다. .이 CSS는 위의 CSS와 매우 유사하며 몇 가지 색상만 변경하고 하단에 2픽셀 테두리를 추가합니다. h1 { 글꼴 계열: Arial, sans -serif; 글꼴 크기: 24px; 색상: #666; 패딩: 4px; 배경색: #ddd; 테두리 하단: 2px 단색 #ccc; } 동일한 색상에 밝기를 달리하여 그림 2-5와 같이 사실적인 입체감을 연출할 수 있습니다. 그림 2-5: 설정 배경과 하단 가장자리 제목 <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif">타일 배경 사진을 사용하면 더욱 창의적으로 만들 수 있습니다. 포토샵을 사용하여 상단에 검은색 테두리가 있는 10X10 크기의 작은 사진을 만들어 보겠습니다. 그러면 다음은 위에서 아래로의 회색 그라데이션입니다(그림 2-6 참조). <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg"> 그림 2-6 Photoshop으로 만든 작은 그림 CSS를 사용하여 이 작은 그림을 <h1> 하단에 넣을 수 있습니다: h1 { 글꼴 - 계열: Arial, sans-serif; 글꼴 크기: 24px; 색상: #369; 패딩 하단: 14px; 배경: url(10x10.gif) 반복-x 하단 ; } 브라우저가 배경 이미지를 가로 방향으로만 배열하도록 하려면peat-x를 설정하고(반대의repeat-y는 세로 방향으로 배열하도록 설정함) 제목 하단에 그림을 추가하고 아래쪽 내부 패치를 추가하여 그림과 텍스트 사이의 거리를 조정합니다(그림 2-7) <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg"> 그림 2-7: 제목 설정 예 타일 배경 쉬운 교체를 위한 아이콘 또한 cssdeBackground 속성을 사용하여 하드 코딩된 이미지 태그를 교체하기 위해 텍스트 왼쪽에 작은 아이콘을 설정할 수도 있습니다. 제목에 장식 아이콘을 추가하면 나중에 웹사이트의 표시 효과를 매우 쉽게 변경할 수 있습니다. 전체 웹사이트의 표시 효과를 동시에 변경하려면 하나의 CSS 규칙만 바꾸면 됩니다. 코드는 위의 타일 배경과 거의 동일합니다. h1 { 글꼴 패밀리: Arial, sans-serif; 글꼴 크기: 24px; color: #369; padding-left: 30px; background: url(icon.gif) no-repeat 0 50%; } 텍스트 왼쪽에 추가 공간을 남겨둡니다. 원하는 아이콘을 생각하지 못하게 하고 배경 이미지가 타일링되지 않도록 지정하기 위해 no-repeat를 설정합니다(그림 2-8 참조). 동시에 아이콘이 화면의 0픽셀에 위치하도록 합니다. <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg"> 그림 2-8: 아이콘이 설정된 제목의 예 #p# 업데이트 용이 100페이지가 포함된 웹사이트에서 위의 방법을 사용하지 않고 <img alt="마크업 언어 - title_HTML/Xhtml_웹페이지 제작" > 각 제목 옆의 아이콘이 웹사이트 스타일과 통합되었습니다. 몇 주 후에 웹사이트 소유자가 웹사이트 스타일을 변경할 계획인데, 새 아이콘 크기가 이전 아이콘과 다릅니다. 새 아이콘의 경로를 업데이트하려면 다시 돌아가서 100페이지의 <img alt="마크업 언어 - title_HTML/Xhtml_웹페이지 제작" > 태그를 수정해야 합니다. 이러한 이벤트가 프로젝트 예산에 미치는 영향과 완료 기한에 대한 압박감을 생각해 보세요. 별로 중요하지 않은 장식용 아이콘을 CSS 파일에 통합하면 전체 사이트의 모든 아이콘을 한 번에 바꾸는 데 몇 분 밖에 걸리지 않으므로 완전히 새로운 모습을 얻을 수 있습니다! 카멜레온 효과 아래 기술은 제가 방금 말한 것과 다소 모순되지만, 이 기술은 특정한 경우에 유용하다고 생각합니다. 어떤 상황에서는 매우 유용합니다. 2003년 4월 Fast Company 매거진의 웹사이트(www.fastcompany.com)에 대한 표준 리팩토링을 수행할 때 광범위하게 사용했던 기술입니다. 당시 웹사이트에 <가 있었습니다. 다음과 같이 ;h3> 태그 옆에 많은 13X13 작은 아이콘이 사용됩니다. <h3> <img src="http://images.fastcompany.com/icon/first_imp.gif" style="max-width:90%" alt="마크업 언어 - title_HTML/Xhtml_웹페이지 제작"> 첫인상</h3> 우선 웹페이지에 아이콘을 이렇게 쓰기로 결정한 이유는 두 가지입니다. 제목 유형에 따라 다양한 아이콘이 사용됩니다(북클럽은 책, 일일 인용문은 인용 부호 등). 두 번째 이유는 현재 잡지 표지 주제에 맞게 전체 웹사이트의 색상을 매달 변경하기 때문입니다. 물론 이 교체 작업은 CSS를 사용하기 때문에 매우 간단합니다. 아이콘의 색상을 다른 페이지 요소와 함께 변경하기 위해(그래서 모든 페이지에서 새로운 색상에 대한 아이콘을 다시 만들 필요가 없습니다.) 시간), 우리는 두 가지만 사용합니다. 아이콘 세트는 흰색과 투명 두 가지 색상으로 만들어집니다. (각 변경 사항을 제외하면 배경색이 표시됩니다.) 그림 2-9는 홈페이지에서 소개 앞에 배치된 아이콘입니다. <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg"> 그림 2-9: 13X13 투명 아이콘(확대) 투명한 부분을 색상으로 채우기 위해 간단한 CSS 배경 속성을 사용하여 색상을 설정하기를 바랍니다. 제목 텍스트 뒤에는 표시되지 않고 차트 뒤에만 표시되므로 원하는 효과를 얻기 위해 h3 img; 태그 내의 이미지에만 이 규칙을 사용했습니다. { 배경: #696; } 이 CSS 코드는 <h3> 태그 내의 모든 <img alt="마크업 언어 - title_HTML/Xhtml_웹페이지 제작" > 태그가 배경을 녹색으로 설정한다는 것을 의미합니다. 배경색은 투명한 픽셀을 통해 표시되지만 이러한 방식으로 사용자만 흰색이 됩니다. 이 CSS 규칙을 수정하고 다른 색상으로 변경하면 마술처럼 웹사이트의 모든 아이콘 색상을 즉시 변경할 수 있습니다. <img alt="마크업 언어 - title_HTML/Xhtml_웹페이지 제작" > 태그 정렬 아이콘과 텍스트를 올바르게 정렬하기 위해(수직으로 중앙에 정렬하기 위해) 다음 CSS 규칙을 추가합니다: h3 img { background: #696; Vertical-align: middle ; } 이 규칙은 아이콘과 <h3> 텍스트 콘텐츠를 수직으로 중앙에 배치합니다. 그림 2-20은 게임 제목입니다. <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif"> 그림 2-10 : CSS를 아이콘으로 사용하고 배경색을 추가하는 예 이 예는 또 다른 중요한 개념을 보여줍니다. CSS로 지정된 배경색은 모든 페이지에서 지정된 아이콘 또는 CSS 아이콘 뒤에 나타납니다. 예 예를 들어, "편리하게 업데이트된 아이콘" 예를 다시 살펴보고 여기에 배경색을 추가해 보겠습니다. h1 { 글꼴 패밀리: Arial, sans-serif; 글꼴 -크기: 24px ; 색상: #fff; 왼쪽 패딩: 30px; 배경: #696 url(transparent_icon.gif) 반복 없음 0 50%; } 이제 transparent_icon .gif는 동일한 규칙에서 앞서 정의한 배경색 위에 표시됩니다(그림 2-11). 이 예에서 배경색은 #696으로 당구대의 녹색입니다. <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg"> 그림 2-11 배경 이미지와 배경 색상이 설정된 제목의 예 이 작은 트릭은 색상 중심의 페이지에 작은 둥근 모서리를 추가하고 아이콘을 장식할 때 매우 유용합니다. CSS 파일에 넣어두면 나중에 업데이트할 때 쉽게 교체할 수 있습니다. 지금 더 생각해보면 앞으로 많은 작업을 줄일 수 있습니다. 요약 일반적으로 사용되는 방법을 비교하여 제목 태그를 올바르게 사용하면 시각적, 비시각적 브라우저 또는 기타 장치에서 이전 제목의 의미를 올바르게 이해하고 표시할 수 있기를 바랍니다. 적절한 방식으로 검색 엔진도 이를 색인화하고 CSS로 표시하는 데 필요한 효과를 쉽게 적용하고 수정할 수 있습니다. </h3> </h3> </h1> </h1> </h1> </h1> </h6> </h1> </h1> </h1> </h3> </h3> </h2> </h1> </h1>