<!doctype html>
<html lang="ko">
   <!--
       meta 태그는 화면에 글자를 표시하는 문자 인코딩 방식을 지정한다.
       한글 문서인 경우에는 utf-8 인코딩 방식을 사용한다.
    -->
    <head>
        <meta charset="utf-8">
        <!--
            title 태그는 문서의 제목을 포함한다.
            웹 브라우저의 제목 표시줄(탭)에 표시된다.
        -->
        <title>문서 제목</title>
    </head>
    <!--
        body 태그에 포함된 내용은 실제 브라우저에 표시된다.
    -->
    <body>
        <h1>html 연습</h1>
        <p>html 연습 시간에는 html의 주요 태그와
        각 태그의 속성을 공부해보도록 하겠습니다.</p>
    </body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
        <h1> ~ <h6>
        문서의 제목을 포함하는 태그
    -->
    <h1>html의 이해</h1>
    <h1>html 기본</h2>
    <h2>html 기본 태그</h2>
    <h3>html 텍스트 관련 태그</h3>
    
    <h4>html 폼 관련 태그</h4>
    <h5>제목 태그</h5>
    <h5>본문 태그</h5>
    
    <h4>html 폼 관련 태그</h4>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>태그 연습</h1>
   <h2>단락 만들기</h2>
   <!--
       p 태그는 텍스트의 내용을 담는 태그다.
   -->
   <p>
       21일 삼성전자에 따르면 왈라왈라<br />
       21일 삼성전자에 따르면 왈라왈라
   </p>
   <!--
       br 태그는 줄을 바꾼다.
   -->
   <!--
        hr 태그는 단락의 주제가 바뀔 때 사용한다.
   -->
   <hr />
   <p>
       22일 삼성전자에 따르면 솰라솰라<br />
       22일 삼성전자에 따르면 왈라왈라
   </p>
   
   <blockquote>
       21일 삼성전자에 따르면 왈라왈라<br />
       
   </blockquote>
    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>목록 만들기</h1>
    
    <h2>순서 있는 목록 만들기</h2>
    <!--
        or(ordered list) 태그: 순서 있는 목록을 만든다.
        li(list item) 태그: 목록의 아이템을 만든다.
    -->
    <h3>검색 순위</h3>
    <ol>
        <li>티웨이 항공</li>
        <li>전유성</li>
        <li>구본임</li>
        <li>이랜드몰</li>
        <li>이외수</li>
    </ol>
    
    <h3>좋아하는 가수 순위</h3>
    <ol>
        <li>좋</li>
        <li>아</li>
        <li>하</li>
        <li>는</li>
    </ol>
    <h2>순서 없는 목록 만들기</h2>
    <!--
        ul(unordered list): 순서없는 목록을 만든다.
        li(list item): 목록의 아이템을 만든다.
    -->
    <h3>할인중인 상품</h3>
    <ul>
        <li>아이폰 8</li>
        <li>갤럭시 S9</li>
        <li>에어팟 1세대</li>
    </ul>
    <!--
    젠코딩
    -->
    h3{주요 뉴스}+ul>li*4
    <h3>주요 뉴스</h3>
    <ul style="list-style: none;">
        <li>남태현, 장재인 열애</li>
        <li>충격!...</li>
        <li>속보!...</li>
        <li>[상보]</li>
    </ul>
    
    <h2>정의 목록 만들기</h2>
    <!--
        dl(definition list): 용어를 설명하는 목록을 만든다.
        dt(definition term): 용어의 제목을 만든다.
        dd(definition description): 용어의 설명을 만든다.
    -->
    <h3>영화 정보</h3>
    <dl>
        <dt>제목</dt><dd>어벤져스:앤드게임</dd>
        <dt>장르</dt><dd>액션/SF</dd>
        <dt>개봉일</dt><dd>안소니 루소, 조 루소</dd>
        <dt>주연</dt><dd>로버트 다우니 주니어, 크리스 에반스, 브리 라슨</dd>
    </dl>
    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>목록 만들기</h1>
   
   <h2>중첩된 목록 만들기</h2>
   <h3>1박 2일 제주도 여행</h3>
    <ul>
        <li>1일차
            <ol>
                <li>올레길</li>
                <li>오름 올라가기</li>
                <li>제주 박물관</li>
            </ol>
        </li>
        <li>2일차
            <ol>
                <li>한라산</li>
                <li>사려니 숲길</li>
                <li>절몰 휴양림</li>
            </ol>
        </li>
    </ul>
    
    <h3>수업 일정</h3>
    <dl>
       
        <dt>프로그래밍 기초</dt>
        <dt>자바</dt>
        <dd>데이터베이스</dd>
        <dt>웹 기초</dt>
        <dd>html</dd>
        <dd>css</dd>
        <dd>javascript</dd>
        
        <dt>프로그래밍 실무</dt>
        <dd>jQuery</dd>
        <dd>Spring framework</dd>
        <dd>전자정부 표준 프레임워크</dd>
        
    </dl>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>표 만들기</h1>
   <!--
       table 태그: 표를 만든다.
       tr (table row): 표의 행을 만든다.
       th (table header): 표의 제목을 만든다.
   -->
   
   <h2>야구 종합 순위</h2>
   <table border="1">
       <tr>
           <th>순위</th>
           <th>팀</th>
           <th>승률</th>
       </tr>
       <tr>
           <td>1</td>
           <td>두산</td>
           <td>0.68</td>       
       </tr>
       <tr>
            <td>2</td>
            <td>SK</td>
            <td>0.625</td>
       </tr>
   </table>
    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table, th, td {
            border:1px solid black; /* 테두리: 1픽셀 실선 검정색 */
            border-collapse: collapse; /* 경계 없애기 */
        }
        th, td {
            padding: 15px; /* 테두리와 콘텐츠 사이 간격을 15px로 설정 */
        }
        td {
            text-align: center;
        }
        tr:nth-child(2n) {
            background-color: #eee;
        }
    </style>
</head>
<body>
<h1>테이블 만들고, 스타일 부여하기</h1>
 
  <h2>야구 종합 순위</h2>
  
   <table style="width: 100%;">
       <tr>
           <th>순위</th>
           <th>팀</th>
           <th>승률</th>
       </tr>
       <tr>
           <td>1</td>
           <td>두산</td>
           <td>0.68</td>       
       </tr>
        <tr>
           <td>2</td>
           <td>SK</td>
           <td>0.625</td>       
       </tr>
       <tr>
            <td>3</td>
            <td>키움</td>
            <td>0.56</td>
       </tr>
       <tr>
           <td>3</td>
           <td>LG</td>
           <td>0.68</td>       
       </tr>
       <tr>
            <td>3</td>
            <td>NC</td>
            <td>0.56</td>
       </tr>
       <tr>
            <td>6</td>
            <td>롯데</td>
            <td>0.44</td>
       </tr>
   </table>   
</body>
</html>

'html' 카테고리의 다른 글

0422  (0) 2019.06.17
sample19~27(div, span, id, class, form 등)  (0) 2019.06.09
sample14~18(link, text, element)  (0) 2019.06.09
sample8~13 (table, img)  (0) 2019.06.09


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {margin: 10px; padding: 10px;}
        .wrapper {clear: both;}
        .box1 {float: left; width: 100px; height: 100px; background-color: red;}
        .box2 {float: left; width: 100px; height: 100px; background-color: green;}
        
    </style>
</head>
<body>
    <div class="wrapper">
       <h3>신규상품</h3>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
        <div class="box1">박스</div>
    </div>
    <div class="wrapper">
       <h3>이벤트상품</h3>
        <div class="box2">박스</div>
        <div class="box2">박스</div>
        <div class="box2">박스</div>
        <div class="box2">박스</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {border: 1px solid #ccc;}
        .container {
            width: 960px;
            padding: 20px;
            margin: 0 auto;
        }
        #header {
            padding: 20px;
            margin-bottom: 20px;
        }
        #contents {
            float: left;
            width: 490px;
            padding: 20px;
            margin-bottom: 20px;
        }
        #menubar {
            float: left;
            width: 150px;
            margin-bottom: 20px;
            margin-right: 20px;
        }
        #sidebar {
            float: right;
            width: 150px;
            padding: 20px;
            padding: 20px;
            margin-bottom: 20px;
        }
        #footer {
            clear: both;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="header">
            <h1>홈페이지 제목</h1>
        </div>
        <div id="menubar">
            <h2>메뉴</h2>
            <p>뉴스</p>
            <p>연예</p>
            <p>스포츠</p>
            <p>금융</p>
            <p>웹툰</p>
        </div>
        <div id="sidebar">
            <h2>배너광고</h2>
            <p>트럼프 '관세 집착'에 미국 통상정책기조 대격변 예고</p>
            <p>트럼프 '관세 집착'에 미국 통상정책기조 대격변 예고</p>
        </div>
        <div id="contents">
            <h2>본문</h2>
            <p>(서울=연합뉴스) 장재은 기자 = 도널드 트럼프 미국 대통령의 관세에 대한 신념 때문에 미국 통상정책이 획기적으로 변하고 있다는 진단이 나오고 있다. 

