'분류 전체보기' 카테고리의 글 목록 (8 Page)

분류 전체보기

코딩 37일 / 2022.08.10 / 부트스트랩2,아파치 톰캣에 배포,자바스크립트 기초,내장함수1

2022. 8. 10. 16:58

복습

부트스트랩 사용 방법

1. 라이브러리를 직접 다운하고 link 태그로 불러오는 방법

- 선택자의 속성값들을 수정이나 변경이 가능한게 장점

2. 원격의 서버에 올라간 것을 주소로 사용

실습 환경

- download 안의 bootstrap 4점대를 가져와서 쓰자

- 공식사이트에서 직접 다운 방식으로 쓰는 것과 같다.

부트스트랩 기타

- 템플릿 및 여러 선택자를 지원한다

- w3schools.com 에서 기능들을 살펴볼 수 있다.
- 전체적인 메인화면 템플릿도 있다

- 부트스트랩은 기본적으로 반응형 웹으로 반들어준다.

+ Javascript

- HTML코드에 포함되어서 사용됨

- 웹 상에서만 사용 가능하다

- 동적인 이벤트 처리를 해준다

부트스트랩 찾아서 쓰기 (w3schools.com)

- 직접 다운한 경우엔 여기의 클래스를 보고 사용하기

- CDN 방식을 사용하는 경우에는 여기의 코드를 그대로 가져오기

+ 부트스트랩으로 버튼 형태 만드는법

  <button type="button" class="btn btn-secondary">가입</button> 
  <input type="button" value="확인" class="btn btn-secondary">
  
  <a href="#" class="btn btn-secondary">글작성</a>
  <div class="btn btn-secondary">로그인</div>

- 부트스트랩을 사용해서 .class 속성을 이용해서 CSS를 적용하고 있다

- 가입 버튼은 <button type="button">, 확인버튼은 <input type="button"> 으로 버튼을 만들고 버튼 모양을 적용함

- 글작성 버튼은 버튼이 아니라 anchor (링크) 이지만 부트스트랩 클래스값이 적용되어 버튼처럼 된다.

- 로그인 버튼은 div 태그이지만 부트스트랩 클래스값이 적용되어 버튼처럼 된다

부트스트랩 자주쓰는 기능

부트스트랩 사용 예제1

1. 버튼

- 테두리가 있는 형태의 버튼으로 출력

- button02.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Outline</h2>
  <button type="button" class="btn btn-outline-primary">Primary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-success">Success</button>
  <button type="button" class="btn btn-outline-info">Info</button>
  <button type="button" class="btn btn-outline-warning">Warning</button>
  <button type="button" class="btn btn-outline-danger">Danger</button>
  <button type="button" class="btn btn-outline-dark">Dark</button>
  <button type="button" class="btn btn-outline-light text-dark">Light</button>
  <br><br><br>
  
  <button type="button" class="btn btn-outline-success">ID중복검사</button>
  <button type="submit" class="btn btn-outline-success">가입</button>
  <button type="reset" class="btn btn-outline-success">취소</button>

</div>

</body>
</html>

- 클래스값만 다르게 하여 원하는 버튼 형태로 출력시킬수 있다.

+ 버튼 관련 w3schools 페이지

부트스트랩 사용 예제2

2. 테이블

- table01.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

- table태그에서 클래스값만 설정해줌

+ 테이블 관련 w3schools 페이지

부트스트랩 사용 예제3

2. 테이블

- table02.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

- 스트라이프가 있는 모양으로 표를 만들어준다.

부트스트랩 사용 예제4

2. 테이블

- table03.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Hover Rows</h2>
  <p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

- hover기능이 있는 표를 만들어준다

- 마우스를 올린 곳의 색이 변함

부트스트랩 사용 예제5

2. 테이블

- table04.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Hoverable Dark Table</h2>
  <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>            
  <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

- table-dark 와 table-hover 두가지 값을 다 쓰고 있다

+ 테이블 관련 w3schools 페이지

부트스트랩 사용 예제6

3. Pagination

- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌

- page01.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pagination</h2>
  <p>To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">이전</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">다음</a></li>
  </ul>
</div>

</body>
</html>

- CDN 방식으로 부트스트랩을 적용하고 있다, CSS파일은 link 태그로, JS파일은 script 태그로 불러오고 있다

- 기본적으로 반응형 웹으로 제공되므로 viewport 가 있다

- <ul> 태그에 class="pagination" 그리고 안의 <li> 태그마다 "page-item" 과, <a> 태그마다 class="page-link"가 적용되어있다.

- class="active" 인 것이 활성화 됨, 즉 1 이 활성화됨

- 코드에서 1 이 class="active" 가 적용되었으므로 1이 active 상태가 되어있다.

+ 페이지 관련 w3schools 페이지

부트스트랩 사용 예제7

3. Pagination

- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌

- page02.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pagination - Disabled State</h2>
  <p>Add class .disabled if a page for some reason is disabled:</p>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>

</body>
</html>

- Previous 버튼의 class="disabled" 가 되어있음, 이전페이지가 없을때 클릭이 되지 않도록 막음

- Previous를 비활성화시킴, 이전페이지가 존재하지 않을때 이전페이지가 클릭되지 않게함

부트스트랩 사용 예제8

3. Pagination

- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌

- page03.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Pagination</h2>
  <p>Use utilitiy classes to change the alignment of the pagination:</p>                  
 
  <!-- 왼쪽 정렬(기본값) -->
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  
  <!-- 가운데 정렬 -->
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  
  <!-- 오른쪽 정렬 -->
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  
</div>

</body>
</html>

- 정렬기능을 가지고 있다, 페이지 처리하는 걸 목록페이지 하단영역에 왼쪽에 정렬할지, 가운데 정렬할지 ,오른쪽에 정렬할지 지정가능

- 기본값은 왼쪽 정렬이므로 왼쪽 정렬을 할때는 class:"pagination" 외에 따로 지정하지 않는다.

- 가운데 정렬을 위해선 class="justify-content-center 를 넣어준다.

+ 페이지 관련 w3schools 페이지

부트스트랩 사용 예제9

3. Dropdowns

- Dropdowns : 클릭시 옵션목록이 나오고 다시 클릭시 옵션목록이 없어짐

- dropdown.html

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="http://www.naver.com">네이버</a>
      <a class="dropdown-item" href="http://www.daum.net">다음</a>
      <a class="dropdown-item" href="http://www.google.com">구글</a>
    </div>
  </div>
  
</div>

</body>
</html>

- CDN 방식으로 원격서버의 라이브러리를 불러오고 있다.

- Dropdown 기능 수행하기 위해서 div class=dropdown 으로 감싸준다.

- 버튼에서 class="dropdown-toggle" data-toggle="dropdown" 를 적용해야한다

- 다음으로 버튼을 누를따 나타나는 옵션메뉴들을 div class="dropdown-menu"로 감싸준다.

- 구체적인 개별 목록들은 class="dropdown-item" 을 적용한다.

- 바꿀수 있는 부분이 있고 바꾸지 못하는 부분들이 있음, 위의 글에서 언급한 것은 바꾸지 못한다.

- 링크가 걸려있으므로 네이버 선택시 네이버로 이동한다.

+ Dropdown 관련 w3schools 페이지

부트스트랩 사용 예제10

4. Collapse

- Collapse : 클릭하면 메뉴가 나타났다가 다시 클릭하면 메뉴가 사라짐, 접혔다 펴졌다 하는 기능

- collapsible.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

</body>
</html>

- 일종의 자바스크립트 기능, 부트스트랩으로 적용 가능하다.

- 함수형태의 Javascript 라이브러리인 jQuery 라이브러리도 포함되어있다. (jquery.slim.min.js)

- 버튼을 만들고 data-toggle="collapse" 와 data-target="#demo" 속성을 추가한다.

- 여기서 #demo 는 펼쳐칠 div 의 id값을 의미한다!

- 그리고 펼쳐졌다 졉혀질 div 상자의 id를 "demo"로 한다.

- demo 말고도 다른 이름 사용가능, button의 data-target="#원하는이름" 으로, div의 id="원하는 이름" 으로 맞춰주면 된다.

부트스트랩 사용 예제11

5. Accordion

- Accordion : 여러개중 한가지만 펼쳐진다, 한가지가 펼쳐지면 나머지는 접힌다.

- Collapse 와 비슷한 기능 수행

- accordion.html

<!DOCTYPE html>
<html>
<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/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
 
  <div id="accordion">
  
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          	자바
        </a>
      </div>      
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>      
    </div>
    
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
       		파이썬
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
         	 오라클
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>
    
</body>
</html>

- 각 목록인 anchor 태그에 href="#collapseOne" 의 #collapseOne은 펼쳐질 div의 id값을 의미한다, 이름값을 맞춰야한다

- 클래스값들은 이미 정해져 있으므로 그대로 써야함

+ jQuery UI 를 사용해서도 이런기능을 만들 수 있다.(jqueryui.com)

- 여러개중 한가지만 펼쳐진다, 한가지가 펼쳐지면 나머지는 접힌다.

+ 부트스트랩의 반응형 웹 지원

- 줄이면 맞춰서 변화한다.

+ 아코디언 메뉴 만드는 방법 여러가지 있다

- jQuery로도 적용 가능

부트스트랩 사용 예제12

6. Forms

- Forms : 폼태그 관련 기능

- ex) 모서리가 라운드 처리된 깔끔한 기능

- forms01.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Stacked form</h2>
  
  <form action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

- 각 <input> 태그를 감싸는 각 <div> 에서 class="form-group"으로 묶어줘야한다.

- <input> 태그안에 class="form-control" 을 넣으면 모서리 라운드 처리를 해준다.

- 2가지를 적용해야한다. "form-group"으로 묶여져야 하고 <input> 태그 안에서 class="form-control"을 해야한다.

+ CSS 적용을 잘 하기 위해 <label> 태그를 쓰고 for="원하는값" 과 아래 <input> 태그의 id="원하는값" 을 맞춰준다.

+ <input type="email"> 로 설정하면 이메일 주소 형식 ( @등) 을 검사해주는 점이 <input type="text">로 만드는 것과 다르다.

- email 주소 입력창이 라운드 처리되어있고

- 반응형 웹으로 만들어져있으므로 크기에 따라 길이가 변화한다.

부트스트랩 사용 예제13

6. Inputs

- Inputs : 입력양식/선택양식에 관련, input, textarea, checkbox, radio, select 등

- ex)

- input01.html

<!DOCTYPE html>
<html lang="en">
<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/4.5.2/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

	<div class="container">
		<h2>Form control: input</h2>
		<p>The form below contains two input elements; one of type text
			and one of type password:</p>
		<form action="action_page.php">

			<div class="form-group">
				<label for="usr">Name:</label> <input type="text"
					class="form-control" id="usr" name="username">
			</div>

			<div class="form-group">
				<label for="pwd">Password:</label> <input type="password"
					class="form-control" id="pwd" name="password">
			</div>

			<div class="form-group">
				<label for="comment">Comment:</label>
				<textarea class="form-control" rows="5" id="comment"></textarea>
			</div>

			<!-- checkbox -->
			취미
			<div class="form-check">
				<label class="form-check-label"> 
				<input type="checkbox" class="form-check-input" value="">게임
				</label>
			</div>
			<div class="form-check">
				<label class="form-check-label"> 
				<input type="checkbox"	class="form-check-input" value="">쇼핑
				</label>
			</div>
			<div class="form-check">
				<label class="form-check-label"> 
				<input type="checkbox" class="form-check-input" value="" disabled>등산
				</label>
			</div>

			<!-- radio button -->
			좋아하는 계절은?
			<div class="form-check">
				<label class="form-check-label"> 
				<input type="radio"	class="form-check-input" name="optradio">봄
				</label>
			</div>
			<div class="form-check">
				<label class="form-check-label"> 
				<input type="radio"	class="form-check-input" name="optradio">여름
				</label>
			</div>
			<div class="form-check disabled">
				<label class="form-check-label"> 
				<input type="radio"	class="form-check-input" name="optradio">가을
				</label>
			</div>
			<div class="form-check disabled">
				<label class="form-check-label"> 
				<input type="radio"	class="form-check-input" name="optradio" disabled>겨울
				</label>
			</div>

			<!-- select list -->
			<div class="form-group">
  				<label for="sel1">Select list:</label>
  				<select class="form-control" id="sel1">
    				<option>1</option>
    				<option>2</option>
    				<option>3</option>
    				<option>4</option>
  				</select>
			</div>
			
			<!-- Form Control File and Range -->
			<input type="range" class="form-control-range">
			<input type="file" class="form-control-file border">

			<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>

</body>
</html>

- CDN 방식으로 불러오고 있다.

1. text와 textarea

- <input type=text> 와 <textarea> 에서는 라운드 형태로 만들고 있다.

- 각 <input type=text> 와 <textarea> 를 감싼 div 태그에서 class="form-group", input 태그 / textarea 태그에서 class="form-control" 적용

2. checkbox와 radio

- 각 체크박스와 라디오버튼은 <div>로 감싸져 있고 거기서 class="form-check" , <input> 태그에서 class="form-check-input" 적용

- 체크박스와 라디오버튼에 같은 클래스가 적용됨

- select 박스에서 전체를 div로 감싸고 클래스값이 class="form-group" 이고 <select> 태그에서 <selec class="form-control"을 적용해준다.

- <input type="range"> 는 움직일 수 있는 바이다, class="form-control-range" 를 적용해준다.

- <input type="file">을 하면 첨부파일 올릴수있는 기능이 만들어지고 class="form-control-file border" 적용시 테두리가 만들어짐

- <input type="submit">을 하면 전송기능이 있는 버튼이 만들어지고 그 버튼에 CSS를 적용해서 파란색으로 만들었다.

+ 체크박스와 라디오버튼은 CSS 적용되어 파란색으로 체크가 표시된다는 점이 다르다

+ select 박스에 CSS가 적용되어 전체화면에 꽉찬 형태로 길게 출력된다 (기존은 안의 내용 길이에 맞게 만들어짐)

+ 등산이라는 체크박스에는 disabled 가 되어있으므로 비활성화(체크불가)

+ input type="range"는 웹표준을 준수하는 브라우저에서 사용 가능하다.

+ Inputs 관련 w3schools 페이지

부트스트랩 사용 예제14

7. Carousel

- Carousel : 자동으로 다음 이미지로 넘어가기도 하고 제어버튼을 통해서 다음 이미지로 넘어갈 수 있다.

Carousel 용어

- Indicators : 이미지 하단의 바

- slideshows : 돌아가는 이미지등, 자동으로 돌아가는 슬라이드쇼

- left and right controls : 이미지 좌우의 화살표 모양

- ex)

- carousel.html

<!DOCTYPE html>
<html lang="en">
<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/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 300;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/Koala.jpg" alt="Los Angeles" width="100%" height="300">
    </div>
    <div class="carousel-item">
      <img src="img/Lighthouse.jpg" alt="Chicago" width="100%" height="300">
    </div>
    <div class="carousel-item">
      <img src="img/Tulips.jpg" alt="New York" width="100%" height="300">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  
</div>

</body>
</html>

- 전체가 바깥쪽 div로 감싸져 있고 id="demo"로 되어있음

- Indicator 부분에서 class="active"로 선택된 li 가 가장 처음에 나타남

- Indicator 부분에서 data-target="#demo" 이다, 즉 바깥쪽 div 태그와 이름을 맞춰야함

- slidshow 부분에서 전체를 <div class="carousel-inner"> 로 하고 그 안의 이미지들은 각 <div>로 감싸져있고 class="carousel-item" 을 적용한다, active인게 처음 나타나는 것

- control 부분에서 왼쪽 화살표와 오른쪽 화살표가 각각 <a>로 감싸져 있고 class="carousel-control-prev" 적용

- left control 에서 span 태그에 class="carousel-control-prev-icon" 가 적용되면 왼쪽 화살표(<) 를 만들어줌

- 끝까지 도달시 로테이션이 됨

- 가만히 둬도 자동으로 넘어감

- 화살표를 눌러서도 넘길 수 있음

+ Carousel 용어 정리

부트스트랩 사용 예제15

8. Modal

- Modal : 모달창은 많은 내용을 띄워주는 팝업창

- ex)

- 버튼 클릭시 모달창을 띄워주고 있다, 안에 많은 내용 넣을 수 있음

- modal.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">모달 헤드</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

- 버튼을 누르면 모달창을 띄우고 싶을때 그 버튼은 data-toggle="modal" data-target="#myModal" 로 되어있다, 이때 이 #myModal 은 모달창의 div id값과 일치해야한다.

- 모달은 모달헤드, 모달바디, 모달푸트 로 3가지 영역으로 나눠져있다. 각 영역의 div에 modal-header 등의 클래스를 적용해줘야한다.

- 모달 헤드 부분에 우측 상단의 X 버튼을 만들기위해 버튼에 class="close"를 적용시 X를 누르면 모달창을 닫아준다.

- 모달 푸트 부분에 Close 버튼을 만들기 위해 data-dismiss="modal" 를 적용한다.

- Close 를 누르거나 바깥쪽을 찍으면 모달창이 닫힌다

부트스트랩 사용 예제16

9. Scrollspy

- Scrollspy : 섹션을 누를때마다 그 내용만 나오게 한다.

ex)

- scrollspy.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Section 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">Link 1</a>
        <a class="dropdown-item" href="#section42">Link 2</a>
      </div>
    </li>
  </ul>
</nav>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>
</html>

- <body> 태그 안에 data-spy="scroll" data-target=".navbar" 와 data-offset = 5 를 적용

- 상단의 바가 네비게이션 바이다, 그걸 선택시 링크를 걸어 관련 내용이 밑에 나타나도록 함, 링크 <a> 의 href= 에는 내용을 보여줄 <div>의 id값과 일치되어야한다. ex) a태그 안 href="#section1" , div 태그 안 id=section1

- 그렇게 id값을 일치시키면 그 링크(네비게이션 메뉴) 를 눌렀을때 그 div 태그안의 내용이 나타난다.

- Section 4는 다시 서브메뉴를 만들어야하므로 dropdown 을 적용함.

- <nav> 태그 안의 내용이 네비게이션 바를 만드는 역할, 여러 클래스값 적용되어있고 , <nav> 태그 안 <ul> 태그와 <li>태그를 를 통해 목록을 작성해준다.

- 클릭시 그 메뉴와 연결된 내용이 바로 아래쪽에 나온다

- Section 4는 분기를 시켜서 보여주고 있음

- 상단바는 고정되어있고 본문만 바뀌고있다.

- 스크롤바를 움직여서도 아래내용을 볼수있다.

부트스트랩 사용 예제17

10. Filters

- Filters : 일종의 검색기능 지원, 안의 데이터를 search

ex) j입력시 j가포함된 데이터를 뽑아온다.

- filter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Filterable Table</h2>
  <p>Type something in the input field to search the table for first names, last names or emails:</p>  
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTable">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>a_r@test.com</td>
      </tr>
    </tbody>
  </table>
  
  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

- 부트스트랩만으로 구현 불가능하고 안에 jQuery 기능이 들어가야 검색기능 지원 가능

- 검색어 입력 양식 input 안에 class="form-control" 을 적용하고 있다

- 테이블에도 부트스트랩을 적용해서 테두리있는 표를 만들어준다.

jQuery 코드 간략 설명

- $ 는 jQuery 함수를 의미한다, $()대신 jQuery() 라고 써도 된다.

- jQuery 함수는 태그를 구해오는 역할을 한다.

- $(document).ready(function(){}); 는 html 문서의 로딩이 끝나 준비가 되면 안의 내용을 실행시켜라는 의미이다.

- $("#myInput") 은 id값이 myInput 인 태그를 구해와라는 의미, 즉 검색어 입력양식을 구해오는 함수이다.

- $("#myInput").on("keyup", function(){}); 은 keyup 이벤트가 발생하면 안의 내용을 실행시켜라는 의미이다.

- $(this).val().toLowerCase() 는 현재 이벤트가 발생한 태그의 값을 소문자로 변환해서 반환한다.

- $("myTable tr").filter(function(){}); 에서 filter() 함수로 필터기능을 수행한다, 검색된 내용을 테이블에 보여주는 기능을 수행함.

+ 값을 입력하고 손을 떼는 순간 keyup이벤트, 값을 입력하려 키보드를 눌렀을때는 keydown 이벤트가 발생한다.

+ 필터 관련 w3school 페이지

부트스트랩 사용 예제18

11.Tab

- 토글 탭

- w3school 에서 CSS 부분 아닌 JS Tab 으로 들어가야함

- jQuery 나 JS로 구현해야한다.

ex)

- tab.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Toggleable Tabs</h2>
  <br>
  
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">회원가입</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">로그인</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu3">게시판</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="container tab-pane fade"><br>
      <h3>Menu 3</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

</body>
</html>

- <nav> 태그 안의 네비게이션 메뉴들은 주로 ul 태그로 만든다

- <li> 태그 안 <a> 태그안에 href="#home" 으로 하면 그 탭을 눌렀을때 보여줄 내용 div 의 id값이 home 이다.

- 즉 <a> 태그의 href= 값과 타깃이 되는 div id값과 맞춰야한다.

- <li> 태그 안 <a> 태그안에 class="active" 인 탭이 가장 먼저 활성화(선택된) 상태로 나타나고, 그 관련 내용이 아래에 나타난다.

- 내용부분은 <div class="tab-content"> 로 전체를 감싸야하고 각각의 내용들은 div 태그 안에서 class="container tab-pane fade" 를 적용한다.

+ Tab은 부트스트랩으로도 만들수 있고 jQuery UI 로도 만들수있다.

부트스트랩 사용 예제19

12. Tamplate

- Template : 전체적인 레이아웃을 잡아줌

1. Bootstrap4 의 Tamplate (많이 없다)

ex) Bootstrap3 의 Template

- 템플릿을 가져와서 필요에 맞게 바꿀 수 있다.

- Simply Me 는 개인용 페이지, Company 는 회사용 페이지, Band는 밴드용 페이지 템플릿 지원

- Webpage Try it Yourself 로 들어가보자

- 이 Webpage 가져와서 만들어볼것, 코드 그대로 가져오자

- webpage.html

<!DOCTYPE html>
<html lang="en">
<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.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

프로젝트 시작 (개요)

위의 내용을 응용을 해서 네비게이션에 나타나는 내용을 바꾸자

1. About, Projects, Contact > 게시판, 회원관리, 로그인 으로 변경

2. 각 네비게이션 메뉴를 누르면 맞는 화면이 center영역에 나타도록하자

- 회원가입 버튼을 누르면 회원가입 폼, 로그인을 누르면 로그인 폼, 게시판 누르면 게시판 폼 이 center영역에 나타나도록 하자.

- 공통적으로 들어가는 내용(네비게이션, 푸터) 부분을 고정하고, 본문내용만 바꾸자

- 그것을 위해서 header와 footer를 파일로 만들어서 따로 빼고 jsp의 include 를 통해 넣는 분리작업을 해야한다.

- 상단의 네비게이션 메뉴까지를 따로 파일로 만들자 -> header.jsp

- 하단의 footer 부분을 따로 파일로 만들자 -> footer.jsp

3. header 부분과 footer 부분을 분리

- 헤더부분

- 푸터부분

프로젝트

1. 새로운 프로젝트 myhome 프로젝트를 만들자

- File-New-Dynamic Web Project

2. myhome/WebConent 하위에 index.jsp 라는 파일 생성

- index.html 에는 webpage.html 의 내용을 모두 복붙한다. (맨 위 2줄 jsp부분 제외)

3. index.jsp 내용 수정

- 회원가입, 로그인, 게시판에 링크 연결

- a href= 에 # 대신 index.jsp 와 memberform.jsp, loginform.jsp, boardform.jsp 로 연결한다.

4. myhome/Webcontent 에 header.jsp 와 footer.jsp 파일 생성 후 작성

- index.jsp 파일의 header 부분을 잘라서 header.jsp 파일에 복붙

- 기존의 내용은 주석으로 막기

- header와 footer 모듈을 만드는 과정이다.

<!DOCTYPE html>
<html lang="en">
<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.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.jsp">Home</a></li>
        <li><a href="memberform.jsp">회원가입</a></li>
        <li><a href="loginform.jsp">로그인</a></li>
        <li><a href="boardform.jsp">게시판</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

- index.jsp 에서 이 부분을 복사를 하고 , index.jsp 파일 에서는 이 부분을 주석을 막음

- 이 부분을 header.jsp 의 1,2라인을 제외한 곳에 붙여넣기 한다

- header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<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.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.jsp">Home</a></li>
        <li><a href="memberform.jsp">회원가입</a></li>
        <li><a href="loginform.jsp">로그인</a></li>
        <li><a href="boardform.jsp">게시판</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

5. header.jsp 파일을 index.jsp에서 불러오기

- 마치 그 자리에 있는것처럼 포함됨

<!-- header.jsp 파일 불러오기 -->
<%@ include file="header.jsp" %>

- index.jsp 파일에 이 include 코드를 넣으면 마치 이 자리에 header.jsp의 내용이 있는것 처럼 작동함

- 똑같이 동작함

6. footer도 마찬가지로 따로 뽑아서 footer.jsp 파일로 생성

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

- 이 부분을 index.jsp 에서 복사하고 index.jsp 파일에서 이 부분 주석처리

- 이 부분을 footer.jsp에 1,2 라인을 제외한 곳에 복사하기

- footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

7. footer.jsp 파일을 index.jsp에서 불러오기

<!-- footer.jsp 파일 불러오기 -->
<%@ include file="footer.jsp" %>

- index.jsp 파일에 이 include 코드를 넣으면 마치 이 자리에 footer.jsp의 내용이 있는것 처럼 작동함

+ 같은 디렉토리 내에 파일이 있으므로 이름만으로 불러올 수 있다.

- 똑같이 동작함

index.jsp 현재 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- <!DOCTYPE html>
<html lang="en">
<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.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.jsp">Home</a></li>
        <li><a href="memberform.jsp">회원가입</a></li>
        <li><a href="loginform.jsp">로그인</a></li>
        <li><a href="boardform.jsp">게시판</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav> -->
  
<!-- header.jsp 파일 불러오기 -->
<%@ include file="header.jsp" %>

<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<!-- footer.jsp 파일 불러오기 -->
<%@ include file="footer.jsp" %>

<!-- <footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html> -->

8. center에 보여줄 내용인 파일들을 만들기

- 예전에 만들었던 회원가입, 로그인, 게시판 html 폼에서 복붙을 해서 memberform.jsp, loginform.jsp, boardform.jsp 파일 생성

- jsp 태그를 쓰기 위해선 jsp파일을 써야하므로 복붙해서 jsp파일로 만드는 것

- 파일 생성 완료

9. memberform.jsp 파일에는 예전에 만들었던 memberform.html 파일 내용을 복사해서 1,2라인을 제외한 곳에 붙여넣기

+ 1,2 라인은 인코딩 관련 내용이므로 빠지면 안된다.

- 현재 memberform.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
</head>
<body>

<form method="post" action="member.jsp">
<table border=1 width=600 align=center>
	<caption>회원 가입폼</caption>
	<tr>
		<th>ID</th>
		<td><input type=text name="id" id="id" autofocus="autofocus">
			<input type="button" value="ID중복검사">
		</td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td><input type=password name="passwd" id="passwd">
		</td>
	</tr>
	<tr>
		<th>성명</th>
		<td><input type=text name="name" id="name">
		</td>
	</tr>
	<tr>
		<th>주민번호</th>
		<td><input type=text size=6 maxlength=6 name="jumin1" id="jumin1">-
			<input type=text size=7 maxlength=7 name="jumin2" id="jumin2">
		</td>
	</tr>
	<tr>
		<th>E-Mail</th>
		<td><input type=text size=10 name="mailid" id="mailid">@
			<input type=text size=15 name="domain" id="domain">
			<select>
				<option value="">직접입력</option>
				<option value="naver.com">네이버</option>
				<option value="daum.net">다음</option>
				<option value="nate.com">네이트</option>
				<option value="gmail.com">구글</option>
			</select>
		</td>
	</tr>
	<tr>
		<th>전화번호</th>
		<td>
			<input type=text size=4 maxlength=4 name="tel1" id="tel1">-
			<input type=text size=4 maxlength=4 name="tel2" id="tel2">-
			<input type=text size=4 maxlength=4 name="tel3" id="tel3">
		</td>
	</tr>
	<tr>
		<th>핸드폰</th>
		<td><select name="phone1" id="phone1">
				<option value="">번호선택</option>
				<option value="010">010</option>
				<option value="011">011</option>
				<option value="016">016</option>
				<option value="018">018</option>
				<option value="019">019</option>
			</select>-
			<input type=text size=4 maxlength=4 name="phone2" id="phone2">-
			<input type=text size=4 maxlength=4 name="phone3" id="phone3">
		</td>
	</tr>
	<tr>
		<th>우편번호</th>
		<td><input type=text size=5 maxlenth=5 name="post" id="post">
			<input type="button" value="우편검색">
		</td>
	</tr>
	<tr>
		<th>주소</th>
		<td><input type=text size=70 name="address" id="address">
		</td>
	</tr>
	<tr>
		<th>성별</th>
		<td><input type="radio" name="gender" value="남자">남자
			<input type="radio" name="gender" value="여자">여자
		</td>
	</tr>
	<tr>
		<th>취미</th>
		<td><input type="checkbox" name="hobby" value="공부" checked="checked">공부
			<input type="checkbox" name="hobby" value="등산">등산
			<input type="checkbox" name="hobby" value="게임">게임
			<input type="checkbox" name="hobby" value="낚시">낚시
			<input type="checkbox" name="hobby" value="쇼핑">쇼핑
		</td>
	</tr>
	<tr>
		<th>자기소개</th>
		<td><textarea rows="5" cols="70"
				name="intro" id="intro"
				placeholder="자기소개를 100자 이내로 입력하세요"></textarea>
		</td>
	</tr>
	<tr>
		<td colspan=2 align=center>
			<input type="submit" value="회원가입">
			<input type="reset" value="취소">
			
			<!-- 이미지 버튼 : 전송 기능 있음 -->
			<input type="image" src="img/clock.jpg" width=30>
		</td>
	</tr>
</table>
</form>

</body>
</html>

10. loginform.jsp 파일에는 예전에 만들었던 loginform.html 파일 내용을 복사해서 1,2라인을 제외한 곳에 붙여넣기

- 현재 loginform.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
</head>
<body>

<!-- 
method : 값을 전달하는 방식을 설정 : get, post
action : 값이 전달될 파일을 설정
-->

<form method="get" action="login.jsp">
<table border=1 width=350 align=center>
	<caption>로그인</caption>
	<tr>
		<td>ID</td>
		<td><input type=text size=20
							 maxlength=10
							 autofocus="autofocus"
							 required="required"
							 name="id"
							 id="id">
		</td>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input type=password size=20
								 required="required"
								 name="passwd"
								 id="passwd"></td>
	</tr>
	<tr>
		<td colspan=2 align=center>
			<input type=submit value="로그인"><!-- 전송기능이 있는 버튼 -->
			<input type=reset value="취소"><!-- 초기화 버튼 -->
		</td>
	</tr>
</table>
</form>

</body>
</html>

11. boardform.jsp 파일에는 예전에 만들었던 boardform.html 파일 내용을 복사해서 1,2라인을 제외한 곳에 붙여넣기

- 현재 boardform.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
</head>
<body>

<form method="post" action="board.jsp">
<table border=1 width=500 align=center>
	<caption>게시판</caption>
	<tr>
		<th>작성자</th>
		<td><input type=text size=20 name="writer"
									 id="writer"
									 placeholder="작성자명 입력"
									 value="lay">
		</td>
	</tr>
	<tr>
		<th>비밀번호</th>
		<td><input type=password size=20 name="passwd"
									     id="passwd"
									     placeholder="2~8자 이내 입력">
		</td>
	</tr>
	<tr>
		<th>제목</th>
		<td><input type=text size=50 name="subject"
									 id="subject"
									 placeholder="50자 이내로 입력">
		</td>
	</tr>
	<tr>
		<th>내용</th>
		<td><textarea rows="5" cols="50" name="content"
				id="content" placeholder="200자 이내로 입력">내용입력</textarea>
		</td>
	</tr>
	<tr>
		<th>파일첨부</th>
		<td><input type=file name="myfile" id="myfile">
		</td>
	</tr>
	<tr>
		<td colspan=2 align=center>
			<input type="submit" value="글작성1"><!-- 전송기능 있는 버튼 -->
			<input type="button" value="글작성2"><!-- 전송기능 없는 버튼 -->
			
			<button>글작성3</button><!-- 전송기능 있는 버튼 -->
			<button type="submit">글작성4</button><!-- 전송기능 있는 버튼 -->
			<button type="button">글작성5</button><!-- 전송기능 없는 버튼 -->
			
			<input type="reset" value="취소"><!-- 초기화 버튼 -->
			<button type="reset">초기화</button><!-- 초기화 버튼 -->
		</td>
	</tr>
</table>
</form>

</body>
</html>

12. index.jsp 실행하기

- 회원가입 메뉴를 누르면

- 로그인 메뉴를 누르면

- 폼은 출력되지만 header 와 footer 부분이 안나온다

- 각 jsp 파일에 header, footer 부분을 include해서 불러온다.

13. memberform.jsp 파일에서 header.jsp 와 footer.jsp 파일 불러오기

<!-- header.jsp 파일 불러오기 -->
<%@ include file="header.jsp" %>

- memberform.jsp 위쪽 부분에 include 함

<!-- footer.jsp 파일 불러오기 -->
<%@ include file="footer.jsp" %>

- memberform.jsp 아래쪽 부분에 include 함

- index.jsp 파일을 실행하고 회원가입 메뉴를 누르면 헤더와 푸터 부분이 나오고 센터에 회원가입 폼이 나온다

- 회원가입 메뉴를 누르면 뜨는 창

13. loginform.jsp 파일과 boardform.jsp 파일에서도 header.jsp 와 footer.jsp 파일 불러오기

- 로그인 메뉴를 누르면 뜨는 창

- 게시판 메뉴를 누르면 뜨는 창

+ Home 메뉴를 누르면 index.jsp 가 실행됨

13. myhome 프로젝트를 Export 해보자

- Dynamic Web Project는 Export 기능이 있다.

- Export시 .war 파일로 압축되어 1개의 파일이 된다.

- 이걸로 프로젝트를 집에 가져가거나 다른 시스템으로 export 가능

- 현재 프로젝트명.war 로 프로젝트가 압축됨 (알집, 반디집등으로 압축해제 가능)

+ web 프로젝트부터 .war로 압축해보자 (export)

- 어디에 저장할건지 저장위치 설정

- 소스파일도 export 하고 동일파일이 있으면 overwrite하도록 체크했다

- web.war 가 생성되었다

+ 배포할때도 이런방식으로 배포한다.

+ web.war를 import 해보자 (불러오자)

- 집으로 와서 이 파일을 import

- 이렇게 import 가능하다

- 또는 File-Import... 에서

- 이렇게 들어가도 된다.

+ 이미 web 프로젝트가 있으므로 import할때는 다른이름으로 import하자 (동일 이름 프로젝트 만들지 않기위해)

- web과 똑같은 내용의 web1이 생긴다.

- 삭제할땐 delete를 누르고 반드시 체크를 해야 깔끔하게 지워진다.

14. Export 한 myhome 프로젝트를 아파치 톰캣에 배포

- 이제 myhome 프로젝트를 .war로 압축해서 export하고 아파치 톰캣에 배포해보자.

- 저장 위치는 바탕화면으로 설정했다.

- 확장자는 .war란 압축파일

- 배포하기 위해 이 .war를 압축해제하자 (반디집 사용)

- 이 파일들을 아파치 톰캣의 홈디렉토리인 ROOT 디렉토리에 넣으면 서비스 할 수 있다.

- 이클립스 종료 시키고(개발환경 끝) 아파치 톰캣을 구동시키자

- 서비스를 하기 위해 아파치 톰캣 서버를 구동

- 개발을 위해 중지했던 아파치 톰캣 서버를 시작하자.

- 웹 브라우저를 켜서 아파티 톰캣 서버 테스트 localhost

- 아파치 톰캣 설치시에 80 포트로 했으므로 클라이언트 요청시 80 포트 생략 가능 (conf/server.xml 에서 볼 수 있다)

- 고양이 페이지는 ROOT 홈디렉토리의 index.jsp 가 실행되고 있는 것이다

- 아파치 톰캣이 설치된 C:\Program Files\Apache Software Foundation\Tomcat 9.0

- C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT 가 홈 디렉토리이다.

- ROOT 안 기존 내용을 지우고 우리가 만들었던 myhome.war 압축 푼 내용을 ROOT 안에 복붙하자.

- 그러면 우리가 만든 컨텐츠를 서비스 할 수 있다.

- 이제 localhost를 주소창에 치면 우리가 만든 컨텐츠가 나온다.

- 배포 완료!

- 나중에 아마존에서 배포할떄도 같은 방식을 사용한다.

+ 배포 추가

- 현재는 사설 ip이므로 다른 컴에서 접근 불가능하다

- 항상 켜져있는 서버와 공인 ip가 필요하다

- 웹호스팅 신청이나 aws 를 이용해야함

+ 개발과 프로젝트

- 개발시에는 프로젝트 myhome이 필요했지만

- 배포시에는 안의 내용들을 복붙해서 옮겼다

- 즉 프로젝트는 개발시에 필요한 것이다.

+ 다음 Javascript 수업을 위해 개발환경으로 돌아가야 하므로 아파치 톰캣 중지

+ 개인 프로젝트시에 아이콘이 필요하면 Bootstrap3 Glyphicons에서 사용 가능.

Javascript

- 자바는 다용도로 활용되지만 Javascript는 HTML에 추가되어 웹상에서만 사용 가능하다.

- 역할 : 유효성 검사, 여러 동적인 이벤트를 처리, 팝업창 등

- Javascript 라이브러리 프레임워크 : jQuery, React, Vue 등

- jQuery 는 Javascript 라이브러리 함수형태로 지원

- 자주쓰는 기능과 폼 관련

실습 준비

1. web/WebContent 폴더 하위에 javascript 폴더를 생성하고 그 javascript 폴더 하위에 work 폴더 생성

2. first.html 파일 생성

- javascript도 html 코드 안에 추가해서 사용한다.

3. script 태그를 써서 알려줘야한다.

- html 파일 내에서 javascript를 쓰려면 javascript라는 것을 브라우저에게 알려줘야한다

- script 태그는 head 태그안에 써도 되고 body 태그 안에 써도 된다

- 다만, 함수를 만들때는 script 태그는 가능한한 head 태그안에 쓰자

+ javascript는 인터프리트 언어 이므로 함수 위치가 중요, body 태그에서 함수를 호출해야하므로 script 태그는 head 태그안에 넣기

+ javascript : 객체 기반 언어 (완전한 객체 지향 언어가 아니다) / java : 객체 지향 언어

- 내장 객체 중 document 객체를 불러와야함, 그냥 자바라고 쓰면 실행시 아무것도 안뜬다

- javascript에서 처음 지원하는 내장 객체가 document고 그 함수 중 write를 쓰면 출력해준다.

- 문서와 관련된 내장객체인 document 를 이용해야만 출력이 가능하다

4. 자바스크립트 문법 특성

- javascript는 문법이 느슨하다.

- ; 를 쓰지 않아도 실행됨

- javascript에서는 문자 출력시 " "(쌍따옴표) 를 써도 되고 ' ' (외따옴표) 를 써도 된다.( 자바는 쌍따옴표만 가능)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script>
	document.write('처음 작성하는 자바스크립트1');
	document.write("처음 작성하는 자바스크립트2");
</script>

</body>
</html>

- 줄이 바뀌지 않는다

- writeln 을 사용해도 줄이 바뀌지 않는다.

- br 태그나 p 태그를 써야 줄바꿈 가능하다

- br 태그를 그냥 쓰면 오류 발생

- 쌍따옴표나 외따옴표 안에 무엇이든 써야한다.

- <br> 이나 <p>를 쌍따옴표나 외따옴표 안에 써야한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script>
	document.write('처음 작성하는 자바스크립트1<br>'); 
	document.write("처음 작성하는 자바스크립트2"+"<br>");
	document.write("처음 작성하는 자바스크립트3"+'<br>');
</script>

</body>
</html>

+ head 태그안에 <script> 내용을 넣어도 똑같다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	document.write('처음 작성하는 자바스크립트1<br>'); 
	document.write("처음 작성하는 자바스크립트2"+"<br>");
	document.write("처음 작성하는 자바스크립트3"+'<br>');
</script>
</head>
<body>

</body>
</html>

+ javascript 에러 확인 : F12 개발자 도구

자바 스크립트 선언 방식

1. <script> </script>

2. <script> 를 작성할때 <script type="text/javascript>

<script type="text/javascript">
	document.write('처음 작성하는 자바스크립트1<br>'); 
</script>

<script language="javascript">
document.write('처음 작성하는 자바스크립트5<br>'); 
</script>

2. 콘솔창에서 출력할때는 colsole.log() 로 출력

- 브라우저가 아닌 콘솔창에 출력

<script language="javascript">
	document.write('처음 작성하는 자바스크립트5<br>');
	console.log('콘솔에 출력됨');
</script>

- 브라우저에는 console.log() 안의 내용이 출력되지 않는다.

- F12 개발자 도구에서 Console 을 누르면 확인 가능하다.

자바스크립트 주석

- 자바와 동일하다

1. 단일행 주석 : //
2. 다중행 주석 : /* ~ */
+ 주석 단축키 : Ctrl + Shift + /

- first.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 자바스크립트 주석
	1. 단일행 주석 : //
	2. 다중행 주석 : /* ~ */
	주석 단축키 : Ctrl + Shift + /
-->

<script>
	document.write('처음 작성하는 자바스크립트1<br>'); 
	document.write("처음 작성하는 자바스크립트2"+"<br>");
	document.write("처음 작성하는 자바스크립트3"+'<br>');
</script>

<script type="text/javascript">
	document.write('처음 작성하는 자바스크립트4<br>'); 
</script>

<script language="javascript">
 	document.write('처음 작성하는 자바스크립트5<br>');
	console.log('콘솔에 출력됨');
</script>

</body>
</html>

출력하는 방법

1. 브라우저로 출력할때는 document.write() 로 출력한다. (위에서 했음)

2. 콘솔창에서 출력할때는 colsole.log() 로 출력한다 (위에서 했음)

3. alert() 으로 메세지 박스로 메세지를 출력한다.

- 유효성 검사할때 메세지 출력이 필요하면 주로 alert()으로 출력을 한다.

3. alert() 으로 메세지를 출력

- WebContent/javascript/work 안에 alert.html 파일 생성

- alert.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script>
	document.write("출력성공1<br>");	// 브라우저에 출력
	document.write("출력성공2<br>");
	console.log("콘솔창에 출력");	// 콘솔창에 출력 : 단축키(F12)
</script>

<script>
	alert("경고창 출력")	// 메세지 박스
	alert("이름을 입력하세요.")
</script>

</body>
</html>

- 현재는 경고창에 '확인'만 나온다

- alert이 우선순위가 높으므로 가장 먼저 출력

- 브라우저 최상위 객체인 window 에서 alert() 를 지원

자바스크립트 구조1

- 자바스크립트는 내장객체가 지원되는 언어이다.

- 내장 객체는 이미 자바스크립트 설계시부터 있어서 그냥 쓸 수있는 객체이다.

- window 객체는 브라우저 관련 최상위 객체

- window 객체를 상속받는 하위 객체는 document 객체(문서관련 최상위 객체), location 객체, history 객체, screen 객체, navigator 객체가 있다.

- document 객체를 상속받는 form 객체와 image 객체가 있다

- form 객체 하위 객체들은 button, submit, reset, radio 등...

자바스크립트 구조2

- 객체 사용시엔 최상위 객체부터 . 으로 연결해서 써야한다

- window 객체는 이떄 생략 가능 (window 객체 함수는 주로 팝업창 띄우기, 닫기 등)

ex) 원칙적으로는 window.document.write() 로 써야하지만 window 는 생략 가능

- 객체들은 모두 소문자이고 대소문자 구분한다.

- alert()은 window 객체에서 지원되는 메소드명 window.alert() 이지만 window 생략 가능

+ Javascript는 내장객체 api 문서가 없다, 정리된 자료를 찾아야함.

<script>
	window.alert("경고창 출력")	// 메세지 박스
	alert("이름을 입력하세요.")
</script>

객체의 구조

- 객체에는 특성들이 있다 (= 자바의 필드)

- 객체에는 메소드들이 있다

ex) window 객체의 alert() -> window.alert() 처럼 객체명.메소드명() 으로 쓴다.

ex) window 객체의 confirm() 에서는 확인을 받기 위한 대화상자를 출력해준다.

ex) window 객체의 open() : 윈도우 열어줌 / close() : 윈도우 닫아줌

'국비지원 과정 > 웹표준' 카테고리의 다른 글

코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0)	2022.08.19
코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0)	2022.08.12
코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0)	2022.08.11
코딩 36일 / 2022.08.09 / CSS 속성2,레이아웃,배치,반응형 웹,부트스트랩1 (0)	2022.08.09
코딩 35일 / 2022.08.08 / CSS 선택자,단위,속성1 (0)	2022.08.08

코딩 36일 / 2022.08.09 / CSS 속성2,레이아웃,배치,반응형 웹,부트스트랩1

2022. 8. 9. 17:29

CSS배경 속성

- 배경 이미지 불러오기 등 배경 이미지와 관련된 속성들

- background-image : 배경 이미지 불러옴

- background-size : 배경 이미지 크기

- background-repeat : 배경 이미지 반복형태

- background-attachment : 배경 이미지를 화면에 부착시킬건지

- background : 이런것들을 한꺼번에 적용

배경 불러오기 속성

- background-image 속성으로 배경 이미지 불러옴

- 값으로 url 적기

배경 불러오기 예제

- background_image.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png');
        }
    </style>
</head>
<body>

</body>
</html>

- CSS로 <body> 태그에 대해 배경 이미지를 불러오고 있다

- CSS를 쓰지 않고 HTML 만으로 쓰려면 <body> 태그 안에 background 속성을 쓴다

- 같은 폴더 안에 BackgroundFront.png 가 있으므로 이름만으로 이미지를 불러올 수 있다.

- repeat 가 기본속성이어서, 이미지 크기가 작은 경우엔 반복된다

두 장의 배경 이미지 불러오기

- background-image의 값에서 url 을 , 으로 연결해줌

두 장의 배경 이미지 불러오기 예제

- background_imageLayer.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
        	/* 각각의 그림을 레이어라고 부릅니다. */
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
        }
    </style>
</head>
<body>

</body>
</html>

배경 이미지 너비와 높이 조절 속성

- background-size 속성 으로 조절

- background-size 설정 안하면 기본 크기로 나타남

- background-size의 값이 1개일때는, 가로(너비) 만 설정하는 것

- background-size의 값이 2개일때는, 너비, 높이 순서대로이다.

배경 이미지 너비와 높이 조절 예제

1. 너비(가로) 설정

- background_size.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%; /* 배경 이미지의 너비(가로) */
        }
    </style>
</head>
<body>

</body>
</html>

- background-size : 100%는 가로로 브라우저에 꽉 찬 상태를 의미한다.

- background-size : 80%로 설정시 가로 80%만큼 채우고 남은 부분은 반복시킴

- 즉, background-size 속성 은 한개의 값만 설정시 배경이미지의 가로(너비) 만 설정하는 것임

1. 높이(세로) 설정

- 1개의 값을 더 부여하면 높이가 됨

- background_sizeEach.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            /* 배경 이미지의 너비(가로) 높이(세로) */
            background-size: 100% 250px;
        }
    </style>
</head>
<body>

</body>
</html>

- 이렇게 background-size의 값이 2개가 왔을때는 각각 너비, 높이 가 된다

- 값은 % 비율로 설정할 수도 있고 절대값으로 설정할 수도 있다

- 이미지 높이가 작아서 같은 이미지가 여러번 반복됨

배경 이미지 반복 유무 속성

- 크기가 맞지 않을때 배경 이미지가 반복된다.

- 반복여부와 반복 방식을 background-repeat 속성으로 제어

1. 반복을 하지 않을때

- background-repeat : no-repeat;

2. 반복을 할 때

- background-repeat : repeat;

- 기본값은 repeat이므로 background-repeat을 설정하지 않으면 반복된다.

+ 반복 방향 설정

- x방향으로 반복할건지 y방향으로 반복할건지 설정 가능

- repeat-x : x축 방향으로만 이미지 반복

- repeat-y : y축 방향으로만 이미지 반복

배경 이미지 반복 유무 속성 예제1

- 1. 반복을 하지 않을때

- background_repeatNone.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;  
        }
    </style>
</head>
<body>

</body>
</html>

- background-repeat : no-repeat; 이므로 반복하지 않는다.

- 반복 없이 1번만 출력하고 있다

배경 이미지 반복 유무 속성 예제2

2. 반복을 할 때

- y축 방향으로만 반복하기 예제 (이전 코드 수정)

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: repeat-y;  
        }
    </style>
</head>
<body>

</body>
</html>

- y축(세로) 방향으로만 반복하고 있다

- 가로 너비 100%이므로 가로는 꽉 채워서 나오는 것

스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성

- background-attachment 속성 으로 제어

- 내용이 많이 들어있을때 스크롤링을 하게되는데, 이때 배경 이미지를 같이 움직일건지, 고정하고 내용만 움직일건지 설정

- 속성값 : scroll, fixed

스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성 예제1

1. 배경이미지를 같이 스크롤링

- background_attachmentScroll.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: scroll;  /* 배경 이미지 스크롤링 */
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>

- 스크롤링시 배경이미지도 같이 스크롤링 된다 (움직인다)

- 스크롤을 아래로 내리면 배경이미지(산 그림) 이 없어진 것을 보고 움직였음을 알 수 있다.

스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성 예제2

2. 배경이미지를 고정

- background_attachmentFixed.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: fixed; /* 배경 이미지 고정 */
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>

- 배경이미지 고정하려면 background-attachment : fixed; 속성값을 준다.

- 스크롤링 해도 배경 이미지는 고정되어있다

- 아래로 스크롤링해도 산 모양이 계속 나옴을 통해 배경 이미지는 움직이지 않음을 알 수 있음.

배경 이미지 위치 설정 속성

- backgrount-position 속성으로 설정함

