오늘의 튜토리얼에서는 HTML과 CSS로 상단 네비게이션 바를 만들 것입니다. 이 탐색 모음을 구축하는 두 가지 다른 방법, 즉 flexbox를 사용하는 방법과 CSS 그리드를 사용하는 방법을 살펴보겠습니다.
두 접근 방식의 차이점을 비교하는 좋은 방법이 될 것입니다. 그리고 어떤 방법이 더 마음에 드는지 알 수 있습니다.
완성된 탐색은 다음과 같습니다.
데스크톱에서 모든 링크는 왼쪽에 홈이 있고 오른쪽에 다른 링크가 있는 같은 행에 있습니다.
그런 다음 모바일에서는 맨 위 행에 홈이 있고 맨 아래 행에 다른 링크가 있습니다. 링크는 페이지 중앙에 배치됩니다.
파일 설정부터 시작하겠습니다.
파일 설정
탐색을 만들기 위해 index.html을 만들 것입니다. 파일 및 style.scss style.css로 컴파일할 파일 VS Code Live Sass 확장을 사용합니다.
<head>에서 섹션에 <link>를 추가하겠습니다. style.css를 로드하는 요소 파일.
이제 탐색 모음을 구축해 보겠습니다.
HTML 마크업 만들기
index.html에서 파일에서 탐색을 위한 HTML 마크업을 먼저 생성해 보겠습니다. 모든 것에 div만 사용하는 것을 피하기 위해 시맨틱 HTML 태그를 최대한 사용하려고 합니다.
<nav>를 생성하겠습니다. 모든 탐색 링크를 포함할 요소입니다. 그런 다음 순서가 지정되지 않은 목록 <ul>에 링크를 넣습니다. 다음과 같은 요소:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
이것은 시작하는 기본 탐색 마크업이 될 것입니다. flexbox 및 그리드 버전을 빌드할 때 약간의 조정을 해야 하지만 이 <nav>의 복사본 두 개를 만드는 것으로 시작할 수 있습니다. 요소.
index.html을 로드하면 브라우저에서는 매우 기본적으로 보일 것입니다.
하지만 걱정하지 마세요! style.scss에 스타일을 추가해 봅시다. 파일.
글로벌 스타일 및 미디어 쿼리 추가 시작
먼저, 항상 사용하려고 하는 몇 가지 전역 스타일을 추가하겠습니다.
html {
font-size: 100%;
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
min-height: 100vh;
}
*, *::before, *::after {
box-sizing: inherit;
}
또한 색상을 좀 더 흥미롭게 만들어 보겠습니다. <body>에서 background-color: #1b1b1b를 설정할 태그 , 모든 요소와 <a> 링크는 흰색이고 color: #ffffff입니다. 그래서 어두운 테마입니다.
그런 다음 <ul>에 대해 <nav>의 요소 , :list-style-type: none 추가 글머리 기호를 숨기고 여백과 패딩을 0px로 설정 .
<nav>에 패딩을 추가해 보겠습니다. padding: 10px가 있는 요소 , 미디어 쿼리를 사용하여 태블릿 및 데스크톱 스타일의 패딩을 늘립니다.
nav {
padding: 10px;
@media (min-width: 600px){
padding: 20px;
}
}상황이 더 좋아 보입니다! 기본 serif 글꼴 대신 Google 글꼴인 Open Sans를 사용하고 싶습니다.
글꼴 모음을 style.scss로 가져올 수 있습니다. 맨 위에 다음 줄을 추가하여:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
이제 <body> 스타일에 요소에서 font-family: 'Open Sans', Arial, Helvetica, sans-serif를 설정할 수 있습니다. Open Sans 또는 백업 글꼴을 로드합니다.
선형 그라데이션 하단 테두리가 있는 링크 스타일 추가
링크 스타일도 좀 더 흥미롭게 만들어 보겠습니다.
text-decoration: none을 설정하여 기본 밑줄을 제거하겠습니다. <a>로 집단. 그리고 border-bottom을 사용하여 더 두꺼운 분홍색 밑줄로 바꾸고 싶습니다. . 또한 마우스를 가져가면 분홍색에서 보라색으로 그라데이션 밑줄을 만들 것입니다.
색상의 경우 Sass 변수를 만드는 것을 좋아합니다. style.scss 상단 @import 아래의 파일 문에 다음 변수를 추가합니다.
$linkPink: rgb(216, 29, 216);
$linkPurple: rgb(98, 16, 250);변수를 사용하면 다른 스타일에 색상을 추가할 때 더 간단해집니다.
이제 두꺼운 밑줄을 만들기 위해 <a>의 의사 요소를 사용할 수 있습니다. 하단 테두리가 있는 태그입니다.
이에 대한 코드는 다음과 같습니다.
a {
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
height: 3px;
right: 0px;
bottom: -3px;
left: 0px;
background-color: $linkPink;
}
여기서 진행 중인 일은 ::before 높이가 3px이고 배경이 분홍색인 의사 요소입니다. 맨 아래에 배치하려면 position: absolute로 설정해야 합니다. <a> 요소에 position: relative가 있습니다. 그래서 페이지 위로 날아가지 않습니다. (여기서 이 현상에 대해 자세히 설명합니다.)
그런 다음 텍스트 아래에 의사 요소를 배치하기 위해 bottom: -3px를 설정합니다. 그래서 링크 텍스트와 라인 자체 사이에 약간의 공간이 있습니다. 그리고 라인이 링크의 전체 너비로 확장되도록 하기 위해 left: 0px를 사용하고 있습니다. 및 right: 0px .
이제 링크가 더 멋지게 보입니다!
선형 그래디언트 호버 스타일
한 단계 더 멋진 수준으로 이동하여 멋진 호버 효과를 추가해 보겠습니다. 우리가 원하는 것은 밑줄이 분홍색에서 보라색으로의 그라디언트로 변경되고 링크 위로 마우스를 가져가면 링크 텍스트가 흰색에서 분홍색으로 바뀌는 것입니다.
이를 위해 a:hover 다음 스타일의 선택기:
a:hover {
color: $linkPink;
&::before {
background: linear-gradient(to right, $linkPink 40%, $linkPurple 75%);
}
}
::before의 경우 의사 요소, 이제 배경이 linear-gradient로 변경됩니다. . 그래디언트 기능에서는 왼쪽에서 오른쪽으로 이동함에 따라 분홍색에서 보라색으로 변경됩니다.
그리고 백분율에 따라 그래디언트가 변경되는 위치를 제어하고 있습니다. 첫 번째 분홍색이 0%(맨 왼쪽)에서 40% 너비로 이동하기를 원합니다. 그리고 우리는 두 번째 보라색을 100%(맨 오른쪽)에서 75% 너비로 변경하기를 원합니다. 그러면 요소 너비의 40%에서 75% 사이에 그라데이션이 생깁니다.
또한 마우스 오버 시 링크 텍스트 색상을 분홍색으로 변경했습니다.
이제 링크 위로 마우스를 가져가면 다음과 같이 표시됩니다.
더 멋져 보이죠?
자, 이제 플렉스박스와 그리드 탐색 모음에 사용할 전역 스타일을 완성했습니다.
flexbox 탐색을 위한 스타일 작성을 시작해 보겠습니다.
Flexbox 탐색
플렉스 하위 그룹으로 링크 나누기
저는 보통 데스크탑 스타일을 먼저 작성한 다음 모바일을 작성하는 것으로 시작합니다. 데스크탑은 일반적으로 여러 열로 인해 더 복잡하지만 모바일에서는 한 열에 쌓이는 경향이 있기 때문입니다. 하지만 자신에게 맞는 순서대로 스타일을 작성할 수 있습니다.
데스크탑 탐색에서 홈 링크가 왼쪽에 있고 다른 세 개의 보조 링크가 오른쪽에 함께 있기를 원합니다.
flexbox로 이를 수행하려면 링크를 두 그룹으로 나누어야 합니다. 하나는 왼쪽에 있는 링크용이고 다른 하나는 오른쪽에 있는 링크용입니다. 그러면 두 그룹 모두 플렉스 부모의 플렉스 자식 요소가 됩니다.
HTML 마크업으로 돌아가서 <nav>가 필요합니다. 플렉스 부모가 될 요소. 이제 홈 링크를 <ul> 밖으로 이동해 보겠습니다. <nav>의 직계 자식으로 만듭니다. 요소.
그러면 나머지 링크는 <ul> 안에 남습니다. .
<nav>에 "flexbox" 클래스도 추가해 보겠습니다. flexbox 스타일을 나중에 그리드 스타일과 분리하여 유지합니다.
업데이트된 마크업은 다음과 같습니다.
<nav class="flexbox">
<a href="#">Home</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>데스크톱용 flexbox 스타일 추가
이제 탐색에서 nav.flexbox를 설정하여 flexbox를 켜고 싶습니다. display: flex가 될 요소 . 그런 다음 justify-content: space-between 규칙도 추가합니다. 첫 번째 그룹을 왼쪽에 배치하고 다른 그룹을 오른쪽에 배치합니다.
<ul>를 만듭니다. display: flex가 있는 또 다른 플렉스 부모 justify-content: flex-end 사용 링크를 오른쪽으로 정렬합니다. 그리고 align-items: center;를 추가하겠습니다. 플렉스 자식 요소를 수직으로 중앙에 배치합니다.
더 잘생김!
이제 우리는 세 개의 보조 링크가 flexbox 배열에서 서로 옆에 있기를 원합니다. 그래서 우리는 <ul> 3개의 링크에 대한 유연한 부모 요소를 만들고 align-items: center도 설정합니다. . 또한 링크 사이에 공간을 추가하기 위해 margin-right: 20px를 추가합니다. 그러나 :last-child에 대해 0px로 만듭니다. 선택자. 이렇게 하면 마지막 링크에 추가 공간이 없게 됩니다.
이제 바탕 화면 스타일이 다음과 같이 표시됩니다.
nav.flexbox {
display: flex;
justify-content: space-between;
align-items: center;
ul {
display: flex;
align-items: center;
}
ul li {
margin-right: 20px;
&:last-child {
margin-right: 0px;
}
}
}탐색 모음은 다음과 같이 표시됩니다.
모바일용 flexbox 스타일 추가
이제 모바일 스타일을 추가해 보겠습니다. 먼저 플렉스 콘텐츠를 모바일의 중앙에 배치하겠습니다.
현재 모바일에서는 justify-content: space-between 때문에 홈 링크가 왼쪽으로 정렬됩니다. 플렉스 상위 요소에 대한 규칙입니다.
더 큰 너비를 위해 해당 스타일 규칙을 미디어 쿼리로 이동하여 중앙에 배치할 수 있습니다. 그런 다음 justify-content를 설정합니다. center으로 모바일용.
다음으로 세 개의 보조 링크가 새 행으로 줄바꿈되기를 원하므로 flex-wrap: wrap을 추가해 보겠습니다. nav.flexbox로 래핑을 활성화하는 선택기.
스타일은 다음과 같아야 합니다.
nav.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@media (min-width: 600px){
justify-content: space-between;
}
}
그리고 강제로 래핑을 하기 위해 <ul> flex 자식은 너비의 100%를 차지하므로 홈 링크 아래로 이동해야만 들어갈 수 있습니다.
저는 도우미 클래스를 사용하는 것을 좋아하므로 <ul>에 "fullwidth" 클래스를 추가합니다. 요소 및 .fullwidth에 대한 몇 가지 스타일 규칙 만들기 nav.flexbox의 선택기 규칙.
먼저 flex: 1 0 100%를 설정합니다. . 이 flex 속성은 세 가지 플렉스 속성의 약어입니다. flex-grow , flex-shrink , flex-basis .
flex-grow를 사용하여 필요한 경우 성장할 수 있습니다. / 1. flex-shrink로 축소하는 것을 허용하지 않습니다. 0. 그런 다음 flex-basis를 사용하여 기본 너비를 100%로 설정합니다. .
또한 모바일에서 플렉스 상위 항목의 링크를 중앙에 배치할 것이므로 justify-content: center를 추가합니다. .
그러나 우리는 보조 링크가 전폭이 되고 태블릿이나 데스크탑의 중앙에 있는 것을 원하지 않습니다. 더 큰 기기 너비의 경우 flex가 필요합니다. 속성은 0 1 auto가 됩니다. 그래서 커지지 않고, 필요한 경우 줄어들 수 있으며, 기본 너비는 콘텐츠의 자연 너비가 무엇이든 됩니다.
데스크톱 스타일에 대한 미디어 쿼리를 추가해 보겠습니다.
.fullwidth {
flex: 1 0 100%;
justify-content: center;
@media (min-width: 600px){
flex: 0 1 auto;
}
}
max-width를 작성할 수도 있었습니다. 모바일에 대해서만 첫 번째 스타일 규칙을 타겟팅하는 미디어 쿼리입니다. 하지만 모바일 스타일 규칙을 기본으로 사용하고 점진적으로 더 큰 min-width를 추가하려고 합니다. 충돌을 피하기 위한 미디어 쿼리
어떤 종류의 미디어 쿼리를 사용하는지에 따라 다르지만 대부분의 시간에 사용할 한 가지 유형(최소 또는 최대)을 선택하는 것이 좋습니다.
또한 세 개의 보조 링크에 대해 "블로그" 텍스트가 "홈" 링크 아래 중앙에 오도록 너비를 설정하고 싶습니다. 지금은 두 번째 행 링크의 전체 너비를 기준으로 가운데에 맞춰져 있습니다. 그러나 "연락처"가 "정보"보다 약간 더 길기 때문에 행의 중심은 "블로그" 텍스트의 중심에서 약간 오른쪽에 있습니다.
이 문제를 해결하기 위해 두 번째 행의 각 플렉스 자식 열을 모두 100px의 동일한 정적 너비로 만듭니다. 그래서 우리는 flex 속성을 0 0 100px로 텍스트를 중앙에 배치합니다. 모바일용 규칙만 필요하므로 flex를 설정하여 데스크톱용 규칙을 취소합니다. 0 0 auto으로 .
또한 모바일 항목 사이의 공간을 10px로 줄이고 데스크톱 너비는 20px로 유지하겠습니다.
코드는 다음과 같습니다.
ul li {
flex: 0 0 100px;
margin-right: 10px;
text-align: center;
@media (min-width: 600px){
flex: 0 0 auto;
margin-right: 20px;
}
&:last-child {
margin-right: 0px;
}
}
우리가 할 마지막 조정은 margin-bottom이 있는 첫 번째 홈 링크와 세 개의 보조 링크 사이에 약간의 공간을 추가하는 것입니다. 모바일용. <a>를 대상으로 하는 스타일 규칙을 작성합니다. nav.flexbox의 직계 자식인 요소 따라서 홈 링크만 영향을 받습니다.
nav.flexbox {
> a {
margin-bottom: 10px;
@media (min-width: 600px){
margin-bottom: 0px;
}
}
}Firefox flexbox 검사기를 켜면 각 열의 행을 볼 수 있는 모바일 탐색이 다음과 같이 표시됩니다.
그리고 이것이 flexbox 탐색을 위한 것입니다! 이제 CSS 그리드만 사용하여 이것을 구축하는 것으로 넘어갑시다.
CSS 그리드 방식
flexbox와 grid의 주요 차이점 중 하나는 flexbox에서 열과 행의 배열이 flex의 flex 자식 요소에 설정된 flex 속성에 의해 결정된다는 것입니다. 속성 및 flex 부모가 랩으로 설정되었는지 여부. 따라서 flexbox는 "콘텐츠 우선" 접근 방식을 따른다고 말할 수 있습니다.
CSS 그리드는 "그리드 우선" 접근 방식입니다. 부모 요소의 그리드 속성을 사용하여 그리드 템플릿(열과 행을 의미함)을 디자인합니다. 또한 해당 그리드 템플릿에서 그리드 자식 요소가 배치되는 위치를 개별적으로 제어할 수 있습니다.
이 개별 제어 수준으로 인해 CSS 그리드 탐색 모음에서 첫 번째 홈 링크를 포함한 모든 링크를 동일한 상위 <ul>에 넣을 수 있습니다. .
<nav class="grid">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>모바일용 그리드 스타일 추가
그리드 탐색으로 변경하고 먼저 모바일 스타일을 작성하는 것으로 시작하겠습니다!
모바일에서는 홈 링크가 너비의 100%를 차지하는 첫 번째 행에 있기를 원합니다. 그런 다음 세 개의 보조 링크가 두 번째 행에 있고 가운데에 오도록 합니다.
<ul>에서 그리드 상위 요소, display: grid를 설정하여 그리드를 켭니다. .
이제 그리드 템플릿을 디자인해 보겠습니다. 두 번째 행에는 3개의 링크가 있으므로 3열 템플릿을 만들어 보겠습니다.
열을 모두 같은 너비로 만들고 싶지만 너무 넓지는 않습니다. grid-template-columns: repeat(3, 100px)를 설정해 보겠습니다. <ul> 그리드 부모.
repeat()를 사용하고 있습니다. 100px 너비의 열 3개를 만드는 함수입니다.
CSS 그리드의 또 다른 유용한 기능은 그리드 항목 사이에 여백(공간)을 만드는 기능입니다. 따라서 flexbox에서처럼 그리드 자식에 여백을 추가하는 대신 grip-gap: 10px .
justify-content: center를 사용하여 페이지의 전체 그리드를 중앙에 배치할 수도 있습니다. , 각 열의 텍스트를 justify-items: center로 가운데에 맞춥니다. .
Firefox 그리드 인스펙터를 켜면(아직 시도해보지 않았다면 정말 대단합니다.) 그리드는 다음과 같이 보일 것입니다.
중앙에 있는 3개의 기둥 그리드를 명확하게 볼 수 있지만 홈 링크는 자체 행에 있어야 합니다. 3열의 너비를 차지하기를 원합니다.
이를 위해 도우미 클래스를 다시 사용하여 홈 <li>에 "전폭" 클래스를 추가합니다. 요소.
우리 스타일에서는 .fullwidth grid-column: 1 / 4 스타일 규칙 선택기 . 이렇게 하면 그리드 자식 열이 첫 번째 수직 그리드 라인에서 시작하여 맨 끝에 있는 네 번째 그리드 라인까지 확장됩니다.
다음과 같이 표시되며 줄 번호를 설정하여 번호가 어떻게 매겨졌는지 확인할 수 있습니다.
데스크톱용 그리드 스타일 추가
데스크탑의 경우 모든 링크가 한 행에 있기를 원합니다. 그리고 다시 홈 링크가 왼쪽에 있고 다른 세 개의 링크가 오른쪽에 있기를 원합니다.
또한 마지막 세 개의 열을 각각 포함하는 콘텐츠의 크기로 만들고 싶습니다. 이렇게 하면 링크 사이의 공간이 동일하게 유지됩니다.
이 모든 것은 미디어 쿼리를 사용하여 더 큰 기기 너비에 대해 그리드 템플릿을 변경해야 한다는 것을 의미합니다.
그러면 템플릿을 무엇으로 변경해야 할까요? 같은 행에 있는 모든 링크를 원하므로 4열 그리드가 필요합니다.
올바른 방향으로 한 걸음만 나아가기 위해 grid-template-columns를 변경하는 것으로 시작하겠습니다. repeat(3, 100px)의 속성 repeat(4, 100px) 너비가 600px보다 큰 경우 그리드 부모에서.
이렇게 하면 4개의 열이 생성되고 계속 수정할 수 있습니다.
또한 .fullwidth를 업데이트하겠습니다. grid-column: 1 / 2를 설정하여 데스크탑에서 하나의 열만 차지하도록 스타일 . 이렇게 하면 첫 번째 홈 열이 그리드 라인 1에서 그리드 라인 2까지만 확장됩니다.
여기까지가 있습니다:
링크는 4개의 열에 있지만 너비가 모두 100픽셀이므로 페이지 중앙에 있습니다.
첫 번째 홈 링크를 왼쪽 끝까지 만들려면 그리드 자체가 페이지 너비의 100%를 차지하도록 해야 합니다. 이를 위해 그리드 템플릿의 첫 번째 열만 사용 가능한 공간을 차지하도록 할 수 있습니다.
따라서 grid-template-columns 변경 1fr repeat(3, 100px)으로 3개의 보조 링크는 너비가 100px로 유지됩니다. 그리고 첫 번째 열이 나머지 공간을 차지합니다.
어떻게 생겼는지 봅시다:
거기에 도착! 그러나 마지막 세 열을 해당 콘텐츠만큼만 넓히기 위해 fit-content()를 사용합니다. 함수. 마지막 세 열을 fit-content(50px)로 설정하면 열은 콘텐츠에 맞게 개별적으로 크기가 조정됩니다.
따라서 grid-template-columns 데스크탑 속성은 이제 1fr repeat(3, fit-content(50px))가 됩니다. .
열 너비가 좋아 보입니다!
이제 열의 링크 텍스트를 정렬하는 작업을 해 보겠습니다. 지금은 justify-items: center로 인해 중앙에 위치합니다. 모바일에 사용한 규칙입니다.
데스크톱의 경우 justify-items: end로 변경해 보겠습니다. 링크를 오른쪽으로 정렬합니다. 그런 다음 justify-self: start를 설정하여 홈 링크만 왼쪽으로 정렬할 수 있습니다. .fullwidth의 경우 선택기.
이제 그리드에 대한 완성된 데스크탑 탐색을 볼 수 있으며 flexbox 탐색과 일치합니다.
플렉스박스 또는 그리드?
이 탐색을 빌드할 때 flexbox 스타일은 style.scss에서 46줄의 코드를 사용했습니다. 작성하고 HTML 마크업이 조금 더 복잡했습니다.
그리드 스타일을 작성하는 데 24줄의 슬림한 코드가 필요했습니다! 많은 차이점은 margin-bottom을 추가해야 했기 때문입니다. 및 margin-right flexbox의 항목 사이에 공백을 추가하는 스타일 규칙. 그리고 그리드에서 grid-gap 재산.
개인적으로 CSS 그리드에 필요한 경량 코드를 정말 좋아합니다. 그러나 flexbox가 더 편하다면 flexbox는 여전히 좋은 선택입니다!
Codepen에서 소스 코드를 볼 수 있습니다.