14일(현지시간) 미국 뉴욕타임스(NYT)에 따르면 트럼프 대통령은 애초 관세를 교역 상대국이 무역장벽을 해체하도록 강제할 무기로 간주했다. 

그러나 최근 들어 트럼프 대통령은 미국 산업들을 보호하고 수입을 차단하며 무역적자를 제거하는 영구적인 수단으로 그 의미를 확장해가고 있다. 

이런 추세는 미국이 현재 적용하고 있는 관세율의 수위에서도 방증되고 있다. </p>
            <p>독일 도이체방크의 분석에 따르면 미국은 현재 전체 수입에 부과하는 관세율이 4.2%로 산업화한 선진국들의 모임인 주요 7개국(G7) 중 가장 높은 것으로 나타났다.

이는 캐나다, 영국, 이탈리아, 독일, 프랑스의 2배에 달할 뿐만 아니라 러시아, 터키, 중국 등 신흥국들보다도 높다. 

자신을 '관세맨'으로 지칭한 트럼프 대통령의 고율 관세 '찬가'는 연일 흘러나오고 있다. </p>
        </div>
        <div id="footer">
            <h2>회사소개</h2>
            <p>이용약관 서비스 안내 기사배열 원칙 책임자 : 유봉석 청소년 보호 책임자 : 정연아 개인정보처리방침 책임의 한계와 법적고지 뉴스 고객센터</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {width: 200px; height: 70px; padding: 20px; float: left; margin: 20px;}
        #box-1 {background-color: #ffd000;
            /* 위치를 지정하는 것이 소용없다.
            position: static;
            left:100px;
            top:-100px;
            */}
        <!--z인덱스가 높을수록 위에 덮임 -->
        #box-2 {background-color: #05d9f0; position: relative; left: -50px; top:30px; z-index: 1;}
        #box-3 {background-color: #23d720; position: relative; left: -100px; top: 60px; z-index: 2;}
    </style>
</head>
<body>
    <h1>CSS 연습하기</h1>
    
    <h2>position 속성</h2>
    <div id="box-1">박스1</div>
    <div id="box-2">박스2</div>
    <div id="box-3">박스3</div>
    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {padding: 20px;}
        .box {
            width: 50px;
            height: 50px;
            background-color: #0095ff;
        }
        #box-wrapper {
            position: relative;
            top: 300px;
            left: 200px;
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
        #box-1 {
            position: absolute;
            top: 0;
            left: 0;
        }
        #box-2 {
            position: absolute;
            top: 0;
            right: 0;
        }
        #box-3 {
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #box-4 {
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
   <div id="box-wrapper">
        <div id="box-1" class="box">박스1</div>
        <div id="box-2" class="box">박스2</div>
        <div id="box-3" class="box">박스3</div>
        <div id="box-4" class="box">박스4</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #header {
            position: fixed;
            top: 5px;
            left: 10px;
            width: 100%;
            padding: 10px;
            background-color: yellow;
        }
        #contents {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>메뉴</h1>
    </div>    
    <div id="contents">
        이로 인해 전국의 소형주택 공급이 늘어나고 있는 추세지만...
        ...중략함.. 실제로는 위의 이미지처럼 길게 썼음...
        ...턱없이 낮은 것을 확인할 수 있다.
    </div>
</body>
</html>

'css' 카테고리의 다른 글

demo7~13  (0) 2019.06.09
demo1~6  (0) 2019.06.09

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {width: 100px; height: 100px; background-color: red; margin: 10px;}
        #box-1 {border: 10px solid black;}
        #box-2 {border: 10px solid black; padding: 50px;}
        #box-3 {border: 10px solid black; margin: 50px;}
        #box-4 {border: 10px solid black; margin-left:  -60px;}
        #box-4:hover {margin-left: 0px;}
        
    </style>
</head>
<body>
    <h1>CSS 연습/h1>
    <h2>박스 모델</h2>
    <div id="box-1">가나다</div>
    <div id="box-2">가나다</div>
    <div id="box-3">가나다</div>
    <div id="box-4">가나다</div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {width: 120px; height: 120px;}
        .box {display: block;} /* 블록 엘리먼트로 변경 */
        .box {display: none;} /* 화면에 표시되지 않도록 변경 */
    </style>
</head>
<body>
    <h1>CSS 연습하기</h1>
    <div>
        <img class="box" src="images/(1).jpg"/>
        <img class="box" src="images/(2).jpg"/>
        <img class="box" src="images/(3).jpg"/>
        <img class="box" src="images/(4).jpg"/>
        <img class="box" src="images/(5).jpg"/>
        <img class="box" src="images/(6).jpg"/>
        <img class="box" src="images/(7).jpg"/>
        <img class="box" src="images/(8).jpg"/>
    </div>
    <hr/>
    <div>
        <div><img src="images/(1).jpg"></div>
        <div><img src="images/(2).jpg"></div>
        <div><img src="images/(3).jpg"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box-2, #box-3 {display: none;}
    </style>
