[SK shieldus 지능형 애플리케이션 개발 트랙 2기] 3-0 (html, css)

# 프런트엔드 구조
    - 프런트엔드
        - 기본 구성원
            - html + css + javascript
            - 개별요소
                - html5 : 구조(뼈대), 콘텐츠포함
                - css3 : 레이아웃, 디자인(템플릿 활용), 반응형, 애니메이션
                    - 부트스트랩, 머터리얼, ...
                - javascript : 인터렉션(사용자<->브라우저, 상호작용), 이벤트, 통신, 동적화면구성
                    - 기존 수업 -> nodejs 기반 문법 정리
                        - vscode 작동
                    - html, css와 연계 6일부터 진행
                        - 브라우저에서 작동
        - 방식
            - 브라우저를 통해서 유저가 확인하는 화면의 랜더링 방식
            - 종류
                - SSR (Server Side Rendering)
                    - 서버 사이드 랜더링
                    - 유저가 보는 화면을 서버(백엔드)에서 모두 완성하여 전송
                    - 전통적인 방식
                    - 개발플렛폼
                        - springboot, nodejs, .net,...
                - CSR (Client Side Rendering)
                    - 클라이언트 사이드 랜더링
                    - 유저가 보는 브라우저에서 화면이 완성
                        - 랜더링 부하가 클라이언트에게 가중된다
                        - 개발플렛폼 
                            - reatjs/vuejs,... => SPA

# html
    - Hyper Text Markup Language
    - 구조, 뼈대, `콘텐츠==데이터`를 가지고 있다
        - 웹
            - 구조 + 데이터세팅 => 화면처리에 기본 정보
        - 데이터
            - 구조 + 데이터 => 반정형 데이터 
            - 웹스크래핑/웹크롤링 => 데이터 수집 대상
    - 각각 태그에 용도
    - html5 
        - 1995년 최초 고안
            -  html4가 2015이전까지 주력 사용 -> 지금은 html5
        - 2008 드레프트 이후 2009~10 적용
        - 스마트폰보급 및 확산 시기
    - 구조
        1_basic.html
    
    - 주요 태그
        - 기본
            - DOCTYPE : html 문서 작성 문법을 정의한 DTD(Document Type Define) 참조선언
                - 생략 가능함
            - html
                - 문서의 시작과 끝
            - head, body
                - 메타정보, 화면에보이는 정보 기술
        - 구조
            - `div` : 영역 -> 레이아웃
            - table, theader, tbody, tr, td, th : 테이블표시 -> 게시판
        - 입력
            - (*)input, select, textarea, radio,....
            - 사용자로부터 데이터를 `입력`
                - form과 연계함 (가장 바깥쪽 경계 표현, 전송)
        - 전송
            - form
            - 서버로 `전송` 역활
        - 정보(텍스트, 멀티미디어)표시
            - 텍스트
                - p(단락,줄바꿈), span(조각,줄바꿈x) ... 
            - 멀티미디어
                - img, video, audio, ...
        - 이동
            - a : 링크
        - 이벤트 (트리거 역활)
            - button, ...
        - 외부 자원 참조 (html 내부로 적용)
            - script, style, ...
                - js/css external  방식으로 html에 참조시킬때 사용
                - js/css internal  방식으로 직접 js와 css를 구현할때 사용
        - 2D/3D 랜더링
            - canvas : 차트, 게임(빈도가 낮다, 기타엔진으로 작동)

# 개별기능
    - html, js 연동
        - 2_html_js.html, 2_html_js_2.html
        - SSR 기준 : html에 js, css를 포함시키는 방법
            - external
                - *.js, *.html로 파일 존재
                - <script src="xx.js">
            - internal
                - *.html만 존재
                - <script> ... </script>
            - inline
                - html 요소에 직접 적용
                - <button onclick="javascript:xxx();">로그인</button>
                - <button onclick="xxx();">로그인</button>