- 한쪽방향으로만 위치를 설정할 수도 있고, x축, y축에서 떨어진 간격을 통해 위치를 설정할 수도 있다.

- 위쪽에 배치시 top, 아래쪽에 배치시 bottom, 왼쪽에 배치시 left, 오른쪽에 배치시 right

- 반복이 안되도록 no-repeat 이어야만 위치 설정 가능함, 반복이 되면 위치 제어 불가

배경 이미지 위치 설정 속성 예제1

1. 한쪽방향으로만 위치를 설정

- background-positionBottom.html

- 배경 이미지를 브라우저 하단에 배치하는 예제

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: bottom;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>

- 배경 이미지(산 그림)가 하단 영역에 나타난다

배경 이미지 위치 설정 속성 예제2

2. 한쪽방향으로만 위치를 설정

- 방금은 한쪽 방향(y축방향)으로만 위치를 설정했지만 정교한 위치 설정을 하려면 x축, y 축 다 설정 가능

- x축 떨어진 간격, y축 떨어진 간격을 통해 위치를 설정 가능

- background_positionEach.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        body {
            font-family:
            background-color: #E7E7E8;
            background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 0px 50%;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
    <p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
    <p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
    <p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>

- 0px은 x축에서 떨어진 간격, 50%는 y축에서 떨어진 간격을 의미

왜?

글자에 대한 속성

글자 크기 속성

- font-size 속성으로 글자 크기를 설정

- 속성값을 여러 단위로 설정 가능

글자 크기 속성 예제

- font_size.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</title>
    <style>
        .a { font-size: 32px; }
        .b { font-size: 2em; }
        .c { font-size: large; }
        .d { font-size: small; }
    </style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p class="a">Lorem ipsum</p>
    <p class="b">Lorem ipsum</p>
    <p class="c">Lorem ipsum</p>
    <p class="d">Lorem ipsum</p> 
</body>
</html>

- px, em 등의 단위를 사용하고 있다

- large, small 등으로도 가능하다.

- 주로 px이나 %를 많이 쓴다

+ . 선택자이므로 class 속성으로 불러온다.

글꼴 설정 속성

- font-family 속성으로 글꼴을 설정 가능

글꼴 설정 속성 예제

- font_family.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</title>
    <style>
        .font_arial { font-family: Arial; }
        .font_roman { font-family: 'Times New Roman'; }
    </style>
</head>
<body>
    <h1 class="font_arial">Lorem ipsum</h1>
    <p class="font_roman">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>

글자 스타일 설정 속성

- font-style 속성으로 글자 스타일 설정

- 속성값 : italic 등 (기울임)

- font-weight 속성으로 글자 굵기 설정

- 속성값 : bold 등 (굵은 글자)

글자 스타일 설정 속성 예제

- font_styleWeight.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</title>
    <style>
        .font_big { font-size: 2em; }
        .font_italic { font-style: italic; }
        .font_bold { font-weight: bold; }
    </style>
</head>
<body>
    <p class="font_big font_italic font_bold">Lorem ipsum dolor amet</p>
</body>
</html>

- class 속성으로 불러와서 font-size, font-style, font-weight 를 모두 적용하고 있다

- 2em, italic, bold -> 2em (영문 대문자 M의 2배) 크기로 기울임체로 굵게 출력하라

글자 정렬 속성

- text-align 속성으로 가운데, 왼쪽, 오른쪽 정렬이 가능하다

- 속성값 : center, left, right

- 기본값은 left 이다

글자 정렬 속성 예제

- font_textAlign.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Font Property</title>
    <style>
        .font_big { font-size: 2em; }
        .font_italic { font-style: italic; }
        .font_bold { font-weight: bold; }
        .font_center { text-align: center; }
        .font_right { text-align: right; }
    </style>
</head>
<body>
    <p class="font_big font_italic font_bold font_center">Lorem ipsum dolor amet</p>
    <p class="font_bold font_right">2019.07.10</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>

- 제목은 text_align : center; 로 설정했기 때문에 가운데 배치되어있다

- 날짜는 text_algin : right; 로 설정했기 때문에 오른쪽에 배치되어있다.

링크의 밑줄 제어 속성

- text-decoration 속성으로 제어

- text-decoration : none; 으로 하면 밑줄이 사라짐

- 어제 정리 했다.

div의 위치 설정 속성

- position 속성 으로 div를 위치를 설정한다.

- div가 여러개만들어졌을때 배치하기위해 반드시 position 속성 사용

- 속성값

- absolute : 절대적인 좌표 위치 설정

- relative : 상대적인 위치 설정

div의 위치 설정 속성 예제1

- div 를 absoulte 로 위치 설정

- 아직 위치는 설정하지 않음

- position_absoulute.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box { 
            width: 100px; height: 100px; 
            position: absolute;
        }
        .box:nth-child(1) { background-color: red; }
        .box:nth-child(2) { background-color: green; }
        .box:nth-child(3) { background-color: blue; }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

- box위치 position을 absoulte 로 설정하면 브라우저 좌측 상단 기준으로 절대적인 위치 제어가 가능하다

- 3개의 div 박스는 좌표값이 설정되지 않았고 같은 좌표를 가지게 됨

- .box:nth-child(1) 은 .box 중에서 첫번째 자식 을 의미한다, 배경색 red 적용

- .box:nth-child(2) 은 .box 중에서 두번째 자식 을 의미한다, 배경색 green 적용

- .box:nth-child(3) 은 .box 중에서 세번째 자식 을 의미한다, 배경색 blue 적용

- 3개의 박스 모두 좌표값을 설정하지 않아 동일하므로 마지막의 박스(세번째 자식 div)가 덮어버려서 1개의 박스만 있는것처럼 보인다.

div의 위치 설정 속성 예제2

- absolute 에서 3개의 박스마다 좌표값을 다르게 설정해줘서 3개의 박스가 모두 출력되도록 함

- left와 top으로 위치 제어, 왼쪽에서 떨어진간격과 위에서 떨어진 간격을 제어

- position_absoluteLeftTop.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box { 
            width: 100px; height: 100px;
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px; top: 10px;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px; top: 50px;
        }
        .box:nth-child(3) {
            background-color: blue;
            left: 90px; top: 90px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

- .box 에는 모든 박스 공통적으로 적용할 내용이 들어감

- absoulte 하면 좌표는 좌측 상단을 기준으로 함

- 위치가 잘 설정되어 출력하고 있다.

겹치는 경우 위 아래 출력

- 따로 순서를 지정하지 않았을때는 위 처럼 박스가 불려진 순서대로 출력을 한다

- 즉, 가장 마지막에 출력된 파란색 div 박스가 가장 위에 출력됨

겹치는 경우, 위 아래 출력 제어 속성 (z 축 관련 설정)

- z-index 속성으로 좌표값이 겹쳤을때, 위 아래 배치 설정 가능

- z-index 값이 클수록 위쪽에 배치됨

- 서로 다른 박스가 불려졌을때 위치가 겹칠때 어떤 div를 위, 아래로 배치할것인지 제어

겹치는 경우, 위 아래 출력 제어 속성 (z 축 관련 설정) 예제

- position_zindex.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box { 
            width: 100px; height: 100px; 
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px; top: 10px;

            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px; top: 50px;

            z-index: 10;
        }
        .box:nth-child(3) { 
            background-color: blue;
            left: 90px; top: 90px;

            z-index: 1;
        }
    </style> 
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

- 첫번째 div는 z-index값 100, 두번째 div는 10, 세번째 div 는 1 을 주어서 첫번째 div 박스가 가장 위로 출력되도록 함

- z-index값이 큰 div 박스가 위로 배치된다.

- div position 이 absoulute인 것을 했다.

내용이 요소를 넘쳤을때 처리 속성

- overflow 속성으로 특정 영역의 범위를 벗어났을때 그걸 보여주게 만들건지 숨길건지 설정 가능

1. hidden 속성 값 : 영역을 벗어나는 내용을 감춤

- hidden이 일반적이다.

2. scroll 속성 값 : 영역을 벗어나는 부분을 스크롤로 만들어서 나타나도록 함

내용이 요소를 넘쳤을때 처리 속성 예제1

1. 부모 영역을 벗어난 부분을 잘라 감춤

- position_fomulaOverflowHidden.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box { 
            width: 100px; height: 100px; 
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px; top: 10px;

            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px; top: 50px;

            z-index: 10;
        }
        .box:nth-child(3) { 
            background-color: blue;
            left: 90px; top: 90px;

            z-index: 1; 
        }
        body > div {
            width: 400px; height: 100px;
            border: 3px solid black;
            
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor amet</h1>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>Lorem ipsum dolor amet</h1>
</body>
</html>

- overflow : hidden; 속성을 통해 특정 영역의 범위를 벗어났을때 그걸 보여주지 않고 감춤

- overflow : hidden; 을 body>div 태그에 적용, 즉 body 바로 아래의 자식태그인 div인 검은 두꺼운 선 가진 박스에 적용됨

- 그 두꺼운 선 가진 박스는 3개 div 박스의 부모 태그이다.

- 즉, overflow는 자식이 아닌 부모 영역에 이 설정을 적용함

내용이 요소를 넘쳤을때 처리 속성 예제2

2. 부모 영역을 벗어나는 부분을 스크롤로 만들어서 나타나도록 함

- position_fomulaOverflowScroll.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box { 
            width: 100px; height: 100px; 
            position: absolute;
        }
        .box:nth-child(1) {
            background-color: red;
            left: 10px; top: 10px;

            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: green;
            left: 50px; top: 50px;

            z-index: 10;
        }
        .box:nth-child(3) { 
            background-color: blue;
            left: 90px; top: 90px;

            z-index: 1; 
        }
        body > div {
            width: 400px; height: 100px;
            border: 3px solid black;
            
            position: relative;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor amet</h1>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>Lorem ipsum dolor amet</h1>
</body>
</html>

- 아까의 코드에서 overflow : scroll; 만 다르다

- 스크롤바를 만들어서 영역을 넘친 내용들을 보여줌

float 속성

- div를 배치할떄 쓰는 속성

- 전체적인 레이아웃 만들때 쓰는 속성

- 가로 방향으로 배치할때 주로 사용됨

- 속성값 : left (왼쪽에 배치), right (오른쪽에 배치) 2가지 뿐이다.

float 속성으로 레이아웃 잡기

- 레이아웃을 잡을 때, 이렇게 가운데 부분에서 맨 왼쪽은 left, 가운데는 left로 해서 맨 왼쪽 다음에 오도록 배치하고, 가장 오른쪽은 right로 배치

- 전체적인 레이아웃을 배치할때 float 속성을 많이 사용한다.

float 속성 예제1

+ float값을 설정하지 않았을때 예제

- float_basic.html

<!DOCTYPE html>
<html>
<head>
    <title>Float Style Property</title>
    <style>

    </style>
</head>
<body>
    <img src="hanbit.jpg"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>

- float 속성을 쓰지 않고 이미지를 출력했다.

- 로고이미지가 가장 위에 배치되고 나머지 텍스트 내용들이 줄이 바뀌어서 아래쪽에 나타난다.

float 속성 예제2

float 값을 설정했을때 위치

- float : left; 설정해서 왼쪽에 배치시키기

- float_image.html

<!DOCTYPE html>
<html>
<head>
    <title>Float Style Property</title>
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="hanbit.jpg"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>

- float : left; 가 되어 이미지가 왼쪽에 배치되고, 나머지 본문 내용들은 이미지의 오른편에 배치되어 나타난다.

float 속성 예제3

float 값을 설정했을때 위치

- float : right; 로 수정해서 오른에 배치 (코드 수정)

- 수평방향으로 배치할때 주로 float : left , float : right 를 쓴다.

float 속성 예제4

- CSS를 적용하지 않은 경우, div 2개가 있을때

- float_boxBasic.html

<!DOCTYPE html>
<html>
<head>
    <title>Float Style Property</title>
    <style>

    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
</html>

- css 적용되지 않은 상태

float 속성 예제5

- 두 div 박스를 모두 float : left;로 왼쪽에 배치

- 수평 배치

- float_boxLeft.html

<!DOCTYPE html>
<html>
<head>
    <title>Float Style Property</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            padding: 10px;
            /* 태그를 왼쪽으로 붙입니다. */
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
</html>

- div 박스 2개 모두 float : left;를 적용한다

- margin : 10px 이므로 두 div 사이 간격이 10px 이다.

- padding : 10px 이므로 테두리와 내용 1, 2 숫자사이의 간격이 10px

- 먼저 출력되는게 왼쪽에 배치되고 거기에 쌓이듯이 다음에 출력되는게 붙어서 나온다

- 둘 다 left 지만, 1번 div가 먼저 왼쪽에 배치가 되고, 2번 div가 다음에 배치되기 떄문에 오른쪽으로 나오는 것

+ 만약 left를 없앤다면?

- 수평방향으로 배치할떄는 float : left나 float : right를 써야한다

- 만약 float 를 없애면 수평방향으로 출력되지 않음

float 속성 예제6

- 두 div 박스를 모두 float : right;로 오른쪽에 배치

- 수평 배치

- float_boxRight.html

<!DOCTYPE html>
<html>
<head>
    <title>Float Style Property</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            padding: 10px;
            /* 태그를 오른쪽으로 붙입니다. */
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
</html>

- 둘 다 float : right ; 이지만 1번박스가 먼저 나와있으므로 먼저 오른쪽으로 배치되고, 2번 박스는 쌓이듯이 배치되므로 상대적으로 왼쪽에 배치된다.

float 속성 예제7

- float 속성을 쓰고 있다.

- 2-layout.html

- footer 는 하단에 배치할 것이므로 float를 쓰면 안된다.

- clear : both; 로 양쪽을 해제해야만 위의 float값의 영향을 받지 않음

- 그럼으로서 한줄로 출력된다.

+ footer 에서 clear : both; 를 빼면?

- footer에서 clear : both ;를 하지않으면 float의 영향을 받아서 footer가 위로 딸려감

float 속성 예제8

- float 속성을 쓰고 있다.

- 3-layout.html

그림자 효과 속성

- 입체적인 모양으로 보이게 하는 효과

- 속성값의 순서 : ( 오른쪽 아랫쪽 흐림도 색상 ) 순서

- 오른쪽과 아랫쪽의 값이 클수록 오른쪽과 아랫쪽으로 그림자가 치우친다.

- 흐림도가 클수록 그림자가 흐려지고 흐림도가 작을수록 그림자가 선명해진다

1. 텍스트에 그림자 효과

- text-shadow 속성으로 텍스트에 그림자 효과를 줄 수 있다.

2. 박스에 그림자 효과

- box-shadow 속성으로 박스에 그림자 효과를 줄 수 있다.

그림자 효과 속성 예제1

1. 텍스트에 그림자 효과

- 텍스트에 대해 그림자를 주는 예제

- shadow_textShadow.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        h1 {
          /*text-shadow: 오른쪽 아랫쪽 흐림도 색상;*/
            text-shadow: 5px 5px 5px black;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor amet</h1>
</body>
</html>

- h1태그의 텍스트에 대해 그림자 두께, 색상 등을 설정하고 있다.

- 오른쪽의 그림자 크기 5px, 아래쪽의 그림자 크기 5px, 흐림도 5px, 색상 black 설정

- 오른쪽 그림자 크기를 더 큰 값으로 설정해보자 -> text-shadow : 15px 5px 5px black;

- 오른쪽으로 더 치우쳐진다.

- 아랫쪽 그림자 크기를 더 큰 값으로 설정해보자 -> text-shadow : 5px 15px 5px black;

- 흐림도를 크게 해보자 -> text-shadow : 5px 5px 15px black;

- 값이 작을수록 그림자가 선명하고 클수록 그림자가 흐릿하게 나타난다.

그림자 효과 속성 예제2

2. 텍스트에 그림자 효과

- 박스에 대해 그림자를 주는 예제

- text 에 대한 그림자 효과와 비슷함

- 속성값 순서 : 마찬가지로 (오른쪽 아랫쪽 흐림도 색상) 순서이다.

- shadow_boxShadow.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        div {
            border: 3px solid black;
          /*box-shadow: 오른쪽 아랫쪽 흐림도 색상;*/
            box-shadow: 10px 10px 30px black;
            text-shadow: 5px 5px 5px black;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

+ 선택자가 div 이므로 div 안의 내용들은 (h1 태그 포함) 모두 저 CSS의 적용을 받게 된다.

- 박스에 대해 그림자 효과를 내고 있다

- 오른쪽으로 10px, 아랫쪽으로 10px 그림자가 있다.

chapter_7 공부

레이아웃 만들기, 전체적인 배치 관련

수평 정렬

- float 속성으로 수평으로 정렬한다, 왼쪽에 배치시 left, 오른쪽에 배치시 right 속성값을 이용한다

+ overflow : hidden; 시 넘쳤을때 숨기고 overflow : scroll; 시 스크롤을 만들어줘서 보여줌

수평 정렬 예제

- example_1.html

<!DOCTYPE html>
<html>
<head>
    <title>Float With Overflow</title>
    <style>
        div.container {
            overflow: hidden;
        }

        div.item {
            float: left;

            margin: 0 3px;
            padding: 10px;
            border: 1px solid black; 
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">메뉴 - 1</div>
        <div class="item">메뉴 - 2</div>
        <div class="item">메뉴 - 3</div>
        <div class="item">메뉴 - 4</div>
    </div>
</body>
</html>

- 공통적인 속성은 div.container를 이용해 적용하고 개별은 div.item 으로 적용하고 있다.

- div.container 는 "div 태그에서" class=container 불러와야만 적용이 된다!

- div.item 은 "div 태그에서" class=item 불러와야만 적용이 된다!

- overflow 는 부모인 container 에 적용함, 이 container를 넘어가는 값이 있으면 보여주지 않도록 hidden 으로 설정

- 각 item들은 float : left; 에 의해 수평 배치, 메뉴 - 1 이 먼저 나오므로 가장 먼저 적용되어 가장 왼쪽에 배치된다.

- 나머지는 메뉴 - 2, 메뉴 - 3, 메뉴 - 4 순으로 왼쪽부터 오른쪽으로 배치되고 있다.

+ margin : 0 3px ; (위쪽과 아래쪽이 0px, 왼쪽과 오른쪽이 3px)

중앙 정렬

- margin : 0 auto ; 로 설정시 전체 내용이 브라우저 가운데 배치된다.

- 주로 가장 바깥쪽의 div에 margin : 0 auto; 설정해서 전체가 중앙 정렬시킨다.

- 전체 내용을 브라우저 가운데 배치할때 사용하는 속성

- 많이 쓰는 속성이다.

중앙 정렬 예제1

- example_2.html

<!DOCTYPE html>
<html>
<head>
    <title>Margin Width</title>
    <style>
        /* 초기화 */
        * { margin: 0; padding: 0; } 

        /* 주제 */
        body {
            margin: 0 auto; /* 중앙 정렬 */
            width: 700px;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <h2>Neque porro quisquam est qui...</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat vehicula erat vel hendrerit. Etiam in est dolor, non pretium justo. Aliquam eu ipsum diam, sed dictum ante. Nunc pellentesque semper cursus. Nam aliquet consequat sapien id porttitor. Proin quis pharetra urna. Nam risus arcu, tincidunt quis imperdiet in, ullamcorper in sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vestibulum enim gravida sapien vehicula id consectetur ipsum gravida. Nulla porta consequat velit vitae elementum.</p>
    <p>Nullam neque quam, blandit eget venenatis at, viverra vitae metus. Pellentesque quis ligula turpis. Nulla at justo est, id egestas mauris. Phasellus nec nunc egestas magna iaculis rhoncus. Praesent ut risus tellus. Ut pretium hendrerit vehicula. Donec id felis quis neque ornare facilisis. Praesent dictum orci quis metus vestibulum vitae vulputate sapien luctus. Aliquam pellentesque urna id nunc aliquam aliquam quis sed nunc. Sed rhoncus accumsan dolor, ut interdum quam ultricies in. Morbi venenatis nisi a nunc porta tempus. Vestibulum hendrerit posuere consequat. Nam eleifend malesuada est at dictum. Mauris sit amet nisi lobortis dolor consequat ullamcorper.</p>
</body>
</html>

- * (all tags) 모든 태그에 대해 margin : 0; padding : 0;을 준다 -> 모두 왼쪽 위에 배치됨

- body 에 대해 margin : 0 auto; 를 주면 body 태그 모든 내용이 가운데 배치가 됨.

- 주로 가장 바깥쪽의 div에 margin : 0 auto; 설정해서 전체가 중앙 정렬시킨다.

- 제목 및 본문이 모두 가운데 정렬되어있다.

+ margin : 0 auto; 를 없애면?

- 좌측 상단부터 출력됨

중앙 정렬 예제2

- 3-layout.html

- #container는 가장 바깥쪽의 div에 적용되었음

- margin : 0 auto; 로 인해 container 안의 모든 내용이 가운데 나타남

- 가운데 배치되어있다

One True 레이아웃

- 포털사이트에서 많이 쓰는 메인 페이지 레이아웃

- 행을 독립적으로 생각해서 공간을 나눔

One True 레이아웃 예제

- example_3.html

<!DOCTYPE html>
<html>
<head>
    <title>One True Layout</title>
    <style>
        body {
            width: 500px;
            margin: 10px auto; /* 중앙 정렬 */
        }

        #middle { overflow: hidden; }
        #left { float: left; width: 150px; background: red; }
        #right { float: left; width: 350px; background: blue; }

        #top { background: green; }
        #bottom { background: purple; }
    </style>
</head>
<body>
    <div id="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
    <div id="middle">
        <div id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut.</div>
        <div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus.</div>
    </div>
    <div id="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
</body>
</html>

- 전체 폭 width는 500px 으로 했고 margin: 10px auto; 가 중앙정렬 해주고 있다

- 상단에 나타날 내용을 id=top, 하단에 나타날 내용을 id=bottom으로 했다, 배경색 외 따로 설정 안함

- 가운데 영역 middle은 왼쪽 left 와 오른쪽 right 두가지로 나눠져 있다

- middle의 overflow : hidden; 이므로 넘쳤을때 보이지 않도록 하겠다

- left 선택자에서 float : left; 이므로 먼저 왼쪽에 배치됨, width값이 150px

- right 선택자에서 float : left;이므로 쌓여서 배치됨, width값이 350px

-> #middle 의 left , right 박스에는 hidden에 의해 글자들이 넘치더라도 보여주지 않음, 글이 잘리고 있다.

- 상단에 글 , 좌측에 사이드, 우측에 본문, 하단에 글 이 출력됨

- top과 bottom 은 전체가 꽉 찬 형태로 출력

- 가운데 왼, 오른쪽은 hidden에 의해 글자들이 넘치더라도 보여주지 않음, 글이 잘리고 있다.

div 배치 속성

- position 속성으로 div를 배치한다

- 속성값 : absolute, relative, fixed

- 왼쪽에서 떨어진 건 left, 위쪽에서 떨어진 건 top

div 배치 속성 예제

- example_4.html

<!DOCTYPE html>
<html>
<head>
    <title>Absolute Position</title>
    <style>
        #container {
            width: 500px; height: 300px;
            border: 3px solid black;
            overflow: hidden;
            position: relative;
        }

        .circle {
            position: absolute;
            width: 100px; height: 100px; 
            border-radius: 50% 50%;
        }

        #red {
            background: red;
            left: 20px; top: 20px;
        }
        #green {
            background: green;
            right: 20px; top: 20px;
        }
        #blue {
            background: blue;
            right: 20px; bottom: 20px;
        }
        #yellow {
            background: yellow;
            left: 20px; bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>Dummy Text</h1>
    <div id="container">
        <div id="red" class="circle"></div>
        <div id="green" class="circle"></div>
        <div id="blue" class="circle"></div>
        <div id="yellow" class="circle"></div>
    </div>
    <h1>Dummy Text</h1>
</body>
</html>

- 원의 위치를 제어하고 있다

- 공통적인 속성은 .circle 로, 개별적인 속성들은 #red, #green, #blue, #yellow로 적용시키고 있다.

- 가장 바깥쪽 div에 적용할 #container 는 position : relative; 로 설정한다

-> container 는 상대적인 위치로 위치 설정됨, 상대적인 위치의 기준은 바로 위의 Dummy Text 텍스트

- .circle에서 width=100px; height=100px로 가로길이와 세로길이가 동일하므로 정사각형이 되고, border-radius : 50% 50%으로 하면 원이 된다.

- .circle의 position은 바로 바깥쪽 div를 기준으로, 즉 container를 기준으로 왼쪽에서 얼마, 위에서 얼마 떨어질지 결정한다

+ position 속성 추가

position : relative;

- 그자체로는 특별한 의미가 없다.딱히 어느 위치로 이동하지는 않고 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.

position : absolute;

- 요소에 적용하면 특정 부모에 대해 절대적으로 움직이게 된다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여한다.

요소의 중앙 배치

- example_5.html

<!DOCTYPE html>
<html>
<head>
    <title>Absolute Position</title>
    <style>
        /* 초기화 */
        * { margin: 0; padding: 0; }

        /* 주제 */
        body { background: red; }
        #container {
            /* 색상 및 크기 적용 */
            width: 500px; height: 250px;
            background: orange;

            /* 위치 설정 */
            position: absolute;
            left: 50%; top: 50%;
            margin-left: -250px;
            margin-top: -125px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>요소의 중앙 배치</h1>
    </div>
</body>
</html>

- 안의 div 박스의 width : 500px, hegith : 250px, 오랜지색

- position : absoulute; 이고 left : 50%, top : 50% 에 의해 왼쪽에서 50%, 위에서 50% 떨어져서 정가운데(정중앙) 배치가 된다.

- margin-left 는 왼쪽에서 부터 떨어진 간격을 의미하는데 음수값이다. 음수값은 방향을 의미하기때문에 음수값을 넣으면 왼쪽으로 이동함

- margin-top 은 위에서부터 떨어진 간격을 의미하는데 음수값이므로 위쪽으로 배치가 올라감

margin-left 와 margin-top 을 빼면?

- 기준점 기준으로 left : 50%; right : 50% 되므로 요소를 정 가운데로 이동하고 싶다면 margin-left 와 margin-top 음수값을 이용해야한다.

요소 고정 (고정바 배치)

- 특정 div 박스의 position 값을 fixed로 하면 고정이 된다

- 고정이 되면 스크롤링이 되어도 움직이지 않음

- example_6.html

<!DOCTYPE html>
<html>
<head>
    <title>Fixed Bar</title>
    <style>
        .container {
            margin-top: 50px;
            margin-left: 50px;
        }

        .top_bar {
            background: red;

            position: fixed;
            left: 0; top: 0; right: 0;
            height: 50px;
        }

        .left_bar {
            background: blue;

            position: fixed;
            left: 0; top: 50px; bottom: 0;
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="top_bar"></div>
    <div class="left_bar"></div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
    </div>
</body>
</html>

- 상단의 .top_bar 는 상단바를 만들어주며 position : fixed; 가 적용되므로 고정이 되어 스크롤링 해도 움직이지 않는다

- 상단의 .top.bor 의 height가 50px이므로 두께(세로높이)가 50px

- 좌측의 .left_bar는 좌측바를 만들어주며 position :fixed; 가 적용되어 고정이 되어 스크롤링 해도 움직이지 않는다.

- 좌측의 .left_bar 의 weight가 50px이므로 두께(너비)가 50px

- 좌측의 .left_bar 의 top : 50 px 을 통해서 위에서 50px떨어진 곳 부터 바가 시작한다.

- 또한, .container의 margin-top : 50 px, margin-left : 50px을 통해 바가 있는 곳이 아닌 곳부터 본문을 출력함

- 상단바(red), 좌측바(blue)

- 스크롤바를 움직여도 좌측바와 상단바는 움직이지 않

내용이 넘쳤을때 ... 으로 생략 표시해주는 속성

- text-overFlow : ellipsis; 하면 글자를 ... 으로 생략해줌

내용이 넘쳤을때 ... 으로 생략 표시해주는 속성 예제

- example_7.html

<!DOCTYPE html>
<html>
<head>
    <title>Ellipsis</title>
    <style>
        h1, p {
            width: 300px;
        }

        .ellipsis {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; 
        }
    </style>
</head>
<body>
    <h1 class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    <p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

- white-space : nowrop; 내용이 많을때 줄을 바꾸지 않게 하는 속성

- overflow : hidden; 이므로 넘칠때 보여주지 않게 설정, 넘치는 내용을 아예 나타나지 않게함

- text-overflow : ellipsis; 하면 넘친 내용을 ... 으로 보여줌

- 글의 내용이 영역을 넘치고 있다.

- text-overflow : ellipsis;에 의해 넘친 부분이 ... 으로 표시되고 있다.

text-overflow : ellipsis; 가 없다면?

overflow : hidden; 이 없다면?

- 그냥 출력시킴

2단 레이아웃

- 2단으로 레이아웃을 잡음

- 2-layout.html

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>2단 레이아웃</title>
    	<style>
		div {
			border: 1px solid #ccc; /* 모든 영역에 테두리 표시 */
		}
		#container {
			width:960px; /* 컨테이너 너비 */
			padding:20px; /* 패딩 */			
			margin:0 auto;  /* 화면 중앙에 배치 */
		}
		#header {
			padding:20px;  /* 패딩 */
			margin-bottom:20px;  /* 아래 요소들과의 간격(마진) */
		}
		#contents {
			width: 620px;  /* 너비 */
			padding: 20px;  /* 패딩 */
			float: left;  /* 왼쪽으로 플로팅 */
			margin-bottom: 20px;  /* 아래 요소와의 간격 */
		}
		#sidebar {
			width: 220px;  /* 너비 */
			padding: 20px;  /* 패딩 */
			float: right;  /* 오른쪽으로 플로팅 */
			margin-bottom: 20px;  /* 아래 요소와의 간격 */
			background:#eee;
		}
		#footer {
			clear:both;  /* 양쪽 플로팅 해제 */
			padding:20px;  /* 패딩 */
		}
	</style>