</head>
<body>
    <div>
        <button onclick="showBox1()">뉴스</button>
        <button onclick="showBox2()">연예</button>
        <button onclick="showBox3()">스포츠</button>
    </div>
    
    <div id="box-1">
        <ul>
            <li>클릭하면 바뀜</li>
            <li>클릭하면 바뀜</li>
            <li>클릭하면 바뀜</li>
        </ul>
    </div>
    <div id="box-2">
        <ul>
            <li>가나다</li>
            <li>가나다</li>
            <li>가나다</li>
        </ul>
    </div>
    <div id="box-3">
        <ul>
            <li>류현진 사이영상 수상</li>
            <li>류현진 사이영상 수상</li>
            <li>류현진 사이영상 수상</li>
        </ul>
    </div>
    <script>
        function hideAllbox() {
            document.getElementById("box-1").style.display = "none";
            document.getElementById("box-2").style.display = "none";
            document.getElementById("box-3").style.display = "none";
        }
        
        function showBox1() {
            hideAllbox();
            document.getElementById("box-1").style.display="block";
        }
        
        function showBox2() {
            hideAllbox();
            document.getElementById("box-2").style.display="block";

        }
        
        function showBox3() {
            hideAllbox();
            document.getElementById("box-3").style.display="block";

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 4방향 모두 */
        #btn-1 {padding: 20px; }
        
        /* top/bottom right/left */
        #btn-2 {padding: 20px 10px; }
        
        /* top right bottom left 시계 방향 */
        #btn-3 {padding: 80px 40px 20px 10px; }
        
        #btn-4 {padding-top: 80px; padding-bottom: 20px; }
        
        span {padding: 10px;}
        #sp-1 {border:1px solid black;}
        #sp-2 {border:2px dotted green;}
        #sp-3 {border-bottom: 3px dashed red;}
        
    </style>
</head>
<body>
    <h1>CSS 연습하기</h1>
    
    <h2>패딩 설정</h2>
    <div>
        <button id="btn-1">클릭</button>
        <button id="btn-2">클릭</button>
        <button id="btn-3">클릭</button>
        <button id="btn-4">클릭</button>
    </div>
    
    <h2>테두리 설정</h2>
    <div>
        <span id="sp-1">테두리연습</span>
        <span id="sp-2">테두리연습</span>
        <span id="sp-3">테두리연습</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {padding: 10px; border: 1px solid black;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">header</div>
        <div id="left">left</div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {width: 100px; height: 100px; margin: 10px; background-color: red;}
        
        /*
            float 속성
                - html 요소(태그)를 웹 문서의 위에 떠 있게 만든다.
                - 떠 있게 
        */
        #box-1 {float: left;}
        #box-2 {float: left;}
        #box-3 {float: left;}
        #box-4 {float: right;}
    </style>
</head>
<body>
    <div id="box-1">박스1</div>    
    <div id="box-2">박스2</div>
    <div id="box-3">박스3</div>    
    <div id="box-4">박스4</div>    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {padding: 20px; margin: 10px;}
        #box-1 {float: left; background-color: #ffd800; width: 200px; height: 300px;}
        #box-2 {float: left; background-color: #0094dd; width: 200px; height: 150px;}
        #box-3 {clear:both; background-color: #00ff21;}
        #box-4 {clear:both; background-color: #ff00ff;}
    </style>
</head>
<body>
   <div id="wrapper">
        <div id="box-1" class="box">박스1</div>
        <div id="box-2" class="box">박스2</div>
        <div id="box-3" class="box">박스3</div>
        <div id="box-4" class="box">박스4</div>
    </div>
</body>
</html>

 

'css' 카테고리의 다른 글

demo14~18  (0) 2019.06.09
demo1~6  (0) 2019.06.09

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{color: lightgreen;}
    </style>
</head>
<body>
   <h1>스타일 적용방법</h1>
    
    <h2>style 속성 사용</h2>    
    <p style="color: red;">css 연습하기</p>
    
    <h2>style 태그 사용</h2>
    <div>
        <p>CSS 연습하기</p>
        <p>CSS 연습하기</p>
        <p>CSS 연습하기</p>
    </div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="demo2.css">
</head>
<body>
    <h1>CSS 연습하기</h1>
    
    <h2>외부 스타일시트 파일 사용</h2>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
    <p>CSS 연습</p>
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 전체 선택자 */
        * {color:red;}
        /* 태그 선택자 */
        span {color: black; font-size: 30px;}
        /* 클래스 선택자 */
        .bluetext {color: blue;}
        .blueboard {border: 1px solid blue; padding: 7px;}
        /* 아이디 선택자 */
        #summary {color: black; font-size: 50px;}
        /* 그룹 선택자 */
        h1, h2 {background: lightgreen;}
    </style>
</head>
<body>
    <h1>선택자 연습</h1>    
    
    <h2>전체 선택자 연습</h2>
    <p>전체 선택자의 모든 html 요소에 적용된다.</p>
    
    <h2>태그 선택자 연습</h2>
    <p>태그 선택자는 <span>해당 태그에만</span> 스타일이 <span>적용된다.</span></p>
    
    <h2>태그 선택자 연습</h2>
    <p>태그 선택자는 <span class="bluetext blueboard">해당 태그에만</span> 스타일이 <span class="bluetext">적용된다.</span></p>
    
    <h2>아이디 선택자 연습</h2>
    <p id="summary">아이디 선택자는 아이디 속성 값이 일치하는 태그 하나만 선택해서 스타일을 적용한다.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="demo4.css">
</head>
<body>
    <div id="wrapper"></div>
    <h1>스타일 시트 연습</h1>
    
    <h3>개봉영화 리스트</h3>
    <table class="table table-primary">
        
                <thead>
                    <tr>
                        <th>순위</th>
                        <th>제목</th>
                        <th>점유율</th>
                    </tr>
                </thead>
                
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>어벤저스 엔드게임</td>
                        <td>60%</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>걸캅스</td>
                        <td>30%</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>포켓몬스터 명탐정 피카츄</td>
                        <td>10%</td>
                    </tr>
                </tbody>

    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.css">
</head>
<body>
    <h1>스타일 시트 연습</h1>
    
    <div>
        <button class="btn btn-default">버튼</button>
        <button class="btn btn-primary">버튼</button>
        <button class="btn btn-info">버튼</button>
        <button class="btn btn-success">버튼</button>
        <button class="btn btn-warning">버튼</button>
        <button class="btn btn-danger">버튼</button>
        <button class="btn btn-disabled">버튼</button>
    
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {margin: 10px; width: 150px; height: 150px;}
    </style>
</head>
<body>
    <h1>CSS 연습</h1>
    
    <h2>색상 표현하기</h2>
    <div style="background-color: red;"></div>
    <div style="background-color: rgb(255,0,0);"></div>
    <div style="background-color: rgb(0,255,0);"></div>
    <div style="background-color: rgb(0,0,255);"></div>
    <div style="background-color: rgb(255,0,255);"></div>
    <div style="background-color: rgb(0,0,0);"></div>
    
    <div style="background-color: #ff0000;"></div>
    <div style="background-color: #f00;"></div> <!-- 앞뒤 글자가 같을 시 줄일 수 있음 -->
    <div style="background-color: #ffaabb;"></div>
    <div style="background-color: #fab;"></div>
    
</body>
</html>

 

'css' 카테고리의 다른 글

demo14~18  (0) 2019.06.09
demo7~13  (0) 2019.06.09
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">


</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo12-dashboard  (0) 2019.06.09
demo11-nav  (0) 2019.06.09
demo10-navtab, page  (0) 2019.06.09
demo9-component  (0) 2019.06.09
demo8-grid  (0) 2019.06.09

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">판매현황</div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>순위</th>
                                <th>상품평</th>
                                <th>총판매금액</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>오뚜기 컵밥</td>
                                <td>23,000,000 원</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>엄마 손맛 도시락</td>
                                <td>17,000,000 원</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>매콤 삼각김밥</td>
                                <td>12,400,000 원</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);

          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      400],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]);

            var options = {
              title: 'Company Performance',
              curveType: 'function',
              legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
          }
        </script>
            <div class="panel panel-primary">
                <div class="panel-heading">판매분석</div>
                <div class="panel-body">
                    <div id="curve_chart"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-info">
                <div class="panel-heading">신규 상품 현황</div>
                <div class="panel-body">
                    <ul class="list-group">
                        <li class="list-group-item">달콤 삼각김밥<span class="badge">100</span></li>
                        <li class="list-group-item">달콤 삼각김밥<span class="badge">100</span></li>
                        <li class="list-group-item">달콤 삼각김밥<span class="badge">100</span></li>
                        <li class="list-group-item">달콤 삼각김밥<span class="badge">100</span></li>
                        <li class="list-group-item">달콤 삼각김밥<span class="badge">100</span></li>
                        <li class="list-group-item">달콤 삼각김밥<span class="badge">100</span></li>
                    </ul>
                </div>
                <div class="panel-footer">
                    <p>
                        기온 상승으로 인해 삼각김밥 유효기한이 매우 짧아졌습니다. 판매 시기를 놓치지 마세요.
                    </p>
                </div>
                
            </div>
        </div>
    </div>

</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

부트스트랩 템플릿  (0) 2019.06.09
demo11-nav  (0) 2019.06.09
demo10-navtab, page  (0) 2019.06.09
demo9-component  (0) 2019.06.09
demo8-grid  (0) 2019.06.09

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">CGV</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="">개봉영화</a></li>
            <li class="active"><a href="">개봉예정영화</a></li>
            <li><a href="">박스오피스</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">회원가입</a></li>
            <li class="active"><a href="">로그인</a></li>
        </ul>
    </div>
</div>

<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">CGV</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="">개봉영화</a></li>
            <li class="active"><a href="">개봉예정영화</a></li>
            <li><a href="">박스오피스</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">회원가입</a></li>
            <li class="active"><a href="">로그인</a></li>
        </ul>
    </div>
</div>

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="" class="navbar-brand">CGV</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="">개봉영화</a></li>
            <li class="active"><a href="">개봉예정영화</a></li>
            <li><a href="">박스오피스</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">회원가입</a></li>
            <li class="active"><a href="">로그인</a></li>
        </ul>
    </div>
</div>

<div class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="" class="navbar-brand">CGV</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="">개봉영화</a></li>
            <li class="active"><a href="">개봉예정영화</a></li>
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">박스오피스
                <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="">전체</a></li>
                    <li><a href="">장르별</a></li>
                    <li><a href="">연령별</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">회원가입</a></li>
            <li class="active"><a href="">로그인</a></li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <img src="../css/images/(1).jpg" class="img-thumbnail">
        </div>
        <div class="col-sm-3">
            <img src="../css/images/(1).jpg" class="img-thumbnail">
        </div>
        <div class="col-sm-3">
            <img src="../css/images/(1).jpg" class="img-thumbnail">
        </div>
        <div class="col-sm-3">
            <img src="../css/images/(1).jpg" class="img-thumbnail">
        </div>
    </div>

</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

부트스트랩 템플릿  (0) 2019.06.09
demo12-dashboard  (0) 2019.06.09
demo10-navtab, page  (0) 2019.06.09
demo9-component  (0) 2019.06.09
demo8-grid  (0) 2019.06.09

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>부트스트랩 컴포넌트</h1>
    
    <h2>.nav-tabs 탭</h2>
    <ul class="nav nav-tabs">
        <li class="presentation active"><a href="">전체</a></li>
        <li class="presentation"><a href="">개봉작</a></li>
        <li class="presentation"><a href="">상영예정작</a></li>
        <li class="presentation"><a href="">영화평점</a></li>
        <li class="presentation"><a href="">추천영화</a></li>
    </ul>
    
    <h2>.pagination 페이징</h2>
    <ul class="pagination">
        <li><a href="">&laquo;</a></li>
        <li class="active"><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li><a href="">6</a></li>
        <li><a href="">7</a></li>
        <li><a href="">8</a></li>
        <li><a href="">9</a></li>
        <li><a href="">10</a></li>
        <li><a href="">&raquo;</a></li>
    </ul>
</div>
</body>
</html>

 

'부트스트랩' 카테고리의 다른 글

