Category: HTML에서 웹앱까지

bookmark_borderjQuery Todo리스트 – 1

Posted on

Todo리스트 기능

  • 할 일을 기록할 수 있다
  • 저장된 일을 목록으로 보여준다
  • 할 일을 삭제 할 수 있다
  • 완료 상태로 만들 수 있다
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo List</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./todolist.css"/>
  </head>
  <body>
    <div class="container">
      <div class="title">
        <h1>Todo List</h1>
      </div>
      <div class="contents">
        <div class="input-div">
          <input type="text" id="inputBox" />
          <button id="addButton">추가하기</button>
        </div>
        <ul>
          <li>
            <input type="checkbox" />
            웹/앱 강의 듣기
            <button id="delButton">X</button>
          </li>
          <li>
            <input type="checkbox" />
            인터넷 쇼핑 입금하기
            <button id="delButton">X</button>
          </li>
          <li>
            <input type="checkbox" />
            투두 리스트 완성하기
            <button id="delButton">X</button>
          </li>
        </ul>
        <script src="./todolist.js"></script>
      </div>
    </div>
  </body>
</html>

body {
  background: #a1d0ff;
}

.container {
  width: 300px;
  margin: auto;
}

.title,
.contents {
  background: white;
  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.15);
}

.title {
  text-align: center;
}

.contents {
  padding: 10px;
}

.input-div {
  display: flex;
}

#inputBox {
  flex-grow: 1;
  height: 30px;
}

li {
  list-style: none;
  margin: 20px 0px;
}

#delButton {
  margin: 0px 5px;
}
0522-jquery-todolist-1다운로드
todolist다운로드

bookmark_borderjQuery

Posted on

jQuery

  • 자바스크립트 단순화 라이브러리
  • 특징
    • 빠르고, 작고, 기능이 많은 JavaScript라이브러리
    • HTML문서 조작, 이벤트 처리, 애니메이션, Ajax와 같은 것들을 간편하게 사용하게 함
    • 업계에서는 표준에 가까운 점유율을 가지고 있음
  • 라이브러리
    • 자주 사용되는 함수, 기능들을 재활용 가능하도록 만든 묶음
    • javascript는 다양한 라이브러리를 보유 : jQuery, React, Moment, lodash 등
    • jQuery는 javascript 프로그래밍 시에 도움이 되는 여러 함수들을 제공
$("#continue").text("NextStep...")
vs
document.getElementById("continue").innerHTML ="Nextstep..."

$(selector).action();

  • $ : Jquery라는 것을 정의
  • (selector) : 질의하거나 찾을 html요소
  • action() : 이 요소가 수행할 기능

Click함수

  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </head>
  <body>
    <button id="alert">Alert!</p>
    <script src="./0512-example.js"></script>
  </body>

$("#alert").click(function() {
  alert("Button Clicked!")
});
0511-jquery-1다운로드
0512-example다운로드
  <body>
    <button id="alert">Alert!</p>
    <button id="button2">Click me!</p>
    <script src="./0512-example.js"></script>
  </body>

$("#alert").click(function() {
  alert("Button Clicked!");
});

$("#button2").click(function() {
  $("#alert").click();
});
0513-jquery-2다운로드

Html 함수

  • html 태그의 내용을 가져온다.
  • html태그의 내용을 변경한다.
  <body>
    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
    </div>
    <script>
      alert($("div.demo-container").html());
    </script>
  </body>
0514-jquery-html-1다운로드
  <body>
    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
    </div>
    <button id="btn">Click me!</p>
    <script>
      $("#btn").click(function() {
        $("div.demo-container").html("<div>Button Clicked!</div>");
      });
    </script>
  </body>
0515-jquery-html-2다운로드

text 함수

  • html 태그의 텍스트 내용을 가져온다.
  • html태그의 텍스트 내용을 변경한다.
    <script>
      $("#btn").click(function() {
        alert($("div.demo-box").text());
      });
    </script>