# (*)css selector
    - css에서 요소를 특정(찾아내는)하는 기법(방법, 표현)
    - css selector 이해(직접), 개발자도구 자동으로 찾기(툴사용)
    - 규칙 (우선 검토하는 순위)
        - (*)아이디 값
            - 문서(html)상에서 고유한 값을 가진다!!
            - html : <요소명 id="아이디값">
            - css selector : "#아이디값"
        - 클레스 값
            - `.클레스값`
        - 요소명
        - 조합(위의 표현)
        - 열거
        - 서열 (부모, 자식, 형제, 후손)
        - 기타 
            - 의사결정
            - 속성셀렉터
    - 5_jqeury_css_selector.html

# html 내에서 통신
    - 프로토콜 : 웹페이지 기준 http, https
    - html으로 전송한다(요청한다)
        - (*)form 태그 -> 페이지 자체를 변경(화면 전체가 새로로딩!!)
            - 폼 전송 이동
            - 데이터 전송 방법(method)
                - (*)get, (*)post, put, delete, .... 모든 메소드 지원(미지원 존재)
            - 컴벅인다!!
            - 2_html_js_2.html
        - a 태그
            - 링크로 이동
            - 데이터 전송 방법(method)
                - get
            - 컴벅인다!!
        - 주요 메소드   
            - get : 소량의 데이터 전송, 보안이 중요하지 않을때,
                - 프로토콜의 헤더에 데이터를 전달
                - 형식 : url + ? + 파라미터(키=값&키=값...)
                - http://www.naver.com/api/news?id=1234823478293
            - post : 대량의 데이터, 보안이 중요(데이터는 숨겨져야 한다), 파일업로드
                - 프로토콜의 바디에 데이터를 전달
                - 바디로 데이터를 전송 -> 대량의 데이터를 쪼개서 전송 가능하다는 뜻!!
                - 가변 처리가 가능하다 

    - JS로 전송한다(요청한다)
        - ajax (Asynchronous JavaScript and XML) : 실습전!!
            - 모든 메소드 방식 지원
            - xml 전송을 목표, 비동기처리, 백그라운드 통신 설계
                - 데이터 포멧 xml => json
            - open api 회사들은 
                - xml, json 모두 지원함 => restful 방식 백엔드 구성시
            - txt 포멧이면 모두 지원가능함!!, 파일, ...
                - txt 사람, 컴퓨터, 프로그램이 모두 이해할수 있는 형식
            - 더보기 -> 데이터 불러오기 (백단으로 통신해서 데이터 로드)
            - 4_jquery.html
        

    - http 요청시 응답코드
        - 100 ~
        - 200 ~ : 200번은 정상응답
        - 300 ~
        - 400 ~ : 404 (해당 페이지 없음), 405 (그런 메소드는 해당 주소로 지원 x) <= 클라이언트
        - 500 ~ : 500 <= 서버측에러 

# 차트 그리기
    - 대시보드용, 수집된(쌓여있는) 데이터 => 시각화 => 분석, 관제
    - 차트용 라이브러리
        - 유료, 무료 -> JS
        - 무료
            - chartjs
            - 3_chart.html

# 기본 html, css 컨셉
    - html 기본 구성 이해, 필요한 html 요소들을 사용할때 체크!!
    - css 
        - UI 구성등 -> 백엔드에서 체크, 무료 템플릿 활용(부트스트랩등...)
        - (*)css selector를 확인
            - 스타일 기본 적용
        - 반응형, 애니메이션 <- 활용
            - 생략, 무료 템플릿 제품에서 지원되면 그대로 활용
            - ex) https://getbootstrap.kr/

# jQuery
    - 자바스크립트 프레임웍
    - JS의 표현을 간결하게 대체할수 있는 제품
    - 2008/9 ~ 현재까지 계속 사용, 2015년 이전까지는 엄청난 점유을 가지고 사용
    - 활용
        - SSR 중심으로 웹서비스 구성시 활용빈도가 높다!!
    - 실습
        - 2_html_js.html =>  jQuery 적용 => 간결하게 구성 :  4_jquery.html

 

 

 

 

1_basic.html

