프로그래머 도전기 67일차

프로그래머가 될거야!

by Choyee 2023. 11. 13. 23:20

오늘은

오늘은 학원에서 팀을 이루었습니다

12월 초에 있을 팀별 프로젝트를 위함이었는데요

팀을 나누고 아이디어 회의를 하면서 새삼 제대로 된 기획을 해보겠구나 하는 기대감과

혼자서는 하지 못할 좋은 성과를 낼 수 있었으면 좋겠다는 의지가 생겨났습니다

큰 트러블 없이 무사히 프로젝트를 마치기를 바랍니다

학원 수업

<<UML>>
- 통합 모델링 언어
- 시스템을 모델로 표현
- 코딩에 앞서 표준화되고 이해되기 쉬운 방법으로 소프트웨어를 설계
   -> 다른 사람들과 의사 소통할 수 있는 메커니즘을 제공
- 객체지향 모델링 언어
=> 사실 언어라기보다 객체지향 모델링이다

유스케이스
= 시스템의 동작 하나를 기술한 것
- 자극 하나에 대한 반응으로 눈에 보이는 반응을 기술
유스케이스 기술서 -> 유스케이스 다이어그램 -> ERD(객체관계도) -> 클래스 다이어그램
=> 기술서를 먼저 작성한다 (명세)
ex) 상품 구입 :
     1. 점원은 상품을 스캐너 위로 통과시킨다
     2. 스캐너가 바코드를 읽는다
     3. 상품명과 가격이 고객쪽 화면에 표시된다
     4. 고객은 카드나 현금으로 가격을 결제한다
     5. 영수증이 출력된다

<<JavaScript>>
함수, 배열(Array),
객체 - Math, Date, window, document
        (앞 문자가 대문자인 경우 = static)

Date 객체
let now = new Date( )

window 객체 (=> window가 생략 되는 경우가 있다)
window.alert( )
window.open(url)
window.prompt( )
setInterval(실행문, 밀리초) = 일정한 시간 간격을 유지(계속 반복)
setTimeout( ) = 한번 설정 후 종료

window.onload(){   = 윈도우 창 시작시 실행문이 바로 실행된다
    실행문               script를 외부에서 가져올 때 html 코드 상단에 올린 경우 작동하지 않을 때 사용 가능
}

자기소개 페이지 만들기

학원에서 배운 HTML. CSS를 토대로

간단한 JavaScript를 추가하여 저에 대한 간단한 홈페이지를 만들어 보았습니다

http://choyeehosting.dothome.co.kr/#done

자기소개

choyeehosting.dothome.co.kr

(feat. 사월이)

* 디스플레이 크기에 따라 웹의 스타일도 반응을 하는

웹반응형으로 만들었고 실제 상용할 용도는 아니기때문에 구체적인 부분들은

상세하게 기술하지 않았습니다

<HTML>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자기소개</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>

<body>
    <div id="wrap">
        <!-- 상단 메뉴 -->
        <header>
            <nav class="head_nav">
                <div class="logo">
                    <h3>logo</h3>
                </div>
                <ul class="head_menu">
                    <li><a href="#about">I am...</a></li>
                    <li><a href="#doing">Learning...</a></li>
                    <li><a href="#done">Trying...</a></li>
                </ul>
                <div class="bg_pic">
                    <img src="img/Java.jpg" alt="배경" id="bgPic">
                </div>
            </nav>
        </header>

        <!-- 본문 내용 -->
        <div id="mainSection">
            <section id="about">
                <h1>I AM</h1>
                <div class="content">
                    <div class="myPic">
                        <img src="img/april.jpg" alt="사월이" id="myPic">
                    </div>
                    <div class="frontend_pic">
                        <img src="img/frontend.png" alt="삼위일체" class="frontPic">
                    </div>
                    <h3><span class="object">'Programmer'</span>가 되기 위해 노력중인 'Choyee'입니다</h3>
                    <ul class="info">
                        <li>- 이름 : 최동현</li>
                        <li>- 나이 : 30</li>
                        <li>- 주소 : 서울시 강동구</li>
                        <li>- 연락처 : </li>
                    </ul>
                </div>
            </section>
            <section id="doing">
                <h1>learning Skill</h1>
                <div>
                    <ul class="skill">
                        <li>JAVA</li>
                        <li>SQL</li>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>
                </div>
                <div class="frontend_pic2">
                    <img src="img/frontend.png" alt="삼위일체" class="frontPic2">
                </div>
            </section>
            <section id="done">
                <h1>Trying</h1>
                <div>
                    <ul class="project">
                        <li>은행 계좌 시스템 - by Java</li>
                        <li>게시판 시스템 - by Java</li>
                        <li>반응형 웹(cafe12) - by CSS</li>
                        <li>할일 목록 프로그램 - CSS, JavaScript</li>
                    </ul>
                </div>
                <p id="time">발전중인 시간... : <span id="show"></span></p>
            </section>
        </div>

        <!-- 하단 메뉴 -->
        <div id="bottom">
            <ul>
                <div class="bottom_tag">
                    <li><a href="#">깃허브</a></li>
                    <li><a href="#">블로그</a></li>
                </div>
                <li class="email">choyee0421@gmail.com</li>
            </ul>
        </div>
    </div>