demo12-dashboard  (0) 2019.06.09
demo11-nav  (0) 2019.06.09
demo9-component  (0) 2019.06.09
demo8-grid  (0) 2019.06.09
demo6-grid  (0) 2019.06.09

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>부트스트랩 컴포넌트</h1>
    
    <h2>.btn-group 버튼 그룹</h2>
    <div class="btn-group">
        <button class="btn btn-default">현금</button>
        <button class="btn btn-primary">카드</button>
        <button class="btn btn-default">이머니</button>
    </div>

    <h2>.btn-group, .btn-group-justified 양쪽 정렬된 버튼 그룹</h2>
    <div class="btn-group btn-group-justified">
        <a href="" class="btn btn-default">현금</a>
        <a href="" class="btn btn-primary">카드</a>
        <a href="" class="btn btn-default">이머니</a>
        <a href="" class="btn btn-default">무통장</a>
        <a href="" class="btn btn-default">네이버페이</a>
    </div>
    
    <h2>.btn-group 드롭다운버튼</h2>
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            신상품은 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="">가격순</a></li>
            <li><a href="">평점순</a></li>
            <li><a href="">리뷰순</a></li>
        </ul>
    </div>
    
    <h2>.badge, .label</h2>
    <div>
    <button class="btn btn-primary">좋아요<span class="badge">♥</span></button>
        <a href="">메일 <span class="badge">?</span></a>
        <a href="">쪽지 <span class="badge">?</span></a>
        <a href="">알림 <span class="badge">?</span></a>
    </div>
    <div>
        <a href="">메일 <span class="label label-default">7 개</span></a>
        <a href="">쪽지 <span class="labe label-primary">7 개</span></a>
        <a href="">알림 <span class="labe label-success">7 개</span></a>
        <a href="">알림 <span class="labe label-info">7 개</span></a>
        <a href="">알림 <span class="labe label-warning">7 개</span></a>
        <a href="">알림 <span class="labe label-danger">7 개</span></a>
    </div>
    
    <h2>.glyphicon</h2>
    <div>
        <button class="btn btn-primary">
           <span class="glyphicon glyphicon-shopping-cart"></span> 장바구니 담기
        </button>
       <button class="btn btn-default">
           <span class="glyphicon glyphicon-heart"></span> 늘 사는 것
        </button>
    </div>
    
    <h2>.list-group, .list-group-item 목록그룹</h2>
    <div>
        <ul class="list-group">
            <li class="list-group-item">인사 1팀<span class="badge">3</span></li>
            <li class="list-group-item">영업 1팀<span class="badge">3</span></li>
            <li class="list-group-item active"><span class="badge">3</span>영업 2팀</li>
            <li class="list-group-item">총무팀<span class="badge">3</span></li>
        </ul>
    </div>
    <div>
        <div class="list-group">
           <a href="" class="list-group-item">링크1</a>
           <a href="" class="list-group-item">링크1</a>
           <a href="" class="list-group-item">링크1</a>
           <a href="" class="list-group-item">링크1</a>
        </div>
    </div>
    <div>
        <div class="list-group">
            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">[속보] 점심 시간 5분 전</h4>
                <p class="list-group-item-text">점심 시간이 5분 남았다고 합니다.</p>
            </a>
            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">[속보] 점심 시간 5분 전</h4>
                <p class="list-group-item-text">점심 시간이 5분 남았다고 합니다.</p>
            </a>
        </div>
    </div>
    
</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo11-nav  (0) 2019.06.09
demo10-navtab, page  (0) 2019.06.09
demo8-grid  (0) 2019.06.09
demo6-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style>
        .row {margin: 50px;}
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4 well">
            <form>
                <div class="form-group">
                    <label>아이디</label>
                    <input type="text" class="form-control" name="userid">
                </div>
                <div class="form-group">
                    <label>비밀번호</label>
                    <input type="password" class="form-control" name="userpwd">
                </div>
                <div class="form-right">
                    <input type="reset" class="btn btn-default" value="취소">
                    <input type="submit" class="btn btn-primary" value="로그인">
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-8 well">
            <form>
                <div class="form-group">
                    <label>아이디</label>
                    <input type="text" class="form-control" name="userid">
                </div>
                <div class="form-group">
                    <label>비밀번호</label>
                    <input type="password" class="form-control" name="userpwd">
                </div>
                <div class="form-right">
                    <input type="reset" class="btn btn-default" value="취소">
                    <input type="submit" class="btn btn-primary" value="로그인">
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-1 well">
            <form>
                <div class="form-group">
                    <label>아이디</label>
                    <input type="text" class="form-control" name="userid">
                </div>
                <div class="form-group">
                    <label>비밀번호</label>
                    <input type="password" class="form-control" name="userpwd">
                </div>
                <div class="form-right">
                    <input type="reset" class="btn btn-default" value="취소">
                    <input type="submit" class="btn btn-primary" value="로그인">
                </div>
            </form>
        </div>
        <div class="col-sm-4 col-sm-offset-2 well">
            <form>
                <div class="form-group">
                    <label>아이디</label>
                    <input type="text" class="form-control" name="userid">
                </div>
                <div class="form-group">
                    <label>비밀번호</label>
                    <input type="password" class="form-control" name="userpwd">
                </div>
                <div class="form-right">
                    <input type="reset" class="btn btn-default" value="취소">
                    <input type="submit" class="btn btn-primary" value="로그인">
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo10-navtab, page  (0) 2019.06.09
demo9-component  (0) 2019.06.09
demo6-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09
demo4-text  (0) 2019.06.09

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
      .container {border: 1px solid gray;}
      .row {margin-bottom: 10px;}
      .img-box {margin-bottom: 10px;}
  </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h1>w3schools.com</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center">
            <h2>HTML</h2>
            <p>The language for building web pages</p>
            <div>
                <button class="btn btn-primary">LEARN HTML</button>
                <button class="btn btn-primary">HTML REFERENCES</button>
            </div>
        </div>
         <div class="col-sm-6">
             <h3>공지사항</h3>
             <table class="table">
                 <thead>
                     <tr>
                         <th>순번</th>
                         <th>제목</th>
                         <th>등록일</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td>1</td>
                         <td>사이트 개편일정</td>
                         <td>2019.05.20</td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>사이트 개편일정</td>
                         <td>2019.05.20</td>
                     </tr>
                     <tr>
                         <td>1</td>
                         <td>사이트 개편일정</td>
                         <td>2019.05.20</td>
                     </tr>
                 </tbody>
             </table>
        </div>
    </div>
    
    <div class="row">
       <div class="col-sm-4">
           <h2>HTML</h2>
            <p>The language for building web pages</p>
            <div>
                <button class="btn btn-primary">LEARN HTML</button>
                <button class="btn btn-primary">HTML REFERENCES</button>
            </div>
       </div>
        <div class="col-sm-4">
           <h2>HTML</h2>
            <p>The language for building web pages</p>
            <div>
                <button class="btn btn-primary">LEARN HTML</button>
                <button class="btn btn-primary">HTML REFERENCES</button>
            </div>
       </div>
       <div class="col-sm-4">
           <h2>HTML</h2>
            <p>The language for building web pages</p>
            <div>
                <button class="btn btn-primary">LEARN HTML</button>
                <button class="btn btn-primary">HTML REFERENCES</button>
            </div>
       </div>
    </div>
    
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(1).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(2).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(3).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(4).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(5).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(5).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(6).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(7).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(8).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
                <div class="col-sm-3 img-box">
                    <img src="../css/images/(1).jpg" class="img-thumbnail" style="max-width: 100%" />
                </div>
            </div>
        </div>
        <div class="col-sm-4 well">
            <h3><strong>진행 중인 이벤트</strong></h3>
            <ul class="list-group">
                <li class="list-group-item">파격할인 한정판매</li>
                <li class="list-group-item">파격할인 한정판매</li>
                <li class="list-group-item">파격할인 한정판매</li>
                <li class="list-group-item">파격할인 한정판매</li>
                <li class="list-group-item">파격할인 한정판매</li>
                <li class="list-group-item">파격할인 한정판매</li>
                <li class="list-group-item">파격할인 한정판매</li>
                <li class="list-group-item">파격할인 한정판매</li>
            </ul>
        </div>
    </div>
    <div class="row" style="background-color:#444; color:#fff; padding:20px;">
        <div class="col-sm-12">
            <p>우리 회사는 정직한 회사입니다.</p>
            <p>우리 회사는 고객님이 만족할 때까지 재배송해드립니다.</p>
        </div>
    </div>