<!DOCTYPE html>
<!-- 
    - 위의 표현은 html5의 표식-이문서는 html5 규정을 따른다 
    - 브라우저가 html 문서를 파싱하여 메모리 로드후 화면 랜더링 처리시 참고
    - 생략 가능함(표기 않해도 문제 없음)
    - <!DOCTYPE 루트엘리먼트표기> => DTD라는 형식으로 문법을 규정
        - html5 문서는 html로 시작하고, html 끝난다
    - 엘리먼트(element)
        - 구성 = 시작태그(start tag) + 콘텐츠(contents) + 종료태그(end tag)
        - 시작태그 = 태그명 + n개의 속성[=속성값]
    - 태그
        - 시작태그 : <요소명|태그명>
        - 종료태그 : </요소명|태그명>
    - 기본 규칙
        - 오버랩 금지 -> 랜더링 오류
            ```
                <div>
                    <a>  
                </div>
                </a>
            ```
-->
<html>
<!-- 헤드, 바디로 html 하위에 구성된다 -->
<head>
    <!-- html 문서의  메타정보(데이터를 설명하는 데이터) 담당 
        문서제목, 뷰포트(화면크기), 인코딩, 검색시 체크되는 키워드, 아이콘(파비콘)
        ,...
        css, js를 포함 가능 (과거)
    -->
</head>
<body>
    <!-- 
        화면에 보이는 실제적인 내용 기술 
        css, js를 포함 가능 (최신은  js를 주로 body 닫기태그  위에 배치)
        기본 블럭(영역) 구성 => div, 콘텐츠가 하나도 없으면 존재  x

        브라우저 개발자모드 => ctrl + shift + i|j
    -->s
    <div>
        hello html 
    </div>
</body>
</html>

 

 

 

2_html_js.html

<!--
    html 콘텐츠에  js를 연결하여 이벤트, 통신 등 html 인터렉션 처리
    1. 뼈대 준비 -> html
    2. JS 세팅 -> 인터렉션 처리
-->
<html>
<head>

</head>
<body>
    <!-- 사용자 입력 : 아이디, 비번 -->
    <!-- type은 입력받은 데이터를 가장 효과적으로 입력할수 있게      
        키보드조정 => 모바일에서 가상키보드 레이아웃 조절
        입력 데이터의 목적에 맞게 조정
        기본은 text, password, number, date, time, email, ....
    -->
    <!-- 로그인 입력 화면 -->
    <div>
        <!-- 페이지 목적에 따른 정보 제공 -->
        <p>로그인</p>
        <!-- 사용자 입력받는 공간 제공 -->
        <input type="text" id="uid" placeholder="아이디"/> <!-- 단독태그(열고 닫기 없음) 형태 -->
        <input type="password" id="upw" placeholder="비밀번호"/>
        <!-- 목적 달성하기 위한 도구 제공-->
        <button onclick="login();">로그인(inline)</button>
        <button id="loginBtn">로그인(interal)</button>
        <!-- 로그인 버튼 클릭 -> 이벤트 발생 -> 인터렉션 발생 -> 누군가 처리(JS)-->
        <!--
            <로그인 처리시 작업 순서 : JS>
            로그인 버튼 특정(찾는다!! -> css selector 기법)
                - #loginBtn
            로그인 버튼에 이벤트 등록 (click 이벤트)
            이벤트 발생 -> 입력값 추출
            입력값 -> 서버로 전송 (http 통신)
        -->
        <script>
            // JS 영역
            // html에 js는 어떻게 포함되는가? => 현재 코드는  internal 방식
            // 로그인 함수
            function login () {
                console.log('로그인 버튼 클릭');
            }
            // 1. 로그인 버튼 특정
            //    오래된방식
            //const btn = document.getElementById("loginBtn"); // 순수 id값 사용
            //    html5부터 지원된 방식
            const btn = document.querySelector("#loginBtn"); // css selector 적용

            // 2. 버튼에 이벤트 등록
            //btn.addEventListener('click', function(){})
            btn.addEventListener('click', ()=>{
                //alert('로그인 클릭');// 팝업
                // 실습 1(2분). 아이디, 비번 입력 요소를 특정하시오
                const uid = document.getElementById("uid");// id값은 uid
                const upw = document.querySelector("#upw");// id값은 upw
                console.log( uid.value, upw.value); // 값 출력

                // 서버로 데이터 전송 
                // JS -> ajax -> api 존재(함수가 존재함) -> 순수JS 코드가 복잡함
                // html 로 전송 혹은 JS 프레임웍 사용(써드 파트)
            })
        </script>
    </div>
    
