페이지를 만들기 위해 만들어진 양식, 라이브러리가 많은데


그 중 하나가 부트스트랩이다. 


https://getbootstrap.com


사용방법은 이 사이트에서 코드 자체를 직접 다운로드 하는 방법이 있고


CDN 방식인 코드를 통해서 불러오는 방법이 있다.


그 중 CDN 방식을 소개한다.




디자이너가 아니고 개발자가 직접 HTML 코드로 만들면 솔직히 말해서 많이 구리다...


그래서 Bootstrap을 이용하여 미리 만들어진 디자인을 이용해서 html문서를 작성하면 된다.


CDN 방식은 head에 link 태그와 script 태그를 이용해서 불러온다.






페이지 메인화면에서 상단 메뉴바에서 Examples를 눌러보면










스크롤을 내려 Custom components를 보면 미리 만들어져 있는 예제 페이지들을 볼 수 있다.
















다시 상단 메뉴의 HOME을 눌러 메인으로 돌아오고 페이지 스크롤을 내려 아래를 보면 다음과 같이 코드들이 있다.








여기서 CDN이라고 적힌 부분의 CSS only와 JS 부분을 복사하여 head에 추가하면 된다.







이와같이 추가하고 꼭 css를 먼저 쓰고 js를 써야한다. 불러오는 순서와 연관되어 있다.









이제 상단 메뉴바의 Documentation을 눌러보자.






위와 같은 페이지가 뜨는데


여기서 원하는 기능들을 불러올 수 있다.


예를들어 왼쪽 리스트의 Jumbotron을 가져오고 싶다면 눌러보자.






위와 같이 예시가 하나 나오고 아래에는 그에 대한 코드가 나온다.


이 코드를 복사하여 body에 붙여넣기 하면 예시와 똑같이 나온다.







기본 제공되는 HTML 코드와 Bootstrap을 이용한 예시를 한번 비교해보자.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--Bootstrap css-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!--Bootstrap js-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
    <!--css가 무조건 위에 있어야 함, 먼저 로딩되고 js 코드가 필요하기 때문이다.-->
</head>
<body>
    <h1>HTML이 제공하는 기본 헤더1 태그</h1>
    <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>
</body>
</html>



위와 같이 문서를 작성하였고 간단하게 h1태그를 사용하였다.


결과는 아래와 같다.










h1 태그를 보면 매우 구리다.


이와같이 Bootstrap에 잘 디자인 된 코드들이 많으므로 유용하게 갖다 쓰자.






https://startbootstrap.com/


위 사이트는 완성된 페이지 코드들을 공유하고 있다.





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

'HTML, CSS, JavaScript, jQuery > 01.설치 및 설정, 사용법' 카테고리의 다른 글

[HTML/CSS]01-07.Emmet 코드, Tab(단축키)를 눌러 기본 틀 자동 완성  (1) 2018.10.24
[HTML/CSS]01-05.HTML/CSS 게시글을 작성에 사용한 파일을 전부 업로드  (0) 2018.10.18
[HTML]01-04.브라우져 개발자 모드로 HTML 코드 보는 법  (0) 2018.10.15
[HTML]01-03.HTML 공부에 도움이 되는 사이트  (0) 2018.10.11
[HTML]01-02.Visual Studio Code 한글화 및 사용법  (0) 2018.10.11

ROLLUP은 그룹별 산출한 결과값의 소계/누계를 구하는 함수이다.


GROUP BY와 함께 쓰이며 GROUP BY로 묶은 부분을 ROLLUP을 추가하여 () 괄호로 묶어 사용한다.


GROUP BY ROLLUP( [] );




DECODE는 자바의 Switch 문과 비슷하다고 생각하면 된다.


SELECT 문의 컬럼명에 쓰이며 다음과 같이 쓰인다.


DECODE (검사 할 조건 계산식(결과가 값으로 떨어져야 함), 값1, 처리할 식, 값2, 처리할 식, ..... , DEFAULT값(생략가능))


예제를 통해 실제로 어떻게 쓰이나 보자


--rollup
--그룹별 산출한 결과값의 소계/누계를 구하는 함수

SELECT depart_no, commision, COUNT(*)
FROM employees
GROUP BY depart_no, commision;

SELECT depart_no, commision, COUNT(*)
FROM employees
GROUP BY ROLLUP(depart_no, commision);

-- GROUPING 함수를 통해 (null)을 제거할 수 있다.
-- 실제 데이터와 집계 데이터를 구분하는 함수
-- 0 : 실제 데이터
-- 1 : 집계 데이터
SELECT GROUPING(depart_no), GROUPING(commision), COUNT(*)
FROM employees
GROUP BY ROLLUP(depart_no, commision);

-- DECODE()
-- 자바에서 switch 문과 유사한 선택 함수
-- DECODE(검사 할 조건 계산식(결과가 값으로 떨어져야 함), 값1, 처리할 식 1, 값2, 처리할 식 2 ...... , DEFAULT 값(생략 가능))

