티코의 코딩로그
반응형 웹 만들어보기 본문
처음으로 반응형 웹을 만들어봤다.
화면 크기가 변할 때 웹화면도 변해서 짜릿하다..
드림코딩 엘리님 영상을 보면서 완성했다.
내일은 여기에 추가해서 다른 화면도 만들어 봐야겠다.
완성된 모습!
반응형 헤더만 만들어보았다. 전체 화면일 때는 이런 모습이지만
일정 크기로 줄어들면 요로케 '三' 아이콘이 나타나면서 메뉴와 아이콘 부분이 사라진다.
'三' 모양 아이콘을 클릭해주면~~
요로케 숨겨져있던 메뉴, 아이콘이 나온다.
클릭하면 메뉴들이 나오는 효과는 java를 사용했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Web Practice</title>
</head>
<body>
<div class="container">
<div class="logo">Dream Coding</div>
<div class="menu">
<div>Home</div>
<div>Gallery</div>
<div>Weddings</div>
<div>FAQ</div>
<div>Bookings</div>
</div>
<div class="link">
<div>twitter</div>
<div>IG</div>
</div>
</div>
</body>
</html>.container {
width: 100vw;
height: 100px;
background: #000029;
color: white;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
flex: 30%;
}
.menu {
display: flex;
justify-content: space-around;
flex: 50%;
}
.link {
display: flex;
flex: 20%;
justify-self: flex-end;
}
맨 처음에 썼던 코드들이다. 틀만 좀 짜보다가 첫 단추를 잘못 꼈음을 인지..
나는 전부 div 태그로 나눴는데 이게 실수였다.
좀 더 의미있는 태그를 사용하려고 생각해야 한다.
(nav, ul, a 태그 등등)
개발자 도구로 각각의 영역의 margin, padding을 잘 보면서 만들어야 한다.
글씨 위치를 center로 해도 중앙이 아닌 것 같을 때는 보통 margin, padding이 있어서 그랬다.
margin은 클릭할 수 있는 영역이 작아지지만,
padding은 클릭할 수 있는 영역은 여전히 크지만 글씨 공간이 여유롭다.
<nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용
'TIL' 카테고리의 다른 글
| 유튭 페이지를 따라 만들어보자1 (0) | 2021.04.14 |
|---|---|
| 반응형 웹 내 취향으로 만들어보기 (0) | 2021.04.09 |
| CSS-display, position (0) | 2021.03.31 |
| 210327 CSS 정리 (0) | 2021.03.27 |
| 210325 html 기본기 (0) | 2021.03.25 |
'TIL' Related Articles
more