</body>
</html>

 

 

2_html_js_2.html

<html>
<head>
</head>
<body>
    <!-- html에서 전송:form -->
    <div>
        <p>로그인</p>
        <!-- action 생략되는 경우 존재:현재페이지가 주소  -->
        <!-- <form action="서버주소(URL)" method="get"> -->
        <!-- url : http://127.0.0.1:5500/html_css/login -->
        <!-- 아래 방식으로 요청 -> 404에러 -->
        <form action="/login" method="get">
            <!-- 
                - 키를 반드시 지정해야 데이터가 전달된다 
                - name 속성으로 부여 => 키
                - 통상, id값과 name값은 동일하게 부여
                - http://127.0.0.1:5500/login?uid=abcd&upw=1234 <= get방식
            -->
            <input type="text" id="uid" name="uid" placeholder="아이디"/>
            <input type="password" id="upw" name="upw" placeholder="비밀번호"/>
            <!-- submit 유형이 전송하는 트리거 -->
            <button type="submit" id="loginBtn">로그인</button>
        </form>
    </div>
    
    <div>
        <p>로그인(post)</p>
        <!-- 데이터를 프로토콜의 바디쪽에 숨겨서(보안성 우수해진다) 전송 
             참고: 요청 -> 랜 -> 패킷(의 바디) -> 네트워크
             아래 형태에서 요청 => 405 에러 <= 응답코드
             : http://127.0.0.1:5500/login <= 데이터가 보이지 않는다!
        -->
        <form action="/login" method="post">
            <input type="text" id="uid" name="uid" placeholder="아이디"/>
            <input type="password" id="upw" name="upw" placeholder="비밀번호"/>
            <button type="submit" id="loginBtn">로그인</button>
        </form>
    </div>
</body>
</html>

 

 

 

3_chart.html

<!-- 기본골격, html, head, body, div 1개 세팅 실습 1분-->
<html>

<head></head>