</div>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style>
        .container .row > div {
            padding: 20px;  
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>부트스트랩 스타일</h1>

    <h2>.row .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*</h2>
    
    <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
    </div>
    
    <hr/>
    <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
    </div>
     
    <hr/>
    <div class="row">
        <div class="col-xs-3">3
        </div>
        
        <div class="col-xs-6">6
        </div>
        
        <div class="col-xs-3">3
            <h3>배너</h3>
            <p>이벤트</p>
            <p>이벤트</p>
            <p>이벤트</p>
        </div>
    </div>

</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo9-component  (0) 2019.06.09
demo8-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09
demo4-text  (0) 2019.06.09
demo3-form  (0) 2019.06.09

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>부트스트랩 연습</h1>
    
    <h2>.img-rounded, .img-circle, .img-thumbnail</h2>

    <h2>이미지 표시하기</h2>
    <div>
        <img src="../css/images/(1).jpg" class="img-rounded" width="150" height="150" />
        <img src="../css/images/(2).jpg" class="img-circle" width="150" height="150" />
        <img src="../css/images/(3).jpg" class="img-thumbnail" width="150" height="150" />
    </div>
    
    <h2>이미지와 정보 표시하기</h2>
    <div class="row">
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="thumbnail">
                <a href="">
                    <img src="../css/images/(1).jpg" style="max-width: 100%">
                    <div class="caption">
                        <h4>펭귄</h4>
                        <p>펭:팽현숙</p>
                        <p>귄:귄카</p>
                        <p class="text-right"><small>- by 박명수</small></p>
                    </div>
                    
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo8-grid  (0) 2019.06.09
demo6-grid  (0) 2019.06.09
demo4-text  (0) 2019.06.09
demo3-form  (0) 2019.06.09
demo2-table  (0) 2019.06.09

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>부트스트랩 스타일</h1>
    
    <h2>.text-left, .text-center, .text-right</h2>
    <p>해당 엘리먼트 내의 요소를 정렬한다.</p>
    
    <h2>정렬하기</h2>
    <div>
        <div class="text-center">
            <button class="btn btn-default">버튼</button>
            <button class="btn btn-default">버튼</button>
        </div>
        <div class="text-center">
            텍스트 가운데 정렬하기
        </div>
        <div class="text-right">
            텍스트 오른쪽 정렬하기
        </div>
        <div class="text-left">
            텍스트 왼쪽 정렬하기
        </div>
    </div>
    
    <table class="table table-bordered">
        <thead>
            <tr>
                <th class="text-center">상품명</th>
                <th class="text-center">종류</th>
                <th class="text-right">가격</th>
            </tr>
        </thead>
        <tbody>
            <tr class="text-center">
                <td>손가락 지시봉</td>
                <td>문구</td>
                <td class="text-right">100,000,000원</td>
            </tr>
            <tr class="text-center">
                <td>푸쉬업 바</td>
                <td>헬스용품</td>
                <td class="text-right">500,000원</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

 

'부트스트랩' 카테고리의 다른 글

demo6-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09
demo3-form  (0) 2019.06.09
demo2-table  (0) 2019.06.09
demo1-button  (0) 2019.06.09

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>bootstrap 스타일</h1>
    
    <h2>.form-group, .form-control</h2>
    <p>
        .form-group, form-control을 활용하면 입력폼 요소를 구성할 수 있다.
        .form-group는 label과 폼 요소 (input, select, textarea)를 감싼다.
        .form-control은 폼 요소의 몫을 100%로 설정한다.
    </p>
    
    <h2>기본 입력 폼</h2>
    <div class="well">
        <form>
            <div class="form-group">
                <label>이름</label>
                <input type="text" class="form-control" name="username" />
            </div>
            <div class="form-group">
                <label>아이디</label>
                <input type="text" class="form-control" name="userid" />
            </div>
            <div class="form-group">
                <label>이전 근무지역</label>
                <select class="form-control" name="workingarea">
                    <option value="서울">서울특별시</option>
                    <option value="부산">부산광역시</option>
                    <option value="인천">인천광역시</option>
                    <option value="광주">광주광역시</option>
                </select>
            </div>
            <div class="form-group">
                <label>관련 자격증 소지여부</label>
                <div class="radio">
                    <label class="radio-inline">
                        <input type="radio" name="license" value="1"> 있음
                    </label>
                     <label class="radio-inline">
                        <input type="radio" name="license" value="0"> 없음
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label>보유기술</label>
                <div class="checkbox">
                    <div class="checkbox-inline">
                        <input type="checkbox" name="tech" value="개발"> 개발
                    </div>
                    <div class="checkbox-inline">
                        <input type="checkbox" name="tech" value="설계"> 설계
                    </div>
                    <div class="checkbox-inline">
                        <input type="checkbox" name="tech" value="분석"> 분석
                    </div>
                    <div class="checkbox-inline">
                        <input type="checkbox" name="tech" value="테스팅"> 테스팅
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>자기소개</label>
                <textarea class="form-control" rows="10" name="username"></textarea>
            </div>
            <div class="text-right">
                <input type="reset" class="btn btn-defaul" value="취소">
                <input type="submit" class="btn btn-primary" value="가입">
            </div>
        </form>
    </div>
    
    <h2>수평폼</h2>
    <div class="well">
        <form class="form-horizontal">
           <div class="form-group">
               <label class="col-xs-2 control-label">이름</label>
               <div class="col-xs-10">
                   <input type="text" class="form-control" name="username" />
               </div>
           </div>
           <div class="form-group">
               <label class="col-xs-2 control-label">시작일</label>
               <div class="col-xs-4">
                   <input type="date" class="form-control" name="username" />
               </div>
               <label class="col-xs-2 control-label">종료일</label>
               <div class="col-xs-4">
                   <input type="date" class="form-control" name="username" />
               </div>
           </div>
        </form>
    </div>
</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo6-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09
demo4-text  (0) 2019.06.09
demo2-table  (0) 2019.06.09
demo1-button  (0) 2019.06.09

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>테이블 스타일</h1>
    
    <h2>.table</h2>
    <p>table 클래스는 기본적인 형태의 표를 표시한다.</p>

    <h2>기본 테이블</h2>
    <table class="table">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>연락처</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
        </tbody>
    </table>
       
       
    <h2>테두리 있는 테이블</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>연락처</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
        </tbody>
    </table>
    
       
    <h2>줄무늬와 테두리가 있는 테이블</h2>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>연락처</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
        </tbody>
    </table>
    
    <h2>행오버를 지원하는 테이블</h2>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>연락처</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
        </tbody>
    </table>

    <h2>의미를 가지는 행</h2>
    <table class="table">
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>연락처</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
            <tr class="success">
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr class="info">
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr class="warning">
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr class="danger">
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
            <tr class="active">
                <td>1</td>
                <td>홍길동</td>
                <td>010-1111-1111</td>
                <td>서울시 종로구</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo6-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09
demo4-text  (0) 2019.06.09
demo3-form  (0) 2019.06.09
demo1-button  (0) 2019.06.09

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1>버튼</h1>
    <h2>.btn</h2>
    <p>
        btn 클래스는 버튼 스타일을 지원한다.
        a, input, button 태그에 사용할 수 있다.
    </p>
    <div>
        <a href="" class="btn btn-primary">링크</a>
        <button class="btn btn-primary">버튼</button>
        <input type="submit" class="btn btn-primary" value="등록" />
    </div>
    <h2>버튼 종류</h2>
    <div>
        <button class="btn btn-default">default</button>
        <button class="btn btn-primary">primary</button>
        <button class="btn btn-success">success</button>
        <button class="btn btn-info">info</button>
        <button class="btn btn-warning">warning</button>
        <button class="btn btn-danger">danger</button>    
        <button class="btn btn-link">link</button>    
    </div>
    
    <h2>버튼 크기</h2>
    <div>
        <button class="btn btn-primary btn-lg">버튼</button>
        <button class="btn btn-primary">버튼</button>
        <button class="btn btn-primary btn-sm">버튼</button>
        <button class="btn btn-primary btn-xs">버튼</button>
    </div>
    
    <h2>버튼 비활성화</h2>
    <div>
        <button class="btn btn-primary" disabled>버튼</button>
    </div>
</div>
</body>
</html>

'부트스트랩' 카테고리의 다른 글

demo6-grid  (0) 2019.06.09
demo5-images  (0) 2019.06.09
demo4-text  (0) 2019.06.09
demo3-form  (0) 2019.06.09
demo2-table  (0) 2019.06.09
public interface Pen {
    void draw();
}​

 

public class PenApp {
    public static void main(String[] args) {
        /*
            익명 객체
             - 객체 생성할 수 없는 인터페이스/추상 클래스를 가지고
               객체 생성 시점에 추상화된 메소드를 즉석에서 구현해서 객체를 생성
             - 별도의 구현 클래스의 정의 없이 객체 생성이 가능하다.
        */
        Pen redPen = new Pen() {

            // 추상화된 메소드 재정의
            public void draw() {
                System.out.println("빨갛게 그리기");
            }
        };
        redPen.draw();

        Pen bluePen = new Pen() {
            public void draw() {
                System.out.println("파랗게 그리기");
            }
        };
        bluePen.draw();
    }
}
​

 

public class PhotoShop {
    // Pen인터페이스를 구현한 객체를 전달받아서 선을 그리는 메소드
    public void drawLine(Pen pen) {
        pen.draw();
        System.out.println("선을 그립니다.");
    }
}
​

 

public class PhotoShopApp {
    public static void main(String[] args) {
        PhotoShop ppoShop = new PhotoShop();

        Pen redPen = new Pen() {
            public void draw() {
                System.out.println("빨갛게");
            }
        };
        ppoShop.drawLine(redPen);

        ppoShop.drawLine(new Pen() {
            public void draw() {
                System.out.println("파랗게");
            }
        });
        
        //람다식
        ppoShop.drawLine(() -> System.out.println("노랗게"));
    }
}
​

 

public interface Mouse{
    void click();
    void dbClick();
    void wheel();
}​

 

public abstract class MouseAdapter implements Mouse {
    public void click() {
    
    }

    public void dbClick() {
    
    }
    
    public void wheel() {
    
    }
}​

 

public class MouseApp {
    public static void main(String[] args) {
        Mouse m1 = new Mouse() {
            // 3개 다 해야. 한 개라도 빠지면
            // 컴파일 오류.
            public void click() {
                System.out.println("공격포인트를 클릭한다.");
            }
            
            public void dbClick() {
            
            }

            public void wheel() {
            
            }
        };

        Mouse m2 = new MouseAdapter() {
            public void click() {
                System.out.println("공격포인트를 클릭한다.");
            }
        };
    }
}
​

 

public class Product {
    private int no;
    private String name;
    private int price;
    
    public Product () {}

    public Product (int no, String name, int price) {
        this.no = no;
        this.name = name;
        this.price = price;
    }
    // Getter/Setter 메소드
    public int getNo() {
        return no;
    }
    public String getName() {
        return name;
    }
    public int getPrice() {
        return price;
    }

    public void setNo(int no) {
        this.no = no;
    }
    public void setName(String name) {
        this.name = name;
    }
    public void setPrice(int price) {
        this.price = price;
    }
}​

 

public class Order {
    private Product item;
    private Member customer;

    public Order() {}

    public Order(Product item, Member customer) {
        this.item = item;
        this.customer = customer;
    }

    //Getter/Setter
    public Product getItem() {
        return item;
    }

    public void setItem(Product item) {
        this.item = item;
    }

    public Member getCustomer() {
        return customer;
    }

    public void setCustomer(Member customer) {
        this.customer = customer;
    }
}
​

 

public class Member {
    private int memberNo;
    private String name;
    private int password;
    private int point;

    public int getMemberNo() {
        return memberNo;
    }
    public String getName() {
        return name;
    }
    public int getPassword() {
        return password;
    }
    public int getPoint() {
        return point;
    }

    public void setMemberNo(int memberNo) {
        this.memberNo = memberNo;
    }
    public void setName(String name) {
        this.name = name;
    }
    public void setPassword(int password) {
        this.password = password;
    }
    public void setPoint(int point) {
        this.point = point;
    }
}
​

 

public class MemberService {
    private Member[] members = new Member[100];        // 회원정보를 저장하는 배열
    private Product[] products = new Product[5];    // 상품정보를 저장하는 배열
    private Order[] orders = new Order[100];        // 주문정보(상품+고객) 저장하는 배열

    private int position = 0;
    private int orderPosition = 0;

    // 로그인된 사용자정보를 담는 세션
    private Member session;

    public MemberService() {
        products[0] = new Product(100, "아이패드", 800000);
        products[1] = new Product(200, "아이폰xs", 1600000);
        products[2] = new Product(300, "갤럭시S10", 2000000);
        products[3] = new Product(400, "맥북프로", 2600000);
        products[4] = new Product(500, "LG그램", 1800000);
    }

    // 세션에 저장된 사용자정보를 반환하는 기능
    public Member getSession() {
        return session;
    }
    
    // 회원정보를 전달받아서 가입시키는 기능(members에 저장하기)
    public void register(Member member) {
        if (position < members.length) {
            members[position++] = member;
            // position++;
        }
    }

    // 회원번호/비밀번호를 전달받아서 로그인처리를 수행하는 기능
    public void login(int memberNo, int password) {
        // member배열에서 for문을 사용해서 사용자(Member객체)를 하나씩 가져온다
        // memberNo 와 Memeber객체의 번호가 일치하는 사용자(Member객체)가 있으면
        // 그 사용자(Member객체)의 가입시 비밀번호와 전달받은 비밀번호를 비교한다.
        // 비밀번호가 일치하면 그 사용자정보(Member객체)를 session에 담는다.
        /*
        boolean isSuccess = false;
        for (Member member : members) {
            if (member != null && memberNo == member.getMemberNo() && member.getPassword() == password) {
                session = member;
                isSuccess = true;
                break;
            } else if (member != null && memberNo == member.getMemberNo() && member.getPassword() != password) {
                System.out.println("비밀번호가 틀렸습니다.");
                isSuccess = true;
                break;
            } 
        }
        if (!isSuccess) {
            System.out.println("회원정보가 없습니다");
        }
        */

        Member foundMember = null;
        for (Member member : members) {
            if (member != null && member.getMemberNo() == memberNo) {
                foundMember = member;
                break;
            }
        }
        // 메소드의 빠른 종료
        // 올바르지 않는 경우를 먼저 검사해서 그 경우에 해당되면 메소드의 실행이 즉시 중단되게 하는 것

        // 고객정보가 존재하지 않으면 즉시 실행 중단
        if (foundMember == null) {
            System.out.println("고객번호와 일치하는 고객이 존재하지 않습니다.");
            return;
        }
        // 비밀번호가 일치하지 않으면 즉시 실행 중단
        if (foundMember.getPassword() != password) {
            System.out.println("비밀번호가 일치하지 않습니다.");
            return;
        }
        // 올바르지 않은 경우를 전부 통과한 경우
        // 로그인처리 작업을 수행한다.
        session = foundMember;
        System.out.println("로그인이 완료되었습니다.");
        System.out.println("["+foundMember.getName()+"]님 환영합니다.");

        /*
        if (foundMember != null) {
            if (foundMember.getPassword() == password) {
                session = foundMember;
                System.out.println("로그인이 완료되었습니다.");
                System.out.println("["+foundMember.getName()+"]님 환영합니다.");
            } else {
                System.out.println("비밀번호가 일치하지 않습니다.");
            }
        } else {
            System.out.println("고객번호와 일치하는 고객이 존재하지 않습니다.");
        }
        */
    }

    // 세션에 저장된 사용자 정보를 비우는 기능
    public void logout() {
        session = null;
    }

    // 모든 회원정보를 출력하는 기능(로그인된 사용자만 사용가능하다)
    public void printAllMembers() {
        if (session == null) {
            System.out.println("로그인 후 사용가능한 기능입니다.");
            return;
        }

        for (Member member : members) {
            printMember(member);
        }
    }

    // 회원번호를 전달받아서 회원정보를 출력하는 기능(로그인된 사용자만 사용가능하다)
    public void printMemberByNo(int memberNo) {
        if (session == null) {
            System.out.println("로그인 후 사용가능한 기능입니다.");
            return;
        }
        
        Member foundM = null;
        for (Member member : members) {
            if (member != null && memberNo == member.getMemberNo()) {
                foundM = member;
                break;
            }
        }
        if (foundM == null) {
            System.out.println("회원정보가 존재하지 않습니다.");
            return;
        }
        printMember(foundM);
    }

    // 회원정보(Member 객체)를 받아서 출력하는 기능
    public void printMember(Member member) {
        if (member != null) {
            System.out.println("회원번호 : " + member.getMemberNo());
            System.out.println("회원이름 : " + member.getName());
            System.out.println("비밀번호 : " + member.getPassword());
            System.out.println("포 인 트 : " + member.getPoint());
            System.out.println();
        }
    }

    // 모든 상품정보를 출력하는 기능
    public void printAllProducts() {
        if (session == null) {
            System.out.println("로그인 후 사용가능한 기능입니다.");
            return;
        }
        
        for (Product product : products) {
            if (product != null) {
                System.out.println("상품번호 : " + product.getNo());
                System.out.println("상품이름 : " + product.getName());
                System.out.println("상품가격 : " + product.getPrice());
                System.out.println();
            }
        }
    }

    // 주문번호를 전달받아서 주문정보를 생성해서 배열에 담는 기능
    public void order(int productNo) {
        // 1. Order객체를 생성한다.
        // 2. 주문번호에 해당하는 상품정보(Product객체)를 배열에서 찾는다.
        // 3. Order객체에 상품정보(Product객체)와 주문자(로그인한 사람) 정보를 저장한다.
        // 4. orders 배열에 주문정보(Order객체)를 저장한다.
        if (session == null) {
            System.out.println("로그인 후 사용가능한 기능입니다.");
            return;
        }

        Order order = new Order();
        Product foundProduct = null;
        for (Product product : products) {
            if (product != null && productNo == product.getNo()) {
                foundProduct = product;
                break;
            }
        }

        if (foundProduct == null) {
            System.out.println("상품번호와 일치하는 상품이 존재하지 않습니다.");
            return;
        }
        order.setItem(foundProduct);
        order.setCustomer(session);
        
        if (orderPosition < orders.length) {
            orders[orderPosition++] = order;
        }
    }

    // 현재 로그인한 사람(Session의 정보 참조)의 주문내역을 출력한다.
    public void printOrderHistory() {
        if (session == null) {
            System.out.println("로그인 후 사용가능한 기능입니다.");
            return;
        }
        
        Order[] foundOrder = new Order[100];
        int foundOrderPosition = 0;
        for (Order order : orders) {
            if (order != null && order.getCustomer().getMemberNo() == session.getMemberNo()) {
                foundOrder[foundOrderPosition++] = order;
            }
        }
        
        if (foundOrder == null) {
            System.out.println("주문내역이 없습니다.");
            return;
        }
        for (Order order : foundOrder) {
            if (order != null) {
                System.out.println("상품번호 : " + order.getItem().getNo());
                System.out.println("상품이름 : " + order.getItem().getName());
                System.out.println("상품가격 : " + order.getItem().getPrice());
                System.out.println();
            }
        }
    }
}​

 

import java.util.Scanner;

public class MemberApp {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        MemberService service = new MemberService();

        for (;;) {
            int selNo1 = -1;
            int selNo2 = -1;
            if (service.getSession() == null) {
                // 로그인되지 않은 회원에게 보여지는 메뉴 
                System.out.println("1.회원가입 2.로그인 0.종료");
                System.out.print("메뉴선택> ");
                selNo1 = sc.nextInt();
            } else {
                // 로그인된 회원에게 보여지는 메뉴
                System.out.println("1.전체출력 2.한명출력 3.상품정보출력 4.주문하기 5.주문내역 6.로그아웃 0.종료");
                System.out.print("메뉴선택> ");
                selNo2 = sc.nextInt();
            }
            System.out.println();

            if (selNo1 == 1) {
                System.out.println("[회원가입]");
                System.out.print("회원번호 입력> ");
                int memberNo = sc.nextInt();
                System.out.print("회원이름 입력> ");
                String name = sc.next();
                System.out.print("비밀번호 입력> ");
                int password = sc.nextInt();

                Member member = new Member();
                member.setMemberNo(memberNo);
                member.setName(name);
                member.setPassword(password);

                service.register(member);
            } else if (selNo1 == 2) {
                System.out.println("[로그인]");
                System.out.print("회원번호 입력> ");
                int memberNo = sc.nextInt();
                System.out.print("비밀번호 입력> ");
                int password = sc.nextInt();

                service.login(memberNo, password);
            } else if (selNo1 == 0) {
                System.out.println("시스템 종료");
                break;
            } else if (selNo2 == 1) {
                System.out.println("[회원 전체출력]");
                service.printAllMembers();
            } else if (selNo2 == 2) {
                System.out.println("[회원 한명출력]");
                System.out.print("회원번호 입력> ");
                int memberNo = sc.nextInt();

                service.printMemberByNo(memberNo);
            } else if (selNo2 == 6) {
                service.logout();
                System.out.println("로그아웃 되었습니다.");
            } else if (selNo2 == 3) {
                System.out.println("[전체 상품정보 출력]");
                service.printAllProducts();
            } else if (selNo2 == 4) {
                System.out.println("[주문하기]");
                System.out.print("상품번호 입력> ");
                int productNo = sc.nextInt();

                service.order(productNo);
            } else if (selNo2 == 5) {
                System.out.println("[주문내역 보기]");
                service.printOrderHistory();
            } else if (selNo2 == 0) {
                System.out.println("시스템 종료");
                break;
            }
            System.out.println();
        }
    }
}
​