</head>
<body>
    <div id="container">
        <div id="header">
			<h1>사이트 제목</h1>
		</div>
		<div id="sidebar">
			<h2>사이드 바</h2>
            <ul>
                <li>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>

            </ul>
		</div>
		<div id="contents">
			<h2>본문</h2>
            <p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>

            <p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
		</div>
		<div id="footer">
			<h2>푸터</h2>
            <p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
		</div>
    </div>
</body>
</html>

- 공통적으로 적용할 내용은 div 태그 전체에 대해 적용할 div 태그 선택자에 넣었다.

- container id를 보면 전체적인 배치를 가로 960px, padding : 20px, margin : 0 auto 이므로 전체를 가운데 정렬

- #header 부분은 헤더 아래쪽의 마진을 20px로 설정

- 사이드바가 float : right; 로, 본문은 float : left;로 지정되어있기 떄문에 사이드바가 먼저 나온다고 해도 사이드바가 오른쪽에 무조건 배치됨

- footer에서는 위에서 float 속성을 썼으므로 clear 속성으로 양쪽을 해제해야만 따로 아래에 만들어짐, clear해주지 않으면 딸려서 올라감

- 제목 본문과 20px만큼 떨어져있다

- 이렇게 div 태그로 레이아웃을 잡을수도 있고, 시맨틱 태그로 레이아웃을 잡을 수도 있다.

- HTML4까지는 전부 <div id=header> 이런식으로 레이아웃을 잡았었다, HTML5로 오면서 따로 <header> 라는 시맨틱 태그가 추가됨

- <header> <footer> <article> <section> 등이 시맨틱 태그, 하지만 태그만으로는 효과가 없다.

- div태그나 시맨틱 태그 중 어느걸 써도 상관 없다

3단 레이아웃

- 3단으로 레이아웃을 잡음

- 3-layout.html

<!doctype html>
<html lang="ko">
	<head>
		<title>CSS 레이아웃 - 2단 레이아웃</title>
		<meta charset="utf-8">
		<style>
			div {
				padding:20px;
				border:1px solid #ccc;
			}
			#container {
				width:960px;
				margin:0 auto;
			}
			#header {
				padding:20px;
				margin-bottom:20px;
			}
			#contents {
				width: 490px;
				float: left;
				margin-bottom: 20px;
			}
			#left-sidebar {
				width: 150px;
				float: left;
				margin-bottom: 20px;
				margin-right: 20px;
			}
			#right-sidebar {
				width: 150px;
				float: right;
				margin-bottom: 20px;
			}
			#footer {
				clear:both;			
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h1>사이트 제목</h1>
			</div>
			<div id="left-sidebar">
				<h2>사이드바</h2>
				<ul>
					<li>항목1</li>
					<li>항목2</li>
					<li>항목3</li>
					<li>항목4</li>
				</ul>
			</div>
			<div id="contents">
				<h2>본문</h2>
				<p>예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다. 이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>

				<p>국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 행정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하에 감사원을 둔다.</p>

				<p>모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 대한민국의 국민이 되는 요건은 법률로 정한다. 법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다.</p>
			</div>
			<div id="right-sidebar">
				<h2>사이드바</h2>
				<ul>
					<li>항목1</li>
					<li>항목2</li>
					<li>항목3</li>
					<li>항목4</li>
				</ul>
			</div>
			<div id="footer">
				<h2>푸터</h2>
				<p> 저작권 정보 </p>
				<p> 연락처 등 </p>
			</div>
		</div>
	</body>
</html>

- 왼쪽 사이드바 float : left; 본문 float : left;, 오른쪽 사이드바 float : right; 로 해줘야 이렇게 3단으로 배치된다.

- #continaer에서 width: 960; 하고 margin:0 auto;를 통해 전체 내용을 전부 가운데 배치한다, 브라우저를 늘리든 줄이든 가운데 배치된다.

- 본문 #content 에서 float : left;지만 left side bar가 먼저 나왔기떄문에 먼저 왼쪽에 배치되고 거기에 이어서 본문이 상대적으로 오른쪽으로 배치됨

- css 잘 적용되었는지, margin 과 padding을 확인 하기 위해 개발자 도구(F12)에서 확인해볼 수 있다

+ 파이썬 크롤링할때도 F12를 눌러서 어떤 선택자로 되어있는지 확인해야함

chapter_8 공부

반응형 웹 관련

반응형 웹

- 반응형 웹 페이지 : 접속하는 단말기에 맞게끔 다르게 보여주는것

- 한개의 페이지를 잘 만들어 놓고 사용자가 PC로 접속할때나 모바일로 접속할때에 맞춰서 보여주는 웹

+ 반응형 웹인지 아닌지는 확대나 축소를 시켜보면 안다

+ 네이버는 반응형 웹을 만들지 않고 모바일 접속시 m.naver.com 처럼 모바일용 웹 따로 만들었다.

+ 네이버는 반응형 웹이 아니다

+ 오라클 웹페이지는 반응형 웹

+ 부트스트랩은 기본적으로 반응형 웹 지원

- 확대나 축소시 화면이 변한다

반응형 웹 만들기

- 일반적인 페이지를 만들때 쓰지 않는 속성들을 설정해야만 반응형 웹 만들 수 있다.

- 이 두가지를 반드시 설정해야함

1. head 태그 안의 meta 태그를 이용해서 viewport를 설정

2. 미디어 쿼리 설정

1. head 태그 안의 meta 태그를 이용해서 viewport를 설정

- viewport 설정시 속성들 설정해야 반응형 웹 만들 수 있다.

- name : viewport 를 해야하고 단말기에 맞게끔 이 코드가 들어가야함

- 기본적으로 자주 쓰는 속성들 정해져 있다.

2. 미디어 쿼리 설정

- 해상도 등 설정할떄 미디어 태그로 설정함

- 해상도 설정시 미디어태그를 써야만 그걸 이용해서 반응형 웹에서 해상도 설정 가능

- 모니터와 프린터 구분 등도 가능하다.

- 화면 출력시 red로, 프린트 단말장치로 출력시 green으로 출력하라는 의미

반응형 웹 만들기 예제

미디어 쿼리 예제1

- 반응형 웹 만들때 반드시 설정해야하는 속성 중 미디어 쿼리 예제

- media_feature.html

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Web Basic</title>
    <style>
        @media (max-width: 499px) {
            body { background: red; }
        }

        @media (min-width: 500px) and (max-width: 799px) {
            body { background: green; }
        }

        @media (min-width: 800px) {
            body { background: blue; }
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>

- @media 는 미디어 태그라고 한다

- max-width : 499px일때 배경색은 red로 설정

- 또한 500 px ~ 799 px 일때 배경색은 green으로 설정

- min-width : 800px일때 배경색은 blue

- 그냥 실행시 (100%화면에서) 해상도가 800px이 넘어가므로 배경색이 blue

- 250%까지 확대되어 해상도가 799px보다 작고 500px보다 클떄는 배경색이 green

- 해상도가 499px 이하일때 배경색이 red

- 모바일로 접속시 해상도가 작아서 이렇게 빨간색으로 뜸

- 단말장치 크게에 따라서 다른 속성을 적용할때 @media (미디어 태그)를 사용한다

+ 모바일 장치처럼 실행해보자

- localhost 자리에 자기 컴퓨터 ip주소로 접속해보기

- 모바일로 접속시 배경이 빨간색으로 뜸

@media 의 operation 속성

- @media 에서 스마트폰은 세로로 길게 볼수도 있고 옆으로 눕혀 볼수도 있고 가로로 볼수도 있다

- 그때마다 다른 화면 보여주기 위해서 orientation 속성을 사용함

- 세로방향일때 orientation : portrait 이고, 가로 방향일때 orientation : landscape

반응형 웹 만들기 예제

미디어 쿼리 예제2 / operation 속성 예제

- orientation.html

<!DOCTYPE html>
<html>
<head>
    <title>Media Feature</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
    <style>
    	/* 세로 방향 */
        @media screen and (orientation: portrait) {
            body {
                background-color: red;
            }
        }
        /* 가로 방향 */
        @media screen and (orientation: landscape) {
            body {
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>

- viewport 속성을 넣고 화면에 맞게끔 출력하겠다고 표시함

- orientation 은 방향을 의미하고

- orientation : portrat 는 세워져있을때를 의미, 배경색 red

- orientation : landscape는 눕혀져 있을때를 의미, 배경색 green

- PC로 접속시 가로 방향 기준으로 나온다

- 스마트폰 단말장치로 접속

반응형 웹 패턴

1. 데스크톱에서는 메뉴가 왼쪽에 있고, 모바일 장치에서는 메뉴가 위쪽에 있는 패턴

ex)

- 왼쪽은 PC로 접속했을때, 오른쪽은 모바일 장치로 접속했을때dlek

- 왼쪽의 창에서는 메뉴가 좌측에 나타나고 오른쪽의 창에서는 메뉴가 상단에 나타남.

반응형 웹 패턴 예제

- pattern1.html

<!DOCTYPE html>
<html>
<head>
    <title>패턴1</title>
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
    <style>
        * { 
            margin:0; 
            padding: 0;
        }

        body {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }

        #menu {
            width: 260px;
            float: left;
        }

        #section {
            width: 700px;
            float: right; /* left로 입력해도 상관 없습니다. */
        }

        @media screen and (max-width: 767px) {
            /* 스마트폰 사이즈에서는 전부 해제합니다. */
            body { width: auto }
            #menu { width: auto; float: none; }
            #section { width: auto; float: none; }
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>메뉴A</li>
            <li>메뉴B</li>
            <li>메뉴C</li>
        </ul>
    </div>
    <div id="section">
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed turpis luctus laoreet. Fusce auctor maximus finibus. Nam ac dictum velit. Donec sit amet bibendum erat. Sed varius arcu est. Nullam maximus, libero id sollicitudin malesuada, nunc nunc varius neque, eu rhoncus dui nunc ac felis. Integer sit amet turpis metus. Nam id efficitur velit. Mauris suscipit, odio et dictum fermentum, nulla orci fermentum quam, a condimentum magna justo dictum leo. Aenean et odio mattis, maximus elit sed, fringilla est. Sed eget purus sit amet arcu elementum aliquet in eu mi. Donec dui tortor, viverra in fermentum ut, aliquam ac ipsum.</p>
    </div>
</body>
</html>

- PC 접속시 #menu가 float : left 이고, #section이 float : right ; 이므로 본문이 수평으로 오른쪽에 배치됨

- 최대 해상도가 max-width : 767px 인 경우에는, 즉 767px보다 작은 경우엔 속성들을 전부 auto, none으로 해제함으로서 PC화면의 배치 (메뉴는 왼쪽에, 본문은 오른쪽에) 를 해제함

- 모바일 화면일때는 width값이 auto이므로 내용이 부족하면 아래쪽으로 내려오게 되는 것임.

- PC로 봤을때 : 메뉴가 좌측에 있음

- 스마트폰으로 봤을때 : 메뉴가 상단으로 올라감

+ 프론트엔드는 신경쓸게 많다

- 브라우저 종류에 따라서도 보여주는 내용이 달라짐

- 스마트폰 기종에 따라서도 보여주는 내용이 달라짐

부트스트랩

부트스트랩 (Bootstrap)

- CSS 라이브러리를 제공하는 CSS 프레임워크

- CSS를 쉽게 쓸 수 있도록 외부 CSS 파일을 만들어서 제공함

- Bootstrap은 2010년 중반에 트위터 개발자 중 @mdo와 @fat을 사용하는 개발자가 만든 오픈소스 프레임워크
- 프레임워크란 "짜여있는 작업" 이란 뜻으로, 부트스트랩은 HTML, CSS, JavaScript 및 다양한 UI 컴퍼넌트로 구성

- 즉, 효율적인 웹 디자인을 하기 위해 미리 필요한 부분을 작업해 놓은 것

- 현재 Bootstrap 5점대까지 나와있다.

부트스트랩 사용 방법 2가지

1. 직접 다운하는 방식

2. CDN 방식

1. 직접 다운하는 방식

- 부트 스트랩 공식 사이트에서 해당 라이브러리 직접 다운로드

- 부트스트랩 공식 사이트 : http://getbootstrap.com
- Download Bootstrap 클릭해서 다운로드 받는다.

- 압축 해제하면 이런 css 파일들이 있는데 그걸 link 태그로 가져와서 사용한다.

- .min은 압축된 파일, 사진 속 여러 .css 파일 중 하나를 불러와서 쓰는 것

- 하나를 열어보면 몇천라인의 css코드가 있다

- 다운로드 받은 Bootstrap 파일들을 link 태그로 불러와서 사용함

        <link href="../css/bootstrap.min.css" rel="stylesheet">       
        <script src="../js/bootstrap.min.js"></script>

2. CDN 방식

- 라이브러리가 서버에 올라가있고 그 서버 주소를 알면 쓸 수 있다.

            <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

    <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

- 이러한 코드는 bootstrap 공식 페이지나 w3schools같은 페이지에서 가져올 수 있다.
- 참고 사이트: http://www.w3schools.com

부트스트랩 레퍼런스

- 어느걸 어떻게 써야할지 모르므로 w3schools 등의 사이트에서 확인 가능함

https://www.w3schools.com

- 버전마다 적용할 클래스가 다름을 주의

- BS 3점대로 들어가보자

- 메인 화면에 관한 템플릿 제공해주는 Bootstrap Themes

- 사용하고 싶다면 Try it Yourself > 를 눌러서 나오는 소스코드를 통쨰로 가져오면 됨

- link 태그로 js를 불러오고 있다, 이런 방식이 CDN 방식

- BS는 기본적으로 반응형 웹으로 되어있음

- BS 4점대를 사용해보자(실습)

실습 준비

- WebContent 폴더 하위에 bootstrap 폴더 생성

- 그리고 클라우드 의 work폴더를 그대로 (미리 만들어진 파일들) 가져오자

- 4점대 BS 파일들을 가져왔음

- 지금은 직접 다운받는 방식으로 부트스트랩을 쓸 것

- css 폴더 안에 css파일들이 js폴더 안에 js파일들이 들어있다

부트스트랩 사용 예제1

직접 다운 방식 예제

- WebContent/bootstrap/first.html 열어보기

- first.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 방법1. bootstrap 다운로드 받은 파일 불러오기 -->
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>

</head>
<body>

<img src="img/Koala.jpg" width=300 height=250 class="rounded"> <br><br>
<img src="img/Penguins.jpg" width=300 height=250 class="rounded-circle"> <br><br>
<img src="img/Jellyfish.jpg" width=300 height=250 class="img-thumbnail"> <br><br>

</body>
</html>

- 직접 다운받은 bootstrap 을 사용하는 방법이다.

- css 는 link 태그로 상대경로 지정해서 css파일을 불러옴

- js는 script 태그로 상대경로 지정해서 js파일을 불러옴

- img 태그로 이미지 3장을 불러오고 있는데 이 img에 여러 효과 처리 해보자

- 이때, class만 적용하면 효과를 줄 수 있다.

+ BS4 images : 이미지에 대한 여러 효과 관련

- 이건 CDN 방식의 코드이다

- 이미 직접 다운 받았으므로 class="rounded-circle"만 해주면 효과가 적용된다

BS를 직접 다운받았을때 장점

- 선택자의 내용을 속성값을 수정과 변경해서 적용 가능

- bootstrap.css 파일을 보자

부트스트랩 사용 예제2

CDN 방식 예제1

- first.html 에서 첫번째 방식으로 직접 다운받는 방법을 사용헀으니 이번엔 CDN 방식을 사용해보자

- css나 js가 저장된 주솟값을 알아야함 -> w3school 에서 확인 가능

+ CDN : Content Delivery Network 약자

- 저 코드를 통째로 가져오면 된다. 이미지명만 바꿔주면 됨

- cdn.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- 방법2. CDN방식 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Rounded Corners</h2>
  <p>The .rounded class adds rounded corners to an image:</p>            
  <img src="img/Koala.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 

  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="img/Penguins.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> 

  <h2>Thumbnail</h2>
  <p>The .img-thumbnail class creates a thumbnail of the image:</p>            
  <img src="img/Jellyfish.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

- 부트스트랩 4.6.1 버전을 불러오고 있다
- 이 코드는 w3schools에서 복사한 코드 3 가지를 합쳐둔것

- 직접 다운방식으로 할때와 동일한 출력

부트스트랩 사용 예제3

CDN 방식 예제2

버튼 예제1

- 다양한 버튼 적용을 위해 클래스값만 다르게 설정하면 된다.

- Try it Yourself 누르기

- 그대로 복사하고 work 폴더 하위에 html 파일인 botton.html 생성하고 거기에 다 복붙

- botton.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-link">Link</button>      
</div>

</body>
</html>

- 클래스값이 어떤 값이냐에 따라 버튼 모양이 달라짐

- 어떤 버튼 모양 쓸건지만 선택하면 된다.

부트스트랩 사용 예제4

CDN 방식 예제3

버튼 예제2

- botton01.html

- botton.html 과 비슷한 내용

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button Styles</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-link">Link</button> 
  <br><br><br>
  
  <button type="button" class="btn btn-secondary">가입</button> 
  <input type="button" value="확인" class="btn btn-secondary">
  
  <a href="#" class="btn btn-secondary">글작성</a>
  <div class="btn btn-secondary">로그인</div> 
  
       
</div>

</body>
</html>

- 가입 버튼에 마음에드는 버튼 모양을 적용

- 심지어 anchor 태그로 만든 '글작성' 도 이 클래스값 적용해서 버튼처럼 만들어짐

'국비지원 과정 > 웹표준' 카테고리의 다른 글

코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0)	2022.08.19
코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0)	2022.08.12
코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0)	2022.08.11
코딩 37일 / 2022.08.10 / 부트스트랩2,아파치 톰캣에 배포,자바스크립트 기초,내장함수1 (0)	2022.08.10
코딩 35일 / 2022.08.08 / CSS 선택자,단위,속성1 (0)	2022.08.08

PL/SQL 코딩 연습 / 다섯 번째 시험문제

2022. 8. 8. 17:07

기본 개념

트리거와 프로시저의 차이점은 무엇인지 서술하시오

트리거는 이벤트(주로 DML sql문) 발생시 자동으로 실행되지만 프로시저는 명시적으로 호출을 해줘야만 실행이 된다.

PL/SQL

1~10 사이의 정수 중에서 짝수의 합을 구하는 PL/SQL 프로그램을 작성 하시오

SET SERVEROUTPUT ON
declare
    n number := 1; -- 루프를 돌릴 변수
    s number := 0; -- 합이 누적될 변수
begin
    loop
        if n > 10 then
            exit;
        end if;
                
        if mod(n, 2) = 1 then -- 홀수일 때는
            s := s + 0;       -- 누적 안시킴
        else                  -- 짝수일 때는
            s := s + n;       -- 누적 시킴
        end if;

        n := n + 1; -- 1씩 증가
        
    end loop;
    DBMS_OUTPUT.put_line('1~10 사이의 정수 중에서 짝수의 합 : ' || s);
end;

프로시저 생성, 실행

사원 테이블(EMP)에서 사원번호(EMPNO)를 매개변수로 받아서, 사원 정보를 삭제하는 프로시저를 생성하고, 프로시저를 실행하시오

-- 저장 프로시저 생성
create or replace procedure del_emp (vempno in emp.empno%type)
is
begin
    delete from emp where empno = vempno;
end;

-- 프로시저 실행
execute del_emp(7788);

프로시저 생성, 실행

사원테이블(EMP)에서 SCOTT 사원의 사원명을 프로시저의 매개변수로 전달해서 SCOTT 사원의 급여를 출력하는 프로시저를 생성하고 실행하시오
1) 프로시저명은 emp_sal 이름으로 생성한다.
2) 생성된 프로시저를 실행할때 매개변수에 SCOTT 사원을 전달해서 실행한다.

-- 프로시저 생성
create or replace procedure emp_sal (
    vename in emp.ename%type,
    vsal out emp.sal%type)
is
begin
    select sal into vsal from emp where ename = vename;
end;

-- 바인드 변수 생성
variable var_sal number;

-- 프로시저 실행
execute emp_sal('SCOTT', :var_sal);

-- 출력
print var_sal;

프로시저 생성, 실행

사원 테이블(EMP)에서 사원번호를 프로시저의 매개변수로 전달 받아서, 그 사원의 사원명, 급여, 부서번호를 구하는 프로시저 생성해서 실행하시오?
1) 프로시저명은 emp_info 이름으로 생성한다.
2) 생성된 프로시저를 실행할때 매개변수에 사원들의 사원번호를 전달해서 실행한다.
3) 프로시저를 실행할때 바인드변수를 만들어서 출력한다.

-- 프로시저 생성
create or replace procedure emp_info (
    vempno in emp.empno%type,
    vename out emp.ename%type,
    vsal out emp.sal%type,
    vdeptno out emp.deptno%type )
