3주차_예제 코드 모음

210118

See the Pen 210118_child by seung-gu shin (@nine_floor) on CodePen.

first-child, nth-child($)

See the Pen 210118_before, after by seung-gu shin (@nine_floor) on CodePen.

:before, :after

    function hello();
    //function : 함수

    var num=10;
    document.write(num,"<br>");
    //var : 변수(variable)
    // =(등호) : 대입 연산자, 오른쪽의 값을 왼쪽의 공간에 넣는다.

    alert("경고!");
    //alert 함수 : 경고 메세지 출력

    var num1=eval("3+4");
    document.write(num1, "<br>");

    var num2=eval(3+4);
    document.write(num2, "<br>");

    var num=3.14;
    num=parseInt(num);
    document.write(num,"<br>")
    // parseInt : 정수 변환
    // parseFloat : 실수 변환

    var choice=confirm("계속 진행하시겠습니까?")
    document.write(choice,"<br>")
    // confirm 함수 : 확인창 출력

See the Pen 210118_script ex by seung-gu shin (@nine_floor) on CodePen.

script 예제

 

---

210119

See the Pen 210119_html by seung-gu shin (@nine_floor) on CodePen.

웹디기능사 필기 대비 html 태그 톺아보기

 

var num1=9;
var num2=2;
var result=num1%num2;
document.write(result, "<br>");
// % : 나누고 남은 나머지 값




var num3=10;
document.write(num3, "<br>"); //10
document.write(num3++, "<br>"); //10
document.write(num3, "<br>"); //11

var num4=10;
document.write(num4, "<br>"); //10
document.write(++num4, "<br>"); //11
document.write(num4, "<br>"); //11

// ++ : 증가 연산자
// -- : 감소 연산자
// 증/감 연산자는 접두와 접미에 따라 선행/후행으로 나뉨




var num1=9;
var num2=2;
var result=num1>=num2;
document.write(result, "<br>");
// 관계 연산자 : 관계를 판별하는 연산자
// >= <= > <
// ex) num1 >= num2 : num1이 num2보다 크거나 같은가? (이상인가?)
// - 참일 경우 true, 거짓일 경우 false
// 위 예시는 참이므로 result는 true로 출력됨

var num1=9;
var num2=2;
var result=num1<=num2;
document.write(result, "<br>");
// 위 예시는 거짓이므로 result는 false로 출력됨




var num3=9;
var num4=9;
// 동치 연산자 : 같은 값인지 판별하는 연산자
// == != === !==

var result=(num3==num4);
document.write(result, "<br>")
// == : 두 연산자가 같으면 true, 다르면 false
// === : 동작 방식은 같으나 구문 자체가 일치해야 함

var result=(num3==num4);
document.write(result, "<br>")
// != : 두 연산자가 다르면 true, 같으면 false
// !== : 동작 방식은 같으나 구문 자체가 일치해야 함




// 논리 연산자 : 논리 값인 true, false를 가지고 연산하는 연산자
// AND : && / OR : || / NOT : !

// 진리표 (truth table) : 연산 결과에 대한 표
// AND - 논리 곱, 결합
document.write(false && false, "<br>"); // false
document.write(false && true, "<br>"); // false
document.write(true && false, "<br>"); // false
document.write(true && true, "<br>"); // true

// OR - 논리 합, 선택
document.write(false || false, "<br>"); // false
document.write(false || true, "<br>"); // true
document.write(true || false, "<br>"); // true
document.write(true || true, "<br>"); // true

// NOT - 논리 반전, 부정
document.write(!false, "<br>"); // true
document.write(!true, "<br>"); // false

---

 

210121

See the Pen 210121_input by seung-gu shin (@nine_floor) on CodePen.

input / form 태그

See the Pen 210121_login_ex by seung-gu shin (@nine_floor) on CodePen.

input / form 활용 예제 _ 로그인 창

See the Pen 210121_transform_sprite by seung-gu shin (@nine_floor) on CodePen.

transform과 sprite 활용 예제

---

 

210122

See the Pen 210122_css by seung-gu shin (@nine_floor) on CodePen.

CSS 하위선택자 차이

See the Pen 210122_clearfix by seung-gu shin (@nine_floor) on CodePen.

CSS 속성 - clearfix

 

<img class="workplace" src="./workplace/workplace.jpg" alt="workplace" usemap="#workmap">
<map name="workmap">
    <area shape="rect" coords="30,40,275,352" alt="computer" href="./workplace/computer.html">
    <area shape="rect" coords="287,171,331,248" alt="phone" href="./workplace/phone.html">
    <area shape="circle" coords="343,289,23" alt="coffee" href="./workplace/coffee.html">
</map>
<!--
    name : 맵 이름 (이미지 태그에 usemap="#name" 으로 연결)
    shape
    - rect
      : 사각형(Rectangle)
      : x1, y1, x2, y2
    - circle
      : 원
      : x1, y1, radius(반지름)
    - poly
      : 다각형(Polygon)
      : x1, y1, x2, y2, …
    coord : 좌표지정(coordinations)
    href : 연결 할 주소
  -->

map 태그