🏫 Open API_JAVA

[21일차] 개인 프로젝트 기획안 피드백 / 가이드 코딩

Dorothy_YANG 2022. 8. 18. 21:47
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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


    <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
저작자표시 (새창열림)