is
begin
    select ename, sal, deptno into vename, vsal, vdeptno from emp where empno = vempno;
end;

-- 바인드 변수 생성
variable var_ename varchar2(10);
variable var_sal number;
variable var_deptno number;

-- 프로시저 실행
execute emp_info(7788, :var_ename, :var_sal, :var_deptno);

-- 출력
print var_ename;
print var_sal;
print var_deptno;

점수

100 / 100

'만들어보기' 카테고리의 다른 글

웹 서버 프로그램 코딩 연습 / 일곱 번째 시험문제 (0)	2022.09.28
웹표준 코딩 연습 / 여섯 번째 시험문제 (0)	2022.08.31
SQL 코딩 연습 / 네번째 시험문제 (0)	2022.08.03
SQL 코딩 연습 / 세번째 시험문제 (0)	2022.08.02
자바 코딩 연습 / 두번째 시험문제 (0)	2022.07.20

코딩 35일 / 2022.08.08 / CSS 선택자,단위,속성1

2022. 8. 8. 15:57

HTML 과 CSS의 역할

- HTML : div 태그, 시멘틱 태그를 활용해서 배치, 레이아웃을 잡는다

- CSS : 효과 등을 완성

CSS의 필요성

2단 레이아웃 잡기/3단 레이아웃 잡기

- html만으로 되지 않고 css적용되어야만 이렇게 배치 가능

- 레이아웃도 html 만으로 되지 않는 경우들이 있다

작업 디렉토리

- WebContent/CSS/web

- WebContent : WebContent가 홈디렉토리, 이 안에 html,css,js,jsp 등 파일 넣어야함

CSS 사용 방법

1. <head></head> 태그 안에 <style></style> 태그를 추가

- 내부에 CSS코드를 쓴다는 표시

- 임베디드 방식, 내장형 방식

+ <style type="text/css"> 로 해도되고 그냥 <style> 로 해도됨

- 선택자 자리에 적용할 범위를 쓴다, 여기선 태그 h1을 썼다

- 모든 h1태그들은 이 CSS의 적용을 받는다.

- { } 안에 속성 : 값; 을 쓴다

- 두가지 이상의 속성을 쓸때는 ; 를 찍고 구분하고 연결한다

내장형 방식 예제

CSS 예제1

- css01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css사용 예제</title>

<!-- 1. 내장형 방식(embedded) -->
<style>
h2 {
	font-family: 굴림;    /*  글꼴설정 */
	font-size: 18pt;	 /* 글자크기 */
	color: red;          /* 글자 색깔 */
}
h3 {
	font-family: 명조;
	font-size: 12pt;
	color: green;
}
</style>
</head>
<body>
	<h1>
		css에 대한 예제
		<hr>
	</h1>
	<h2>18pt크기의 빨간색 굴림체입니다.</h2>
	<h3>12pt크기의 초록색 명조체입니다.</h3>
</body>
</html>

- <head> 태그 안의 내용이 정해져있다
- style 태그로 CSS의 시작을 표시해야 브라우저가 이게 CSS 코드임을 인식함

- 위 예제에서 h1태그는 css적용되지 않았으므로 기본적인 형태로 나타남

구조

- 2개의 속성 연결할때는 세미콜론으로 구분

- h2 : 선택자 자리, 지금은 태그 h2를 의미
- 그리고 {} 안에 속성 : 값; 들이 있다

- body 태그안의 모든 h2태그에 대해서 이 속성들이 적용됨

- 선택자 자리에 이상한 기호가 오거나 여러개 오는등 선택자를 잘 이해해야함

속성
- font-family : 글꼴
- font-size : 글자 크기 설정
- color : 글자 색

+ html 의 font태그와 비슷한 역할 하고 있다, css를 쓰면 한꺼번에 효과 낼 수 있다

+ /* */ 이 주석, 주석 해제는 잘 안됨
+ Ctrl + Shift + / : 주석 처리

CSS 예제2

- css02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 선택자가 컴마(,)로 분리되어 있으면 모두(h2,p) 동일한 CSS의 적용을 받는다.-->
<style type="text/css">
h2, p {
	font-family: "arial black";
	font-size: 18pt;
	color: gold;
}
</style>
</head>
<body bgcolor="#990099">
	<center>
		<h2>
			css에 대한 예제
			<hr>
		</h2>
		<h2>The &nbsp;&nbsp; Fun &nbsp;&nbsp; Corner</h2>
		<br>
		<p>The &nbsp;&nbsp; Street &nbsp;&nbsp; Fair</p>
	</center>
</body>
</html>

- 선택자두개가 , 로 연결되어있다 (순서 무관)
- h2태그와 p태그가 , 로 연결

-> h2태그, p태그 모두 동일한 css 적용

- 중괄호 열고 적용할 속성 쓰기

- 이 h2태그에 대해 css가 적용되어서 컬러 gold, 18pt ,글꼴 arial black으로 나타남

- 모든 내용은 <center> 안에 들어가있으므로 가운데 배치됨

-   : 추가한 것과 비례해서 공백이 벌어짐, 소문자여야만 함

배경색

<body bgcolor="#990099">
</body>

- body 태그 안에서 html 속성으로 배경색 적용

CSS 예제3

- css03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type=text/css>
h3 {
	color: #ff1aff
}
h5 {
	color: skyblue
}
h5 em {		/* h5(부모) em(자식) */
	color: white
}
</style>
</head>
<body bgcolor="blue">
	<h3>
		개봉 앞둔 애니메이션 <em>"포켓몬 3“</em>
	</h3>
	<hr>
	<h5>
		애니메이션 영화<em>“포켓몬 3”</em>의 홍보 인쇄물에 등장한 애쉬, 피카추 그리고 미스티의 모습입니다
	</h5>
</body>
</html>

- h5와 em 사이가 , 가 아니라 띄어쓰기가 되어있다 -> 의미가 달라짐

h5 em {		/* h5(부모) em(자식) */
	color: white
}

- h5가 부모태그, em태그가 자식 태그
- 바깥쪽에 감싸주는 태그가 부모태그고 안에 있는게 자식 태그 이다
- 지금처럼 띄어쓰기가 있는경우에는 h5가 바깥쪽에 있는 em 태그만 컬러값을 white로 적용시켜라는 의미임
- h3안의 em 태그의 내용은 white가 적용되지 않는다

CSS 예제4

- css04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!--  
점(.)으로 된 선택자를 불러올때는 class 속성으로 불러와야 된다.
ex) <h1 class=java>
    <h1 class=script>
-->
<style type="text/css">
.java {
	color: pink
}
.script {
	color: skyblue
}
</style>
</head>
<body bgcolor="black" text="white">
	<h3>css의 클래스 정의를 이용한 예제입니다</h3>
	<h4 class=java>태그에 상관없이</h4>
	<h4 class=script>class 속성으로 태그이름을 설정할 수 있습니다</h4>
	<h2 class=java>태그에 상관없이</h2>
	<h2 class=script>원하는 부분에 스타일을 적용합니다</h2>
</body>
</html>

- 선택자가 .java처럼 .으로 되어있다

- .(점) 으로 선택자 지정해서 css적용할때는 클래스 속성으로(class=) 불러야함
- 특정 태그들만 선택하여 적용했던 이전의 코드들과 다르게 한가지 태그가 아니라 .java가 적용된 태그는 모두 적용 가능하다
- 적용하고자 하는 body 태그 안의 모든 태그에 모두 적용 가능

+ 부트스트랩에선 대부분 . 으로 선택자들이 만들어져 있으므로 적용할때 class속성으로 적용해야한다.

- h3 태그는 적용이 안되어있다, 설정하지 않음
- h4 태그는 .java라는 선택자를 class=java로 불러오면 글자색이 pink로 나타남
- .script로 된것을 적용하기 위해선 class=script 로 불러온다

CSS 예제5

- css05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 
샵(#)으로 된 선택자를 불러올때는 id속성으로 불러와야 된다.
ex)  <h1 id=pinkstyle>
     <h1 id=skybluesty>
 -->
<style type="text/css">
#pinkstyle {
	color: pink
}
#skybluesty {
	color: skyblue
}
</style>
</head>
<body bgcolor="blue" text="white">
	<h4 id=pinkstyle>태그에 상관없이</h4>
	<h4 id=skybluesty>class속성으로 태그이름을 설정할 수 있습니다</h4>
	<h2 id=pinkstyle>태그에 상관없이</h2>
	<h2 id=skybluesty>원하는 부분에 스타일을 적용합니다</h2>
</body>
</html>

- CSS 범용적으로 적용하는 방법 2가지 (.으로 설정 , #으로 설정) 가 있다

- 그 중 # id 속성으로 적용하고 있다

- 선택자가 # (id 속성) 으로 만들어지는 경우가 가장 많다

CSS 범용적으로 적용하는 법 (선택자)

- . 으로 선택자 지정 : 클래스 속성 (class = ) 으로 해당 선택자를 불러서 CSS를 적용해야한다
- #으로 선택자 지정 : 아이디 속성 (id = ) 으로 해당 선택자를 불러서 CSS를 적용해야 한다

CSS와 Javascript에서의 id속성

- JS에서 설정하는 id 속성 와 CSS의 id 속성은 다르다

1. CSS에선 id는 css적용하기 위한 목적으로 사용한다.

	<h4 id=pinkstyle>태그에 상관없이</h4>
	<h4 id=skybluesty>class속성으로 태그이름을 설정할 수 있습니다</h4>

- 여기서의 id는 CSS를 적용시키기 위한 id값이다

- # 으로 된 선택자의 CSS가 선택됨

2. Javascript 에선 id 태그는 동일태그가 여러개 있을때 태그들을 구분하기 위한 역할을 한다

		<th>주소</th>
		<td><input type=text size=70 name="address" id="address">
		</td>

- input 태그가 여러개 있으므로 이 태그들을 구분하기 위한 태그가 id 이다

- input태그를 구해와서 사용자가 id값 입력했는지 유효성검사를 할때 input을 구분하기 위한 역할로 id값을 다르게 설정한다

+ 부트스트랩

- CSS 프레임워크

- 대부분은.(점) 으로 선택자가 지정되어있다, 클래스 속성으로 적용해야한다

CSS 사용 방법

1. <head></head> 태그 안에 <style></style> 태그를 추가, <body></body> 에 적용됨 = 내장형 방식, 여태까지 했다

2. CSS를 외부 파일로 만들고 link 태그로 불러온다

- 확장자를 .css 파일로 만든다

+ 부트스트랩도 .css 파일로 되어있다, 서버에 올라가 있는것을 cdn방식으로 다운받아 사용함

- 딱 CSS 코드만 들어간다

- 단독으로는 아무 효과가 없고 불러와서 사용함

- link 태그로 불러온다

- 한번 만들어진 css 파일을 여러 html 파일에 적용 가능

CSS 외부파일 불러오기 예제

- style.css

p{ color : pink ;
   font-size : 20pt ;
   font-weight : bold ;
  }

- call.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 css파일 불러오기</title>

<!-- 2. 외부 css파일 불러오기 -->
<link rel=stylesheet type=text/css href=style.css>
</head>
<body bgcolor="purple" text="white">
	<h3>외부 파일에 정의한 스타일을 적용</h3>
	<hr>
	<p>글자색은 핑크색, 글자 크기는 20pt, 글자의 속성은 bold로 지정한 스타일이 적용됩니다</p>
</body>
</html>

- html 파일의 <head> 태그안에서 <link> 태그로 불러온다

- href = 불러올 파일 을 쓴다

- 상대경로나 절대경로로 불러올 파일의 경로를 잡아줘야한다.

- link로 외부파일 .css를 불러오면 이 파일의 <body> 태그 안에서 불러온 CSS가 적용된다

- body 태그 안에 white 속성이 있으므로 기본 색상은 white 로 나온다

- p 태그에는 css가 적용되어서 글자색이 pink 이다

+ <head> 태그 안에 주로 들어가는 내용

- <meta> 태그

- <title> 태그

- <style> 태그

- <link 태그

ex) 네이버에서 외부파일 불러오는거 소스 코드 일부

<link rel="stylesheet" href="https://pm.pstatic.net/dist/css/nmain.20220720.css"> <link rel="stylesheet" href="https://ssl.pstatic.net/sstatic/search/pc/css/sp_autocomplete_220526.css">

- css 파일들이 임시폴더에 이미 다운로드 받아져있다

- 이 파일들은 서버에 올라가있다, cdn 방식이라고 한다

- 한번 만들어진 css 파일을 여러 html 파일에 적용 가능 (동일 컨셉)

CSS 사용 방법

1. <head></head> 태그 안에 <style></style> 태그를 추가, <body></body> 에 적용됨 = 내장형 방식, 여태까지 했다

2. CSS를 외부 파일로 만들고 link 태그로 불러온다

3. 특정 태그 1개에 대해서 style= 로 CSS 를 적용하는 방식

- 인라인 방식

- 지금까지는 동일 태그들은 모두 한꺼번에 적용되었따

- 특정 원하는 태그 1개에만 CSS를 적용하는 방식

인라인 방식 예제

- div1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE>범위 안에서 스타일 지정</TITLE>
</HEAD>

<!-- 3. 인라인 방식
1) 특정 태그 1개에 대해서 	CSS를 적용하는 방식이다.
2) 인라인 방식의 형식은 특정 태그에 style="속성:속성값" 형식으로 CSS를 적용한다.
   ex) <div style="color : red">
 -->
<BODY BGCOLOR="white">
	<CENTER>
		<H1>
			<SPAN STYLE="font-style: italic">범위 안에서</SPAN> 스타일 지정
			<DIV STYLE="color: red">범위 안에서 스타일 지정</DIV>
		</H1>
	</CENTER>
</BODY>
</HTML>

- 특정 태그 안에 style = 을 쓰고 " " 안에 속성 : 값 을 나열한다

- <span> 이란 1개의 특정 태그에 대해서만 css를 적용시키고 있다. style="font-style : italic"

- <div> 이란 1개의 특정 태그에 대해서만 css를 적용시키고 있다. style="color : red"

+ h1 태그로 감싸져있으므로 안의 내용이 크고 굵게 출력됨

+ center 태그 안에 작성되었으므로 가운데 정렬됨

+ 배경색은 white 이다

CSS 사용 방법 정리

1. <head></head> 태그 안에 <style></style> 태그를 추가, <body></body> 에 적용됨 = 내장형 방식, 여태까지 했다

2. CSS를 외부 파일로 만들고 link 태그로 불러온다

3. 특정 태그 1개에 대해서 style= 로 CSS 를 적용하는 방식

CSS 사용 방법 응용 예제 1

- div2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE>범위 안에서 스타일 지정</TITLE>
<STYLE TYPE="text/css">
DIV.color {
	color: tomato
}
.style {
	font-style: italic
}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
	<CENTER>
		<h2 class="color">css 적용하기</h2>
		<H1>
			<DIV class="color">
				전체 범위 안에서 색 지정<BR> <SPAN class="style">범위 안에서 이탤릭으로 지정</SPAN>
			</DIV>
		</H1>
	</CENTER>
</BODY>
</HTML>

- . 으로 된 선택자는 class 속성으로 불러오면 해당 css가 적용됨

DIV.color와 .style의 선택자의 차이

공통점 : class 속성으로 불러와야한다

차이점 : 의미가 다르다

1. DIV.color 선택자 처럼 앞에 태그명이 오는 경우

- 아무 태그나 적용되지 않는다

- h2태그에서 class="color"를 부르면 적용 안됨

- DIV 태그에서 class="color'를 부르는 경우에만 적용된다

- 선택의 폭이 좁아짐

2. .style 로 앞에 태그명이 안오는 경우

- 아무 태그나 class 속성을 적용하면 이 스타일이 적용되면서 italic 적용

- h2 태그에서 class="color" 로 .color 선택자를 불러오더라도 적용이 되지 않고 토마토색이 아닌 검은색으로 출력됨

- DIV 태그에서 class="color" 로 .color 선택자를 불러와야만 CSS가 적용이 된다, 토마토 색으로 출력된다

CSS 사용 방법 응용 예제 2 / text-decoration 속성 예제1

decoration.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE>링크되는 부분의 밑줄 없애기</TITLE>
<STYLE TYPE="text/css">
	A:link {text-decoration: none}
	A:hover {text-decoration: underline}
	A:visited {	text-decoration: none}
</STYLE>
</HEAD>
<BODY BGCOLOR="white">
	<CENTER>
		<BR> <A HREF="http://www.yahoo.com">메인 페이지로 이동합니다.</A>
	</CENTER>
</BODY>
</HTML>

- 하이퍼링크 anchor 태그로 링크가 걸리면 밑줄이 자동으로 나타난다

- 밑줄 여부를 제어할때 사용하는게 text-decoration 속성이다

- anchor 태그의 4가지 상태에 따라 나눠서 세부적인 CSS를 다르게 적용할 수 있다

ex) A:Link : anchor 태그의 상태 중 Link 상태일때 적용

- : 을 찍고 상태를 적어서 서로 다른 CSS를 적용시킴

위 예제 설명

1. 코드에서 link 상태일때 : none

2. 코드에서 hover 상태일때 : underline

3. 코드에서 visited 상태일때 : none

text-decoration 속성

- none : 선을 그리지 않음

- underline : 텍스트 밑에 선을 그려줌

- line-through : 텍스트 가운데 취소선을 그려줌

- overline : 텍스트 위에 선을 그려줌

+ 주로 anchor 태그에 적용을 많이 시킨다

anchor 태그의 4가지 상태

1. link 상태

- 기본으로 링크가 걸려있을때

- A : link { 속성 : 속성값 } 으로 적용

2. active 상태

- 링크가 걸린 라인을 마우스 왼버튼으로 "누르고" 있는 상태

- A : active { 속성 : 속성값 } 으로 적용

3. hover상태

- 누르진 않고 마우스 포인터가 올라간 상태 (손모양)

- A : hover{ 속성 : 속성값 } 으로 적용

4. visited 상태

- 한번 방문하고 돌아왔을때

- A : visited { 속성 : 속성값 } 으로 적용

text-decoration 속성 예제2

- textdecoration.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE> 텍스트에 선 그려주기 </TITLE> 
</HEAD>
<BODY BGCOLOR="white">
   <H2> 텍스트에 선 그려주기 </H2>
   <P STYLE="text-decoration: none"> 선을 그려주지 않습니다 </P>
   <P STYLE="text-decoration: underline"> 텍스트 밑에 선을 그려줍니다 </P>
   <P STYLE="text-decoration: line-through"> 텍스트 가운데 취소선을 그려줍니다 </P>
   <P STYLE="text-decoration: overline"> 텍스트 위에 선을 그려줍니다 </P>
   <P STYLE="text-decoration: underline overline"> 텍스트에 밑과 위 모두 선을 그려줍니다 </P>
</BODY>
</HTML>

- 인라인 방식을 사용하고 있다

정리

- text-decoration 속성 : 하이퍼링크 밑줄 여부 제어

교재 학습

+ HTML/source/chapter_5, chapter_6, chapter_7 이 CSS 관련 내용이다

선택자

- HTML/source/chapter_5 설명할 것

- * : 모든 태그에 대해 선택하라

- . : class 속성으로 불러오기

- # : id 속성을 ㅗ불러오기

- 태그 : 그 태그 모두에게 적용하기

- 선택자 선택자 : 왼쪽이 부모, 오른쪽이 자식, 후손 태그가 된다

- 부등호기호가 있는 선택자가 있다, 선택자 사이 띄어쓰기 한것과 다름

- 상태 선택자 알아두자

- + 나 ~ 선택자 알아두가

- link, visited 했었다

이런 내용들을 예제를 통해서 공부할 것

선택자 예제1

- selector_basic.html

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Selector Basic</title>
  <meta charset=utf-8>
  <style>
    h1 {
      color: red;
      background-color: orange;
    }
  </style>
</head>
<body>
  <h1>CSS3 선택자 기본</h1>
</body>
</html>

- 내장형 방식, <body>태그에 적용

- <body> 태그안의 모든 <h1> 태그는 css의 적용을 받는다

- 전체 배경색이 아닌 h1태그에만 적용됨

- 전체 배경색을 적용하려면 body 태그안에 bgcolor 작성

선택자 예제2

- default_wildcard.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        * { color: red; }
    </style>
</head>
<body>
    <h1>제목 글자 태그</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
</body>
</html>

- 선택자 자리에 * 가 온다

- 모든 태그, 즉 all tags 에 적용

- <body> 태그 안의 모든 태그들에 CSS 가 적용되어 red 로 나타나고 있다

선택자 예제3

- default_tag.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        h1 { color: red; }
        p  { color: blue; }
    </style>
</head>
<body>
    <h1>제목 글자</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
    <p>Etiam lacus felis, ornare non lobortis ac, vehicula non diam. Integer pellentesque neque eget eros pulvinar pharetra. Maecenas gravida mi dui, at sollicitudin justo. Vestibulum pretium lacus lobortis arcu egestas dapibus. Sed nunc dui, adipiscing vitae mattis in, accumsan in neque. Sed pellentesque leo quis lorem posuere consequat. Duis sapien risus, rutrum ut ullamcorper et, accumsan a lorem. Ut metus est, varius eget molestie vitae, rutrum vitae ante. Quisque eu quam leo, et hendrerit lorem. Nullam nec risus sapien. Phasellus ut mauris eget justo mollis dictum. Nullam consectetur nibh at sem luctus mollis.</p>
</body>
</html>

- 모든 h1 태그에 대해 color : red 적용되었다

- 모든 p 태그에 대해 color : blue 적용되었다

선택자 예제3

- default_id.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        #header {
            width: 800px; margin: 0 auto;
            background: red;
        }
        #wrap {
            width: 800px; margin: 0 auto;
            overflow: hidden;
        }
        #aside {
            width: 200px; float: left;
            background: blue;
        }
        #content {
            width: 600px; float: left;
            background: green;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>#header 태그</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h1>#aside 태그</h1>
        </div>
        <div id="content">
            <h1>#content 태그</h1>
        </div>
    </div>
</body>
</html>

- #으로 선택자가 지정되어있고, 불러올 때는 id 속성으로 불러와서 적용한다

- #header, #wrap, #aside 등 # 의 css 사용 -> id 속성으로 불러온다

- 시맨틱 태그인 header 태그 를 이용해도 되고 , div 태그를 사용해도 된다

- div는 박스를 만들어줌

- div는 자체적으로는 아무 기능이 없다

- #aside와 #content가 둘 다 float : left 지만 aside가 먼저 나왔으므로 왼쪽 정렬되고 다음에 content가 붙어서 정렬된다

속성

- width : 가로길이 값 속성

- margin : 0 auto -> 가운데 배치시켜줌

- overflow : 내용이 많아서 크기를 넘치게되면 hidden으로 보이지 않게 만들고있다

- float : 특정 div를 왼쪽에 배치할땐 left, 오른쪽에 배치할땐 right

- background : 배경색

+ 2-layout.html 잠깐보기

- 주로 #으로 되어있다, #을 많이 사용함

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>2단 레이아웃</title>
    	<style>
		div {
			border: 1px solid #ccc; /* 모든 영역에 테두리 표시 */
		}
		#container {
			width:960px; /* 컨테이너 너비 */
			padding:20px; /* 패딩 */			
			margin:0 auto;  /* 화면 중앙에 배치 */
		}
		#header {
			padding:20px;  /* 패딩 */
			margin-bottom:20px;  /* 아래 요소들과의 간격(마진) */
		}
		#contents {
			width: 620px;  /* 너비 */
			padding: 20px;  /* 패딩 */
			float: left;  /* 왼쪽으로 플로팅 */
			margin-bottom: 20px;  /* 아래 요소와의 간격 */
		}
		#sidebar {
			width: 220px;  /* 너비 */
			padding: 20px;  /* 패딩 */
			float: right;  /* 오른쪽으로 플로팅 */
			margin-bottom: 20px;  /* 아래 요소와의 간격 */
			background:#eee;
		}
		#footer {
			clear:both;  /* 양쪽 플로팅 해제 */
			padding:20px;  /* 패딩 */
		}
	</style>
</head>
<body>
    <div id="container">
        <div id="header">
			<h1>사이트 제목</h1>
		</div>
		<div id="sidebar">
			<h2>사이드 바</h2>
            <ul>
                <li>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>

            </ul>
		</div>
		<div id="contents">
			<h2>본문</h2>
            <p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>

            <p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
		</div>
		<div id="footer">
			<h2>푸터</h2>
            <p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
		</div>
    </div>
</body>
</html>

선택자 예제4

- default_class.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        .select { color: red; }
    </style>
</head>
<body>
    <ul>
        <li class="select">사과</li>
        <li>바나나</li>
        <li class="select">오렌지</li>
        <li>감</li>
    </ul>
</body>
</html>

- . 으로 된 선택자를 사용하고 있고, class 속성으로 불러오고 있다

- bootstrap에서 주로 . 으로 된 선택자를 사용하고 있다, class 속성으로 불러와야한다

선택자 예제5

- . 을 2개를 적용하려 한다면?

- default_multiClass.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        .item { color: red; }
        .header { background-color: blue; }
    </style>
</head>
<body>
    <h1 class="item header">동해물과 백두산이</h1>
</body>
</html>

- 두개의 선택자를 동시에 적용하고 있다