0516-jquery-text-1다운로드

remove 함수

  <body>
    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
    </div>
    <button id="btn">Click me!</p>
    <script>
      $("#btn").click(function() {
        $("div.demo-box").remove();
      });
    </script>
  </body>

결과 :
<div class="demo-container"></div>
0517-jquery-remove-1다운로드

empty함수

    <script>
      $("#btn").click(function() {
        $("div.demo-box").empty();
      });
    </script>

결과:
    <div class="demo-container"><div class="demo-box"></div></div>
0518-jquery-empty-1다운로드

Append 함수

    <script>
      $("#btn").click(function() {
        $("div.demo-box").append("<p>Append Sample</p>");
      });
    </script>
0519-jquery-append-1다운로드

addClass, removeClass 함수

  • addClass : 선택한 태그에 class를 추가한다
  • removeClass : 선택한 태그에서 class를 제거한다.
  • hasClass : 선택한 태그가 해당 class를 가지고 있는지 확인한다.
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
      .red { color: red; }
      .yellow { color: yellow; }
    </style>
  </head>
  <body>
    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
    </div>
    <button id="red_btn">Red</p>
    <button id="yellow_btn">Yellow</p>
    <script>
      $("#red_btn").click(function() {
        $("div.demo-box").removeClass("yellow");
        $("div.demo-box").addClass("red");
      });
      $("#yellow_btn").click(function() {
        $("div.demo-box").removeClass("red");
        $("div.demo-box").addClass("yellow");
      });
    </script>
  </body>
0520-jquery-addclass-1다운로드

Val함수

  <body>
    <input type="text" id="inputBox">
    <select id="selectBox">
      <option value="1">option 1</option>
      <option value="2">option 2</option>
      <option value="3">option 3</option>
      <option value="4">option 4</option>
    </select>
    <script>
      $("#inputBox").val("Hi hi");
      $("#selectBox").val(3);
    </script>
  </body>
0521-jquery-val-1다운로드

bookmark_border자바스크립트 반복문

Posted on

자바스크립트 반복문

  • While
    • 조건이 참인 동안 코드블록을 반복
    • 반복 횟수가 불명확한 경우 주로 사용

while(조건) {
코드블록
}

var a = Math.floor(Math.random() * 10);
var b = Math.floor(Math.random() * 10);
var answer;

while (answer != (a + b)) {
  answer = prompt(a + '+' + b + '= ?');
}
console.log("정답입니다.");
0506-while-1다운로드
  • For
    • 배열안의 요소를 하나씩 꺼내며 반복
    • 배열의 길이만큼 처럼 반복 횟수가 명확한 경우 주로 사용

for(var{변수}of{배열}) {
코드 블록
}

var scores = [90, 92, 84, 98, 70];
var sum = 0;

for (var score of scores) {
  sum += score;
}
console.log("총점: " + sum);
console.log("평균: " + (sum / scores.length));
0507-for-1다운로드
  • 가장 큰 수를 반환하는 함수
function max(arr) {
  var _max = -99999; // 아주 작은수
  for (var i of arr) {
    if (i > _max) {
      _max = i;
    }
  }
  return _max;
}      
console.log("가장 큰 수는 " + max([5, 7, 10, 2, 8]) + "입니다.");
0508-max-num-1다운로드
  • 배열을 화면에 출력하기
<ul id="list"></ul>
<script>
  var list = document.getElementById("list");
  var products = ['데스크탑', '모니터', '노트북', '스피커', '마우스'];

  var html = '';
  for (var product of products) {
    html += '<li>' + product + '</li>';
  }
  list.innerHTML = html;
</script>
0509-print-array-1다운로드

과제 : 전달 받은 배열 중 가장 큰 수를 반환하는 자바스크립트 함수를 작성해보세요.

0510-homework-1다운로드

bookmark_border자바스크립트 조건문

Posted on

자바스크립트 조건문

  • if
  • if~else
  • if ~else if~else