</body>
    <script src="JS/script.js"></script>
</html>

<CSS>

@charset "utf-8";

/* 공통 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 모바일 버전 */
body {
    width: 100%;
    padding: 0;
}

/* header 영역 */
header {
    width: 100%;
    height: 260px;
    text-align: center;
    background: #333;
}

.head_nav {
    width: 100%;
    height: 100%;
}
.logo{
    float: left;
    color: aqua;
    margin: 10px;
}
.head_menu {
    display: inline-block;
    height: 60px;
}
.head_menu li{
    display: inline-block;
    margin: 0 20px;
    padding: 16px 0;
}
.head_menu li a {
    color: #fff;
    text-decoration: none;
}

.bg_pic img {
    width: 100%;
    height: 200px;
}

/* section 영역 */
section {
    border-top: 2px solid #eee;
    padding: 20px 40px 70px;
    line-height: 1.5;
}

.myPic {
    display: none;
}
.frontend_pic {
    display: none;
}

.frontend_pic2 {
    display: none;
}

.object {
    color: #23d;
    font-weight: bold;
    font-size: 1.5rem;
}

section h1 {
    padding-bottom: 20px ;
}

#about {
    padding-top: 20px;
}

#about h3 {
    margin: 0 20px 20px 10px;
    color: #45f;
}

#about li {
    list-style: none inside;
}

#doing li {
    list-style: inside;
}

#done li {
    list-style: square inside;
}

section:nth-child(2n){
    background: #eff;
}

#time {
    float: right;
    padding-top: 80px;
    line-height: 3;
    font-style: italic;
    font-size: 12px;
    font-weight: bold;
    color: #4af;
}
#show {
    font-size: 16px;
}

/* bottom 영역 */
#bottom {
    background: #eee;
    padding: 20px;
    margin-top: 60px;
    border-top: 2px solid #000;
}
.bottom_tag {
    display: inline-block;
}
#bottom ul{
    text-align: center;
    list-style: none;
}
#bottom ul li, .email {
    padding: 0 20px;
    display: inline-block;
}
.bottom_tag li{
    border-right: 1px solid #aaa;
}


/* 태블릿 기준 - 780px 이상 */
@media (min-width: 780px) {
    #wrap {
        font-size: 1.25rem;
    }

    /* header 영역 */
    header {
        height: 330px;
    }

    .bg_pic img {
        width: 100%;
        height: 270px;
    }

    /* section 영역 */
    section {
        height: 334px;
    }
    
    #about {
        padding-top: 20px;
        display: block;
    }

    #doing {
        float: left;
        width: 50%;
    }
    #done {
        display: inline-block;
        width: 50%;
        background: #eef;
    }

    .frontend_pic {
        display: block;
        float: right;
    }
    .frontPic {
        width: 300px;
        height: 200px;
    }
    .frontend_pic2 {
        display: none;
    }
}

/* PC 기준 - 1200px 이상 */
@media (min-width: 1200px) {
    #wrap{
        width: 1200px;
        margin: 0 auto;
        font-size: 1.5rem;
    }

    /* header 영역 */
    header {
        height: 390px;
    }

    .bg_pic img {
        width: 100%;
        height: 330px;
    }

    /* section 영역 */
    section {
        height: 380px;
        display: inline-block;
    }

    .myPic {
        display: block;
    }

    #myPic {
        width: 200px;
        height: 250px;
        float: left;
        padding-top: 10px;
        margin-right: 60px;
    }

    #doing, #done {
        width: 100%;
        position: relative;
    }

    .frontend_pic {
        display: none;
    }

    .frontend_pic2 {
        display: block;
    }

    .frontPic2 {
        width: 500px;
        height: 300px;
        position: absolute;
        top: 200px;
        z-index: 10;
        margin-left: 600px;
    }
}

<JS>

let picture = ["img/Java.jpg", "img/html.png", "img/css.jpg", "img/JS.jpg"];
let picIdx = 0;

showSlide();

function showSlide() {
    let cupPic = document.getElementById("bgPic")
    cupPic.src = picture[picIdx];  // img 경로의 경우 -> src를 쓴다
    picIdx++;
    if(picIdx == picture.length){
        picIdx = 0;
    }
    setTimeout(showSlide, 2500);
}

setInterval(myWatch, 1000);

function myWatch() {
    const now = new Date(); // 날짜와 시간 함께 생성
    let time = now.toLocaleTimeString(); // 시간만 출력
    console.log(time);

    let watch = document.getElementById("show")
    watch.innerHTML = time;
    watch.style.color = "#99f";
}

2023. 11. 13 (월)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 69일차 (0)	2023.11.17
프로그래머 도전기 68일차 (0)	2023.11.15
프로그래머 도전기 66일차 (2)	2023.11.12
프로그래머 도전기 65일차 (3)	2023.11.09
프로그래머도전기 64일차 (0)	2023.11.07