'자바 > oop6' 카테고리의 다른 글

Outter, Iterator, List, Account, MyWindow.java  (0) 2019.06.07
public class Outter {
    // 인스턴스 멤버 내부 클래스 
    // Outter 객체가 생성된 다음에만 사용할 수 있는 내부 클래스
    // Outter 객체의 모든 멤버(필드, 메소드)를 사용할 수 있다.
    public class Inner1 {
    
    }
    // 정적 내부 클래스
    // Outter객체 생성 없이 사용할 수 있는 내부 클래스
    // Outter의 정적 멤버(정적 필드, 정적 메소드)만 사용할 수 있다.
    public static class Inner2 {
    
    }

    public void method() {
        int x = 10;
        x = 20;
        // 로컬 내부 클래스
        // 메소드가 실행되는 동안에만 사용할 수 있는 내부 클래스
        // Outter객체의 모든 멤버를 사용할 수 있다.
        // ...
        class Inner3 {
            public void m1() {
                System.out.println(x);
            }
        }
    }
}
​

 

public interface Iterator {

    boolean empty();
    int next();

}​

 

public class List {

    int[] data = {10, 20, 30, 40, 50};

    public Iterator getIterator() {
        Iterator it = new ListIterator();
        return it;

    }
    class ListIterator implements Iterator {
        int[] clone;
        int position;
    
