상세 컨텐츠

본문 제목

프로그래머 도전기 68일차

프로그래머가 될거야!

by Choyee 2023. 11. 15. 23:18

본문

오늘은

 

오늘 학원에서 시험을 보느라 수업 진도를 하나도 나가지 못했습니다

팀 프로젝트도 슬슬 시작하려 하고 있는데

백엔드쪽을 아직 제대로 배운게 없다보니

막막하게 느껴지네요

 

 

 

JavaScript 공부

 

<JS>

* 변수
함수(제어문)이 있을 경우

변수의 생명주기
함수 내부 - 지역변수, 매개변수 -> 호출하고 나면 소멸
함수 외부 - 전역변수 = 함수의 위쪽, 프로그램의 위쪽
                              -> 프로그램이 종료되면 소멸(데이터 누적, 공유)

배열
let arr = [ ];


배열의 복사
자바 => int[ ] arr1 = {1, 2, 3};
           int arr2 = new int[3];
           for문 사용 복사
JS => let num1 = [1, 2, 3];
        let num2 = [ ]; 
        => num2 = num1; 바로 복사

map()
- 기존의 배열을 참조해서 배열을 생성


<객체 구조도>
브라우저 객체 모델(BOM) = window - Document, History, Location, Navigator, Screen
문서 객체 모델(DOM) = Document - Forms, Images ... ... 등

이베트 구현 방법
1. 태그의 속성 onclick = 함수()
2. 자바스크립트 객체의 속성 onclick

addEventListener( ) = 한 요소에 여러 이벤트가 발생했을 때
이벤트 처리기를 연결해 주는 함수
=> element.addEventListener("event", function);

속성의 값을 가져오거나 수정하는 함수
객체.getAttribute("속성");
객체.setAttribute("속성", "속성값");

 

 

 