var score = prompt("성적을 입력하세요.");

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}
  • switch
  • break
var language = prompt("언어를 입력해주세요.");

switch(language) {
  case "korean":
    alert("안녕하세요.");
    break;
  case "english":
    alert("Hello.");
    break;
  case "spanish":
    alert("Hola.");
    break;
  default:
    alert("지원하지 않는 언어입니다.");
    break;
}
0505-condition-1다운로드

bookmark_border자바스크립트 함수

Posted on

자바스크립트 함수

함수 정의

  • 특정 기능을 하는 구문(알고리즘,로직)을 독립된 형태로 만드는 것
  • 변수에 저장할 수 있는 한가지 자료형
  • 함수 구조 형식 : var {함수명}=function(){//저장할 코드 }
  • 축약 형식 : function{함수명}(){//저장할 코드 }
  • 함수 실행 : {함수명}()
var sayHello = function () {
  console.log('Hello~');
}
sayHello();

// 같은 코드
function sayHello() {
  console.log('Hello~');
}

함수에 값 전달하기

  • 함수에 저장된 코드를 실행할 때 값을 전달할 수 있음
  • 매개변수 사용 함수 형식 : function{함수명}(값1,값2,…){}
  • 값1,값2,…매개변수라고 함
  • 코드 블럭 안에서 전달 받은 값 사용 가능
  • 함수에 전달하는 값을 함수 인자라고 함
function square(x) {
  console.log(x * x);
}
square(2);
square(0.1);

값을 반환하는 함수

  • 함수의 실행 결과를 반환
  • 함수 코드 블록 안에서 return{값} 형식 사용
  • 반환된 값은 다른 표현식들과 같은 취급
function square(x) {
  return x * x;
}
var vaule = square(4);
0501-function-1다운로드

함수를 인자로 전달받는 함수

  • 함수의 인자로 함수명을 전달
  • 함수 내부에서 전달받은 함수를 실행
  • ex) setInterval(tick, 1000);
function operator(x, y, func) {
  return func(x, y);
}

function add(a, b) { return a+b; }
function substract(a, b) { return a-b; }

console.log(operator(4, 2, add));
console.log(operator(4, 2, substract));

<script>
  var element = document.getElementById("text");

  setTimeout(function() {
    element.innerText = '삭제됨';
  }, 3000);      
</script>
0502-function-2다운로드

배열 객체의 함수

CRUDHTTP 메서드URI
책들의 목록을 표시GET/books
책 한권의 정보를 표시GET/books/{id}
새 책을 생성POST/books
책을 수정PUT/books/{id}
책을 삭제DELETE/books/{id}
var balls = ['축구공', '야구공', '배구공', '농구공'];
balls.forEach(throwBall);

function throwBall(ball) {
  console.log(ball + '을(를) 던졌습니다.')
};

var numbers = [1, 2, 3, 4, 5];
var twice = numbers.map(function(value, index) {
  return value*2;
});
console.log(twice);

var even = numbers.filter(function(value, index) {
  return value % 2 == 0;
});
console.log(even);
0503-function-3다운로드

이벤트

자바스크립트 이벤트

  • 사용자의 입력을 처리
  • HTML태그 마다 다양한 이벤트가 발생됨
  • click, focus, blur 등
  • 이벤트 처리기는 이벤트 발생 시 실행할 함수를 전달받음

이벤트 처리기 등록

  • 자바스크립트로 html요소를 선택한 뒤 addEventListener 함수를 호출
  • 형식 : addEventListner(이벤트이름, 실행할 함수)
    • 첫 번째 인자-이벤트의 이름
    • 두 번째 인자-이벤트가 발생했을 때 실행할 함수

Click이벤트

  • HTML 요소를 마우스로 클릭하거나 터치 디바이스에서 터치시 발생
  • 마우스 이벤트 중 하나로 mousedown, mouseup 이벤트 발생 후에 발생됨
  • 버튼 뿐만 아니라 모든 HTML요소에서 이벤트가 발생되고 이벤트 처리기를 등록할 수 있음
var button = document.getElementById("button");
var element = document.getElementById("count");

var count = 0;
button.addEventListener('click', function() {
  count++;
  element.innerText = count + '회 클릭';
});
0504-function-4다운로드

bookmark_border자바스크립트 객체

Posted on

자바스크립트 객체

객체의 정의

  • 객체의 구성:
    • 속성(Property)
    • 메써드(Method)
  • 객체는 키와 값의 쌍으로 복합 정보를 저장
  • 객체 저장 형식
    • { “키1”: “값1”, “키2”: “값2”, … (생략) }
  • 객체의 요소에 접근 방식
    • {객체명}.{키} 형식
  • 객체의 한 키/값 쌍을 프로퍼티라 함
var student = {
   "name":"홍길동", "id":"219xxx", "gender":"남성", "address":"포항시 북구"
}
student.name
student.id
student['name']

var students = [
 {'name':'홍길동', 'id':'219xxx'},
 {'name':'김아무개', 'id':'218xxx'},
 {'name':'최xx', 'id':'220xxx'}
}
student[2].name
var id_name = student[1].id + ' ' + student[1].name

중첩 객체

• 객체의 프로퍼티의 값으로 객체를 가질 수 있음
• 객체 안에 다른 객체 저장 가능

var student = {
   name: {
          first: '군오',
          last:'김'
   },
   class: ['자바스크립트', '파이썬']
}
student.name.last + student.name.first

내장 객체 : Math, Date

  • 자바스크립트에서 자주 사용하는 기능을 미리 구현해 놓은 객체
  • Math, Number, Date, Array, Set 등 다양한 내장 객체가 존재
  • Math
    • 수학적인 상수와 함수를 가진 객체
코드 설명
Math.PI 원주율
Math.abs(x) x 의 절대값
Math.ceil(x),
Math.round(x),
Math.floor(x)		 x의 올림,
반올림,
버림
Math.sqrt(x) x 의 제곱근
Math.max(x, y, …),
Math.min(x, y, …)		 인수 중 가장 큰수,
가장 작은수
  • Date
    • 날짜와 시간을 다루기 위한 객체
코드 설명
var today = new Date() 변수 today 에 현재 날짜, 시간을 저장
var someday = new Date(‘2019-06-03’) 변수 someday 에 2019년 6월 3일을 저장
today.getFullYear() today 에 저장되어 있는 날짜의 4자리 연도를 반환
today.getMonth() today 에 저장되어 있는 달을 나타내는 0에서 11 사이의 수를 반환. 0은 1월
today.getDate() today 에 저장되어 있는 날짜의 ‘일’을 반환
today.getDay() today 에 저장되어 있는 날짜의 요일을 나타내는 0에서 6 사이의 수를 반환. 0은 일요일

전자시계 만들기

<p id="text" class="content"></p>
<script>
  var element = document.getElementById("text");
  var tick = function() {
    var now = new Date();
    var time = now.getHours() + '시' + 
                now.getMinutes() + '분' +
                now.getSeconds() + '초';
  
    element.innerText = time;
  };
  setInterval(tick, 1000);
</script>
0402-time-tick다운로드

bookmark_border자바스크립트 배열

Posted on

자바스크립트 배열(Array)

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
let index = cars.indexOf("Volvo");

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits.push("Kiwi");

var students = ['김xx', '최xx', '박xx', '이xx']
students[Math.floor(Math.random()*students.length)]


let a = Math.floor(0.60); > 0
let d = Math.floor(5.1); > 5
let e = Math.floor(-5.1); > -6
let f = Math.floor(-5.9); > -6

Html문서에 자바스크립트 코드 포함

  • JavaScript HTML DOM Document
  • document.getElementById: 결과가 하나
  • document.getElementsByTagName, document.getElementsByClassName: 결과가 다수
<!DOCTYPE html>
<html>
<body>
  <p id="my_text" class="content"></p>
  <script>
    var element1 = document.getElementById("my_text");
    var element2 = document.getElementsByTagName("p");
    var element3 = document.getElementsByClassName("content");

    console.log(element1);
    console.log(element2);
    console.log(element3);
  </script>
</body>
</html>

> 크롬 console 결과
<p id="my_text" class="content"></p>
HTMLCollection(1)
HTMLCollection(1)


<!DOCTYPE html>
<html>
  <head><title>7-2</title></head>
<body>
  <p id="my_text" class="content"></p>
  <script>
    var element = document.getElementById("my_text");
    var name = prompt("이름을 입력하세요");
    document.innerText = name + "님, 안녕하세요."
  </script>
</body>
</html>
0401-javascript다운로드

bookmark_border자바스크립트 변수와 연산자

Posted on

자바스크립트 변수와 연산자

자바스크립트 소개

  • 웹 브라우저에서 동작하는 스크립트 언어
  • HTML 요소 조작, 사용자 입력 처리 가능
  • 가장 인기있는 프로그래밍 언어
    • 앱 개발
    • 서버측 프로그램 개발
    • 사물인터넷 개발 등
    • 다양한 방면에서 이용됨
  • 자바스크립트의 장점
    • 웹 브라우저에서 코드 작성 및 실행가능
    • 데이터베이스부터 앱까지 모두 개발 가능
    • 타 언어에 비해 배우기 쉬움

변수의 정의와 사용

  • 크롬 > F12 >Consol > 입력, Shift+Enter (줄바꿈)
var a = 10
var b = 3
var c = (a + b) / 2
console.log(c)

var name = "자바스크립트"
console.log(name)

연산자 종류와 사용

var name = "자바스크립트" + "배우는" + "시간입니다"
console.log(name)

console.log('10' + 5) // 문자로 인식
> '105'

var trueOrFalse = true
console.log(trueOrFalse)

var speed = 80
var speedLimit= 100

speedViolation = speed >= speedLimit
> false

bookmark_border부트스트랩 소개 및 활용

Posted on

부트스트랩 소개 및 활용

부트스트랩

  • 웹 디자인을 목적으로 하는 오픈 소스의 Framework
  • CSS와 JAVA 스크립트로 이루어진 라이브러리
  • 트위터 내부의 인터페이스 일관성을 목적으로 개발(Blue Print)
  • 오픈 소스로 공개되면서 Bootstrap으로 바뀜

프레임 워크 (Framework)

  • 소프트웨어의 생산성 문제 때문에 개발된 방법
  • 반복된 구조나 기능들을 추상화 시켜 재사용을 가능하도록 하는 소프트웨어 환경

Bootstrap의 장점

  • 저렴한 비용
    • 오픈소스 이기 때문에 무료로 이용 가능
    • 저렴한 비용으로 다양한 테마 구매 가능
  • 시간 절약
    • 웹 페이지를 만들 때, 코딩에 대한 부담 감소
    • HTML, CSS 코드가 이미 형성 되어 있음
  • 사용하기 간편한 그리드 시스템
    • 태블릿, 스마트폰 등 다양해지는 화면의 사이즈에 맞게 비율에 따라 디자인 가능
  • 모바일 자동 적용(반응형)
    • 다양한 디바이스 크기에 맞게 요소 배치
    • 모바일 우선 지원
    • Desktop용 제작 > mobile용 자동으로 제작

Bootstrap의 단점

  • 기존 set-up과의 충돌
    • 기존에 제작된 코드들과 새로운 코딩들이 충돌, 버그 발생
  • 대용량
    • 부트스트랩 전부를 이용할 경우 126KB의 CSS와 29KB의 자바 스크립트 포함
    • 로딩 시간 길어짐, 모바일 배터리 문제
  • 보편화
    • 자체적으로 디자인한 것에 비해
    • 공장에서 찍어낸 듯한 느낌을 피하기가 어려움
  • 불필요한 class들 발생
    • 도메인 객체 모델이 불필요한 class로 가득 채워 짐
    • 좋은 웹디자인 규칙을 어김

부트스트랩 적용

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<p class="text-left">좌측정렬된 텍스트.</p>
<p class="text-center">중앙정렬된 텍스트.</p>
<p class="text-right">우측정렬된 텍스트.</p>
<p class="text-justify">양쪽정렬된 텍스트.</p>
<p class="text-nowrap">그냥 텍스트.</p>

<!-- 순서없는 -->
<ul>
  <li>...</li>
</ul>

<!-- 순서있는 -->
<ol>
  <li>...</li>
</ol>

<!-- 스타일 없는 -->
<ul class="list-unstyled">
  <li>...</li>
</ul>

<!-- 한줄로 보여주는 -->
<ul class="list-inline">
  <li>...</li>
</ul>

<!-- 기본예제 -->
<table class="table">
  ...
</table>

<!-- 줄무늬 행 -->
<table class="table table-striped">
  ...
</table>

<!-- 맥락적인 클래스들 -->
<!-- `tr`, `td`, `th` 모두 사용 가능 -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

<!-- 반응형 웹 테이블 -->
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

부트스트랩을 이용한 설문조사 문서

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 합쳐지고 최소화된 최신 CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <title>나의 설문조사</title>
    </head>
    <body>
        <h2>설문조사</h2>
        <form>
            <h3>설문자</h3>
            <div class="form-group">
              <label for="exampleInputEmail1">이메일 주소</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">암호</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
            </div>
            <h3>학년를 선택하시오</h3>
            <div class="radio"><label><input type="radio" name="학년" value="1학년">1학년<br></label></div>
            <div class="radio"><label><input type="radio" name="학년" value="2학년">2학년<br></label></div>
            <div class="radio"><label><input type="radio" name="학년" value="3학년">3학년<br></label></div>
            <div class="radio"><label><input type="radio" name="학년" value="4학년">4학년<br></label></div>
            <h3>HTML부터 웹앱까지를 듣는 이유는?</h3>
            <div class="checkbox"><label><input type="checkbox" name="홈페이지를 만들고 싶어서" value="수강이유">홈페이지를 만들고 싶어서</label></div>
            <div class="checkbox"><label><input type="checkbox" name="실무전산 필수학점을 위해서" value="수강이유">실무전산 필수학점을 위해서</label></div>
            <div class="checkbox"><label><input type="checkbox" name="김근우 교수님과의 교제를 위해서" value="수강이유">김근우 교수님과의 교제를 위해서</label></div>
            <div class="checkbox"><label><input type="checkbox" name="그냥" value="수강이유">그냥</label></div>
            <h3>학기수를 선택하시오</h3>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            <!-- <button type="submit" class="btn btn-default">제출</button> -->
            <input class="btn btn-default" type="submit" value="전송하기"></input>
            <input class="btn btn-danger" type="reset" value="취소하기"></input>            
        </form>
        <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>
0304-bootstrap-intro다운로드

bookmark_borderCSS 고급활용

Posted on

전환 : CSS Transitions

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
...
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
...

애니메이션 : CSS Animations

<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
...
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
...

그래디언트 : CSS Gradients

<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
...
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):/p>
<div id="grad1"></div>
...

텍스트 그림자 효과 : CSS Shadow Effects

<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
...
<h1>Text-shadow effect!</h1>
...

상자 그림자 효과 : CSS Box Shadow

Text Card Shadow
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
...
<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>
  <div class="container">
    <p>January 1, 2021</p>
  </div>
</div>
...
Image Shadow
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
...
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>
...

페이징 : CSS Pagination Examples

<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
...
<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>
...

툴팁 : CSS Tooltip

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
...
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
...

2D변형 – rotate, scale, translate : CSS 2D Transforms

<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
...
<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
...

<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
...
<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>
...

과제 : 0305-css-homework-1.html