<body>
    <div>
        <!-- 차트가 그려지는 영역 -->
        <canvas id="chart_id" />
    </div>
    <!-- 차트js 라이브러리 연결 (external 방식) : 설치완료:바로 사용가능함 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- axios 라이브러리 연결 : 통신용도 -->
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
    <script>
        // 여기서부터 차트 관련 업무 처리
        // 0. 별도의 트리거(버튼 클릭, 검색등) 없이 진행
        // 1. 차트를 랜더링할 요소 특정
        const chartCanvas = document.getElementById('chart_id');

        // 2. 데이터는? -> 서버와 통신해서 가져온다!!
        // http://127.0.0.1:5500/html_css/data/sales.json 요청해서 결과를 가져온다
        // I/O 통신(네트워크) -> 비동기 -> ajax -> 순수JS 복잡함 -> 라이브러리사용
        // npmjs.com -> 검색 -> axios -> https://www.npmjs.com/package/axios
        axios.get("http://127.0.0.1:5500/frontend/html_css/data/sales.json")
            .then(res => {
                console.log('통신결과', res);
                // 실습 1분 res 내부에서 존재하는 data만 추출하시오
                // 객체 구조 분해 or 객체 비구조화 할당
                const { data } = res;
                console.log('실데이터', data);

                // 차트 생성
                makeChart(data);
            })
            .catch(err => {
                alert('통신오류');
            });

        function makeChart(data) {
            // 3. 데이터를 차트에 적용 -> 데이터(배열|객체) 가공 
            // data -> 가공 혹은 추출 -> 배열 2개 생성 교체 자리에 각각 대체 : 실습4분
            //data.map( function (sale) { return sale.label } )
            let labels = data.map( sale => sale.label  ); // 레이블정보만 추출
            //console.log( labels );
            let datas  = data.map( sale => sale.data  ); // 수치데이터만 추출

            // 4. 차트 갱신 혹은 새로고침(케이스별로 상이) , 생략가능하다
            new Chart(chartCanvas, {
                type: 'bar',
                data: {
                    // 레이블 자리 -> ['A','B','C', ..] 교체
                    labels: labels, //['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        // 데이터 자리 -> [700, 500, ...] 교체
                        data: datas, //[12, 19, 3, 5, 2, 3],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

    </script>
</body>

</html>

 

 

 

4_jquery.html

<!--
    - jQuery를 통해 JS의 표현 간결함 확인
    - chart 적용까지 확인
    - css selector 나머지 규칙 실습 적용
-->
<html>
<head>
    <!-- 
        jquery 설치 
        - 여러 버전을 다양한 매체에서 제공, 구글에서 제공하는 링크 사용
            - jquery.com>다운로드>cdn 검색
            - npmjs.com>jquery 검색>링크 확인
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- chartjs 설치 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div>
        <form method="post" id="formSend"> <!-- action이 없으면 현재페이지가 전송 URL -->
            <p>로그인</p>
            <input type="text" id="uid" placeholder="아이디" />
            <input type="password" id="upw" placeholder="비밀번호" />
            <!-- 로그인 행위를 시작하게 하는 트리거 -> 클릭 -> 이벤트 발생 -> submit -->
            <input type="submit" value="로그인" />
        </form>
    </div>
    <script>
        /**
         * jQuery 기본 문법
         *  - html 요소를 정의하는 변수 표현 방법
         *      - $('css selector|키워드')
         *  - 기능 (JS의 모든 기능을 간결하게 함수로 제공함) -> 생산성 극대화!!
         *      - 요소조작(html 동적구성)
         *      - 통신(네트워크 => ajax 중심 통신)
         *      - css 스타일 쉽게 적용(동적)
         *      - 이벤트 처리
         */
        // 1. submit 이벤트 재정의하여 이벤트 발생시 인터셉트 처리
        //    1-1. 이벤트가 발생되는 주체(form 요소) 특정(css selector)
        //    1-2. 해당 주체에 대해 submit 이벤트 재정의
        // $('#formSend')    // 1.1 <-> document.getElementById('formSend');
        // 1-2 : on('이벤트명', 콜백함수) => 이벤트 정의담당
        $('#formSend').on('submit', (event)=>{
            // 1.3  JS에서 임의로 컨트롤 하고 싶다 =>  submit 이벤트를 무효화시켜야함
            //      submit 이벤트를 유지하면 화면이 전환됨=>무효화처리(특수 케이스)
            // 1.3.1
            event.preventDefault();
            // 이벤트가 발동걸린 상황만 활용=> 로그인처리는  ajax로 처리하겟다(컨셉)
            console.log('로그인 처리명렁 수행');

            // 1.3.2
            return false;
        }); 

    </script>
</body>
</html>

 

 

 

 

 

 

 

5_jqeury_css_selector.html

<!--
    - css selector 습득
        - (*)아이디 값
            - 문서(html)상에서 고유한 값을 가진다!!
            - html : <요소명 id="아이디값">
            - css selector : "#아이디값"
        - 클레스 값
            - `.클레스값`
        - 요소명
        - 조합(위의 표현)
        - 열거
        - 서열 (부모, 자식, 형제, 후손)
        - 기타 
            - 의사결정
            - 속성셀렉터
    - jquery 사용
-->
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        /* css 스타일 정의, internal  */
        /* 클레스는 여러 디자인을 묶어서 한가지 형태의 스타일을 제공 */
        .myStyle {
            color:blue;
            background-color: blanchedalmond;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>
        <h2 id="subject">제목</h2> <!-- h1 ~ h5 : 대분류, 중분류, 소분류, .. 제목을 표기하는 태그-->
        <h2>내용</h2>
        <h2 class="myStyle">클레스 적용1</h2>
        <p class="myStyle">클레스 적용2</p>
        <p class="demo">요소명</p>
        <span>내용1</span>
        <h4>제목4</h4>
        <!-- 리스트 묘사, ul|ol  성분 li -->
        <ol>
            <li>A</li>
            <li>B</li>
            <li>C
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
        </ol>
        <!-- 정보를 표현 => 목록으로 표현, 검색결과 ..., 게시판 -->
        <table border="1">
            <thead> <!-- 컬럼명, 데이터가 어떤 의미를 가지는지 맨위 한줄 묘사-->
                <tr>
                    <th>no</th>
                    <th>제목</th>
                    <th>요약</th>
                </tr>
            </thead>
            <tbody> <!-- 데이터, tr이 데이터 1개 -->
                <tr>
                    <td>1</td>
                    <td>월요일</td>
                    <td>한주시작...</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>크리스마스</td>
                    <td>수요일휴무</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>크리스마스2</td>
                    <td>수요일휴무</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>크리스마스3</td>
                    <td>수요일휴무</td>
                </tr>
            </tbody>
        </table>
        <div>
            <br/> <!-- 줄바꿈 -->
            <input type="text" name="uid"/>
        </div>
    </div>
    <script>
        // 모든 요소 : *, 서열관계 테스트를 위해서 더미로 세팅
        // 모든 요소의 글자색을 검은색으로 세팅해라!!. 실제로는 잘 사용 x
        $('*').css('color','black');

        // 여기서  html의 요소를 특정(css selector)하여 css 스타일(기본적인것만) 적용
        // 1. 아이디 지정 => 특정, 문서내에서 고유한값
        //    문법 : #아이디값
        console.log( $('#subject') );
        // 이 문서상에 존재하는 모든 요소들 중에 id값이 subject 요소를 찾아라(고유하므로)
        $('#subject').css('color','red'); // 글자색을 레드 지정
        
        // 2. 클레스 : 여러요소에 동일한 스타일을 적용
        //    동일 엘리먼트 혹은 다른 엘레먼트에게도 적용 가능
        //    스타일 : style="키:값; 키:값;", class="여러스타일이 묶여 잇는 하나의 디자인"
        //    문법 : .클레스값
        // 이 문서상에 존재하는 모든 요소들 중에 클레스값이 myStyle인 요소를 모두 찾아라
        // CSS 적용 순위(겹친다면) : external < internal < inline 
        $('.myStyle').css('color', 'magenta');

        // 3. 요소명
        //    요소의 이름으로 특정하기, 복수개가 선택될 여지가 높다
        //    문법 : 요소명
        // 문서상에 존재하는 모든 요소들중에 요소명이 p인 요소를 모두 찾아라!!
        $('p').css('color', 'red');

        // 4. 조합(위의 표현)
        //    문법 : 아이디, 클레스, 요소명, ... 등 모든 표현법을 합쳐서 묘사
        //  - h2#subject : 생략, 아이디는 굳이 조합하지 않는다(사용가능함)
        //  - h2.myStyle : 문서상에 존재하는 모든 h2 중에서 클레스값이 myStyle인 요소 모두 찾아라
        //  - 속성명 표기법
        //      - 순수 css에서는 background-color, 
        //      - js/react에서 기술할때는 통산 카멜표기법으로 처리 backgroundColor
        $('h2.myStyle').css('backgroundColor', 'yellow');

        // 5. 열거
        //    공통점 없는 요소들을 한번에 선택할때 사용
        //    문법 : css selector, css selector, .... <= 나열
        $('p.demo, span, h4').css('color', 'green');
        //    <h4>제목4</h4> => 위의 코드 수행후 => <h4 style="color:green;">제목4</h4>
        //    css의 속성을 inline 방식으로 적용!! -> 가장 우선순위로 스타일이 적용

        // 6. 서열
        //    부모와 자식간의 관계, 시초(조상)와 후손간의 관계
        //    xxML => 구조 표현을 트리형식, 서열관계 표현
        //    id나 클레스값으로 특정이 않되면 => 위로 올라가면서 특정(서열관계 고려)
        //    만약 규칙이 생각 않나면 => 요소 > 우클릭 > copy > copy selector
        //   <div><p>1</p></div>
        //    문법 : 
        //      - 부모<->자식, 직계 : 부모 > 자식 
        //      - 루트<->요소(후손) : 루트 후손    
        // 문서상에 존재하는 모든 요소들 중에 ol를 모두 특정, 
        // 이 ol의 직계자식들중 li만 특정해서 글자색 레드    
        $('ol > li').css('color','red');
        // 후손 특정, 직계 자식도 포함되는가? (OK)
        $('ol li').css('color','blue');

        // 7. 의사결정셀렉터 -> table 요소
        //    반복적인 요소가 등장 => 부모:자식(반복)형태로 특정할수 있음
        //    자식들의 서열관계를 특정 (첫째, 막내, n 번째, 특수번째, 이상/이하 )
        // 문서상에 존재하는 모든 table 중에 실 데이터를 모두 찾아서 첫번째 데이터만 추출        
        // 실 데이터 tr 선택됨 -> 의사결정삽입 
        //                    -> 첫번째 데이터 -> 실제 텍스트를 자식으로 가진요소
        $('table > tbody > tr:first > td').css('color','red');
        $('table > tbody > tr:even').css('backgroundColor','lightgray');//짝수번째
        // first, last
        // even, odd
        // eq(인덱스), lt(인덱스), gt(인덱스)
        // nth-child(순번) 특정번째 요소, 브라우저별로 표현이 다를수 있다(주의)
        // 1번부터 순서를 체크함(주의)
        $('table > tbody > tr:nth-child(2) > td').css('color','blue');

        // 8. 속성셀렉터 -> input 요소
        //    문법 : (css selector:옵션) + [속성명=속성값]
        //    속성을 이용하여 요소를 특정
        // 문서 상에 존재하는 모든 요소들중에 속성명이 값이 name이고, 값이 uid인 요소
        $('[name=uid]').css('backgroundColor','lightgray');
        // 문서 상에 존재하는 모든 요소들중에 input들 중에 속성명이 name, 값이 uid인 요소
        $('input[name=uid]').css('backgroundColor','lightgreen');
    </script>
</body>
</html>

 

 

 

6_chart_jqeury.html 

<!--
    chartjs로 적용된 3_chart.html 문서를  jquery 적용 코드 리팩토링 진행
        - 버튼 추가
        - 버튼 클릭시 차트 생성
        - 차트 생성시 jquery로 대상을 특정 (필요시 특정한다!!)
-->

<html>

<head>
    <!-- 써드파트 라이브러리, 프레임웍을 삽입 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
</head>

<body>
    <div>
        <button>차트 생성</button>
        <canvas id="chart_id" />        
    </div>
    <script>
        // 1. 차트 생성 버튼을 클릭하면 차트를 생성
        $('button').on('click', () => { // 이벤트 처리
            // 2. 통신 (axios 사용)
            axios.get("http://127.0.0.1:5500/html_css/data/sales.json")
                .then(res => {
                    const { data } = res;
                    makeChart(data);
                })
                .catch(err => {
                    alert('통신오류');
                });

        });
        // $('#chart_id')


        // 3. 차트 그리기
        function makeChart(data) {
            // 3-1. 데이터 전처리            
            let labels = data.map(sale => sale.label);
            let datas = data.map(sale => sale.data);
            // 4-2. 차트 적용
            new Chart($('#chart_id'), {
                type: 'pie', // 종류 변경, 종류에 따른 데이터 조정하면 바로 반영
                data: {
                    labels: labels,
                    datasets: [{
                        label: '분석 결과',
                        data: datas,
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

    </script>
</body>

</html>