판봉 개발 일기
Media Query와 Grid를 이용한 반응형 웹 사이트[0728] 본문
오늘은 제목에 나와있듯이 Mediaa Query와 Grid를 알아볼건데 그 전에 먼저 flex를 간단하게 집고 가겠습니다.
flex는 안쪽의 아이템들에 대해서 정렬이 되는것입니다.
고전적인 방식으로는
전체 레이아웃 : float(left, right, clear)
세부 레이아웃 : display(inline-block, block)
모던한 현대적인 방식으로는
전체 레이아웃 : grid
세부 레이아웃 : flexbox
이렇게 나누어 집니다.
그리고 참고로 웹 표준이 나오면 자바스크립트는 빨리 적용이 되는데
HTML과 CSS는 표준이 나와도 상대적으로 덜 빠르게 적용이 된다고 합니다.
Media Query
먼저 여기서 QUERY란 "질의어"를 말합니다.
예, 묻고 답하는 그것 맞습니다.
Media Query는 지정한 규칙에 맞게 브라우저 및 장치환경이 일치하는 경우에만 스타일을 적용할 수 있는데
반응형 웹 디자인의 핵심이라고 해도 과언이 아닙니다.
지정할 수 있는 미디어 유형에는 크게 4가지가 있는데
- all
- screen
- speech
이렇게 4가지 입니다
여기서 print는 페이지가 인쇄된 경우에만 사용할 수 있고 speech는 시각 장애인용 리더기기에 쓰이는 것입니다.
그리고 장치별로 고유한 viewport크기가 존재하는데 대부분 보통 1/3, 즉 삼분의 일 수준 입니다.
하지만 이것을 크기에 따라 적용시키기 위해서는 meta태그를 넣어야 합니다.
VW -> 뷰포트 가로 대비 비율을 뜻하며,
VH -> 뷰포트 세로 대비 비율을 뜻합니다.
그리고 모바일에는 절대 크기라는게 없다고 생각하면 되며 상대적인 크기들이 있습니다.
참고로 웹 브라우저에서 개발툴을 이용해서 폰의 입장에서 보는 기능들도 있습니다.
Breakpoints(중단점) 이라는게 있는데 이것은 미디어 쿼리를 적용할 화면의 크기를 기준으로 합니다.
현재 유튜브는 6개정도의 다른게 있지만 대부분의 회사에선 3개에서 4개 정도가 됩니다.
참고로 배치할때 가로가 넓다고 해서 무조건 왼쪽에 배치하는 것만이 좋은것이 아닙니다.
화면 하단에 배치하는게 때로는 더 좋을 수도 있습니다.
*복잡한 화면은 사실 2가지 버전을 따로 만드는게 좋을 수도 있답니다.
CSS Grid Layout(2차원)
Grid는 페이지 영역 설계와 작은 사용자 인터페이스 요소를 배치하는데 사용됩니다.
flexbox와는 다르게 밑으로 꺾어서 내려옵니다.
그리고 태그 구조와 맞지 않아도 기능이 가능합니다.
그리고 gap이라는 속성이 있는데 이것은 전에 margin과 padding을 준것과 비슷한거라고 이해하시면 됩니다.
<html>
<head>
<meta character="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1">
<style>
header {
grid-area: header;
}
nav {
grid-area: nav;
height: fit-content;
}
.banner {
grid-area: banner;
}
article {
grid-area: content;
height: fit-content;
}
aside {
grid-area: sidebar;
height: fit-content;
}
footer {
grid-area: footer;
}
header,
nav,
.banner,
nav,
article,
aside,
footer {
background-color: blanchedalmond;
border: 1px solid burlywood;
}
/* small */
body {
display: grid;
gap: 20px;
grid-template-areas:
"header"
"nav"
"banner"
"content"
"sidebar"
"footer";
}
/* medium */
@media (min-width: 768px) {
body {
width: 700px;
margin: 0 auto;
grid-template-columns: 2fr 5fr;
grid-template-areas:
"header header"
"banner banner"
"nav nav"
"sidebar content"
"footeer footer";
}
nav ul {
display: flex;
justify-content: space-evenly;
}
aside {
position: sticky;
top: 1rem;
}
}
/* large */
@media (min-width: 1200px) {
body {
width: 1200px;
margin: 0 auto;
grid-template-columns: 3fr 7fr 2fr;
grid-template-areas:
"header header header"
"banner banner banner"
"nav content sidebar"
"footer footer footer"
}
nav {
position: sticky;
top: 1rem;
}
nav ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<header style="text-align: center;">The header</header>
<nav>
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<div class="banner" style="text-align: center;">Advertising</div>
<article>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
<h1>Main article area</h1>
<p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two
column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.
</p>
</article>
<aside>Sidebar</aside>
<footer>The footer</footer>
</body>
</html>위 코드는 반응형의 예시입니다.
위 코드에서 fr은 fragment(조각)이라고 해서 공간을 차지하는 비율을 나타냅니다. 만약에 2fr 1fr 3fr이면 2:1:3으로 비율이 되는겁니다.
참고로 저는 제 개인 파일을 반응형으로 만들어보는 중인데 만들다가 이것저것 다 깨져서 다시 원상복귀를 하고 있습니다.
지금까지 만들어온 결과물은 1열->2열->3열-> 1열 레이아웃을 만들었는데 이것을 각각 반응형으로 만드려다보니 가장 최근에 남아 있는 레이아웃은 1열 레이아웃이라 이것을 제일 작은 크기로 해야하기때문에 골머리를 썩고 있습니다.
완성되면 내일 중으로 올려보겠습니다.
'JAVA 웹개발 과정' 카테고리의 다른 글
| javascript의 변수, 자료형, 형변환, 연산 (0) | 2021.08.02 |
|---|---|
| 소프트 웨어 형상관리, 깃, javascript에 대하여 [0730] (0) | 2021.07.31 |
| 0727 (0) | 2021.07.27 |
| CSS 레이아웃 및 속성과 Flex에 대하여[0727] (0) | 2021.07.27 |
| CSS 레이아웃 및 스타일 속성(2) 0726 (0) | 2021.07.26 |
