[미니프로젝트] html, css로 만드는 여행 계획표 - 1
본문
<!--main.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>2023/03/07~2023/03/10 일본 여행 계획표 메인화면</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>2023/03/07~2023/03/10 후쿠오카 여행 계획표</h1>
</header>
<main>
<nav>
<ol>
<li><a href="1st_day.html">첫날</a></li>
<li><a href="2nd_day.html">둘째 날</a></li>
<li><a href="3rd_day.html">셋째 날</a></li>
<li><a href="4th_day.html">넷째 날</a></li>
<li><a href="etc.html">etc</a></li>
</ol>
</nav>
</main>
</body>
</html>
/*main.css*/
@charset "utf-8";
*, *::after, *::before {
box-sizing: border-box;
}
body {
overflow: hidden;
}
@media screen and (max-width: 767px) {
body {
margin: 0;
font-family: '나눔 고딕', NanumGothic, '돋움', Dotum, sans-serif;
background-color: #53b9f9;
background-image: url(../image/bonobono.png), url(../image/fun.png);
background-repeat: no-repeat;
background-size: 60% 60%, 20% 20%;
background-position: right bottom, left 10%;
}
header {
height: 50px;
background-color: white;
}
h1 {
margin: 0;
font-size: 12px;
color: #025c94;
text-align: left;
line-height: 50px;
text-indent: 10px;
}
ol {
padding: 0;
margin: 40px 20px;
list-style-type: none;
}
ol li a {
display: block;
width: 70%;
height: 60px;
margin: 0 auto 50px;
border: 1px solid #d7d7d7;
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
line-height: 60px;
text-decoration: none;
color: white;
}
ol li a:hover {
font-weight: bold;
border: 1px solid #025c94;
}
}
시간이 많이 없어서 기능 구현을 중심으로 만들었다. 나머지 문서들도 디자인적인 부분은 크게 신경쓰지 않을 예정이다.
애초에 배포할 웹 사이트도 아니고 친구들끼리 볼거니 디자인은 상관없긴하다..
메인화면에서 각 메뉴들은 클릭하면 해당 일자의 여행 계획 문서로 넘어간다.
마우스를 올리면 폰트의 weight와 박스의 border가 바뀌도록 꾸며놨는데 모바일에선 어떻게 작동할지 모르겠다.
알게 된 것
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">html 문서의 크기를 모바일 브라우저의 화면 크기에 맞추고 확대/축소를 막는 태그.
content="width-device-width"는 컨텐츠의 width를 각 디바이스의 크기에 맞추겠다는 뜻.
initial-scale은 최초 화면의 크기를 말하며 1.0은 100% 비율을 말함.
minimum-scale과 maximum-scale은 각각 화면을 줄이고, 늘렸을 때 크기이다.
user-scalable=no은 유저가 화면을 축소/확대 할 수 없게 한다.
*, *::after, *::before {
box-sizing: border-box;
}모든 태그와 가상요소 선택자의 크기를 border-box로 다루겠다는 뜻. 크기에 패딩과 보더를 포함하게 됨.
모바일은 데스크탑과 다르게 대부분 태그가 px이 아닌 %로 크기가 잡혀 있음. 그렇기 때문에 100% 기준으로 비율에 맞게 나눈 요소에 보더나 패딩을 넣으면 레이아웃이 깨지기 때문에 박스 사이징이 필요함.
body {
overflow: hidden;
}body에 overflow: hidden 속성을 넣으면 브라우저가 알아서 창의 크기만큼만 화면에 보여줌. 스크롤바도 숨겨줌.
참고한 사이트
https://m.blog.naver.com/jj601400/222133911218
모바일 웹 UI구현 관련 html/css 초기화 코드
본 포스팅은 html5, css3 기준입니다. 웹퍼블리셔에게 도움이 되는 글을 쓰고 있습니다:) 데스크탑용 홈페...
blog.naver.com
반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리
이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게
nykim.work
'프로젝트' 카테고리의 다른 글
| [부스트코스/웹 UI 개발] 프로젝트 C (0) | 2023.04.11 |
|---|---|
| [부스트코스/웹 UI 개발] 프로젝트 B (0) | 2023.04.03 |
| [미니프로젝트] html, css로 만드는 여행 계획표 - 2 (0) | 2023.03.06 |
| [미니프로젝트] html, css로 만드는 여행 계획표 - 0 (0) | 2023.02.28 |
| [부스트코스/웹 UI 개발] 프로젝트 A (0) | 2023.02.15 |
