.png)
HTML 및 CSS를 사용하여 정적 바닥글 작성 방법(7절)
소개
CSS 시리즈의 마지막 강좌에서는 방문자가 페이지를 아래로 스크롤할 때 뷰포트 아래쪽에 고정된 위치를 유지하는 정적 바닥글을 만듭니다.이 강좌는 demonstration website 에서 페이지를 다시 만들 것입니다. 그러나 다른 사이트 프로젝트에 사용할 수도 있습니다.
선결 조건
본 강좌를 배우려면 본 시리즈의 이전 강좌How To Set Up You CSS and HTML Practice Project의 설명에 따라 필요한 파일과 폴더가 설정되어 있는지 확인하십시오.
이 강좌는 페이지의 내용으로 여러 개의 소셜 미디어 아이콘을 사용합니다.이 아이콘을 사용하려면 다음 형식으로 저희 프레젠테이션 사이트에서 다운로드하여 이미지 폴더에 저장하십시오.
CTRL + Left Click (Mac에서) 또는 Right Click (Windows에서) 을 클릭한 다음 다른 이름으로 이미지를 저장합니다.지정된 파일 이름을 가진 이미지를 images 폴더에 저장합니다.아이콘을 저장한 후 다음 절을 계속할 수 있습니다.
바닥글 스타일을 설정하기 위해 클래스 추가
우선,
styles.css 파일의 밑에 다음 코드 세그먼트를 추가하여 "footer"클래스를 정의합니다.스타일css
. . .
/* Footer */
.footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 90px;
background-color: #D0DAEE;
}
styles.css 파일을 저장합니다.이 코드 세그먼트에서 페이지 하단의 CSS 코드를 표시하는 주석을 추가했습니다.그리고 footer라는 클래스를 정의하고 몇 가지 스타일 규칙을 설명했다.첫 번째 규칙은 position 을 fixed, 로 선언합니다. 이것은 사용자가 페이지를 아래로 스크롤할 때 요소가 지정된 위치에서 이동하지 않는다는 것을 의미합니다.이 위치는 다음과 같은 두 가지 선언으로 지정됩니다.bottom:0 및left:0. 이 두 선언은 브라우저 뷰포트의 왼쪽 픽셀과 아래쪽 픽셀의 위치를 지정합니다.이러한 값을 변경하여 페이지에서 요소의 위치를 변경할 수 있습니다.단, 0을 제외한 모든 값은 숫자 뒤에
px 접두사를 포함해야 한다는 것을 주의하십시오.규칙 집합은 footer 클래스의 너비, 높이 및 배경색도 지정합니다.이제 이 강좌의 다음 절에 페이지 내용을 추가할 수 있습니다.
Footer 클래스로 스타일을 설정하는 바닥글 추가
바닥글 내용을 추가하려면 웹 페이지에
<div> 용기를 추가하고 방금 만든 바닥글 종류를 분배합니다.index.html 파일로 돌아가 마지막 끝 </div> 태그가 끝나면 다음 코드 세그먼트를 붙여넣습니다.지수html
. . .
<!--Section 7: Footer-->
<div class="footer">
</div>
index.html을 저장하고 브라우저에서 다시 로드합니다.(HTML 파일 로드에 대한 자세한 내용은 자습서 단계How To View An Offline HTML File In Your Browser를 참조하십시오.현재 웹 페이지 밑에 빈 페이지가 있어야 합니다. 페이지를 위아래로 스크롤할 때 이 부분은 변하지 않습니다.
다음에 새로 만든 페이지 끝에 내용을 추가합니다.
페이지 끝에 메뉴 항목을 추가하고 스타일을 설정하는 방법
이 단계에서 페이지 맨 왼쪽에 메뉴 항목을 추가하고 스타일을 설정합니다.이 메뉴 항목은 사이트의 다른 페이지에 연결할 수 있습니다.현재 귀하의 사이트에는 웹 페이지가 하나밖에 없기 때문에 저희가 제공한 링크를 사용하여 프레젠테이션을 할 수 있습니다.나중에 사이트에 다른 페이지를 추가하면 메뉴 항목을 만들고 정확한 링크를 추가할 수 있습니다.이 강좌를 통해 새 웹 페이지를 만들고 연결하는 방법을 배울 수 있습니다.
styles.css 파일을 반환하고 파일 아래에 다음 코드 세그먼트를 추가합니다.스타일css
. . .
.footer-text-left {
font-size:25px;
padding-left:40px;
float:left;
word-spacing:20px;
}
a.menu:hover {
background-color:yellow;
font-size:20px;
}
첫 번째 규칙 집합은 메뉴 항목의 텍스트 스타일을 설정하는 데 사용할
footer-text-left 이라는 클래스를 정의합니다.float 속성을 left 로 설정하여 이러한 텍스트가 페이지 왼쪽으로 이동하도록 할당하고 있습니다.또한 word-spacing 속성을 사용하여 메뉴 항목 사이에 추가 공간을 부여할 수 있습니다.모든 메뉴 항목에 여러 단어가 포함되어 있다면, 메뉴 항목의 스타일을 설정할 클래스를 만들어야 합니다. (단어 간격 값을 변경하는 것이 아니라)두 번째 규칙 집합은 사용자가 커서를 텍스트 위에 놓을 때 텍스트에 노란색 배경색을 추가하는 데
hover 위조 클래스를 사용합니다.index.html 파일을 반환하고 생성된 바닥글 컨테이너에 다음 강조 표시된 코드 세그먼트를 추가합니다.지수html
. . .
<div class="footer">
<p class="footer-text-left">
<a href="index.html" class="menu">home</a>
<a href="https://css.sammy-codes.com/about.html" class="menu">about</a>
<a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>
</p>
</div>
footer-text-left 클래스와 a.menu 클래스를 사용하여 텍스트 스타일을 설정합니다.이 두 파일을 저장하고 브라우저에서 웹 페이지를 다시 불러옵니다.다음을 수신해야 합니다.
소셜미디어 아이콘 추가
다음에 페이지 밑에 소셜 아이콘을 추가합니다. 소셜 미디어 계정에 연결할 수 있습니다.다른 소셜 미디어 플랫폼에서 아이콘을 사용하려면 웹에서 무료 아이콘을 검색하여
images 폴더에 다운로드할 수 있습니다.styles.css 파일로 돌아가 다음 세 가지 규칙 세트를 파일 하단에 추가합니다.스타일css
. . .
.footer-content-right {
padding-right:40px;
margin-top:20px;
float:right;
}
.icon-style {
height:40px;
margin-left:20px;
margin-top:5px;
}
.icon-style:hover {
background-color:yellow;
padding:5px;
}
첫 번째 규칙 세트는 클래스
footer-content-right 를 정의하고 특정 채우기, 여백 및 부동 소수점 값을 지정합니다.이 규칙 집합 설정 <div> 요소의 스타일을 사용합니다. 이 요소는 소셜 미디어 아이콘을 저장합니다.두 번째 규칙 집합은 소셜 미디어 아이콘의 크기와 위치에 높이와 간격 값을 제공하는 클래스
icon-style를 만듭니다.세 번째 규칙 집합은 사용자가 텍스트에 커서를 놓을 때 아이콘에 노란색 배경을 추가하는 데
hover 위조 클래스를 사용합니다.styles.css 파일을 저장합니다.이제 페이지 끝에 소셜 미디어 아이콘을 추가합니다.index.html 파일을 되돌려주고 메뉴 항목의 마지막 닫기</a> 표시를 한 후 다음 코드 세그먼트를 추가합니다.지수html
. . .
...
<div class="footer-content-right">
<a href="https://github.com/"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>
<a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>
<a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a>
</div>
이 코드 세그먼트는
<div> 클래스의 스타일로 지정된 footer-content-right 용기를 만들었습니다.이 컨테이너에서 HTMLdiv 태그를 사용하여 세 개의 소셜 미디어 아이콘을 추가하고 HTML<img> 태그를 사용하여 각 이미지를 연결합니다.<a> 속성을 사용하여 각 아이콘을 설명하는 선택적 텍스트도 추가되었습니다.웹 사이트를 만들 때 화면 판독기를 사용하는 개인 웹 사이트를 지원하기 위해 모든 이미지에 추가 텍스트를 추가해야 합니다.HTML에서 대체 텍스트 사용에 대한 자세한 내용을 보려면 설명서의 대체 텍스트 섹션 How to Build a Website with HTML 을 참조하십시오.파일
alt을 저장하고 브라우저에서 다시 로드합니다.오른쪽에 세 개의 소셜 미디어 아이콘이 계정에 연결되어 있는 고정 페이지가 있어야 합니다.사용자가 링크에 커서를 걸면 링크의 색상을 변경해야 합니다.결과를 확인하려면 이 강좌가 시작될 때gif와 비교할 수 있습니다.결론
방문자가 페이지를 아래로 스크롤할 때 뷰포트 아래에 고정된 위치를 유지하는 정적 페이지를 만들었습니다.생성된 CSS 클래스의 값을 변경하거나
index.html 파일에 다른 유형의 내용을 추가하여 바닥글 디자인과 내용의 가능성을 계속 탐색할 수 있습니다.사이트의 디자인과 레이아웃 가능성을 탐색하는 데 대한 더 많은 생각은 How To Add Images To Your Webpage Using HTML에서 제공한 더 많은 건의를 참고하십시오. 예를 들어 내용 부분을 다시 배열하고 다른 페이지의 링크를 추가하며 네모난 프레임 모델을 사용하여 레이아웃 스타일을 변경하는 것입니다.