- .item 과 .header를 모두 적용하려 한다면 태그에서 class="item header" 로 써주면 두 가지가 다 적용됨

- 즉 color : red 와 background-color : blue 가 모두 적용됨

선택자 예제5

- <input type=> 같은 태그에 css 적용시키려면 구분이 필요하다, id값이나 class값이 필요하다

- attribute_basic.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        input[type="text"] { background: red; }
        input[type="password"] { background: blue; }
    </style>
</head>
<body>
    <form>
        <input type="text" />
        <input type="password" />
    </form>
</body>
</html>

- input[type="text"] : input type= 이 text인 "모든" 태그들을 불러와라는 의미 -> background : red

- input[type="password"] : input type= 이 password인 "모든" 태그들을 불러와라는 의미 -> background : blue

- type 이 있는 태그에서 특정 양식을 불러올때 사용되는 선택자다

후손 태그

- 부모태그, 자손태그(자식태그), 후손태그 가 있다

- 자식태그는 바로 아래의 태그들만 의미함

- 자식도 후손 태그에 포함됨

- 상속관계와는 관계 없다

선택자와 자식/후손태그

- 선택자A 선택자B : 왼쪽의 선택자 A태그가 부모태그가 되고, 오른쪽의 선택자 B태그가 후손태그 의미

- (자식태그 or 후손태그) 다 된다

- 만약 부등호기호(화살표)가 있을땐 자식태그만을 의미

자식태그와 후손태그 구분

선택자 예제6

후손 선택자/자손 선택자 예제1

- desc_decendants.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        #header h1  { color: red; }
        #section h1 { color: orange; }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
    </div>
</body>
</html>

선택자

- #header h1 : 띄어쓰기가 되어있다, 왼쪽인 #header로 불러오는 태그가 부모태그이고 오른쪽인 h1 태그가 후손태그이다

- 바로 아래쪽인 자식태그인 h1태그 Lorem ipsum 에만 적용되는 것이 아니라 Navigation 인 손자태그(후손태그) 에도 적용된다

- 즉, #header를 통해 불러진 태그가 부모태그고 그 태그 안의 모든 h1에 css color : red가 적용된다

- 바로 아래쪽의 자식 Lorem ipsum 에게만 적용하고 싶다면 선택자로 #header>h1을 사용해야한다

- #section h1의 경우에도 마찬가지이다

선택자 예제7

후손 선택자/자손 선택자 예제2

- desc_children.html

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Selector Basic</title>
	<style>
		#header > h1 { color: red; }
		#section > h1 { color: orange; }
	</style>
</head>
<body>
	<div id="header">
		<h1 class="title">Lorem ipsum</h1>
		<div id="nav">
			<h1>Navigation</h1>
		</div>
	</div>
	<div id="section">
		<h1 class="title">Lorem ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</body>
</html>

- 선택자A > 선택자B 에서 왼쪽이 부모태그, 오른쪽이 자식태그 가 된다.

- #header > h1 이면 #header를 부르는 태그가 부모태그, 그 태그 안의 h1태그가 자식 태그가 된다.

- > 를 쓰면 후손이 아닌 바로 아래쪽의 자식 태그들에게만 적용되고 자식을 제외한 후손에게는 적용되지 않는다.

- #header 안의 자식태그인 h1태그의 Lorem ipsum 에만 color : red가 적용되고, 자식이 아닌 후손태그인 Navigation에는 color : red가 적용되지 않는다.

- #section > h1 의 경우에도 마찬가지이다.

후손선택자 자손선택자 정리

부모 후손 : 공백 사용, 후손(자식태그 + 자식이 아닌 후손태그)

부모>자식 : > 사용, 자식 태그만 적용

후손 선택자/자손 선택자 예제3

- desc_tableWithChildren.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        table > tr > th {
            color: red;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>지역</th>
        </tr>
        <tr>
            <td>윤인성</td>
            <td>서울특별시 강서구 내발산동</td>
        </tr>
    </table>
</body>
</html>

- 자손 선택자 > 를 3단으로 사용하고 있다.

- 출력시 빨간색 글자가 적용되지 않는다!

- 개발자 도구에 가서 이유를 확인하자

개발자 도구 들어가는법

- 단축키 F12

- 또는 도구 더보기 - 개발자 도구

코드 구조

- 작성시에는 작성하지 않았지만 자동으로 tbody 태그가 오기때문에 table > tbody > tr > th 로 해야 적용됨

수정한 코드

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        table > tbody > tr > th {
            color: red;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>지역</th>
        </tr>
        <tr>
            <td>윤인성</td>
            <td>서울특별시 강서구 내발산동</td>
        </tr>
    </table>
</body>
</html>

- 잘 출력되고 있다

- 이런 것들에 유의하자, 개발자 도구에서 확인 가능

반응 선택자

- 주로 anchor 택에 적용시키지만 다른 태그에도 적용 가능

- h1:hover 하면 h1태그 해당 하는 곳에 마우스를 올려둔 상태일때 의미

반응 선택자 예제

- etc_action.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        h1:hover { color: red; }
        h1:active { color: blue; }
    </style>
</head>
<body>
    <h1>반응 선택자</h1>
</body>
</html>

원래 상태

hover 상태

- 마우스를 올리고 있는 상태

- ( 마우스 오버 이벤트 ) <-> ( 마우스 아웃 이벤트 )

active 상태

- 마우스 왼쪽으로 누르고 있는 상태

상태 선택자

- 상태를 의미하는 선택자들

- :checked : 체크박스등에서 체크가 되어있는 상태

- :focus : focus가 들어간 상태

- :enabled : 사용 가능한 상태

- :disabled :사용 불가능한 상태

이 상황이 되면 이 상황에 맞는 효과가 나타남

상태 선택자 예제

- etc_state.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* input 태그가 사용 가능할 경우에
           background-color 속성에 white 키워드를 적용합니다. */
        input:enabled { background-color: white; }

        /* input 태그가 사용 불가능할 경우에
           background-color 속성에 gray 키워드를 적용합니다. */
        input:disabled { background-color: gray; }

        /* input 태그에 초점이 맞추어진 경우에
           background-color 속성에 orange 키워드를 적용합니다. */
        input:focus { background-color: orange; }
    </style>
</head>
<body>
    <h2>사용 가능</h2>
    <input />
    <h2>사용 불가능</h2>
    <input disabled="disabled"/>
</body>
</html>

+ type=text는 기본값이라 생략 가능하다

+ 텍스트 박스 비활성화 시키는 방법 2가지 : readonly / disabled , 현재는 disabled 속성 -> 수정 변경 불가

- 사용 가능한 경우는 background-color : white 를 적용하고

- 이렇게 사용 불가능할때 background-color : gray 를 적용한다

- enabled 상태 (기본적인 상태, 위)

- disabled 상태 (아래)

- focus 상태일 때 (위)

구조 선택자

- 몇번째 자식인지 선택

CSS 단위

- 크기를 표현하는 여러 단위들이 있다

- 상대적인 단위도 있고 절대적인 단위도 있다

스타일 시트에서 사용되는 단위

1. 절대적인 단위

- in 인치 (1 inch = 2.54 cm)

- cm 센티미터

- mm 밀리미터

- pt 포인터 (1 point = 1/72 inch)

- pc 파카스 (1 picas = 12 포인터)

2. 상대적인 단위

- em : 폰트의 높이를 측정하기 위한 단위로 영문 대문자 M을 기준으로 함. 이 M의 길이가 1em

- ex : 폰트 높이의 반을 측정하는 것으로 영문 소문자 x가 기준임

- px : 1픽셀을 1로 하는 단위 (width height에서 단위 생략 시 기본 단위)

- % : 기준이 되는 크기에 대한 상대적인 비율

+ %단위는 기준이 되는 값에서 몇 % 크기인지 설정함, ex) 100% 150% 200%

색상 단위

ex) HEX 코드 #ff0000 : red

ex) RGB 색상 rgb(255, 0, 0) : red

- 주로 HEX 코드 형태를 많이 쓴다.

- RGBA 에서 A는 알파를 의미하고 알파값은 투명도를 의미한다.

- 0 은 완전 투명, 1은 완전 불투명이다.

글자 색상 red 적용하는 방법 예제

    <style> /* 전부 같다 */
/*         h1:hover { color: red; } */
/*         h1:hover { color: #ff0000; } */
        h1:hover { color: rgb(255,0,0); }
    </style>

+ 색상 코드는 rgb 색상표를 검색하면 쉽게 찾을 수 있다

CSS의 속성

- HTML/source/chapter_6 설명할 것

- div 태그로 박스를 만든다, div 태그 자체는 아무 기능이 없음

- 그 div 태그에 css 속성을 추가하면 다양한 형태, 모양을 만들 수 있다

박스(div)의 속성

- border : 테두리 설정 속성

- margin : 테두리와 바깥쪽의 내용사이 간격

- padding : 테두리와 내용사이 간격

div 태그 속성 예제1

- box_withHeight.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Property Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

- 아래 div 태그만으로는 아무 역할을 하지 못하지만 css가 적용되면 다양한 모양이 됨

- 박스(공간) 을 정사각형 모양으로 출력 ( 가로 100px, 세로 100px )

- 배경색은 red

- 이 영역이 div 영역이다

div 태그 속성 예제2

- margin / padding 속성 관련

- box_marginPadding.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Property Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
 
            border: 20px solid black;
            margin: 10px; padding: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

- 한꺼번에 적용할땐 나열한다 ex) border : 20px solid black; -> 테두리를 20px, 실선, 검정색으로 설정하라

- margin은 테두리와 다른 영역사이 간격

- padding은 테두리와 내용 사이 간격

- margin과 padding을 바꿔보자

- margin : 10px -> margin : 100px

- div 내부에 내용 작성하기

<!DOCTYPE html>
<html>
<head>
    <title>CSS Property Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;
 
            border: 20px solid black;
            margin: 100px; padding: 30px;
        }
    </style>
</head>
<body>
    <div>박스만들기</div>
</body>
</html>

- padding은 좌측 상단을 기준이다.

margin과 padding의 세분화

- 왼쪽에 떨어진 간격, 위에서 떨어진 간격 등

- 이렇게 세분화하여 4가지씩으로 나눠서 속성을 적용할 수 있다

네 방향 속성 지정하기

- 또한 margin 과 padding을 한번씩 쓰는데 4가지 값을 쓸 수 있다

- 순서는 시계방향

네 방향 속성 지정하기 예제

- box_marginPaddingEachFour.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Property Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;

            /* margin: 위 오른쪽 아래 왼쪽 */
            /* padding: 위 오른쪽 아래 왼쪽 */
            margin: 0 30px 0 30px;
            padding: 0 30px 0 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

두 방향 속성 지정하기

- 또한 margin 과 padding을 한번씩 쓰는데 2가지 값을 쓸 수 있다

- 순서는 위아래 왼오

두 방향 속성 지정하기 예제

- box_marginPaddingEachTwo.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Property Basic</title>
    <style>
        div {
            width: 100px; height: 100px;
            background-color: red;

            /* margin: 위아래 왼쪽오른쪽 */
            /* padding: 위아래 왼쪽오른쪽 */
            margin: 0 30px; padding: 0 30px;
        }
    </style>
</head>
<body>
    <div>박스만들기</div>
</body>
</html>

border 속성

1. 여러 속성을 따로 지정할 수도 있고

2. 한꺼번에 값들을 나열해서 속성을 적용할 수 있다

border 속성 예제1

- border_basic.html

1. border_width, border-style, border-color 처럼 따로 속성을 지정하는 방법

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box {
            border-width: thick;
            border-style: dashed;
            border-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

- border-width : thick = 두꺼운 선

- border-style : dashed = 점선

- border-color : black = 검정선

- 이렇게 따로 속성을 다 써서 적용시키고 있다

border 속성 예제2

2. border를 한번만 쓰고 한꺼번에 적용하는 방법

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box {
/*             border-width: thick;
            border-style: dashed;
            border-color: black; */
            border : thick dashed black;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

- 같은 결과를 출력

+ 또한 border-top, border-bottom, border-left, border-right 처럼 세분화해서 적용할 수도 있다

+ 2-layout.html에서 전체가 div로 만들어져있고 div안에 div가 여러개 들어가있다

+ 컬러코드 #ccc = #cccccc 같은게 2개 반복될때는 1개로 쓰기도 한다 cc->c

둥근 테두리 만들기

- border-radius : 모서리 완만하게 만드는 속성, 이 값이 클수록 원에 가까운 형태가 됨

둥근 테두리 만들기 예제1

- border_radius.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Property Basic</title>
    <style>
        .box {
            border-width: thick;
            border-style: dashed;
            border-color: black;

            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Lorem ipsum dolor amet</h1>
    </div>
</body>
</html>

- border-radius 값을 40으로 수정

- border-radius 값이 클수록 원에 가까워짐, 더욱 완만해짐

- border-radius만 쓰면 4개의 모서리에 대해 똑같이 적용된다.

4개의 모서리별로 따로 둥글기 설정 예제

- 4개의 모서리 별로 따로 적용하는 것도 가능하다

- border_radiusEach.html

- 그림 참고

div 태그의 display 속성

- 박스를 여러개 만들었을때 가로방향으로 배치할건지 세로방향으로 배치할 건지 등을 설정

- display : none : 화면에 박스가 나타나지 않음

- display : block : 위에서부터 아래쪽으로 배치

- display : inline : 왼쪽에서 오른쪽으로 배치

- display : inline-block : 인라인과 비슷하게 가로 방향으로 배치

div 태그의 display 속성 예제1

- display_none.html

<!DOCTYPE html>
<html>
<head>
    <title>Display</title>
    <style>
        #box {
            display: none;
        }
    </style>
</head>
<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>
</html>

- #으로 된 선택자는 id= 속성으로 적용하고 있다

- display : none이라서 div의 테두리를 만들지 않음, 박스 자체가 없기때문에 출력이 되지 않고 있다

- 두 "더미 객체" 사이에 들어가야할 div태그 안의 내용을 화면에 보이지 않는다

div 태그의 display 속성 예제2

- display_block.html

<!DOCTYPE html>
<html>
<head>
    <title>Display</title>
    <style>
        #box {
            display: block;
        }
    </style>
</head>
<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>
</html>

- display : block; 된 박스(div)는 위에서부터 아래쪽 방향으로 출력된다

- 가장 많이 쓰는 형태

div 태그의 display 속성 예제3

- display_inline.html

<!DOCTYPE html>
<html>
<head>
    <title>Display</title>
    <style>
        #box {
            display: inline;
        }
    </style>
</head>
<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>
</html>

- display : inline; 된 박스(div)는 왼쪽부터 오른쪽 방향으로 배치가 됨

div 태그의 display 속성 예제4

- display_inline-block.html

<!DOCTYPE html>
<html>
<head>
    <title>Display</title>
    <style>
        #box {
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>더미 객체</span>
    <div id="box">대상 객체</div>
    <span>더미 객체</span>
</body>
</html>

- inline-block도 inline 과 비슷하게 같은 방향으로 출력되고 있다

- inline-block도 왼쪽에서 오른쪽 방향으로 출력

inline과 inline-block의 차이

+ inline-block은 inline의 단점을 보완한다

- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능

'국비지원 과정 > 웹표준' 카테고리의 다른 글

코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0)	2022.08.19
코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0)	2022.08.12
코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0)	2022.08.11
코딩 37일 / 2022.08.10 / 부트스트랩2,아파치 톰캣에 배포,자바스크립트 기초,내장함수1 (0)	2022.08.10
코딩 36일 / 2022.08.09 / CSS 속성2,레이아웃,배치,반응형 웹,부트스트랩1 (0)	2022.08.09

2022.08.04 / 과제1번 : HTML 파일에서 사진과 같은 모양으로 테이블 출력하기

2022. 8. 4. 17:32

과제
2022.08.04/ Hw1

다음과 같은 모양으로 출력하는 html파일을 작성하세요

의도

HTML 작성

테이블 작성

colspan 사용

rowspan 사용

깃허브

https://github.com/kindacool/Hw/blob/main/HW20220804/20220804_hw1.html

GitHub - kindacool/Hw

Contribute to kindacool/Hw development by creating an account on GitHub.

github.com

코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2022.08.04_hw1</title>
</head>
<body>

<table border=1 width=600 height=300 align=center			 
							bgcolor=yellow
							cellspacing=5
							cellpadding=5>
<caption>표 연 습</caption>
<tr>
	<th rowspan=4>신<br>청<br>내<br>역</th>
	<th colspan=2>청소년</th>
	<th colspan=2>노인</th>
	<th rowspan=2>비고</th>
</tr>
<tr align=center>
	<td>남자</td>
	<td>여자</td>
	<td>남자</td>
	<td>여자</td>
</tr>
<tr align=center>
	<td>10</td>
	<td>50</td>
	<td>60</td>
	<td>80</td>
	<td rowspan=2></td>
</tr>
<tr align=center>
	<td>80</td>
	<td>60</td>
	<td>68</td>
	<td>78</td>
</tr>
</table>

</body>
</html>

출력

'국비지원 과정 > HW' 카테고리의 다른 글

2022.08.12 / 과제1번 : Javascript 로 중복없는 난수 발생 후 오름차순 정렬하기 (0)	2022.08.12
2022.08.11 / 과제1번 : HTML 테이블 태그를 사용하여 Javascript 구구단 출력하기 (0)	2022.08.11
2022.08.01 / 과제1번 : 사원명을 검색하여 사원의 직급을 구해오는 저장 프로시저를 만들어서 실행 (0)	2022.08.01
2022.07.25 / 과제3번 : 다중행 서브쿼리2 (직급이 'SALESMAN'인 사원이 받는 급여들의 최소 급여보다 많이 받는 사원들의 이름과 급여) (0)	2022.07.25
2022.07.25 / 과제2번 : 다중행 서브쿼리1 (직급이 'SALESMAN'인 사원이 받는 급여들의 최대 급여보다 많이 받는 사원들의 이름과 급여) (0)	2022.07.25

SQL 코딩 연습 / 네번째 시험문제

2022. 8. 3. 15:16

서브쿼리 문제

사원 테이블(EMP)에서 SCOTT의 급여보다 적게 받는 사원의 이름, 급여를 출력하는 SQL문을 작성하시오

select ename, sal from emp where sal < (select sal from emp where ename = 'SCOTT');

그룹화, 그룹함수

사원 테이블(EMP)에서 각 부서별 평균 급여를 구하는 SQL문을 작성하시오

select avg(sal) from emp group by deptno;

감점 -5 점, 어느 부서의 평균인지 모르기때문에 5점이 감점됨

답 > select deptno, avg(sal) from emp group by deptno;

Like 연산자, 와일드카드

사원테이블(EMP)에서 사원명에 A가 포함된 사원을 검색하는 SQL문을 작성하시오

select * from emp where ename like '%A%';

서브쿼리 인라인뷰, rownum

사원테이블(EMP)에서 급여를 많이 받는 사원 5명을 구하는 SQL문을 인라인뷰로 작성하시오

select rownum, ename, sal from (
    select * from emp order by sal desc)
where rownum <= 5;

substr

사원테이블(EMP)에서 82년도에 입사한 모든 사원의 정보를 출력하는 SQL문을 작성하시오

select * from emp where substr(hiredate, 1, 2) = '82';

nvl 함수, 별칭

사원테이블(EMP)에서 사번, 이름, 급여, 연봉을 조회하는 SQL문장을 작성하시오

단, 연봉은 별칭을 사용하고, comm이 null값인 경우에는 0으로 연산 처리하시오.

select empno, ename, sal, sal * 12 + nvl(comm, 0) 연봉 from emp;

새로운 계정 생성, 권한 부여
아래의 문제에서 요구하는 SQL문을 각각 작성하시오
1) 아래의 정보로 전산실에 입사한 신입사원에게 새로운 계정을 생성하시오.
계정명 : myuser , 비밀번호 : tiger
2) 생성한 계정에게 데이터 접속 및 테이블, 뷰를 생성할 수 있는 권한을 롤(role)을 이용하여 부여하시오.

--1) 아래의 정보로 전산실에 입사한 신입사원에게 새로운 계정을 생성하시오.
--    계정명 : myuser ,  비밀번호 : tiger

create user myuser identified by tiger;

--2) 생성한 계정에게 데이터 접속 및 테이블, 뷰를 생성할 수 있는 권한을 롤(role)을 이용하여 부여하시오.

grant connect, resource to myuser;

테이블 관계, foreign key

아래의 명세서에 따라 제약조건을 만족하는 테이블을 각각 작성하시오

create table Book (
    bookid number(2) primary key,
    bookname varchar2(40),
    publisher varchar2(40),
    price number(8) );

create table Customer (
    custid number(2) primary key,
    name varchar2(40),
    address varchar2(50),
    phone varchar2(20) );
    
create table Orders (
    orderid number(2) primary key,
    custid number(2) references Customer(custid),
    bookid number(2) references Book(bookid),
    saleprice number(8),
    orderdate date );

점수

95 / 100

'만들어보기' 카테고리의 다른 글

웹표준 코딩 연습 / 여섯 번째 시험문제 (0)	2022.08.31
PL/SQL 코딩 연습 / 다섯 번째 시험문제 (0)	2022.08.08
SQL 코딩 연습 / 세번째 시험문제 (0)	2022.08.02
자바 코딩 연습 / 두번째 시험문제 (0)	2022.07.20
자바 코딩 연습 / 지그재그 문자 출력 (0)	2022.07.14

SQL 코딩 연습 / 세번째 시험문제

2022. 8. 2. 16:42

조건에 맞는 테이블 생성 (제약조건)

아래와 같은 조회결과가 나오도록 주어진 조건에 맞게 book 테이블을 생성하시오

조건1 : no 컬럼은 반드시, 중복되지 않은 값이 들어가도록 설정한다.
조건2 : title 컬럼에는 반드시 값이 들어가도록 설정한다.
조건3 : pub_day 컬럼에 값을 넣지 않으면 기본 값으로 오늘 날짜가 들어가도록 설정 한다.

create table book (
    no number primary key,
    title varchar2(12) not null,
    author varchar2(12),
    publisher varchar2(12),
    price number,
    pub_day date default sysdate);

포맷에 맞는 날짜 출력 (형변환)

Oracle 데이터베이스를 통한 현재 날짜를 기본형식(22/01/01)과

사용자 형식(2022-01-01)으로 차례로 출력하는 SQL문을 작성하시오

사용자 형식은 연도를 4자리로 출력 하도록 한다.

select sysdate 기본형식, to_char(sysdate, 'YYYY-MM-DD') 사용자형식 from dual;

그룹함수, 서브쿼리 문제

사원테이블(EMP)에서 최대 급여를 받는 사원명과, 최대급여 금액을 출력하는 SQL문을 작성하시오

select ename, sal from emp where sal = (select max(sal) from emp);

mysql의 auto_increment 와 insert문을 oracle 코드로 옮기기 (sequence)

MySQL을 Oracle로 DB Migration을 하고자 한다. 마이그레이션 한 결과가 같아지도록 아래 내용을 완성하시오

1. Oracle sequence 생성
2. insert문 작성하기

create table member (
    id NUMBER(6) primary key,
    name VARCHAR2(20)
);

-- 1. Oracle sequence 생성
create sequence member_id_seq;
-- 2. insert문 작성하기
insert into member values(member_id_seq.nextval, 'hong');

테이블 레벨 방식으로 제약조건 설정 (복합키)

다음은 테이블을 만들 때 name, phone 컬럼을 기본키로 만들려고 한다.

composite key(복합키) 이름(Constraint)은 member_compo_pk이며, 아래 테이블을 완성하시오

create table member1(
    name varchar2(10),
    address varchar2(30),
    phone varchar2(16),
    constraint member_compo_pk primary key (name, phone) );

점수

100 / 100

'만들어보기' 카테고리의 다른 글

PL/SQL 코딩 연습 / 다섯 번째 시험문제 (0)	2022.08.08
SQL 코딩 연습 / 네번째 시험문제 (0)	2022.08.03
자바 코딩 연습 / 두번째 시험문제 (0)	2022.07.20
자바 코딩 연습 / 지그재그 문자 출력 (0)	2022.07.14
자바 코딩 연습 / 숫자 회전 출력, 오른쪽으로 밀기 (0)	2022.07.14

2022.08.01 / 과제1번 : 사원명을 검색하여 사원의 직급을 구해오는 저장 프로시저를 만들어서 실행

2022. 8. 1. 17:24

과제
2022.08.01/ Hw1

사원 테이블에서 사원명을 검색하여 사원의 직급을 구해오는

저장 프로시저를 만들어서 실행하세요

의도

PL/SQL

저장 프로시저 사용

깃허브

https://github.com/kindacool/Hw/blob/main/HW20220801/2022_08_01_hw1.sql

GitHub - kindacool/Hw

Contribute to kindacool/Hw development by creating an account on GitHub.

github.com

코드

-- Q1. 사원 테이블에서 사원명을 검색하여 사원의 직급을 구해오는 저장 프로시저를 만들어서 실행하세요

-- 프로시저 생성
create or replace procedure job_ename (
    vename in emp.ename%type,
    vjob out emp.job%type)
is
begin
    select job into vjob from emp
    where ename = vename;
end;

-- 바인드 함수 생성
variable var_job varchar2(10);

-- 프로시저 실행
execute job_ename('SCOTT', :var_job);

-- 출력
print var_job;

출력

강사님 코드