        public ListIterator() {
            clone = data;
            position = 0;
        }
            
        public int next() {
            int number = 0;
            number = clone[position];
            position++;

            return number;
        }

        public boolean empty () {
            if (position < clone.length) {
                return false;
            } else {
                return true;
            }
        }
    }
}
​

 

public class IteratorApp {
    public static void main(String[] args) {
        List list = new List();
        Iterator iterator = list.getIterator();

        System.out.println(iterator.empty());
        System.out.println(iterator.next());
        System.out.println(iterator.empty());
        System.out.println(iterator.next());
        System.out.println(iterator.empty());
        System.out.println(iterator.next());
        System.out.println(iterator.empty());
        System.out.println(iterator.next());
        System.out.println(iterator.empty());
        System.out.println(iterator.next());

        System.out.println(iterator.empty());    
    }
}
​

 

public class Account {
    private int no;
    private String name;
    private int balance;

    public int getNo() {
        return no;
    }

    public String getName() {
        return name;
    }

    public int getBalance() {
        return balance;
    }

    public static class AccountBuilder {
        private int no;
        private String name;
        private int balance;

        public AccountBuilder no(int no) {
            this.no = no;
            return this;
        }

        public AccountBuilder name(String name) {
            this.name = null;
            this.name = name;
            return this;
        }

        public AccountBuilder balance(int balance) {
            this.balance = 0;
            this.balance = balance;
            return this;
        }

        public Account build() {
            Account account = new Account();
            account.no = no;
            account.name = name;
            account.balance = balance;
            return account;
        }
    }
}
​

 

public class AccountApp {
    public static void main(String[] args) {
        Account.AccountBuilder builder = new Account.AccountBuilder();
        
        builder.no(10).name("홍길동");
        Account account1 = builder.build();
        System.out.println("번호 : " + account1.getNo());
        System.out.println("이름 : " + account1.getName());
        System.out.println("잔고 : " + account1.getBalance());

        builder.no(20).balance(230000);
        Account account2 = builder.build();
        System.out.println("번호 : " + account2.getNo());
        System.out.println("이름 : " + account2.getName());
        System.out.println("잔고 : " + account2.getBalance());

        builder.no(40).name("김유신").balance(430000);
        Account account3 = builder.build();
        System.out.println("번호 : " + account3.getNo());
        System.out.println("이름 : " + account3.getName());
        System.out.println("잔고 : " + account3.getBalance());

        Account account4 = builder.no(50).name("강감찬").balance(5000000).build();
        System.out.println("번호 : " + account4.getNo());
        System.out.println("이름 : " + account4.getName());
        System.out.println("잔고 : " + account4.getBalance());
    }
}
​

 

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class MyWindow extends JFrame {

    JTextArea area = new JTextArea();
    JTextField field = new JTextField();
    JButton btn = new JButton("전송");

    public MyWindow() {
        setTitle("연습 프로그램");
        
        JPanel panel = new JPanel(new BorderLayout());
        add(new JScrollPane(area), BorderLayout.CENTER);
        add(panel, BorderLayout.SOUTH);
        panel.add(field, BorderLayout.CENTER);
        panel.add(btn, BorderLayout.EAST);
        
        ActionListener listener = new ActionListener() {
            public void actionPerformed(ActionEvent event) {
                String text = field.getText();
                area.append(text);
                area.append("\n");
                field.setText("");
                field.requestFocus();
            }
        };
        field.addActionListener(listener);
        btn.addActionListener(listener);
    
        setBounds(100, 100, 300, 300);
        setVisible(true);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        field.requestFocus();
    }

    public static void main(String[] args) {
        new MyWindow();
    }
}
​

'자바 > oop6' 카테고리의 다른 글

PhotoShop, Mouse, Member.java  (0) 2019.06.07
public interface Car {
    void start();
    void stop();
    void aircon();
    void radio();
    void navi();
    
}​

 

// Car 인터페이스의 일부 기능을 구현하기 위한 추상 클래스
// 모든 Car구현객체가 동일하게 구현하는 내용을 미리 구현해서
// 구현 클래스의 구현 부담을 줄이는 역할을 수행한다.

public abstract class AbstractCar implements Car {
    public void start() {
        System.out.println("자동차를 출발시킨다.");
    }

    public void stop() {
        System.out.println("자동차를 정지시킨다.");
    }
}​

 

public class Tico extends AbstractCar {
    public void aircon() {
        System.out.println("티코는 찬바람만 나옴");
    }

    public void radio() {
        System.out.println("티코는 라디오가 나옴");
    }

    public void navi() {
        System.out.println("티코는 길찾기 기능을 지원하지 않음");
    }
}
​

 

public interface Highpassable {
    void highpass();
}​

 

public interface HeadupDisplayable {
    void headupDisplay();
}​

 