*<그리고 오늘은 혼자 아무것도 가이드가 없는 상태에서 코드를 짜보는 연습을 해보았습니다 >

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main</title>
</head>
<body>
    <div id="container">
        <div id="top">
            <div class="top-top">

                <div class="mini-shortcut"> <!-- 상단 좌측 링크 아이콘 -->
                    <ul class="ms-list">
                        <li><a href="">youtube</a></li>
                        <li><a href="">instagram</a></li>
                        <li><a href="">twitter</a></li>
                    </ul>
                </div>

                <div class="top-top-menu"> <!-- 상단 미니메뉴 -->
                    <ul class="ttm-list">
                        <li><a href="">NEW JOIN</a></li>
                        <li><a href="">LOG IN</a></li>
                        <li><a href="">BOARD</a></li>
                        <li><a href="">MY PAGE</a></li>
                        <li><a href="">BASKET</a></li>
                        <li><a href="">ORDER INQUIRY</a></li>
                        <li><input type="text" id="search"></li> <!-- 상단 검색창 -->
                    </ul>
                </div>
            </div>  

            <div class="top-mid">   <!-- 메인 로고, 사진 -->
                <a href=""><img class="logo-pic" src="img/ex2.jpg" alt=""></a>
            </div>

            <div class="top-btm">   <!-- 사이트 내 각종 메뉴 모음 -->
                <div class="top-btm-menu">
                    <ul class="tbm-list">
                        <li><a href="">MENU1</a></li>
                        <li><a href="">MENU2</a></li>
                        <li><a href="">MENU3</a></li>
                        <li><a href="">MENU4</a></li>
                        <li><a href="">MENU5</a></li>
                        <li><a href="">MENU6</a></li>
                        <li><a href="">MENU7</a></li>
                        <li><a href="">MENU8</a></li>
                        <li><a href="">MENU9</a></li>
                    </ul>
                </div>
            </div>
        </div>



        <div id="mid">
            <div class="mid-top">
                <div class="main-prod-show">  <!-- 제일 큰 사진으로 주요 제품 등을 보여줌 -->
                    <a href=""><img class="main-prod-pic" src="img/main-pic.jpg" alt=""></a>
                    <div class="main-pic-button">  <!-- 버튼 클릭으로 메인 사진 선택 -->
                        <button></button>
                        <button></button>
                        <button></button>
                        <button></button>
                        <button></button>
                    </div>
                </div>

                <div class="board">
                    <div class="notice-board">
                        <h3 class="title-notice">Notice / Event</h3>
                        <ul class="notice-list">
                            <li><a href="">공지사항1</a></li>
                            <li><a href="">공지사항2</a></li>
                            <li><a href="">공지사항3</a></li>
                        </ul>
                    </div>

                    <div class="review-board">
                        <h3 class="title-review">Review Board</h3>
                        <ul class="review-list">
                            <li><a href="">리뷰1</a></li>
                            <li><a href="">리뷰2</a></li>
                            <li><a href="">리뷰3</a></li>
                            <li><a href="">리뷰4</a></li>
                        </ul>
                    </div>

                    <div class="QnA-board">
                        <h3 class="title-QnA">Q/A Board</h3>
                        <ul class="QnA-list">
                            <li><a href="">질문</a></li>
                            <li><a href="">질문</a></li>
                            <li><a href="">질문</a></li>
                            <li><a href="">질문</a></li>
                        </ul>
                    </div>
                </div>

            </div>
            
            <div class="mid-mid">
                <div class="prod-board">
                    <h3>Home Sweet Home</h3>
                    <div class="sub-prod-show">  <!-- 메인 제품 외의 주요 제품 목록 -->
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                    </div>
        
                    <h3>WaGoo WaGoo</h3>
                    <div class="sub-prod-show">  <!-- 메인 제품 외의 주요 제품 목록 -->
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                    </div>
        
                    <h3>Let's Play</h3>
                    <div class="sub-prod-show">  <!-- 메인 제품 외의 주요 제품 목록 -->
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                        <a href=""><img class="sub-prod-pic" src="" alt=""></a>
                    </div>
                </div>
            </div>
        </div>


        <div id="bottom">
            <div class="cst-center">
                <h3>CUSTOMER CENTER</h3>
                <p>
                    TEL 010-0000-0000 <br>
                    Kakao team_2 <br>
                    AM 10 ~ PM 6 <br>
                    Closed ~ Weekend, Holiday
                </p>
            </div>
            <div class="bank-info">
                <h3>BANK INFO</h3>
                <p>
                    농협 123-1234-1234-12 <br>
                    국민 123456-12-123456 <br>
                    예금주 : (주)team_2
                </p>
            </div>
            <div class="btm-icon">
                <ul class="btm-icon-list">
                    <li><a href=""><img class="icon" src="" alt=""></a></li>
                    <li><a href=""><img class="icon" src="" alt=""></a></li>
                    <li><a href=""><img class="icon" src="" alt=""></a></li>
                    <li><a href=""><img class="icon" src="" alt=""></a></li>
                    <li><a href=""><img class="icon" src="" alt=""></a></li>
                </ul>
            </div>
        </div>

        <footer id="footer">
            <div class="footer-list">
                <ul class="ft-list">
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
            <div class="footer-info">
                <p class="span-list">
                    <span>team_2 : KHacademy</span>
                    <span>address : korea seoul</span>
                    <span>leader : choi hae won</span> <br>
                    <span>member : seok min / dong hyeon / ji seong / je heon / seung beom </span> <br>
                    <span>tel : 1234-1234</span>
                    <span>e-mail : team_2@naver.com</span> <br>
                    <span>copyright ⓒ team_2. All rights reserved. Design by team_2.</span>
                </p>
            </div>
        </footer>
    </div>
</body>
</html>

 

 

쇼핑몰 같은 느낌의 페이지를 구현해 보려고 시도하였습니다

메인 페이지의 html 코드를 짜보았는데

내일은 css 스타일 코딩을 해볼까 합니다

 

 

2023. 11. 15 (수)

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

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

프로그래머 도전기 70일차  (0) 2023.11.18
프로그래머 도전기 69일차  (0) 2023.11.17
프로그래머 도전기 67일차  (1) 2023.11.13
프로그래머 도전기 66일차  (2) 2023.11.12
프로그래머 도전기 65일차  (3) 2023.11.09

관련글 더보기

티스토리툴바