-- 사원 테이블에서 사원명을 검색하여 사원의 직급을 구해오는 저장 프로시저를 만들어서 실행하세요?

--1. 저장 프로시저 생성
create or replace procedure ename_job(
        vename in emp.ename%type,
        vjob out emp.job%type)
is
begin
    select job into vjob from emp where ename = vename;
end;

--2. 프로시저 목록 확인
select * from  user_source;

--3. 바인드 변수 생성
variable var_job varchar2(10);

--4. 프로시저 실행
execute ename_job('SCOTT', :var_job); 
execute ename_job('KING', :var_job); 
execute ename_job('SMITH', :var_job); 

--5. 바인드 변수로 받은 값 출력
print var_job;

'국비지원 과정 > HW' 카테고리의 다른 글

2022.08.11 / 과제1번 : HTML 테이블 태그를 사용하여 Javascript 구구단 출력하기 (0)	2022.08.11
2022.08.04 / 과제1번 : HTML 파일에서 사진과 같은 모양으로 테이블 출력하기 (0)	2022.08.04
2022.07.25 / 과제3번 : 다중행 서브쿼리2 (직급이 'SALESMAN'인 사원이 받는 급여들의 최소 급여보다 많이 받는 사원들의 이름과 급여) (0)	2022.07.25
2022.07.25 / 과제2번 : 다중행 서브쿼리1 (직급이 'SALESMAN'인 사원이 받는 급여들의 최대 급여보다 많이 받는 사원들의 이름과 급여) (0)	2022.07.25
2022.07.25 / 과제1번 : 단일행 서브쿼리 ('SMITH'와 동일한 직급을 가진 사원의 이름과 직급) (0)	2022.07.25

코딩 22일 / 2022.07.20 / WHERE 조건절, 비교연산자, 논리연산자, LIKE 연산자, 와일드카드, 정렬

2022. 8. 1. 09:03

오라클 서버 구동

- 이 두가지가 실행중이어야 클라이언트에서 접근 가능함

오라클 쓰는법
1. 콘솔로 접속
2. SQL Developer 툴 사용

SELECT SQL문

- 가장 복잡하다
- 조건절이 여러개 올수도 있고, 특정 개수만큼 출력해야할수도있고, 조인할 수도 있다

오늘 실습
- Where 조건절을 써서 특정 데이터만 검색
- Where 조건과 비교연산자
- Where 조건절이 두개 이상이면 or 이나 and같은 논리연산을 쓰게됨 (기호대신 문자형태로 or, and 를 씀)
- LIKE 연산자로 특정 단어를 포함하는 것 검색
- 게시판에서 검색을할떄 LIKE 연산자나 와일드카드 사용
- ORDER BY 로 정렬

실습 준비
- SQL 워크시트 클릭해서 scott 계정으로 Connection 연결하자

where 조건절

ex) Where sal > 3000
- 이런식으로 비교연산자를 써서 조건절 쓴다

오라클의 비교연산자 기호

- = : 같다
- <>, !=, ^= : 다르다
- 이건 자바와 다르므로 알기

- 비교 연산자 ( =, >, >=, <, <=, !=, ^=, <>)
- 나머지는 거의 자바와 같다

where 조건절에 들어가는 컬럼 타입에 따른 사용법
1. where 조건절에 들어가는 컬럼 타입이 숫자인 경우

2. where 조건절에 들어가는 컬럼 타입이 문자인 경우

3. where 조건절에 들어가는 컬럼 타입이 날짜인 경우

1. where 조건절에 들어가는 컬럼 타입이 숫자인 경우

-- 1. 숫자 데이터 검색
-- Q1. 사원 테이블에서 급여를 3000 이상 받는 사원을 검색하는 SQL문 작성?
select * from emp where sal >= 3000;

- 숫자데이터는 숫자와 비교할때 숫자데이터 3000 좌우에 외따옴표나 쌍따옴표를 하지 않는다

-- Q2. 급여가 3000인 사원을 검색하는 SQL문 작성?
select * from emp where sal = 3000;

- = 하나만 쓰기 주의 == 두개 아님!

-- Q3. 급여가 3000이 아닌 사원을 검색하는 SQL문 작성?
select * from emp where sal <> 3000;
select * from emp where sal != 3000;
select * from emp where sal ^= 3000;

-- Q4. 급여가 1500 이하인 사원의 사원번호, 사원명, 급여를 출력하는 SQL문 작성?
select empno, ename, sal from emp where sal <= 1500;

2. where 조건절에 들어가는 컬럼 타입이 문자인 경우
- 이제 문자데이터 검색
문자데이터 검색시 주의 사항 2가지
1. 문자데이터는 대, 소문자를 구분한다.
- 오라클에서 유일하게 대소문자 구분하는 것이 테이블에 저장된 문자데이터
ex) EMP 테이블의 ENAME 컬럼안의 데이터 'SMITH', 'ALLEN', 'WARD' 나 JOB 컬럼 안의 데이터 'CLERK', 'SALESMAN', 'MANAGER' 등은 대소문자를 구분함
ex) DEPT 테이블의 DNAME 컬럼안의 데이터 'ACCOUNTING', 'RESEARCH' 등은 대소문자를 구분함
2. 문자 데이터를 검색 할 때는 문자열 좌,우에 외따옴표(')를 붙여야 한다.

+ SQL Developer 단축키
- Ctrl + Shift + D : 한줄 아래로 복사

-- Q1. 사원테이블에서 사원명이 FORD 인 사원의 정보를 검색하는 SQL문 작성
select * from emp where ename = 'ford'; -- 검색결과 없음
select * from emp where ename = FORD; -- 오류 발생
select * from emp where ename = "FORD"; -- 오류 발생
select * from emp where ename = 'FORD'; -- 정상적인 검색

- 문자 양옆에 외따옴표 없으면 오류 발생, 대소문자 구분하므로 제대로 쓰기

- 오라클에서 문자데이터만 대소문자 구분한다
- 나머지는 대소문자 구분안함, 변수명이나 함수명도 대소문자 구분안함 ex) sysdate 는 SYSDATE 와 같다

-- Q2. SCOTT 이란 사원의 사원번호, 사원명, 급여를 출력하는 SQL 문 작성? 
select empno, ename, sal from emp where ename = 'SCOTT';

2. where 조건절에 들어가는 컬럼 타입이 날짜인 경우
- 이제 날짜 데이터 검색하자
- EMP 테이블의 HIREDATE 컬럼이 DATE 타입이다
- 날짜데이터도 좌우에 외따옴표로 감싸줘야함!

날짜데이터 검색시 주의사항
1. 날짜 데이터를 검색할때, 날짜 좌,우에 외따옴표(')를 붙여야 한다.
2. 날짜 데이터를 비교할때 비교 연산자를 사용한다.

-- Q1. 1982년 1월 1일 이후에 입사한 사원을 검색하는 SQL문 작성?
select * from emp where hiredate >= 82/1/1; -- 오류 발생
select * from emp where hiredate >= '82/1/1'; -- 정상적인 검색
select * from emp where hiredate >= '1982/1/1'; -- 정상적인 검색

- 이때 이 결과를 입사일을 기준으로 오름차순 정렬해보자

-- Q2. 1982년 1월 1일 이후에 입사한 사원을 검색하고, 입사일을 기준으로
--     오름차순 정렬하는 SQL문 작성?
select * from emp where hiredate >= '82/1/1' 
    order by hiredate asc ; -- 정상적인 검색

- 입사일 오름차순 = 입사일이 작은 순서 부터 = 입사일이 빠른 순서부터 = 먼저 입사한 순

오라클의 논리연산자
- 조건식이 2개 이상왔을때, 조건식과 조건식 사이에 논리연산자를 써야함 ex) and , or
+ 자바는 && 와 ||

오라클의 논리연산자 3가지
1. and 연산자 : 두 조건식을 모두 만족하는 데이터를 검색
2. or 연산자 : 두 조건식 중에서 한가지만 만족해도 검색
3. not 연산자 : 논리값을 반대로 바꿔주는 역할
ex)

SELECT * FROM emp WHERE NOT deptno = 10; -- 10이 아닌것만 출력

+ 자바와 차이점 : 자바는 기호 && || ! 을 사용, 오라클은 문자형태로 AND OR NOT 을 사용

AND 연산자 예제

-- 1. and 연산자 : 두 조건식을 모두 만족하는 데이터를 검색
-- Q1. 사원테이블에서 부서번호가 10번이고, job이 MANAGER 인 사원을 검색하는
--     SQL문 작성?
select * from emp where deptno = 10 and job = 'MANAGER';

OR 연산자 예제

-- 2. or 연산자 : 두 조건식 중에서 한가지만 만족해도 검색
-- Q1. 사원테이블에서 부서번호가 10번이거나, job이 MANAGER 인 사원을 검색하는
--     SQL문 작성?
select * from emp where deptno = 10 or job = 'MANAGER';

NOT 연산자

-- 3. not 연산자 : 논리값을 반대로 바꿔주는 역할
-- Q1. 부서번호가 10이 아닌 사원을 검색하는 SQL문 작성?
select * from emp where not deptno = 10; -- 논리 연산자
select * from emp where deptno <> 10; -- 비교 연산자
select * from emp where deptno ^= 10; -- 비교 연산자
select * from emp where deptno != 10; -- 비교 연산자

- 즉, 기존의 반대의 결과 deptno = 10의 반대의 결과를 검색함
- 부서번호가 10 이 아닌 사원을 검색하는 방법이 여러가지 있다
- 논리 연산자로 구할수도 있고 비교 연산자로 구하는것도 가능함

연산자 응용 문제 1

-- Q1. 급여를 2000 에서 3000 사이의 급여를 받는 사원을 검색하는 SQL문 작성?
select * from emp where sal >= 2000 and sal <= 3000;

- 위처럼 일정한 값의 범위가 있을때, and 연산을 사용해서 연결해도 되고 beetween and 연산자를 사용해도 된다
A<=X<=B 에서 X를 구할때 문제 해결 방법 2가지

1. 컬럼명 BETWEEN A AND B 식으로 쓴다
2. A>= X AND B<=X

AND 연산자로 연결되는 것을 BETWEEN AND 연산자로 바꾸기
between and 연산자
- 형식 : where 컬럼명 between 작은값 and 큰값
- 일정한 값의 범위가 있을때 사용가능하다!
- 작은값이 먼저와야함

between and 연산자 문제 1

-- 형식 : where 컬럼명 between 작은값 and 큰값
-- Q1. 급여를 2000 에서 3000 사이의 급여를 받는 사원을 검색하는 SQL문 작성?
select * from emp where sal >= 2000 and sal <= 3000;

select * from emp where sal between 2000 and 3000;
select * from emp where sal between 3000 and 2000; -- 검색결과 없음

between and 연산자 문제 2

-- Q2. 급여가 2000 미만이거나 3000 초과인 사원을 검색하는 SQL문 작성?
select * from emp where sal < 2000 or sal > 3000;

select * from emp where sal not between 2000 and 3000; //강사님이 쓴거 
select * from emp where not sal between 2000 and 3000; //내가 쓴거

- select * from emp where sal between 2000 and 3000; 의 반대를 구하는 것이므로 not 써야한다

- 이때 not 은 where 뒤에 써도 되고, 컬럼 뒤에 써도 된다

between and 연산자 문제 3

-- Q3. 1987년도에 입사한 사원을 검색하는 SQL문 작성?
select * from emp where hiredate >= '87/1/1' and hiredate <= '87/12/31';

select * from emp where hiredate between '87/1/1' and '87/12/31';

- and 연산자로 연결되는 것을 between and 로 바꾸었다
- 후엔 or연산자로 연결되는걸 in 연산자로 바꿀 것

연산자 응용 문제 2

-- Q2. 커미션이 300이거나 500이거나 1400인 사원을 검색하는 SQL문 작성?
select * from emp where comm = 300 or comm = 500 or comm = 1400;

OR 연산자로 연결되는 것을 IN 연산자로 바꾸기

IN 연산자
- 커미션이 300이거나 500이거나 1400인 사원을 검색하는 SQL문 검색할때 or 연산자를 사용하고 있다

IN 연산자 형식

- 형식 : where 컬럼명 in (데이터1, 데이터2, ..)
- 괄호 안 값들 순서는 상관없음

IN 연산자 문제 1

-- Q1. 커미션이 300이거나 500이거나 1400인 사원을 검색하는 SQL문 작성?
select * from emp where comm = 300 or comm = 500 or comm = 1400;

select * from emp where comm in (300, 500, 1400);

IN 연산자 문제 2

-- Q2. 커미션이 300, 500, 1400이 아닌 사원을 검색하는 SQL문 작성?
select * from emp where comm != 300 and comm != 500 and comm != 1400;

select * from emp where comm not in (300, 500, 1400);

- not 을 붙임으로서 반대의 결과를검색함

- 커미션이 300,500,1400 아닌 사원 검색

주의

- comm 이 null인 사원들은 검색되지 않는다! 값이 존재하는 사원중 300, 500, 1400 이 아닌 사원만 출력됨
- null 값은 검색안됨, null 제외한 나머지 값들만 검색함
- null 검색법은 따로있다

연산자 응용 문제 3

-- Q3. 사원번호가 7521이거나 7654이거나 7844인 사원을 검색하는 SQL문 작성?
select * from emp where empno = 7521 or empno = 7654 or empno = 7844;

OR 연산자로 연결되는 것을 IN 연산자로 바꾸기
IN 연산자 문제 3

-- Q3. 사원번호가 7521 이거나 7844인 사원을 검색하는 SQL문 작성?
select * from emp where empno = 7521 or empno = 7844;

select * from emp where empno in (7521, 7844);

검색 관련 연산자
- 게시판 목록 페이지 상단이나 하단을 보면 검색기능이 있다

- 이런게 있으면 사용자가 쉽게 검색 가능
- 작성자명, 제목, 내용, 제목+내용 등으로 검색 가능하다
- 이런걸 LIKE 연산자와 와일드카드( % , _ )를 이용해 구현한다

LIKE 연산자와 와일드 카드

- 검색기능을 구현할때 사용함.
- 형식 : where 컬럼명 like pattern

LIKE 연산자
- 형식 : WHERE 검색할컬럼명 LIKE 패턴지정
- 패턴을 만들때 와일드카드를 써야함 %와 _가 있다

와일드 카드

1. '%' : 문자가 없거나, 하나 이상의 문자가 어떤 값이 와도 상관없다 (이걸 주로씀)
2. '_' : 하나의 문자에 어떤 값이 와도 상관없다
- '_' 하나는 딱 한글자, 한칸만을 의미

LIKE 연산자와 와일드카드 예시
- 사원명이 저장된 컬럼 ENAME

- 사원명이 F로 시작하는 사원을 검색하라

SELECT * FROM EMP WHERE ENAME LIKE 'F%';

- 문자데이터이므로 외따옴표로 감싸져있고 대소문자 구분
- % 는 문자가 없거나 하나 이상의 문자가 와도 되므로, 'F' 여도 검색되고 'Faith' 여도 검색된다

LIKE 연산자와 와일드카드 예제 1

-- Q1. 사원테이블에서 사원명이 F로 시작하는 사원을 검색하는 SQL문을 작성?
select * from emp where ename = 'FORD'; -- FORD 사원만 검색됨

select * from emp where ename like 'F%';

- %는 문자가 없거나, 하나 이상의 문자 이므로, WHERE ename like 'F%' 는 'F'여도 되고 'FO' 여도 되고 'FORD' 여도 됨
- 문자 데이터이므로 좌우에 외따옴표 붙이기

LIKE 연산자와 와일드카드 예제 2

-- Q2. 사원테이블에서 사원명이 N으로 끝나는 사원을 검색하는 SQL문을 작성?
select * from emp where ename like '%N';

- 문자 길이 달라도 N으로 끝나므로 검색됨

LIKE 연산자와 와일드카드 예제 3

-- Q3. 사원테이블에서 사원명이 A를 포함하는 사원을 검색하는 SQL문을 작성?
select * from emp where ename like '%A%';

- A가 시작문자든, 끝문자든, 중간에 있든, A만 있든 다 검색된다.
- where 제목컬럼명 like '%검색어%' 가 가장 많이 쓰는 형식이다

- 웹에서 제목으로 검색할때 제목의 컬럼명이 where 뒤에 오고 검색어를 포함하는 제목인 글을 찾음
+ 웹에서 내용으로 검색할땐 컬럼명 자리에 내용컬럼이 들어가야함

언더바 (_) 와일드카드를 써야만 하는 경우
- 언더바(_) 와일드 카드 : 하나의 문자에 어떤 값이 와도 상관없다

- 특정한 자리에 해당 문자가 와야할때 주로 사용

LIKE 연산자와 와일드카드 예제 4
언더바 (_) 와일드카드 예제 1

-- Q1. 사원 이름의 두번째 글자가 A인 사원을 검색하는 SQL문을 작성?
select * from emp where ename like '_A%';

- 언더바 _ 하나가 한글자 한칸을 의미하는것

- 언더바 _ 에 어떤값이 와도 상관없지만 한글자는 와야함

- TA 도 검색됨

- %가 오면 의미가 달라짐

LIKE 연산자와 와일드카드 예제 5
언더바 (_) 와일드카드 예제 2

-- Q2. 사원 이름의 세번째 글자가 A인 사원을 검색하는 SQL문을 작성?
select * from emp where ename like '__A%';

- _를 2개 썼다

LIKE 연산자와 와일드카드 예제 6

-- Q3. 사원명에 A가 포함되어 있지 않은 사원을 검색하는 SQL문을 작성?
select * from emp where ename not like '%A%';

- A가 포함된 사원을 검색하는 결과에서 not을 써서 A가 포함되지 않은 사원을 검색
- like앞에 not을 써주면 된다

NULL 값 검색
- 값이 비어있는 NULL 값을 가진 데이터는 검색되지 않았다
- 또한 비교연산자로 NULL을 검색할 수 없다

SELECT * FROM EMP WHERE COMM = NULL; -- (X) 검색결과 없음

- EMP 테이블에서, PRESIDENT KING의 MGR은 NULL

- EMP 테이블에서, SALESMAN 인 4명만 COMM이 NULL이 아니고 나머지는 다 NULL

NULL 값 검색 예제 1

- IS NULL 연산자를 써야한다

-- Q1. MGR 컬럼에 NULL 값인 데이터를 검색
select * from emp where mgr = null; -- 검색 안됨
select * from emp where mgr = ''; -- 검색 안됨

select * from emp where mgr is null;

NULL 값 검색 예제 2

-- Q2. MGR 컬럼에 NULL 값이 아닌 데이터를 검색
select * from emp where mgr is not null;

- NULL 값이 아닌 데이터 검색할땐 IS NOT NULL 사용

NULL 값 검색 예제 3

-- Q3. COMM 컬럼에 NULL 값인 데이터를 검색
select * from emp where comm is null;

NULL 값 검색 예제 4

-- Q4. COMM 컬럼에 NULL 값이 아닌 데이터를 검색
select * from emp where comm is not null;

데이터 정렬 : ORDER BY 절
- 데이터를 먼저 검색하고 마지막으로 정렬을 한다!

where 조건절과 order by 절 같이 쓸때 주의

- where 조건절로 조건맞는 데이터 먼저 검색 후, 마지막에 order by로 정렬해야함

ORDER BY 절
- ORDER BY 컬럼명 : 해당 컬럼명 기준으로 정렬
- 컬럼명 뒤에 asc, desc 를 붙여 오름차순, 내림차순 설정

오름차순 vs 내림차순

	오름차순	내림차순
숫자 데이터	작은 값부터 정렬 (1,2,3..)	큰 값부터 정렬 (3,2,1..)
문자 데이터	사전 순서로 정렬 (a,b,c..)	사전 반대 순서로 정렬 (z,y,x..)
날짜 데이터	빠른 날짜 순서로 정렬 (작은 연도부터 정렬, 즉 과거부터 정렬)	늦은 날짜 순서로 정렬 (큰 연도부터 정렬, 즉 최신순 정렬)
NULL	가장 마지막에 NULL 값이 나온다	가장 먼저 NULL 값이 나온다

+ 게시판은 주로 내림차순 정렬이다 최근글부터 나와야하므로

오름차순 정렬
ex)

select * from emp order by sal asc;

- 급여가 작은 순부터 정렬

내림차순 정렬
ex)

select * from emp order by sal desc;

- 급여가 큰 순부터 정렬

정렬 정리
- 형식 : order by 컬럼명 정렬방식(asc or desc)
- 정렬방식 : 오름차순(ascending), 내림차순(descending)

숫자 데이터 정렬 예제 1

-- 1. 숫자 데이터 정렬
-- Q1. 사원 테이블에서 급여를 기준으로 오름차순 정렬
select ename, sal from emp order by sal asc;
-- 정렬방식(asc, desc)이 생략되면, 기본 정렬방식 은 오름차순으로 정렬함.
select ename, sal from emp order by sal;

- 오름차순 = 작은수부터 = 낮은급여부터 높은급여까지 정렬
- 이때 이 asc는 생략 가능하다, 즉 기본 디폴트 방식이 asc로 되어있으므로 생략 가능

숫자 데이터 정렬 예제 2

-- Q2. 사원 테이블에서 급여를 기준으로 내림차순 정렬
select ename, sal from emp order by sal desc;

문자 데이터 정렬 예제 1

-- 2. 문자 데이터 정렬
-- Q1. 사원테이블에서 사원명을 기준으로 오름차순 정렬 : 사전순 정렬
select ename from emp order by ename asc;
select ename from emp order by ename; -- 정렬방식(asc) 생략가능

문자 데이터 정렬 예제 2

-- Q2. 사원테이블에서 사원명을 기준으로 내림차순 정렬 : 사전역순 정렬
select ename from emp order by ename desc;

문자 데이터 정렬 예제 1

-- 3. 날짜 데이터 정렬
-- Q1. 사원 테이블에서 입사일을 기준으로 오름차순 정렬 : 빠른 날짜 순으로 정렬
select hiredate from emp order by hiredate asc;

- 빠른년도 순 = 년도 숫자가 작은거 = 이른날짜 = 옛날 -> 현재 순으로

문자 데이터 정렬 예제 2

-- Q2. 사원 테이블에서 입사일을 기준으로 내림차순 정렬 : 늦은 날짜 순으로 정렬
select hiredate from emp order by hiredate desc;

- 늦은 날짜 순이란 = 최신순

NULL 값이 포함된 데이터 정렬
NULL 정렬
1. 오름차순 정렬 시 NULL 값이 가장 마지막에 출력
2. 내림차순 정렬시 NULL 값이 가장 먼저 출력
- 즉 NULL 값이 가장 큰 값이라고 생각하면 된다

NULL 값이 포함된 데이터 정렬 예제 1

-- Q1. MGR 컬럼을 기준으로 오름차순 정렬 : NULL 값이 가장 마지막에 출력
select ename, mgr from emp order by mgr asc;

- 오름차순 정렬하면 NULL 값이 가장 마지막에 출력된다

NULL 값이 포함된 데이터 정렬 예제 2

-- Q2. MGR 컬럼을 기준으로 내림차순 정렬 : NULL 값이 가장 먼저 출력
select ename, mgr from emp order by mgr desc;

NULL 값이 포함된 데이터 정렬 예제 3

-- Q3. COMM 컬럼을 기준으로 오름차순 정렬 : NULL 값이 가장 마지막에 출력
select ename, comm from emp order by comm asc;

NULL 값이 포함된 데이터 정렬 예제 4

-- Q4. COMM 컬럼을 기준으로 내림차순 정렬 : NULL 값이 가장 먼저 출력
select ename, COMM from emp order by COMM desc;

여러번 정렬하기

1. 한번 정렬했을때, 동일한 결과가 나오는 데이터가 있을 경우에는 한번 더 정렬을 해야한다
2. 두번째 정렬 조건은 한번 정렬했을때 동일한 결과가 나온 데이터들만 두번째 정렬 조건을 적용받는다.
3. 댓글 게시판을 만드는 경우에 주로 사용한다

ex) 급여를 기준으로 내림차순 정렬시, 1번 정렬했을때 같은 결과가 나오는 경우가 있다

- 3000, 1250 이 급여인 사원이 2명씩 있따, 이럴때 한번 더 정렬을 할 수 있다

- "동일한 데이터가 나온 경우에만" 두번째 정렬조건의 적용을 받음!
- 나머지는 두번째 정렬조건의 적용을 안받음

- 그러므로 두번째 정렬을 하면 FORD, SCOTT, WARD, MARTIN 데이터만 적용을 받는다

같은 결과가 나오면 한번 더 정렬하는 경우 활용 : 게시판
- 게시판 글을 내림차순하면 최근글이 위로 가게 된다

- 그 글에 댓글들과 대댓글 달때 한번더 정렬해줘야하는 경우에 주로 사용

- 그 댓글들과 대댓글은 부모 그룹번호 id가 같기때문에 댓글들끼리 그걸 한번더 정렬해줘서 순서를 정해야함
- 즉 첫번째로는 글을 정렬하고 두번째로는 그 글의 댓글과 대댓글들을 정렬 한다

여러번 정렬하기 예시

-- Q. 사원 테이블에서 급여를 기준으로 내림차순 정렬을 한다. 이때 동일한 급여를
--    받는 사원들은 사원명을 기준으로 오름차순 정렬해서 출력하는 SQL문을 작성
select ename, sal from emp order by sal desc, ename asc;