public interface Camera {
    void record();
    
}​

 

public interface AutoDrivable {
    void  autoDrive();
}​

 

// 인터페이스는 다른 인터페이스를 하나 이상 상속받을 수 있다.
public interface Safeable extends Camera, AutoDrivable {
    void airbag();
}
​

 

public class Genesis extends AbstractCar implements Highpassable, HeadupDisplayable, AutoDrivable {
    public void aircon() {
        System.out.println("제네시스는 설정된 온도로 냉방을 유지함");
    }

    public void radio() {
        System.out.println("제네시스는 자동으로 라디오 주파수 채널을 검색함");

    }

    public void navi() {
        System.out.println("제네시스는 목적지까지 경로를 안내함");
    }

    public void highpass() {
        System.out.println("제네시스는 하이패스를 지원함");
    }

    public void headupDisplay() {
        System.out.println("제네시스는 교통정보를 앞유리창에 표시합니다.");
    }

   public void autoDrive() {
        System.out.println("제네시스는 자율 정보를 표시합니다.");
    }

    public void airbag() {
        System.out.println("제네시스는 에어백을 지원합니다.");
    }
}
​

 

public class CarApp {
    public static void main(String[] args) {

        Tico obj1 =  new Tico();
        obj1.start();
        obj1.stop();
        obj1.navi();
        obj1.aircon();
        
        Car obj2 = new Tico();
        obj2.start();
        obj2.stop();
        obj2.navi();
        obj2.aircon();

        Genesis obj3 = new Genesis();
        obj3.start();
        obj3.stop();
        obj3.navi();
        obj3.aircon();
        obj3.autoDrive();
        obj3.highpass();
        obj3.airbag();
        obj3.radio();
        obj3.headupDisplay();

        Car obj4 = new Genesis();
        obj4.start();
        obj4.stop();
        obj4.navi();
        obj4.aircon();

        AutoDrivable car5 = new Genesis();
        car5.autoDrive();
    }
}
​

 

public interface DataReader {
    void read();
}​

 

public class DatabaseDataReader implements DataReader {
    public void read() {
        System.out.println("데이터베이스에서 필요한 데이터를 읽는다.");
    }
}​

 

public class NetworkDataReader implements DataReader {
    public void read() {
        System.out.println("네트워크 통신을 통해서 필요한 데이터를 읽는다.");
    }
}
​

 

public class HRMgr {
    // DataReader 인터페이스를 구현한 객체가 연결될 잭(그릇)을 선언
    private DataReader reader;

    public void setReader(DataReader reader) {
        this.reader=reader;
        }

        public void load() {
            reader.read();
        }
}​

 

public class HRMgrApp {
    public static void main(String[] args) {
        HRMgr mgr = new HRMgr();
        //DataReader인터페이스를 구현한 NetworkDataReader객체 생성
        NetworkDataReader reader1 = new NetworkDataReader();
        //HRMgr의 reader 잭에 위에서 생성한 NetworkDataReader객체 연결
        mgr.setReader(reader1);

        mgr.load();

        DatabaseDataReader reader2 = new DatabaseDataReader();
        mgr.setReader(reader2);
        mgr.load();
    }
}​

 

public class Category {
    private int no;
    private String name;

    // 기본 생성자
    public Category() {}

    // 필드를 초기화하는 생성자
    public Category(int no, String name) {
        this.no = no;
        this.name = name;
    }

    // Getter/Setter 메소드
    public int getNo() {
        return no;
    }

    public void setNo(int no) {
        this.no = no;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}​

 

public class Product {
    private int no;
    private String name;
    private int price;
    private Category cat;

    // 기본 생성자
    public Product() {}

    // Getter/Setter
    public int getNo() {
        return no;
    }

    public void setNo(int no) {
        this.no = no;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getPrice() {
        return price;
    }

    public void setPrice(int price) {
        this.price = price;
    }

    public Category getCat() {
        return cat;
    }

    public void setCat(Category cat) {
        this.cat = cat;
    }

    public void printDetail() {
        System.out.println("상품     번호 " + no);
        System.out.println("상품     이름 " + name);
        System.out.println("상품     가격 " + price);
        System.out.println("카테고리 번호 " + cat.getNo());
        System.out.println("카테고리 이름 " + cat.getName());
        System.out.println();
    }
}
​

 

public class MallService {
    private Category[] categories = new Category[10];
    private Product[] products = new Product[100];

    private int catPosition = 0;
    private int proPosition = 0;

    public MallService() {
        categories[catPosition++] = new Category(100, "가구");
        categories[catPosition++] = new Category(200, "가전제품");
        categories[catPosition++] = new Category(300, "주방용품");
        
    }
    
    // 새로운 카테고리 등록 기능
    public void addCategory(Category category) {
    //    for (catPosition; catPosition<categories[].length) {
    //    categories[catPosition] = category;
    //    catPosition++
    //    }
            categories[catPosition] = category;
            catPosition++;
    
    }

    public Category getCategory(int categoryNo) {
        Category category = null;
        
        for (Category cat : categories) {
            if (cat != null && cat.getNo() == categoryNo) {
                category = cat;
            }
        }

        return category;
    }

    public void addProduct(Product product) {
        //for (proPosition; proPosition<products[].length) {
        //products[proPosition] = product;
        //proPosition++
        products[proPosition] = product;
        proPosition++;
        }

    public void printAllCategories() {
        for    (Category c : categories) {
            if (c != null) {
            System.out.print("카테고리 번호 : " + c.getNo());
            System.out.print("카테고리 이름 : " + c.getName());

            }
        }
    }

    public void printAllProducts() {
        for    (Product p : products) {
            if (p != null){
                p.printDetail();
            }
        }
    }
    
    public void printProductsByCategory(int categoryNo) {
        for (Product p : products) {
            if (p != null) {
                Category c = p.getCat();
                if (c.getNo() == categoryNo) {
                p.printDetail();
                }
            }
            // 간소화 버전
            // if (p != null && p.getCat().get() == categotyNo) {
            // p.printDatil();
            // }
        }
    }
}​

 

import java.util.Scanner;

public class MallApp {
    public static void main(String[] args) {
    Scanner scanner = new Scanner(System.in);
    MallService mall = new MallService();

        for (;;) {
            System.out.println("1. 카테고리 등록 2. 카테고리 출력 3. 상품등록 4. 상품출력 5. 카테고리별 상품출력 0. 종료");
            System.out.print("메뉴 선택> ");
            int selectNo = scanner.nextInt();

            if (selectNo == 1) {
                // 1. 번호와 이름을 입력받는다.
                // 2. Category객체를 생성한다.
                // 3. Category객체의 setter를 사용해서 값을 저장한다.
                // 4. MallService(위에서 생성한 mall리모콘)의 addCategory메소드에게 Category객체를 전달한다.
                System.out.print("번호입력> ");
                int no = scanner.nextInt();
                System.out.print("이름입력> ");
                String name = scanner.next();
            
                Category cat = new Category();

                cat.setNo(no);
                cat.setName(name);
            
                mall.addCategory(cat);

            } else if (selectNo == 2) {
                //System.out.println("카테고리 출력");
                mall.printAllCategories();

            } else if (selectNo == 3) {
                // 1. 카테고리 번호, 상품 번호, 상품 이름, 가격을 입력받는다.
                // 2. Product객체를 생성한다.
                //    Product객체의 setter를 사용해서 상품번호, 이름, 가격을 저장한다.
                //    MallService(위에서 생성한 mall리모콘)의 getCategory메소드에게 1번에서 입력받은 카테고리 번호를
                //      전달해서 번호에 해당하는 Category를 제공받는다.
                // 3. Product객체를 생성한다.
                // 4. Product객체의 setter를 사용해서 상품번호, 이름, 가격, 2번에서 획득한 Category객체를 저장한다.
                // 5. MallService(위에서 생성한 mall리모콘)의 addProduct메소드에게 Product객체를 전달한다.
                System.out.print("카테고리 번호 입력> ");
                int catNo = scanner.nextInt();
                System.out.print("상품 번호 입력> ");
                int proNo = scanner.nextInt();
                System.out.print("상품 이름 입력> ");
                String proName = scanner.next();
                System.out.print("상품 가격 입력> ");
                int proPrice = scanner.nextInt();

                Category c = mall.getCategory(catNo);

                Product product = new Product();
                product.setNo(proNo);
                product.setName(proName);
                product.setPrice(proPrice);
                product.setCat(c);

                mall.addProduct(product);

            } else if (selectNo == 4) {
                mall.printAllProducts();

            } else if (selectNo == 5) {
                System.out.print("카테고리 번호입력> ");
                int catNo = scanner.nextInt();

                mall.printProductsByCategory(catNo);

            } else if (selectNo == 0) {
                System.out.println("프로그램 종료");
                break;
            }
        }
    
    }
}
​

'자바 > oop5' 카테고리의 다른 글

Student, Printer, DatabaseAccess, Member.java  (0) 2019.06.07

+ Recent posts