탐색 모음을 격자 레이아웃으로 설정하십시오.
(그래도 난 이해가 안 돼...)
제목에서 보듯이 나는 격자 레이아웃으로 네비게이션 표시줄을 만들어 보았다.
레이아웃 디자인
출처 1
처음에 쓴 소스는 다음과 같다.
grid_practice1.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav id="nav_bar">
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
</body>
</html>
base.cssbody {
width: 600px;
margin-left: auto;
margin-right: auto;
}
/* ヘッダー */
header {
text-align: center;
}
#nav_bar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
margin: 0;
padding: 0;
}
#nav_bar li {
list-style: none;
margin: 0;
padding: 0;
border: solid 1px;
background: #f3f3f3;
}
#nav_bar a {
text-decoration: none;
margin: 0;
padding: 0;
}
결과 1
나는 위의 소스로 갈 수 있을 줄 알았는데, 결과적으로 아래의 배치가 되었다...
나는 css가 적용되지 않는다고 생각했지만, 소스에 아주 잘 썼다.
디버깅 모드에서 확인했습니다.
따라서 아래 그림처럼 오른쪽에 두 개의 구역이 분배된 것을 확인할 수 있다.
다음과 같이 커서를 왼쪽으로 이동합니다.
출처 2
위의 이미지에서 nav 요소를 명확하게 적용할 수 있지만 ul 요소에는 적용되지 않습니다.
나는 원본 코드를 바꾸려고 시도했다.
grid_practice2.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav>←元々、ここにidを書いていた
<ul id="nav_bar">←ここにidを移動した
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
</body>
</html>
그래서 원하는 포석이 되었다.
나는 id를 쓴 곳을 잘못 썼다...
메쉬 적용 오류...
끝내다
왜 잘 안 되지?
나는nav원소에 적용하면ul원소가 자동으로 분배될 것이라고 생각했다.
그러나 격자를 응용한 것은nav이지ul이 아니다.
그래서 잘 안 돼요.
레이아웃의 왼쪽 상단에 ul을 박았는데 그 중에서 위에서 아래로 순서대로 리 요소를 배열했다.
응용 목표를 l로 바꾸면 리 요소가 왼쪽에서 오른쪽으로 분배됩니다.
(이 생각일 거야...)
여기까지 읽고 내 생각이 틀렸다면 지적할 수 있었으면 좋겠다.
Reference
이 문제에 관하여(탐색 모음을 격자 레이아웃으로 설정하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yu-chan/items/5156f7c1de8eb586d84a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
처음에 쓴 소스는 다음과 같다.
grid_practice1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav id="nav_bar">
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
</body>
</html>
body {
width: 600px;
margin-left: auto;
margin-right: auto;
}
/* ヘッダー */
header {
text-align: center;
}
#nav_bar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
margin: 0;
padding: 0;
}
#nav_bar li {
list-style: none;
margin: 0;
padding: 0;
border: solid 1px;
background: #f3f3f3;
}
#nav_bar a {
text-decoration: none;
margin: 0;
padding: 0;
}
결과 1
나는 위의 소스로 갈 수 있을 줄 알았는데, 결과적으로 아래의 배치가 되었다...
나는 css가 적용되지 않는다고 생각했지만, 소스에 아주 잘 썼다.
디버깅 모드에서 확인했습니다.
따라서 아래 그림처럼 오른쪽에 두 개의 구역이 분배된 것을 확인할 수 있다.
다음과 같이 커서를 왼쪽으로 이동합니다.
출처 2
위의 이미지에서 nav 요소를 명확하게 적용할 수 있지만 ul 요소에는 적용되지 않습니다.
나는 원본 코드를 바꾸려고 시도했다.
grid_practice2.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav>←元々、ここにidを書いていた
<ul id="nav_bar">←ここにidを移動した
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
</body>
</html>
그래서 원하는 포석이 되었다.
나는 id를 쓴 곳을 잘못 썼다...
메쉬 적용 오류...
끝내다
왜 잘 안 되지?
나는nav원소에 적용하면ul원소가 자동으로 분배될 것이라고 생각했다.
그러나 격자를 응용한 것은nav이지ul이 아니다.
그래서 잘 안 돼요.
레이아웃의 왼쪽 상단에 ul을 박았는데 그 중에서 위에서 아래로 순서대로 리 요소를 배열했다.
응용 목표를 l로 바꾸면 리 요소가 왼쪽에서 오른쪽으로 분배됩니다.
(이 생각일 거야...)
여기까지 읽고 내 생각이 틀렸다면 지적할 수 있었으면 좋겠다.
Reference
이 문제에 관하여(탐색 모음을 격자 레이아웃으로 설정하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yu-chan/items/5156f7c1de8eb586d84a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
위의 이미지에서
nav 요소를 명확하게 적용할 수 있지만 ul 요소에는 적용되지 않습니다.나는 원본 코드를 바꾸려고 시도했다.
grid_practice2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウト 練習</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<header>
<nav>←元々、ここにidを書いていた
<ul id="nav_bar">←ここにidを移動した
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
<li><a href="#">ナビ5</a></li>
<li><a href="#">ナビ6</a></li>
</ul>
</nav>
</header>
</body>
</html>
나는 id를 쓴 곳을 잘못 썼다...
메쉬 적용 오류...
끝내다
왜 잘 안 되지?
나는nav원소에 적용하면ul원소가 자동으로 분배될 것이라고 생각했다.
그러나 격자를 응용한 것은nav이지ul이 아니다.
그래서 잘 안 돼요.
레이아웃의 왼쪽 상단에 ul을 박았는데 그 중에서 위에서 아래로 순서대로 리 요소를 배열했다.
응용 목표를 l로 바꾸면 리 요소가 왼쪽에서 오른쪽으로 분배됩니다.
(이 생각일 거야...)
여기까지 읽고 내 생각이 틀렸다면 지적할 수 있었으면 좋겠다.
Reference
이 문제에 관하여(탐색 모음을 격자 레이아웃으로 설정하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yu-chan/items/5156f7c1de8eb586d84a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(탐색 모음을 격자 레이아웃으로 설정하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yu-chan/items/5156f7c1de8eb586d84a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