- 급여로 1차 정렬을하고 같은 데이터가 있는경우에만!(3000이 2명, 1250이 2명) 2차로 정렬을 해준다
- 이때 , 로 이어서 두번째 정렬을 해줌
- , 뒤에 기준컬럼을 써주고 정렬방법을 써주면됨

- "동일한 데이터가 나온 경우에만" 두번째 정렬조건의 적용을 받음!
- 나머지는 두번째 정렬조건의 적용을 안받음

- 그러므로 두번째 정렬을 하면 FORD, SCOTT, WARD, MARTIN 데이터만 적용을 받는다

- 여기서 두번의 정렬후에도 정렬이 안되어 동일한 데이터가 또 나오면 또 다른 컬럼으로 3번째 정렬 가능

정렬 문제 1 : 한번 정렬, 오름차순 정렬

-- 정렬 문제
-- Q1. 사원 테이블에서 입사일을 기준으로 오름차순으로 정렬하여 출력하되,
--    사원번호, 사원명, 직급, 입사일 컬럼을 출력하는 SQL문을 작성
select empno, ename, job, hiredate from emp order by hiredate asc;

정렬 문제 2 : 한번 정렬, 내림차순 정렬

-- Q2. 사원 테이블에서 사원번호를 기준으로 내림차순으로 정렬하여 사원번호와
--    사원명 컬럼을 출력하는 SQL문 작성
select empno, ename from emp order by empno desc;

정렬 문제 3 : 여러번 정렬

-- Q3. 부서번호가 빠른 사원부터 출력하되, 동일한 부서내의 사원을 출력할 경우에는
--    최근에 입사한 사원부터 사원번호, 입사일, 사원명, 급여순으로 출력하는
--    SQL문을 작성
select empno, hiredate, ename, sal from emp order by deptno asc, hiredate desc;

과제
Q1. 사원테이블(EMP)에서 입사일(HIREDATE)을 4자리 연도로 출력되도록 SQL문을 작성하세요? (ex. 1980/01/01)

- 입사일이 80/12/17 로 저장되어있는데 이걸 1980/12/17 로 출력해야함

-- 과제1. 사원테이블(EMP)에서 입사일(HIREDATE)을 4자리 연도로 출력 되도록 SQL문을 작성하세요? (ex. 1980/01/01)
select empno, ename, job, mgr, TO_CHAR(hiredate,'YYYY/MM/DD'), sal, comm, deptno from emp;

Q2. 사원테이블(EMP)에서 MGR컬럼의 값이 null 인 데이터의 MGR의 값을 CEO 로 출력하는 SQL문을 작성 하세요?

-- 과제2. 사원테이블(EMP)에서 MGR컬럼의  값이  null 인 데이터의 MGR의 값을  CEO 로  출력하는 SQL문을 작성 하세요?
select empno, ename, job, nvl(TO_CHAR(mgr), 'CEO') as "MANAGER", sal, comm, deptno from emp;

- MGR 컬럼이 NULL 일때 이걸 CEO로 바꿔서 출력
- nvl 함수 , null 값을 검색하는 조건식도 쓰기

- 배운것만으로 해결 불가 나중에 찾아보면서 과제 하기

과제 풀이

https://laker99.tistory.com/50

https://laker99.tistory.com/51

+ 최대공약수
- 24를 1씩 감소시키면서 60과 24 둘다 나눠떨어질때 그게 최대공약수
- 무한루프 돌려서 그 i로 60과 24 나눠서 둘다 0 나머지면 최대공약수, i 를 1씩 감소시키기

'국비지원 과정 > Oracle' 카테고리의 다른 글

코딩 21일 / 2022.07.19 / SQL Developer 툴, Oracle SQL문 기초 (0)	2022.07.29
코딩 18일 / 2022.07.14 / 오라클, 자바 - 오라클(DB) 연동, SQL문 기본 (0)	2022.07.21

코딩 21일 / 2022.07.19 / SQL Developer 툴, Oracle SQL문 기초

2022. 7. 29. 12:39

윗부분 나중에

오라클 수업 2주간 할 것들
1. Oracle SQL문
2, SQL로 프로그램 만드는 PL/SQL 의 저장프로시저 라는걸배울것(실무에서 많이 씀) , Trigger
3. 데이터 모델링
- 요구사항에 따라 논리적으로 모델링할것

- 직접 테이블 create 해서 안만든다

- 모델링 하는 툴을 가지고 요구사항 분석을 하고 거기에 따라 사용자가 어떤 요구하냐에 따라 요구사항 분석하고 그 결과로 모델링을함
- 논리적 모델링 -> 물리적 모델링 -> 배포 하면 테이블이 자동으로 만들어짐

SQL Developer 툴로 실습
- SQL 실행 위해선 콘솔창 작업 불편
- 그래픽 툴 중에 SQL Developer 이란 툴을 사용할 것
- 오라클은 이미 서버 구동되었기떄문에 클라이언트가 접근가능함
- sys, system, scott, hr 계정으로 접근가능 우리는 scott계정으로 실습할것

SQL Developer 다운
- SQL Developer 툴을 다운
- 최신버전은 oracle.com 으로 들어가야함, 또는 네이버 클라우드에 올린것 다운
- C드라이버에 넣고 압축풀면 sqldeveloper 폴더 나옴
- 그 안의 sqldeveloper 프로그램 바탕화면엔 바로가기 만듬
- Sqldeveloper는 설치하는 프로그램이 아니라 압축만 풀면됨

- SQL Developer 임포트 :아니오
- 먼저 sql developer가 클라이언트용 프로그램이므로 서버로 접속하기위해, 오라클 데이터베이스의 커넥션 만들어야함

오라클 DB 커넥션 생성
1. 시스템 관리를 위해 system 계정에 대한 커넥션 생성해야함 (비번 oracle)
2. 실습을 위해 scott 계정에 대한 커넥션 생성해야함 (비번 tiger)

1. system 계정에 대한 커넥션 생성

- 좌측의 + 버튼 누르면 새로운 커넥션 생성가능

- 어떤 계정에 대한 커넥션인지 구분하기위해 계정명과 동일하게 만들자
- 접속이름도 system으로 하자
- 호스트 이름은 오라클 DB가 설치된 IP주소, 자기 컴에 오라클 있으면 localhost 로 지정
- SID : 전역 데이터베이스 명 , 여기선 xe
- 이후 접속 테스트 테스트 버튼 눌러서하자
- 성공적이면 좌측하단 성공 이라고 뜬다
- 그다음 접속 누르면 좌측에 system 계정에 대한 커넥션이 생성되어있음

2. scott 계정에 대한 커넥션 생성
- 두번째로는 scott계정에대한 커넥션을 만들자

- 같은 방법으로 scott계정 connection 만들기

- 커넥션 생성시 그 계정 소유의 테이블등도 볼수있다 ex) 우리가 만들었던 Board 테이블

- 해당 계정에 대한 커넥션 생성시 이렇게 테이블 정보 볼수있다

- 오라클은 계정단위로 모든것들이 이루어짐

- 만약 scott계정 설정 수정하고싶으면, 해당 커넥션에 오른마우스 -> 속성 메뉴

오라클의 DBA 계정
- sys 와 system계정
- sys계정은 DB 를 설치하거나 복구할때 주로 사용
- 나머지 관리적인것들은 다 system으로 처리
오라클의 실습계정

- scott 와 hr 계정
- scott계정은 이미 활성화되었다, 현재 이 계정으로 접속가능

hr계정 활성화

c:\> sqlplus  system/oracle

SQL> alter user hr account unlock;
SQL> alter user hr identified by 1234;
SQL> conn  hr/1234

- hr 계정도 락이 걸려있어서 언락을 해야함, scott 계정과는 다른 방법으로 언락
- 명령 프롬프트든 SQL Developer든 DBA계정인 system계정들어가서 작업을 해야함

SQL Developer에서 생성한 Connection 으로 연결하기 (.sql 파일 생성)

- SQL 워크시트 누르면 어떤 커넥션으로 연결할건지 물어봄 -> scott

- 여기다 -- 2022.07.19(화) 입력해보자, 그리고 폰트를 조절 하자

+ SQL Developer에서 글자 크기 설정 방법
- 도구 - 환경설정 - 코드 편집기 - 글꼴

Connection 연결한 sql 파일 저장하는 방법

- 디스켓모양 클릭
- 위치설정은 C드라이브 하위에 폴더 ;OraclePractice' 를 만들어서 저장했다
- C:\OraclePractice 안에 2022_07_19_01.sql을 만듬!

scott 계정에서 제공되는 테이블
- DEPT, EMP, SALGRADE, BONUS
- DEPT 테이블은 3개의 컬럼, 4개의 로우 있음

DEPT 3개의 컬럼
1. DEPTNO : 부서번호
2. DNAME : 부서이름 no 10번은 'Accounting', 20번은 'Research' 등
3. LOC : 지역

오라클 기본 명령어 : 테이블 목록 확인 명령어
- scott 계정으로 커넥션 연결한 2022_07_19_01.sql 파일에서 테이블 목록을 확인해보자

-- 테이블 목록
select * from tab;

- scott계정 소유의 테이블 목록을 보여달라는 명령

+ 공개 동의어

- 여기서 tab 이란 건 sys.tab 인데 줄여서 쓰는것
- sys는 DB 계정명이고 tab은 공개 동의어 이름이다, 공용 동의어 라고도 함
- 원래소유자.tab; 으로 쓰는걸 짧게 tab으로만 쓰는것임
- 원래 소유자는 sys계정이고 뒤에 나와있는 tab은 sys계정 소유의 테이블 이름인데, 공개되었기때문에 공개 동의어

SQL Developer 에서 SQL 명령어 실행시키는 방법

- 실행하는법은 그 줄에 커서 올려놓고 위쪽 초록색 화살표버튼
- 단축키는 해당 줄에 커서 위치시키고 Ctrl + Enter

- 그래픽 화면이 작업하기 수월하지만 기본적인 이런 SQL문은 알고있어야함

+ mysql 에선 show tables; 사용

scott 기본 제공 테이블

- DEPT, EMP, SALGRADE, BONUS
- DEPT : 부서테이블 , 3개 컬럼과 4개 데이터(로우)로 구성
- EMP : 사원테이블, 8개의 컬럼과 14개의 데이터(로우) 로 구성
- 당분간 이 두개 테이블로 실습할것이라서 이 두 개 테이블에 대해 설명할것

EMP 테이블 구조
EMPNO : 사원번호
ENAME : 사원이름
JOB : 담당 업무,직책
MGR : 자기 직속상관의 사원번호
HIREDATE : 입사일
SAL : 급여
COMM : 커미션
DEPTNO : 부서번호

오라클 기본 명령어 : 테이블 구조 (스키마) 확인 명령어

- 테이블 구조를 볼때는 desc 명령 사용

-- DEPT 테이블 구조
describe dept;

- 또는

desc dept;

- describe 명령 사용시 이렇게 테이블 dept 의 구조가 나타난다, 3개의 컬럼이 있다
- VARCHAR2(14)는 14바이트까지, 영문 14자까지 저장가능
- NUMBER(2) 는 숫자 두자리까지 가능
- DEPTNO에 지금은 NOT NULL만 표시되어있지만, 실제론 기본키로 되어있다
- 즉, 이 부서를 식별하는 번호값이 DEPTNO이다

오라클 기본 명령어 : 테이블안의 데이터 검색 명령어

-- DEPT 데이터 검색
select * from DEPT;
SELECT * FROM DEPT;

+ SQL문은 대소문자 구분없다
- 안에 들은 영문 데이터는 대소문자를 구분함, 이거뺴곤 다 대소문자 구분안한다
- 이 DEPTNO는 Primary 키라는 기본키 제약조건이 설정되어있어서 중복되지 않는다

- 테이블 DEPT 의 구조와 데이터를 확인했다

- 이젠 테이블 EMP 의 구조와 데이터 확인해보기

테이블 EMP 구조 (스키마) 확인

dsec emp;

<제약 조건>

- NOT NULL : 널값 허용불가

<자료형>
- NUMBER(4) : 네자리 숫자 까지 가능
- DATE : 년/월/일 정보만 저장되어있음
- NUMBER(7,2) : 숫자값이 들어있는 자료형인데, 7은 전체 7자리까지 할당받게되고 뒤에 2는 소숫점자리 두자리까지 저장하겠다 라는 것
-> 결과적으로 정수값은 5자리, 소숫점아래는 2자리 까지 저장하겠다는 의미
<컬럼>
- COMM 은 영업사원들에만 해당, 커미션 관련
- 부서 번호는 10,20,30,40 있지만, 각 사원은 10번, 20번, 30번 부서에 소속되어있음

테이블 EMP 데이터 검색

-- EMP 데이터 검색
select * from emp;

컬럼 설명

- EMPNO : Primary Key, 사원번호 4자리
- ENAME : 사원 이름
- JOB : 직무 명
- MGR : 직속상관의 사원번호 4자리가 저장되어있음
ex) SMITH 사원의 직속상사는 사원번호가 7902 -> 7902 사원은 FORD 이다
- KING이란 사원은 PRESIDENT (사장) 이라서 자기 직속상관이 null이다
- HIRDDATE는 DATE 타입이므로 년/월/일 로 저장되어있음
- SAL은 달 급여, 사장이 가장 높은 급여를 받고 있다
- COMM : 영업활동을 하고 돌려받는 돈 JOB이 SALESMAN으로 된 4명만 커미션비를 받고있음
- DEPTNO : 10,20,30번 부서에 각각 소속되어있다, 40번부서는 존재하지만 아무도 소속되어있지 않음
- DEPTNO는 Foreign Key 설정되어있다
+ 부모테이블의 부모키 값만 참조할수있는게 Foreign key

- 이 두 테이블로 DEPT, EMP 로 실습할거다

SQL Developer 에서 그래픽으로 테이블 구조, 데이터, 제약조건 확인

- 지금까지 처럼 select, desc 명령어로 테이블을 확인하는 대신 그래픽으로 테이블을 확인하는 방법

- 이거 누르면 구조 데이터 제약조건 등 알수있다

- 중복되지 않는 값이며, 부서 식별위한 고유한 번호값 DEPTNO

- EMP 테이블의 제약조건도 보자

- 명령어로 실행하거나, 위의 사진처럼 그래픽 프로그램으로 해당 테이블 선택시 컬럼, 자료형, 데이터, 제약조건 확인가능

SQL Developer 주석

- Ctrl + / 하거나 -- 로 사용

오라클 데이터 타입
1. 숫자 데이터

2. 문자 데이터

3. 날짜 데이터
- 지원자료형이나 크기 등 알아보자

1. 숫자 데이터

- number란 타입은 괄호열고 정수가 들어간다

1) numer(n)
ex) numer(2)이면 정수 2자리까지 저장가능하단 의미 , 최대 99, 정수만 가능
2) number(n1, n2)

- n1은 전체 자리수, n2는 소숫점에 할당된 자리수
ex) number(7,2) 에서첫자리 7은 전체 자리수, 두번째자리 2는 전체 자리수 중에서 소숫점 아래 자리

2. 문자 데이터
- 크게 3가지가 있다
1) char() : 고정길이 문자, 최대 2000바이트까지 저장가능

2) varchar2(), 가변길이 문자

- varchar2는 4000바이트까지 저장할수있음 영문기준 4000자

3) long() : 4000바이트 넘어설땐 long, 2GB까지 저장가능

- 단 long형으로 설정된 컬럼은 검색기능 지원안함

고정길이 문자 vs 가변길이 문자

- char에는 값의 길이값이 정해져있는 데이터만 정해두므로 안쓰면 낭비

- varchar2는 가변길이 문자타입이라서 20바이트 지정해도 데이터 양이 5바이트면 5바이트만 사용
- 지정된크기만큼 저장할수있지만 데이터 크기만큼만 씀. 공간 낭비 막아줌 주로 문자 저장할떈 이거 쓴다

ex) char(20)

- char(20) 은 1개 컬럼에 20 바이트 할당을 딱 해둠,

- 만약 seoul 을 써서 5바이트를 쓰면 15바이트는 남았지만 남아있다고 해서 남은공간 쓰진 못함, 낭비가 됨.

- 그래서 값의 길이값이 정해져있는 우편번호,카드번호 이런경우에 char 씀
ex) varchar2(20)
- 가변길이 varchar2(20) 인 address컬럼에 저장된 값이 seoul이면 5바이트만 사용되고 나머지 15바이트는 낭비되지 않음
- 주로 문자 저장할땐 대부분 이거 씀

long 형 데이터 장단점
- 4000바이트 넘어서는 데이터는 long형 자료형 사용

- long형은 1개의 데이터당 2G 까지 지원 , 엄청나게 큰 데이터
- 단, long형으로 설정된 컬럼은 검색기능 지원안함
ex) char, varchar 사용시 게시판에서 제목이나 작성자명, 내용을 기준으로 검색가능, 근데 만약 long형으로 설정되어있으면 검색기능 지원하지 않음

3. 날짜 데이터

1) date : 년/월/일 정보 저장 ex) 80/12/21

2) timestamp : 년/월/일 시:분:초 정보 저장

- 좀 더 자세한 날짜 정보는 timestamp 형이다

오라클의 데이터 타입 정리
1. 숫자 데이터
- number(n) : number(2) 는 정수 2자리까지 저장
- number(n1, n2) : n1 - 전체 자리수, n2 - 소숫점에 할당된 자리수
2. 문자 데이터
- char() : 고정 길이 문자형, 최대 2000 byte 까지 저장 가능
- varchar2() : 가변 길이 문자형, 최대 4000 byte 까지 저장 가능
- long : 2GB 까지 저장 가능함, long형으로 설정된 컬럼은 검색 기능을 지원하지 않는다.
3. 날짜 데이터
- date : 년/월/일 정보 저장
- timestamp : 년/월/일 시:분:초 정보 저장

- 이제 SQL문 살펴보자

SQL문

- DDL , DML, DQL, DCL, TCL 등
- DCL : 권한부여, 권한 주는 Grant, 취소의 Revoke
- TCL : 트랜젝션 처리어
- DQL = SELECT SQL문

SELECT SQL 문 (DQL)

- SQL문 중에서 가장 복잡하고 다양하게 활용됨
- 전체 SQL문 중 50% 이상

SELECT 컬럼명들 FROM 테이블

- 여태껏 SELECT * FROM 테이블 에서 * 자리에 검색할 컬럼명을 이 자리에 쓰는것
ex)

select enum from emp;

SELECT SQL문 사용 방법
1.

select * from dept;

- * : ALL COLUMNS 의미함

select deptno from dept;

- deptno값만 나옴

select loc, deptno, dname from dept;

- 검색시 컬럼순서 바꿀수있음

- 테이블 emp 도 똑같이 사용해보자

select * from emp;

select empno, ename, sal from emp;

- 특정컬럼만 선택적으로 검색하고 있다

SELECT SQL문 확장

- 컬럼들 사이 산술적인 연산을 수행하자
- number 타입인 컬럼만 연산 가능
- '+', '-', '*', '/' 를 컬럼사이에 사용가능

SQL문에 산술 연산자 사용 ( +, -, *, /)

select sal + comm from emp;
select sal - 100 from emp;
select sal * 12 from emp;
select sal / 2 from emp;

- 숫자데이터가 저장된 컬럼만 산술연산 가능하다

- 사원들이 매달 받는 돈이 SAL 컬럼에 있다

NULL 값이 있을때 연산하는 방법 (nvl() 함수)

산술 연산자를 사용해서 EMP 테이블에서 사원들 연봉 계산
- 사원들 연봉을 계산해보자
- SAL*12하고 +COMM(커미션) 해야함 (커미션 받는 사원들은 COMM 추가 해야함)

-- Q. 사원테이블(EMP)에 소속된 사원들의 연봉을 구해보자?
--  연봉 = 급여(SAL) * 12 + 커미션(COMM)
select ename, job, sal, sal * 12, sal * 12 + comm from emp;

문제 상황

- 이때 COMM받는 사원은 4명뿐 이라는게 문제이다
- JOB이 SALESMAN 으로 되어있는 4명만 커미션받고 나머지 사원들은 커미션이 없는 NULL 값
- NULL값은 정해지지 않는값을 의미하고 비어있다, 문제는 NULL값인 데이터는 산술적인 연산 + 를 지원안함
- 커미션을 받는 4명만 연봉이 구해지고, 나머지는 연봉이 NULL값이 나옴

- COMM이 NULL이면 산술적인 연산이 되지 않는다

NULL값

- 정해지지않은값, 산술연산 불가능

ex) PRESIDENT 사장의 직속상사 MGR이 NULL
ex) SALESMAN이 아닌 직원의 COMM이 NULL

NULL 값을 산술연산 가능하게 만드는 방법
- NULL을 0으로 치환시켜주는 함수 NVL (nvl) 란 함수 사용해서 null 값을 + 연산에 영향을 끼치지않는 값인 0 으로 설정

NVL(컬럼, 변환될 값)

- NULL 값을 다른 값으로 변환해주는 오라클 지원 함수
ex) NVL(COMM, 0) : COMM 컬럼의 NULL값을 0으로 치환 하라는 의미
- NULL 값인 경우만 치환되고 NULL 값이 아닌 경우는 그대로임
+ 오라클 지원함수 NVL 은 오라클 지원함수이므로 대소문자 구분없음

문제 해결

select ename, job, sal, sal * 12, sal * 12 + nvl(comm,0) from emp;

- 라고 하면 제대로 구해짐, null값에 해당하는건 0으로 치환 null아닌건 그대로

별칭만들기

- 수식 전체가 컬럼명이 되므로 보기 불편
- 해당 컬럼에 별칭을 부여할수있다

별칭 부여

- 해당 컬럼 뒤에 as "별칭명" 붙이기
- 별칭을 부여할때 " " 쌍따옴표을 쓴다

- 그럼 이 별칭명이 컬럼명으로 나타남

- as 와 " " 생략하고 실행해도 된다

-- 별칭 부여 : as "별칭명"
select ename, sal * 12 + nvl(comm,0) as "Annsal" from emp; 
select ename, sal * 12 + nvl(comm,0) "Annsal" from emp; -- as 생략 가능
select ename, sal * 12 + nvl(comm,0) Annsal from emp; -- as 와 쌍따옴표("") 생략 가능

- 위 3가지 모두 가능

- 이제 한글별칭명 으로 만들어보자

-- 한글 별칭 부여 : as "별칭명"
select ename, sal * 12 + nvl(comm,0) as "연봉" from emp; 
select ename, sal * 12 + nvl(comm,0) "연봉" from emp; -- as 생략 가능
select ename, sal * 12 + nvl(comm,0) 연봉 from emp; -- as 와 쌍따옴표("") 생략 가능
-- select ename, sal * 12 + nvl(comm,0) 연 봉 from emp; -- 별칭명에 띄어쓰기 있을땐 쌍따옴표 생략 불가

- 별칭명에 띄어쓰기가 있는 경우는 " " 를 생략할 수 없다

select ename, sal * 12 + nvl(comm,0) "연 봉" from emp; -- 가능
-- select ename, sal * 12 + nvl(comm,0) 연 봉 from emp; -- 별칭명에 띄어쓰기 있을 경우에는 쌍따옴표 생략 불가

Concatenation 연산자
- 오라클에서 제공됨
- "||" 연산자임
- 컬럼과 문자열을 연결할때 사용함

-- Concatenation 연산자 : ||
-- : 컬럼과 문자열을 연결할 때 사용함.
select ename || ' is a ' || job from emp;

- || 를 콘케이트네이션 연산자 라고함

DISTINCT 키워드
- 중복행을 제거하고 한번만 출력해주는 역할
- 아래의 문제상황에서 사용

문제 상황

select deptno from emp; -- 중복행 제거 안됨

- 이거 해결법은 컬럼 앞에 distinct 키워드 사용

문제 해결

select distinct deptno from emp; -- 중복행 제거됨, 3개의 부서번호 출력 : 10, 20, 30

문제 1

-- Q. EMP 테이블에서 각 사원들의 job을 1번만 출력하는 SQL문을 작성하세요.
select distinct job from emp;

문제 2

-- Q. EMP 테이블에서 중복을 제거한 job의 갯수를 구하는 SQL문을 작성하세요.
select count(distinct job) from emp;

- COUNT 함수 쓰면 JOB의 개수를 구할수있음

- 또한 JOB 이 중복되지 않도록 컬럼 JOB 앞에 DISTINCT 를 사용

COUNT 함수

- 데이터의 개수를 구해주는 그룹함수

- dept 테이블의 데이터 개수를 구하고 있다

-- count(컬럼명) : 데이터 갯수를 구해주는 역할
select count(*) from dept; -- 4
select count(*) from emp; -- 14
select count(job) from emp; --14

select count(distinct job) from emp; -- 5

- * 는 전체 컬럼 기준으로 데이터 몇 개인지, 즉 총 데이터 수

'국비지원 과정 > Oracle' 카테고리의 다른 글

코딩 22일 / 2022.07.20 / WHERE 조건절, 비교연산자, 논리연산자, LIKE 연산자, 와일드카드, 정렬 (0)	2022.08.01
코딩 18일 / 2022.07.14 / 오라클, 자바 - 오라클(DB) 연동, SQL문 기본 (0)	2022.07.21

PREV 1 ···5 6 7 8 9 10 11 ···14 NEXT

레이커 갓생일기