페이지 헤더. 단계별 CSS 지침에 따라 단색 헤더를 만듭니다. 페이지 헤더 요소에 글꼴 속성 할당
이번 글에서는 사이트 헤더를 만드는 방법과 사이트의 제목과 설명을 그 위에 배치하는 방법을 살펴보겠습니다.
우선 사이트 헤더에 사용할 사진이 필요합니다. Photoshop에서 수행하는 것이 가장 좋습니다.
이 편집기가 없는 분들을 위해 기본적으로 모든 Windows에서 사용할 수 있는 그림판을 사용하는 가장 쉬운 방법을 제안합니다.
이미지의 너비를 900px, 사이트의 너비, 높이를 200px로 만들어 보겠습니다. 물론 이미지 너비가 사이트 너비(래퍼)와 일치하는 한 원하는 크기를 가질 수 있으며 높이는 귀하의 재량에 달려 있습니다.
이미지가 준비되어 이미지 폴더에 배치되면 바로 이전 페이지에서 생성한 이미지를 가져와 사이트에 헤더 설치를 진행합니다.
#header 선택기에서 지정된 높이를 제거하고 촬영된 이미지의 너비와 높이를 지정합니다.
#머리글 (
너비: 900px; - 너비
높이: 200px; - 키
배경색 : #25B33f ; - 배경
여백 하단: 10px; - 하단 들여쓰기
}
그런 다음 이미지 자체를 삽입합니다.
#머리글 (
너비: 900px;
높이: 200px;
배경색 : #25B33f ;
여백 하단: 10px;
배경 이미지 : url(images/i8.png) - 그림
}
배경색 속성은 방문자의 일부 브라우저에서 갑자기 그림이 표시되지 않는 경우에 표시됩니다.
그림이 오프셋과 함께 배치되어 있고 이를 수정해야 하는 경우 여기에 속성이 추가됩니다.
이제 사이트의 제목과 설명을 입력할 차례입니다. 이를 위해 body 태그에 식별자 id="header"가 있는 div 블록을 작성하고 여기에 사이트 이름과 설명을 삽입하는 두 개의 제목 h1과 h3이 있습니다.
사이트 헤더
우리가 무엇을 할 수 있는지 봅시다.
이제 제목과 설명을 살펴보겠습니다. 이를 위해 두 개의 선택기를 만들고 다음 속성을 지정합니다.
h3의 경우 너비를 200픽셀로 설정하여 전체 이미지에 걸쳐 늘어나지 않도록 합니다. 텍스트를 배치하는 것이 더 편리한 헤더의 위치에 따라 들여쓰기를 조작할 수 있습니다.
결과를 보자.
제 생각에는 매우 귀엽습니다.
이 페이지의 코드를 요약해 보겠습니다.
제목이 없는 문서
#래퍼(
너비: 900px;
개요: 1px 솔리드 #787274 ;
패딩: 10px;
여백: 0 자동;
}
#머리글 (
너비: 900px;
높이: 200px;
배경색 : #25B33f ;
여백 하단: 10px;
배경 이미지 : url(images/i8.png)
}
#사이드바(
배경색 : #2FF553 ;
여백 하단: 10px;
너비: 180px;
패딩: 10px;
플로트: 오른쪽;
}
#콘텐츠 (
배경색 : #9EF5AF ;
여백 하단: 10px;
너비: 670px;
패딩: 10px;
}
#바닥글(
높이:80px;
배경색 : #41874E ;
여백 하단: 10px;
}
.분명한(
명확함: 둘 다;
}
h1 (
색상 : #ffee00 ;
글꼴: 40px 조지아;
여백 왼쪽 : 300px ;
}
h3 (
너비: 200px;
색상 : #ffee00 ;
글꼴 스타일: 기울임체;
여백: 70px 0 0 30px;
}
사이트 헤더
제목과 설명이 포함된 웹사이트 헤더를 만드는 방법
미래의 웹마스터 여러분, 안녕하세요!
나는 55세이고 환영하게 되어 기쁘게 생각합니다.
당신은 당신의 웹사이트에 있습니다.
이 사이트는 제가 직접 개발한 첫 번째 사이트입니다.
그 전에는 인터넷에 접속하는 방법만 알았습니다.
하지만 나에게는 나이와 '경험'을 고려할 때 쉽지 않았습니다.
이러한 뉘앙스를 정확하게 이해하기 위해 그들은
대부분의 경우.
그리고 나는 다른 사람들이 더 쉽게 읽을 수 있도록 내 자료를 쓰기로 결정했습니다.
새로운 정보의 흐름을 탐색합니다.
웹 사이트 제작에 수반되는 모든 작은 세부 사항은 여기에 "씹어"져 있습니다.
다른 작가들은 보통 건너뛰는 경우가 많습니다.
사이트 헤더에 그림을 삽입하는 또 다른 옵션이 있습니다. 제목 앞 블록에 사진의 주소를 삽입할 수 있습니다(예: 내 사진의 주소)
http://trueimages.ru/img/0b/d0/06bb1a05753316ac3c567d047ba.png ">
이 경우 #header 선택기에서 background-image 속성을 제거합니다: (../images/position.png); , 그리고 position:relative 를 작성합니다.
그리고 h1 및 h3 태그의 선택기에서 position:absolute 속성을 지정합니다. .
이 경우 제목의 들여쓰기를 변경해야 합니다. 기사에서 이것이 수행되는 이유에 대해 자세히 읽을 수 있습니다.
#머리글 (
너비: 900px;
높이 t: 200px ;
배경색 : #25B33f ;
여백 하단: 10px;
위치:상대적;
}
h1(
위치: 절대;
색상 : #ffee00 ;
글꼴: 40px 조지아;
왼쪽: 300px;
}
h3(
위치: 절대;
너비: 200px;
색상 : #ffee00 ;
글꼴 스타일: 기울임체;
상단: 70px;
왼쪽 :30px ;
}
다른 모든 것은 변경되지 않습니다.
이제 WordPress CMS에 웹사이트가 있는 사람들을 위한 몇 가지 정보가 있습니다.
이미 만들어진 테마는 이미 만들어진 헤더와 함께 WordPress에 설치되어 있지만, 이 미리 만들어진 헤더에 자신의 로고나 다른 이미지를 추가하고 싶다고 가정해 보겠습니다.
이는 다음과 같이 수행됩니다. 콘솔에서 "게시물 - 새로 추가"를 열고 편집기를 HTML 모드로 전환한 다음 사이트 헤더에 추가할 이미지를 업로드하세요.
로드한 후 이미지 코드가 편집기에 표시됩니다. 이를 복사해야 하며 "녹화"를 삭제할 수 있습니다.
그런 다음 "모양 - 편집기"로 이동하여 편집할 header.php 파일을 엽니다.
이 파일에서 해당 라인을 찾아 복사한 이미지 코드를 붙여넣습니다.
그런 다음 파일을 업데이트하고 이미지가 사이트 헤더에 어떻게 배치되는지 확인합니다.
다른 곳으로 이동해야 하는 경우 파일 편집기로 돌아가서 이미지 코드의 img 태그에 여백 속성이 포함된 스타일 속성을 추가하세요.
스타일="마진:0 0 0 0;"
그리고 이미지를 필요한 곳으로 옮깁니다.
그래서 우리는 사이트의 첫 번째 페이지를 만들었습니다. 헤더를 마무리하고 아래에 설명된 기타 수정 사항을 적용한 후 index.html 파일을 호출하여 호스팅에 업로드할 수 있습니다. 그런 다음 동일한 템플릿을 사용하여 다른 페이지가 생성되고 메뉴가 생성되는 등의 작업이 수행됩니다. 그리고 사이트는 인터넷에서 시작됩니다.
추신 누군가 WordPress 사이트 헤더의 이미지를 변경하고 헤더 위치를 조작하려는 경우 이 기사에서 이에 대해 설명합니다.
창의적인 성공을 기원합니다.
페이지 레이아웃은 HTML 문서의 구조를 개발하는 프로세스이며, 그 결과는 웹 페이지입니다. 웹페이지의 구조는 해당 HTML 태그에 의해 결정됩니다. 태그(컨텐츠용 직사각형 컨테이너 블록)는 브라우저 창에 표시되지 않습니다. 이는 브라우저에 콘텐츠 유형을 알려주고, 브라우저는 이 정보를 기반으로 콘텐츠(텍스트 또는 미디어 파일)를 표시합니다.
블록을 사용하여 페이지 구조를 만드는 방법(블록 레이아웃) 1. 페이지 레이아웃을 섹션으로 나누는 방법페이지 레이아웃을 만들려면 문서의 주요 섹션(섹션)을 선택해야 합니다. 기사에서 단면 요소에 대해 자세히 알아볼 수 있습니다.
표준 웹 페이지에는 다음 섹션이 포함되어 있습니다.
쌀. 1. 페이지의 주요 섹션
모든 브라우저에서 지원되지 않는 요소이므로 사용하지 않겠습니다.
강요,
블록 기반이므로 컨테이너 블록 요소의 전체 너비를 차지합니다. 이 레이아웃의 페이지는 작은 화면에서는 보기 좋게 보이지만 고해상도 장치에서는 이러한 페이지의 텍스트를 읽기 어려울 수 있습니다. 따라서 콘텐츠(각 섹션의 콘텐츠)에 대한 컨테이너 태그를 추가해야 합니다. 
쌀. 2. 컨테이너 태그가 있는 페이지의 주요 섹션
최대 너비인 내부 패딩(해상도가 낮은 장치의 화면 가장자리에서 콘텐츠를 분리하는 내부 패딩)과 상위 블록 중앙에 컨테이너를 정렬할 수 있는 외부 패딩을 설정합니다.
컨테이너( 너비: 100%; max-width: 1024px; /*최대 너비는 다른 값을 가질 수 있습니다*/ padding: 0 15px; margin: 0 auto; )
따라서 우리는 페이지에 대한 프레임을 받았습니다(이 경우 섹션의 높이는 가상입니다. 콘텐츠가 없으면 섹션의 높이가 0이기 때문입니다).
2. 사이트 헤더 레이아웃 및 해당 요소 위치 지정소위 웹 페이지의 헤더라고 불리는 첫 번째 섹션을 마크업해 보겠습니다. 이 요소는 페이지/사이트의 소개 정보와 탐색 도구를 그룹화하도록 설계되었습니다. 태그 내부에 사이트 로고와 탐색 링크를 추가해 보겠습니다.
쌀. 3. 로고와 링크가 추가된 웹사이트 헤더 Logo ( float: left; ) nav ( float: right; ) nav ul ( margin: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /* 요소를 배치하는 한 가지 방법 선 */ )
블록 요소를 연속적으로 배치하는 방법에는 여러 가지가 있습니다. 그들 모두는 수업에서 제공됩니다.
쌀. 4. 컨테이너 블록 붕괴의 영향 랩을 적용한 후 헤더가 사라졌습니다. 이는 부동 요소(float 속성이 설정된 요소)가 일반 흐름에서 제거되고 상위 컨테이너에 더 이상 높이가 표시되지 않아 요소와 그 안에 클래스 .container가 있는 요소가 모두 축소되었기 때문에 발생했습니다. 이 상황을 해결하려면 .container 클래스가 있는 요소에 대해 스트림 정리를 사용해 보겠습니다.
컨테이너:이후( 내용: ""; 표시: 테이블; 지우기: 둘 다; )
또한 헤더 가장자리에서 내부 요소를 분리하는 수직 패딩을 추가할 것입니다. 결과적으로 스타일은 다음과 같습니다.
컨테이너(너비: 100%; 최대 너비: 1024px; 패딩: 15px; 여백: 0 자동; ) 
쌀. 5. 하천 청소
그림이 로고 역할을 하는 상황을 생각해 봅시다. 태그 내부에 직접 추가하거나 배경 이미지로 추가할 수 있습니다. 이미지는 자체 높이를 가지며 이는 탐색 메뉴의 높이와 매우 다를 수 있으므로 헤더 요소의 수직 정렬 문제에 직면하게 됩니다.
쌀. 6. 로고 사진 이 예에서는 로고 높이가 38px이므로 메뉴 링크를 헤더 중앙에 정렬하려면 적절한 줄 높이로 설정해야 합니다.
Nav a (텍스트 장식: 없음; 줄 높이: 38px; ) 그림. 7. 헤더 메뉴 링크 정렬
3. 페이지 주요 부분에 대한 그리드를 만듭니다.페이지의 주요 부분은 다양한 너비의 블록으로 구성된 그리드인 경우가 가장 많습니다. 이러한 블록의 위치 지정은 float 속성을 사용하여 수행됩니다. .row 클래스를 사용하여 각 블록 행을 추가 블록으로 래핑합니다.
쌀. 7. 페이지 주요 부분의 그리드.col-1-2 ( width: 50%; float: left; ) .col-1-3 ( width: 33.3333333333%; float: left; ) .col-1-4 ( 너비: 25%; 부동: 왼쪽; .col-2-3 ( 너비: 66.6666666667%; 부동: 왼쪽; )
.row 클래스가 있는 요소의 경우 스트림 정리도 적용합니다.
컨테이너:이후, .row:이후( 내용: ""; 표시: 테이블; 지우기: 둘 다; )
행을 서로 분리하려면 아래쪽 여백을 추가하면 됩니다.
행( 여백-하단: 15px; )
그리드 블록의 높이는 내용의 높이에 따라 결정되므로 다를 수 있습니다.
쌀. 8. 그리드 요소의 높이가 다릅니다. 블록의 높이는 명시적으로 지정하여 고정할 수 있습니다(예: .row div (height: 100px) ). 하지만 이 경우 레이아웃에 적응성을 추가할 때 블록의 내용이 블록의 가장자리를 넘어 확장되지 않는지 확인해야 합니다.
행 블록의 배경색을 설정해야 하는 경우 다음과 같이 수행할 수 있습니다. .row 클래스가 있는 요소의 경우 이 행만 스타일을 지정할 수 있는 새 클래스를 추가합니다(결과적으로 . 행 1행), 높이가 작은 블록의 배경색을 지정하고 키가 큰 블록의 경우 자체 색상을 설정합니다. 즉, 이런 방식으로 배경 배경을 만듭니다.
Lorem ipsum dolor sit amet.
Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget Vestibulum lorem semper at.
행-1( 배경: 연한 파란색; ) .col-2-3( 너비: 66.6666666667%; 부동: 왼쪽; 배경: 조개; ) 
쌀. 9. 배경 매트
페이지의 기본 섹션에 두 개의 블록만 포함되어 있으면 추가 래퍼 행이 추가되지 않을 수 있습니다.
4. 페이지 바닥글 레이아웃페이지 바닥글 또는 바닥글에는 일반적으로 저작권 정보, 추가 링크 등이 포함됩니다. 이 모든 정보는 너비가 같거나 다를 수 있는 열에도 배치됩니다.
많은 분들이 이미 트렌드에 사용자가 페이지를 스크롤할 때 계속 눈에 띄는 끈적한 디자인 요소가 점점 더 많아지고 있다는 사실을 알고 계실 것입니다. 제 생각에는 이것은 특히 사이트 탐색의 경우 매우 편리합니다. 이것이 바로 오늘 우리가 할 예입니다. 애니메이션이 포함된 JQuery와 CSS3를 사용하여 애니메이션 웹사이트 헤더를 만드는 방법을 알아봅니다.
평소와 마찬가지로 이 작업은 최소한의 코드 라인으로 수행되며 매우 간단하면서도 동시에 매우 효과적입니다. 자, 이제 수업을 시작하겠습니다.
하지만 먼저 http://www.webdesignerdepot.com에 큰 감사를 전하고 싶습니다. 이제 시작하겠습니다.
Ι HTMLHTML 코드는 매우 간단합니다. 태그를 설정한 다음 태그 사이에 사이트 콘텐츠를 작성하면 됩니다.
첨부된 사이트 헤더이것은 가장 간단한 예이므로 여기서는 h1 태그 사이에 텍스트를 추가했지만 이미지를 사용하거나 사이트 탐색 등을 사용할 수도 있습니다.
jQuery 코드CSS는 오늘날 애니메이션과 전환을 구현하는 가장 좋은 방법입니다. 따라서 우리는 페이지를 스크롤할 때 애니메이션 트리거를 정의하기 위해서만 최소한의 스크립트를 사용할 것입니다.
페이지 스크롤 위치 값이 1보다 크면 사용자가 페이지를 스크롤했다는 의미이므로 사이트 헤더 태그에 "고정" 클래스를 추가해야 합니다. 이것이 사이트 헤더가 트리거되고 수정되는 방식입니다.
코드 자체는 다음과 같습니다.
$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("어려운");
이 예에서 이를 사용하는 것은 그다지 좋은 생각이 아니라는 점에 유의하는 것이 중요합니다. 브라우저에서 스크립트 사용이 비활성화되어 있으면 사이트 헤더가 단순히 수정되고 그게 전부이기 때문입니다.
CSSCSS 코드는 두 부분으로 구성됩니다. 첫 번째 코드는 기본 위치에 있는 표준 사이트 헤더를 담당합니다. 두 번째 코드는 사용자가 페이지를 스크롤할 때 헤더를 표시하는 역할을 합니다. 기본 코드가 어떻게 보이는지 살펴보겠습니다.
헤더( 위치: 고정; 너비: 100%; 텍스트 정렬: 중앙; 글꼴 크기: 72px; 줄 높이: 108px; 높이: 108px; 배경: #335C7D; 색상: #fff; 글꼴 계열: "PT Sans ", 산세 리프; )
이제 흥미로운 부분은 사용자가 페이지를 아래로 스크롤하면 .sticky 클래스가 적용되어 CSS만이 할 수 있는 완전히 다른 디스플레이를 제공할 수 있다는 것입니다. 또한 사이트 헤더가 항상 표시되도록 고정 위치를 설정합니다.
아래 CSS 규칙을 사용하여 스크롤할 때 헤더 자체의 영역을 줄이고, 색상을 변경하고, 물론 글꼴도 더 작게 만들고 싶습니다. 코드 자체는 다음과 같습니다.
Header.sticky( 글꼴 크기: 24px; 줄 높이: 48px; 높이: 48px; 배경: #efc47D; 텍스트 정렬: 왼쪽; 왼쪽 패딩: 20px; )
이것은 작업의 본질을 이해하는 가장 간단한 예입니다. 그것은 모두 사이트 디자인에 따라 다릅니다.
이제 전환에 애니메이션을 추가해 보겠습니다. 코드는 다음과 같습니다.
전환: 모두 0.4초 용이성;
Ⅰ 결론이 방법이 사이트의 편리하고 간단한 탐색 구현과 관련된 많은 질문을 해결하기를 바랍니다. 게다가 이 구현은 매우 간단하고 이해하기 쉽습니다.
유동 레이아웃의 가장 큰 어려움은 높은 해상도에서 낮은 해상도까지 다양한 해상도에서 올바른 표시를 보장하는 것입니다. 콘텐츠 너비를 760픽셀로 제한했기 때문에 이미지의 더 중요한 부분이 이 크기에 맞도록 헤더 이미지를 배치해야 합니다. 그림에서. 6.3에서는 이를 수행하는 방법을 보여줍니다. 너비가 760px인 중앙 부분은 어두운 색으로 강조 표시됩니다. 문자 A는 동일한 너비의 나머지 조각을 나타냅니다.
쌀. 6.3. 캡 너비
헤더에 이미지를 실제로 추가하는 것은 배경 이미지를 통해 이루어지며, 배경 이미지는 요소 중앙에 정렬되어야 합니다.
헤더( 디스플레이: 블록; /* 이전 브라우저의 경우 */ height: 405px; /* 헤더 높이 */ background: url(images/header-bg.png) 반복 없음 중앙 하단; )
이상적으로는 그림의 너비가 2000픽셀로 넓어야 하며 거의 모든 모니터 해상도에서 그림의 중앙 부분이 표시되어 창에 맞지 않는 모든 부분이 잘립니다. 하지만 문제는 처음에는 그림이 그렇게 넓지 않고, 끝없이 옆으로 늘어지는 검은 줄무늬를 그리고 싶지 않다는 것입니다. 한 가지 해결책은 수평 배경 반복을 활성화하는 것입니다. 너비가 1280픽셀 이하인 해상도를 가진 사람들은 한 장의 사진을 볼 수 있고, 와이드 모니터 소유자는 여러 동물과 석양을 동시에 감상할 수 있습니다. 여기에서는 조인트 없이 수평으로 맞도록 도면을 편집하는 것이 중요합니다(그림 6.4). 명확성을 위해 그라데이션이 숨겨졌습니다.
쌀. 6.4. 이미지를 수평으로 정렬
본 도면에서는 관절이 보이도록 화살표와 공백으로 표시하였다. 배경 이미지의 오른쪽과 왼쪽 부분을 정확하게 편집하면 하나의 연속된 패턴처럼 눈에 띄는 연결선 없이 수평으로 반복됩니다. 남은 것은 no-repeat(반복 없음) 값을peat-x(수평으로 반복)로 대체하여 스타일을 약간 수정하는 것입니다.
헤더( 디스플레이: 블록; 높이: 405px; 배경: url(images/header-bg.png) 반복-x 중앙 하단; )
쌀. 6.5. 헤더의 배경 이미지
PNG-24 형식에서 배경 크기가 1325x405픽셀인 파일은 약 32KB를 차지하고 256색 팔레트를 사용하는 PNG-8에서는 그라데이션 품질이 약 15KB로 약간 더 나쁩니다. 배경을 그라디언트와 그림이라는 두 가지 구성 요소로 분할하고 각 이미지를 자체 형식으로 저장할 수 있으므로 그라디언트 표시 품질이 향상됩니다. 그러나 이러한 큰 이미지의 경우 32KB는 많지 않으며 일부에서는 "일치 항목 저장" 추가 최적화를 고려할 것입니다. 그러나 일부 사람들은 웹 사이트 헤더를 만드는 데 있어 이 대체 접근 방식이 유용하다고 생각할 수 있으므로 원할 경우 건너뛸 수 있습니다.
헤더 최적화헤더의 그라데이션은 가로 방향으로 반복되기 때문에 레이아웃에서 잘라내어 배경 이미지로 설정할 수 있습니다. 그림에서. 그림 6.6은 이 목적을 위해 준비된 405픽셀의 높은 그래디언트를 보여줍니다. PNG-24 형식은 이미지가 왜곡되지 않고 그라데이션도 잘 압축하므로(최종 용량은 402바이트) 이 경우 반드시 사용해야 합니다. 명확성을 위해 그림 주위에 프레임이 추가되었습니다.
쌀. 6.6. 그라데이션 그리기(header-gradient.png)
실루엣 동물이 있는 사진은 투명한 배경과 높이 198픽셀로 만들어지며, 일부만 차지하므로 헤더의 전체 높이로 만드는 것은 의미가 없습니다. 이미지의 일부가 그림 1에 나와 있습니다. 6.7. 바둑판은 투명성을 의미합니다.
쌀. 6.7. 투명도가 있는 배경 이미지(header-animal.png)
이 이미지는 PNG-24 형식의 256레벨과 달리 투명도 레벨이 1개만 있는 PNG-8 형식으로 저장되므로 그라데이션 배경에 올바른 오버레이를 보장하는 것이 중요합니다. 이렇게 하려면 포토샵에서 저장할 때 실루엣이 겹쳐지는 그라데이션 중간 부분에 가까운 가장자리(매트)의 색상을 지정해야 합니다. 이것은 대략 #9de1f0 색상입니다. 이 경우 나무와 동물 주위에 더러운 윤곽선이 없으며 그라디언트에 겹쳐지면 그림이 하나의 전체로 인식됩니다.
헤더 배경용 사진 두 장을 준비하고 HTML 코드를 작성합니다.
그리고 header-bg 요소와 레이어의 스타일입니다.
헤더( 배경: #00b0d8 url(images/header-gradient.png) 반복-x; ) .header-bg ( 배경: url(images/header-animal.png) 반복-x 중앙 하단; 높이: 405px; )
그 결과 파일 크기는 예상보다 훨씬 적은 12.5KB로 나타났습니다.
사이트 이름제목은 가장자리에 깃털이 있는 구름 위에 쓰여 있으므로 그라디언트를 적용하기가 어렵습니다. 이 문제를 해결하는 방법에는 두 가지가 있습니다.
분명히 두 번째 방법에는 여러 가지 단점이 있습니다. 이미지는 몇 픽셀이라도 이동할 수 없으며 그라디언트에 묶여 있으며 그라디언트가 변경되면 이미지를 변경해야 합니다. 따라서 헤더를 PNG-24 형식으로 저장합니다. HTML 코드는 동일하게 유지되지만 스타일은 확장됩니다.
헤더( 배경: #00b0d8 url(images/header-gradient.png) 반복-x; ) .header-bg ( 배경: url(images/header-animal.png) 반복-x 중앙 하단; 높이: 405px; /* 헤더 높이 */ text-align: center; /* 가운데 정렬 */ ) .header-bg img ( position:relative; /* 상대 위치 지정 */ top: 40px; /* 이미지를 아래로 이동 */ )
중앙 정렬은 태그의 상위 항목에 추가된 text-align 속성을 통해 수행됩니다. , 상단 속성을 통해 아래로 이동합니다. 이 속성이 작동하려면 상대 값이 있는 위치 속성을 사용하여 이미지의 상대 위치를 설정해야 합니다.
사이트의 메인 페이지에는 제목이 있는 그림이 평소와 같이 표시되며 다른 페이지에서는 메인 페이지에 대한 링크 역할을 합니다. 이렇게 하려면 코드를 약간 변경하면 됩니다.
href 속성의 /y 값은 홈 페이지를 가리키며 로컬이 아닌 웹 서버에서만 작동합니다.
헤더의 최종 코드는 예제 6.14에 나와 있습니다.
예제 6.14. 사이트 헤더
HTML5 CSS 2.1 IE Cr Op Sa Fx
사막에서 사자를 잡는 방법?
단순해 보이는 레이아웃 작업에는 복잡한 HTML 마크업 구조와 CSS 트릭이 필요한 경우가 많습니다. 요소를 중앙에 배치하거나 콘텐츠를 정렬하는 것은 매우 지루할 수 있습니다. 그러한 작업 중 하나는 로고가 왼쪽에 있고 메뉴 항목이 오른쪽에 있도록 사이트 상단의 요소를 정렬하는 것입니다. 부동 및 위치:절대를 사용할 수 있으며 수직 정렬의 경우 다양한 요소에 여백과 패딩을 추가할 수 있습니다. 복잡하지 않은 것 같습니다. 하지만 사이트가 모바일 기기에서 올바르게 표시되어야 한다면 많은 문제가 발생합니다.
아래는 이 문제를 해결하는 간결한 방법입니다.
HTML 마크업은 최대한 간단합니다.
슈퍼 배드 첫 번째 링크 두 번째 링크 세 번째 링크헤더의 높이는 고정되어 있습니다. 텍스트 정렬: 양쪽 정렬, 하위 요소의 경우:
헤더( 텍스트 정렬: 양쪽 정렬; 문자 간격: 1px; 높이: 8em; 패딩: 2em 10%; 배경: #2c3e50; 색상: #fff; )
추가하다 디스플레이: 인라인 블록모든 탐색 요소를 서로 옆에 배치할 수 있도록 하려면 다음을 수행하세요.
헤더 h1, 헤더 탐색(표시: inline-block;)
속성에 텍스트 정렬: 양쪽 정렬우리가 원하는 대로 작동하려면 의사 요소에 약간의 트릭을 사용해야 합니다. 이 내용은 Jelmer de Maat가 쓴 인라인 블록을 사용하여 완벽하게 정당화된 CSS 그리드 기술 기사에서 찾을 수 있습니다.
헤더::이후( 내용: ""; 표시: 인라인 블록; 너비: 100%; )
결과는 사용하지 않고 수평 정렬되었습니다. 뜨다그리고 위치:절대. 이제 요소를 수직으로 정렬해야 합니다. 사용 수직 정렬탐색 요소의 경우 상위 블록(헤더)의 높이에 따라 달라집니다. 그리고 이것은 그다지 정확하지 않습니다. jsbin에서 수직 정렬: 상단 및 수직 정렬: 중간을 사용하는 예입니다. 아래는 아마도 수직 정렬을 위한 가장 편리한 방법일 것입니다.
의사 요소를 다시 사용해 보겠습니다. Michał Czernow가 언급한 Centering in the Unknown 기사의 예를 사용하면 다음과 같습니다.
헤더 h1( 높이: 100%; ) 헤더 h1::before( content: ""; 디스플레이: inline-block; 수직 정렬: 중간; 높이: 100%; )
결과는 다음과 같습니다.
해결해야 할 두 가지 문제가 남아 있습니다. 헤더에 많은 양의 텍스트가 있을 때 올바른 표시와 적응성입니다. 사이트 제목이 너무 길면 레이아웃이 슬라이드되기 시작합니다.
헤더에 의사 요소 트릭을 사용해 보겠습니다.
CSS 코드
헤더( text-align: justify; 높이: 15em; 패딩: 2em 5%; 배경: #2c3e50; 색상: #fff; ) header::after ( content: ""; 디스플레이: inline-block; 너비: 100%; ) 헤더 > div, 헤더 탐색, 헤더 div h1( 디스플레이: inline-block; 수직 정렬: 중간; ) 헤더 > div( 너비: 50%; 높이: 100%; 텍스트 정렬: 왼쪽; ) 헤더 > div: :before ( 내용: ""; 디스플레이: 인라인 블록; 수직 정렬: 중간; 높이: 100%; )
훨씬 좋아 보인다:
이제 적응성으로 넘어 갑시다. 이 문제를 해결하는 방법에는 여러 가지가 있습니다. 단순히 헤더의 높이를 설정할 수 없으며 모든 내부 요소가 높이에 맞춰집니다. jsbin의 라이브 예제인 의사 요소를 사용하는 두 번째 트릭이 필요하지 않습니다.
CSS 코드
헤더( text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; 디스플레이: inline-block; 너비: 100%; ) 헤더 h1, 헤더 탐색(디스플레이: inline-block; 수직 정렬: 중간; ) 헤더 h1( 너비: 50%; 텍스트 정렬: 왼쪽; 패딩 상단: 0.5em; ) 헤더 탐색( 패딩 상단: 1em; )
헤더의 높이를 설정해야 하는 경우 의사 요소와 함께 두 번째 트릭을 사용하고 다양한 크기의 화면에 대한 미디어 쿼리를 추가해야 합니다.
@media 화면 및 (최대 너비: 820px)( 헤더( 높이: 자동; ) 헤더 > div, 헤더 >
결과는 적응형이며 모바일 장치에서는 다음과 같습니다.
이 예에서는 라이브 사이트에서 명확성을 위해 820px가 사용되었으며 요구 사항에 따라 값이 달라져야 합니다. Internet Explorer 8을 지원하려면 의사 요소에 "::" 대신 ":"을 사용해야 합니다.
최종 CSS 코드
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( 패딩: 0; 여백: 0; ) 본문 ( 배경: #1abc9c; 글꼴 계열: "Lato", sans-serif; 텍스트 변환: 대문자; 문자 간격: 1px;) 헤더 ( 텍스트 정렬: 양쪽 맞춤 ; 높이: 8em; 패딩: 2em 5%; 색상: #fff; ) 헤더::after ( 내용: ""; 너비: 100%; ) 헤더 > div, 헤더 > div::before, 헤더 탐색 h1 ( 디스플레이: 인라인 블록; 수직 정렬: 중간; 텍스트 정렬: 왼쪽; ) 헤더 > div ( 높이: 100%; ) 헤더 > div::before ( 콘텐츠 : ""; 높이: 100%; ) 헤더 > div h1 ( 글꼴 크기: 3em; 글꼴 스타일: 기울임꼴; ) 헤더 탐색 a ( 패딩: 0 0.6em; 공백: nowrap; ) 헤더 탐색 a:last -child ( 패딩 오른쪽: 0; ) @ 미디어 화면 및 (최대 너비: 720px)( 헤더( 높이: 자동; ) 헤더 > div, 헤더 > div h1, 헤더 탐색( 높이: 자동; 너비: 자동; 디스플레이: 블록; 텍스트 정렬: 센터;
결과:
안녕하세요 여러분. 오늘 저는 사람들이 블로그를 방문할 때 사용하는 검색어 통계를 살펴본 결과 전혀 관련성이 없는 검색어가 여러 개 있다는 사실을 발견했습니다. 아니요, 블로그가 아니라 기사입니다.
그 중 하나는 사이트 헤더를 수정하는 방법입니다. 주제가 관련성이 있고 이 영역에 질문이 있기 때문에 나는 즉시 상황을 수정하고 기사를 작성하기로 결정했습니다.
일반적으로 페이지를 스크롤하는 방법에는 여러 가지가 있습니다. 자바스크립트를 사용할 수 있지만 저는 이 주제에 그다지 능숙하지 않고 단지 배우고 있는 중입니다. 따라서 지금은 CSS를 사용하겠습니다. 다행스럽게도 "적은 비용"으로 사이트 헤더(헤더뿐만 아니라 다른 모든 요소)를 수정할 수 있습니다. :)
실제로 페이지를 스크롤할 때 요소를 수정하는 방법은 매우 간단하며 이 문제가 얼마나 쉽게 해결되는지 놀라게 될 것입니다.
페이지를 스크롤할 때 헤더 수정헤더를 수정하려면 두 개의 블록을 만들어야 합니다. 하나 - 캡을 중앙에 위치시킬 수 있도록 합니다. 그리고 그 안에는 기록될 아이가 있습니다. 의 시작하자...
이것은 매우 간단한 HTML 구조입니다! 이제 스타일을 추가해 보겠습니다!
#headerMain(너비:920px; 높이: 195px; 여백:0px 자동; z-index:0; ) #header(너비:920px; 높이: 195px; 배경: url(../img/bg-header.jpg) 아니요 -반복; 위치: 고정; z-인덱스: 9999;
이제 헤더가 화면 상단에 고정되어 스크롤할 때 움직이지 않습니다.
많은 분들이 이미 트렌드에 사용자가 페이지를 스크롤할 때 계속 눈에 띄는 끈적한 디자인 요소가 점점 더 많아지고 있다는 사실을 알고 계실 것입니다. 제 생각에는 이것은 특히 사이트 탐색의 경우 매우 편리합니다. 이것이 바로 오늘 우리가 할 예입니다. 애니메이션이 포함된 JQuery와 CSS3를 사용하여 애니메이션 웹사이트 헤더를 만드는 방법을 알아봅니다.
평소와 마찬가지로 이 작업은 최소한의 코드 라인으로 수행되며 매우 간단하면서도 동시에 매우 효과적입니다. 자, 이제 수업을 시작하겠습니다.
하지만 먼저 http://www.webdesignerdepot.com에 큰 감사를 전하고 싶습니다. 이제 시작하겠습니다.
Ι HTMLHTML 코드는 매우 간단합니다. 태그를 설정한 다음 그 사이에 사이트 콘텐츠를 작성하면 됩니다.
첨부된 사이트 헤더 
이것은 가장 간단한 예이므로 여기서는 h1 태그 사이에 텍스트를 추가했지만 이미지를 사용하거나 사이트 탐색 등을 사용할 수도 있습니다.
jQuery 코드CSS는 오늘날 애니메이션과 전환을 구현하는 가장 좋은 방법입니다. 따라서 우리는 페이지를 스크롤할 때 애니메이션 트리거를 정의하기 위해서만 최소한의 스크립트를 사용할 것입니다.
페이지 스크롤 위치 값이 1보다 크면 사용자가 페이지를 스크롤했다는 의미이므로 사이트 헤더 태그에 "고정" 클래스를 추가해야 합니다. 이것이 사이트 헤더가 트리거되고 수정되는 방식입니다.
코드 자체는 다음과 같습니다.
$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("어려운");
이 예에서 이를 사용하는 것은 그다지 좋은 생각이 아니라는 점에 유의하는 것이 중요합니다. 브라우저에서 스크립트 사용이 비활성화되어 있으면 사이트 헤더가 단순히 수정되고 그게 전부이기 때문입니다.
CSSCSS 코드는 두 부분으로 구성됩니다. 첫 번째 코드는 기본 위치에 있는 표준 사이트 헤더를 담당합니다. 두 번째 코드는 사용자가 페이지를 스크롤할 때 헤더를 표시하는 역할을 합니다. 기본 코드가 어떻게 보이는지 살펴보겠습니다.
헤더( 위치: 고정; 너비: 100%; 텍스트 정렬: 중앙; 글꼴 크기: 72px; 줄 높이: 108px; 높이: 108px; 배경: #335C7D; 색상: #fff; 글꼴 계열: "PT Sans ", 산세 리프; )
이제 흥미로운 부분은 사용자가 페이지를 아래로 스크롤하면 .sticky 클래스가 적용되어 CSS만이 할 수 있는 완전히 다른 디스플레이를 제공할 수 있다는 것입니다. 또한 사이트 헤더가 항상 표시되도록 고정 위치를 설정합니다.
아래 CSS 규칙을 사용하여 스크롤할 때 헤더 자체의 영역을 줄이고, 색상을 변경하고, 물론 글꼴도 더 작게 만들고 싶습니다. 다음은 코드 자체입니다.
유동 레이아웃의 가장 큰 어려움은 높은 해상도에서 낮은 해상도까지 다양한 해상도에서 올바른 표시를 보장하는 것입니다. 콘텐츠 너비를 760픽셀로 제한했기 때문에 이미지의 더 중요한 부분이 이 크기에 맞도록 헤더 이미지를 배치해야 합니다. 그림에서. 6.3에서는 이를 수행하는 방법을 보여줍니다. 너비가 760px인 중앙 부분은 어두운 색으로 강조 표시됩니다. 문자 A는 동일한 너비의 나머지 조각을 나타냅니다.
쌀. 6.3. 캡 너비
헤더에 이미지를 실제로 추가하는 것은 배경 이미지를 통해 이루어지며, 배경 이미지는 요소 중앙에 정렬되어야 합니다.
헤더( 디스플레이: 블록; /* 이전 브라우저의 경우 */ height: 405px; /* 헤더 높이 */ background: url(images/header-bg.png) 반복 없음 중앙 하단; )
이상적으로는 그림의 너비가 2000픽셀로 넓어야 하며 거의 모든 모니터 해상도에서 그림의 중앙 부분이 표시되어 창에 맞지 않는 모든 부분이 잘립니다. 하지만 문제는 처음에는 그림이 그렇게 넓지 않고, 끝없이 옆으로 늘어지는 검은 줄무늬를 그리고 싶지 않다는 것입니다. 한 가지 해결책은 수평 배경 반복을 활성화하는 것입니다. 너비가 1280픽셀 이하인 해상도를 가진 사람들은 한 장의 사진을 볼 수 있고, 와이드 모니터 소유자는 여러 동물과 석양을 동시에 감상할 수 있습니다. 여기에서는 조인트 없이 수평으로 맞도록 도면을 편집하는 것이 중요합니다(그림 6.4). 명확성을 위해 그라데이션이 숨겨졌습니다.
쌀. 6.4. 이미지를 수평으로 정렬
본 도면에서는 관절이 보이도록 화살표와 공백으로 표시하였다. 배경 이미지의 오른쪽과 왼쪽 부분을 정확하게 편집하면 하나의 연속된 패턴처럼 눈에 띄는 연결선 없이 수평으로 반복됩니다. 남은 것은 no-repeat(반복 없음) 값을peat-x(수평으로 반복)로 대체하여 스타일을 약간 수정하는 것입니다.
헤더( 디스플레이: 블록; 높이: 405px; 배경: url(images/header-bg.png) 반복-x 중앙 하단; )
쌀. 6.5. 헤더의 배경 이미지
PNG-24 형식에서 배경 크기가 1325x405픽셀인 파일은 약 32KB를 차지하고 256색 팔레트를 사용하는 PNG-8에서는 그라데이션 품질이 약 15KB로 약간 더 나쁩니다. 배경을 그라디언트와 그림이라는 두 가지 구성 요소로 분할하고 각 이미지를 자체 형식으로 저장할 수 있으므로 그라디언트 표시 품질이 향상됩니다. 그러나 이러한 큰 이미지의 경우 32KB는 많지 않으며 일부에서는 "일치 항목 저장" 추가 최적화를 고려할 것입니다. 그러나 일부 사람들은 웹 사이트 헤더를 만드는 데 있어 이 대체 접근 방식이 유용하다고 생각할 수 있으므로 원할 경우 건너뛸 수 있습니다.
헤더 최적화헤더의 그라데이션은 가로 방향으로 반복되기 때문에 레이아웃에서 잘라내어 배경 이미지로 설정할 수 있습니다. 그림에서. 그림 6.6은 이 목적을 위해 준비된 405픽셀의 높은 그래디언트를 보여줍니다. PNG-24 형식은 이미지가 왜곡되지 않고 그라데이션도 잘 압축하므로(최종 용량은 402바이트) 이 경우 반드시 사용해야 합니다. 명확성을 위해 그림 주위에 프레임이 추가되었습니다.
쌀. 6.6. 그라데이션 그리기(header-gradient.png)
실루엣 동물이 있는 사진은 투명한 배경과 높이 198픽셀로 만들어지며, 일부만 차지하므로 헤더의 전체 높이로 만드는 것은 의미가 없습니다. 이미지의 일부가 그림 1에 나와 있습니다. 6.7. 바둑판은 투명성을 의미합니다.
쌀. 6.7. 투명도가 있는 배경 이미지(header-animal.png)
이 이미지는 PNG-24 형식의 256레벨과 달리 투명도 레벨이 1개만 있는 PNG-8 형식으로 저장되므로 그라데이션 배경에 올바른 오버레이를 보장하는 것이 중요합니다. 이렇게 하려면 포토샵에서 저장할 때 실루엣이 겹쳐지는 그라데이션 중간 부분에 가까운 가장자리(매트)의 색상을 지정해야 합니다. 이것은 대략 #9de1f0 색상입니다. 이 경우 나무와 동물 주위에 더러운 윤곽선이 없으며 그라디언트에 겹쳐지면 그림이 하나의 전체로 인식됩니다.
헤더 배경용 사진 두 장을 준비하고 HTML 코드를 작성합니다.
그리고 header-bg 요소와 레이어의 스타일입니다.
헤더( 배경: #00b0d8 url(images/header-gradient.png) 반복-x; ) .header-bg ( 배경: url(images/header-animal.png) 반복-x 중앙 하단; 높이: 405px; )
그 결과 파일 크기는 예상보다 훨씬 적은 12.5KB로 나타났습니다.
사이트 이름제목은 가장자리에 깃털이 있는 구름 위에 쓰여 있으므로 그라디언트를 적용하기가 어렵습니다. 이 문제를 해결하는 방법에는 두 가지가 있습니다.
분명히 두 번째 방법에는 여러 가지 단점이 있습니다. 이미지는 몇 픽셀이라도 이동할 수 없으며 그라디언트에 묶여 있으며 그라디언트가 변경되면 이미지를 변경해야 합니다. 따라서 헤더를 PNG-24 형식으로 저장합니다. HTML 코드는 동일하게 유지되지만 스타일은 확장됩니다.
헤더( 배경: #00b0d8 url(images/header-gradient.png) 반복-x; ) .header-bg ( 배경: url(images/header-animal.png) 반복-x 중앙 하단; 높이: 405px; /* 헤더 높이 */ text-align: center; /* 가운데 정렬 */ ) .header-bg img ( position:relative; /* 상대 위치 지정 */ top: 40px; /* 이미지를 아래로 이동 */ )
중앙 정렬은 태그의 상위 항목에 추가된 text-align 속성을 통해 수행됩니다. , 상단 속성을 통해 아래로 이동합니다. 이 속성이 작동하려면 상대 값이 있는 위치 속성을 사용하여 이미지의 상대 위치를 설정해야 합니다.
사이트의 메인 페이지에는 제목이 있는 그림이 평소와 같이 표시되며 다른 페이지에서는 메인 페이지에 대한 링크 역할을 합니다. 이렇게 하려면 코드를 약간 변경하면 됩니다.
href 속성의 /y 값은 홈 페이지를 가리키며 로컬이 아닌 웹 서버에서만 작동합니다.
헤더의 최종 코드는 예제 6.14에 나와 있습니다.
예제 6.14. 사이트 헤더
HTML5 CSS 2.1 IE Cr Op Sa Fx
사막에서 사자를 잡는 방법? 본문( 여백: 0; ) 헤더( 디스플레이: 블록; 배경: #00b0d8 url(images/header-gradient.png) 반복-x; /* 그라데이션 */ ) .header-bg ( 배경: url(images/header- 동물.png) 반복-x 중앙 하단; /* 동물 */ height: 405px; /* 헤더 높이 */ text-align: /* 중앙 정렬 */ .header-bg img ( 위치: 상대; 위치 지정 */ top: 40px; /* 이미지를 아래로 이동 */ )
단순해 보이는 레이아웃 작업에는 복잡한 HTML 마크업 구조와 CSS 트릭이 필요한 경우가 많습니다. 요소를 중앙에 배치하거나 콘텐츠를 정렬하는 것은 매우 지루할 수 있습니다. 그러한 작업 중 하나는 로고가 왼쪽에 있고 메뉴 항목이 오른쪽에 있도록 사이트 상단의 요소를 정렬하는 것입니다. 부동 및 위치:절대를 사용할 수 있으며 수직 정렬의 경우 다양한 요소에 여백과 패딩을 추가할 수 있습니다. 복잡하지 않은 것 같습니다. 하지만 사이트가 모바일 기기에서 올바르게 표시되어야 한다면 많은 문제가 발생합니다.
아래는 이 문제를 해결하는 간결한 방법입니다.
HTML 마크업은 최대한 간단합니다.
헤더의 높이는 고정되어 있습니다. 텍스트 정렬: 양쪽 정렬, 하위 요소의 경우:
헤더( 텍스트 정렬: 양쪽 정렬; 문자 간격: 1px; 높이: 8em; 패딩: 2em 10%; 배경: #2c3e50; 색상: #fff; )
추가하다 디스플레이: 인라인 블록모든 탐색 요소를 서로 옆에 배치할 수 있도록 하려면 다음을 수행하세요.
헤더 h1, 헤더 탐색(표시: inline-block;)
속성에 텍스트 정렬: 양쪽 정렬우리가 원하는 대로 작동하려면 의사 요소에 약간의 트릭을 사용해야 합니다. 이 내용은 Jelmer de Maat가 쓴 인라인 블록을 사용하여 완벽하게 정당화된 CSS 그리드 기술 기사에서 찾을 수 있습니다.
헤더::이후( 내용: ""; 표시: 인라인 블록; 너비: 100%; )
결과는 사용하지 않고 수평 정렬되었습니다. 뜨다그리고 위치:절대. 이제 요소를 수직으로 정렬해야 합니다. 사용 수직 정렬탐색 요소의 경우 상위 블록(헤더)의 높이에 따라 달라집니다. 그리고 이것은 그다지 정확하지 않습니다. jsbin에서 수직 정렬: 상단 및 수직 정렬: 중간을 사용하는 예입니다. 아래는 아마도 수직 정렬을 위한 가장 편리한 방법일 것입니다.
의사 요소를 다시 사용해 보겠습니다. Michał Czernow가 언급한 Centering in the Unknown 기사의 예를 사용하면 다음과 같습니다.
헤더 h1( 높이: 100%; ) 헤더 h1::before( content: ""; 디스플레이: inline-block; 수직 정렬: 중간; 높이: 100%; )
결과는 다음과 같습니다.
해결해야 할 두 가지 문제가 남아 있습니다. 헤더에 많은 양의 텍스트가 있을 때 올바른 표시와 적응성입니다. 사이트 제목이 너무 길면 레이아웃이 슬라이드되기 시작합니다.
헤더에 의사 요소 트릭을 사용해 보겠습니다.
CSS 코드
헤더( text-align: justify; 높이: 15em; 패딩: 2em 5%; 배경: #2c3e50; 색상: #fff; ) header::after ( content: ""; 디스플레이: inline-block; 너비: 100%; ) 헤더 > div, 헤더 탐색, 헤더 div h1( 디스플레이: inline-block; 수직 정렬: 중간; ) 헤더 > div( 너비: 50%; 높이: 100%; 텍스트 정렬: 왼쪽; ) 헤더 > div: :before ( 내용: ""; 디스플레이: 인라인 블록; 수직 정렬: 중간; 높이: 100%; )
훨씬 좋아 보인다:
이제 적응성으로 넘어 갑시다. 이 문제를 해결하는 방법에는 여러 가지가 있습니다. 단순히 헤더의 높이를 설정할 수 없으며 모든 내부 요소가 높이에 맞춰집니다. jsbin의 라이브 예제인 의사 요소를 사용하는 두 번째 트릭이 필요하지 않습니다.
CSS 코드
헤더( text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; ) header::after ( content: ""; 디스플레이: inline-block; 너비: 100%; ) 헤더 h1, 헤더 탐색(디스플레이: inline-block; 수직 정렬: 중간; ) 헤더 h1( 너비: 50%; 텍스트 정렬: 왼쪽; 패딩 상단: 0.5em; ) 헤더 탐색( 패딩 상단: 1em; )
헤더의 높이를 설정해야 하는 경우 의사 요소와 함께 두 번째 트릭을 사용하고 다양한 크기의 화면에 대한 미디어 쿼리를 추가해야 합니다.
@media 화면 및 (최대 너비: 820px)( 헤더( 높이: 자동; ) 헤더 > div, 헤더 >
결과는 적응형이며 모바일 장치에서는 다음과 같습니다.
이 예에서는 라이브 사이트에서 명확성을 위해 820px가 사용되었으며 요구 사항에 따라 값이 달라져야 합니다. Internet Explorer 8을 지원하려면 의사 요소에 "::" 대신 ":"을 사용해야 합니다.
최종 CSS 코드
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( 패딩: 0; 여백: 0; ) 본문 ( 배경: #1abc9c; 글꼴 계열: "Lato", sans-serif; 텍스트 변환: 대문자; 문자 간격: 1px;) 헤더 ( 텍스트 정렬: 양쪽 맞춤 ; 높이: 8em; 패딩: 2em 5%; 색상: #fff; ) 헤더::after ( 내용: ""; 너비: 100%; ) 헤더 > div, 헤더 > div::before, 헤더 탐색 h1 ( 디스플레이: 인라인 블록; 수직 정렬: 중간; 텍스트 정렬: 왼쪽; ) 헤더 > div ( 높이: 100%; ) 헤더 > div::before ( 콘텐츠 : ""; 높이: 100%; ) 헤더 > div h1 ( 글꼴 크기: 3em; 글꼴 스타일: 기울임꼴; ) 헤더 탐색 a ( 패딩: 0 0.6em; 공백: nowrap; ) 헤더 탐색 a:last -child ( 패딩 오른쪽: 0; ) @ 미디어 화면 및 (최대 너비: 720px)( 헤더( 높이: 자동; ) 헤더 > div, 헤더 > div h1, 헤더 탐색( 높이: 자동; 너비: 자동; 디스플레이: 블록; 텍스트 정렬: 센터;
결과:
