728x90
20220818(목)
- 목차
- 개인 프로젝트 기획안 피드백
- 가이드 코딩
< 개인 프로젝트 기획안 피드백 >
1. 명확한 목표
2. 기능
- 목표를 만족 시키는 기능
- 좋은 기능 => 목표를 만족시키지 않거나 관계가 없다면 꽝이다!
- 모든 기능이 모아졌을 때 목표를 만족하는가?
- 기능도 스토리가 있어야 한다.
3. 구조
- box라도 그리자. 글자만 적어두면 x
- 순번을 넣어서 기능 또는 사용법과 연관시키면 좋다.
- 구조가 기능을 만족하는가?
- 구조도 스토리가 있어야 한다.
< 가이드 코딩 >
index 파일
<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">
<title>Show me the Pool</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav class = "global-nav">
<div class = "global-nav-links">
<a href="#" class = "global-nav-link">Home</a>
<a href="#" class = "global-nav-link">History</a>
<a href="#" class = "global-nav-link">Store</a>
<a href="#" class = "global-nav-link">Contact</a>
<a href="#" class = "global-nav-link">Home</a>
</div>
</nav>
<nav class = "local-nav">
<div class = "local-nav-links">
<a href="" class = "local-nav-product-link">Real Apple Pro</a>
<a href="" class = "local-nav-link">Overview</a>
<a href="" class = "local-nav-link">Compare</a>
<a href="" class = "local-nav-link">Buy</a>
</div>
</nav>
<section class = "scroll-section" id = "section-0">
<h1 class = "product-message">Real Apple Pro</h1>
</section>
<section class = "scroll-section" id = "section-1">
</section>
<footer>
Copyright Dorothy YANG Allright reserved.
</footer>
css 파일
@charset 'utf-8';
html{
font-size : 14px;
font-family: 'Noto Sans KR', sans-serif;
}
body{
/*x축 스크롤을 없앤다.*/
overflow-x:hidden;
/* 글간격을 5% 줄인다. */
letter-spacing: -0.05em;
}
a{
color : black;
text-decoration: none;
}
.global-nav{
/* 크기나 위치 설정 */
width: 100%;
height: 44px;
}
.local-nav{
/* 크기나 위치 설정 */
width: 100%;
height: 52px;
}
.global-nav-links{
display : flex;
align-items : center;
justify-content: space-between;
height : 100%;
max-width : 1000px;
margin : 0 auto;
}
.local-nav-links{
display: flex;
align-items : center;
justify-content: right;
height : 100%;
max-width : 1000px;
margin : 0 auto;
border-bottom : 1px solid gray;
}
.local-nav-product-link{
font-size : 1.5rem;
font-weight: bold;
margin-right : auto;
}
.local-nav-link{
margin-left : 2em;
}
.product-message{
font-size: 7rem;
text-align : center;
margin-top : 1.5em;
}
.scroll-section{
height : 1000px;
border : 1px solid red;
background-color: yellow;
}
728x90
'🏫 Open API_JAVA' 카테고리의 다른 글
| [23~24일차] position / 개인 프로젝트 진행 (0) | 2022.08.23 |
|---|---|
| [22일차] flex / Stack / Queue (0) | 2022.08.20 |
| [19~20일차] DOM / 프로젝트 기획안 (0) | 2022.08.17 |
| [18일차] 알고리즘 / 버블 정렬 (0) | 2022.08.17 |
| [17일차] Scope / 호이스팅 / 문서 객체 / Event (0) | 2022.08.12 |