SELECT
    DECODE(GROUPING(depart_no), 0, depart_no, 1, ' ') 부서번호,
    DECODE(GROUPING(commision), 0, TO_CHAR(commision), 1, ' ') 커미션,
    COUNT(*)
FROM employees
GROUP BY ROLLUP(depart_no, commision);


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

'Oracle DB 11g > 02.활용, SQL' 카테고리의 다른 글

[DB]02-15.Oracle DB 숫자형 함수(ABS, CEIL, FLOOR, OMD, ROUND, TRUNC)  (0) 2018.10.12
[DB]02-14.Oracle DB 날짜 함수(SYSDATE, SYSTIMESTAMP, ADD_MONTHS, MONTHS_BETWEEN, LAST_DAY, NEXT_DAY)  (0) 2018.10.12
[DB]02-13.Oracle DB 문자형 함수(Char Function)  (0) 2018.10.12
[DB]02-12.Oracle DB 집계함수(COUNT, MAX, MIN, AVG, ROUND, SUM)  (0) 2018.10.12
[DB]02-11.Oracle DB 시퀀스(Sequence)  (0) 2018.10.08

JS에서 데이터 타입을 구분하기 위해선


코드를 읽어보는 수 밖에 없다.


왜냐하면 선언 자체를 var로 전부 통일하여 사용하고


그 후에 들어오는 값에 따라서 자동으로 잡히게 되어있기 때문이다.






콘솔은 JS에서 가장 간단한 디버깅 도구이다.


여태껏 출력을 위해 사용한 그 console이다.


이번에는 console. 하고 뒤에 붙는 메소드들과 그의 사용법, 


그리고 body에 있는 요소(ex buttone, li, div 등) 을 가져오는 방법을 함께 알아보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <button>버튼</button>
    </body>
    <script>
        var str = "문자열";
        var obj = {key : "value"};
        var arr = [1, 2, 3, 4, 5];
        // Object의 경우 key는 막 써도 문자열로 잡히는데
        // 뒤의 value값은 ""를 꼭 사용해야 문자로 인식 된다.
        // 만약 쓰지 않으면 변수값으로 인식된다.

        // 로그 레벨
        console.log("Log");
        console.info("Info");
        console.warn("Warn");
        console.error("Error");

        // 어떠한 자료구조든지 표현 가능
        console.log(str);
        console.log(obj);
        console.log(arr);

        // 문자열과 함께 표현도 가능
        console.log("문자열 : " + str);
        console.log("객체 : " + obj); // 객체는 문자열과 함께 사용 x
        console.log("배열 : " + arr);

        // 만약 문자열과 객체와 함께 사용하고 싶다면...
        console.log("객체", obj);
        console.log("배열", arr);
        // 콤마를 사용해도 상관없다.

        //////////////////////////////////////////// 바디의 요소 가져오기

        // 태그는 여러개 일 수 있기 때문에 배열로 가져온다.
        var btn = document.getElementsByTagName("button");
        console.log(btn);
        // 이벤트(이벤트 객체가 매개변수로 들어온다.)
        btn[0].addEventListener("click", function(e){
            console.log("click", e);
        })


        
    </script>
</html>






get하고 자동완성을 누르면 다양한 방법으로 요소를 가져올 수 있다.






또한 가져온 값을 출력(console.log(btn); 구문)하면 위와 같이 배열 오브젝트 형태로 값이 들어오는데


key - value 형식으로


요소의 속성들이 쭈우우욱 들어있다, 정말 많이 있는데


이 요소들을 제대로 컨트롤 할 줄 안다면 JS는 정말 잘하는 숙련자라고 볼 수 있다.




그리고 이벤트를 구현 할 때 이벤트 객체가 매개변수로 들어오게 되는데


이 매개변수는 정말 다양한 정보를 담고 들어온다.


다음 사진을 확인해보자











위와같이 파란색 박스의 펼치기를 눌러보면 이벤트 객체가 담고있는 정보가 주르륵 나온다.


이 정보도 매우 유용하게 쓸 수 있고 어떤 정보가 담겨있는지는 직접 콘솔에 띄어  확인해보자.


위의 캡쳐는 펼쳤을 때 정보가 너무 많아 전부 캡쳐하지 못했다.


간단한 영어 단어로 이루어져 있으므로 의미 그대로 받아들이면 된다.













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

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-002.html 기본 사용 예 및 js 파일 생성 및 예  (0) 2018.11.05
[JS]04-001.기본 뼈대 새창으로 열기톰캣 다운로드 및 자바스크립트 개발 환경 구축, 파일 생성 실행  (0) 2018.11.05
[JS]04-08.for each문, 반복문 한꺼번에  (0) 2018.10.19
[JS]04-07.Shallow Copy 현상, 배열 대입 이상  (0) 2018.10.19
[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19

+ Recent posts

티스토리툴바