KIC/HTML-CSS-JS
[HTML/CSS/JS] DAY4
octopengj
2020. 10. 12. 12:25
1. CSS3에서의 추가된 속성(1)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3에서의 추가된 속성(1).html</title>
<style>
div {
border: 4px solid #aaaaaa;
border-radius: 50px;
/*숫자가 커질수록 모서리의 둥근각도 커진다. */
/* 오른쪽크기,아래쪽크기,흐림정도,그림자의 색상(그림자효과) */
box-shadow: 10px 10px 30px #666666;
padding: 10px;
/*테두리와 글자사이의 안쪽 여백 */
}
</style>
</head>
<body>
<div>
<pre><!-- 형식유지태그(문자를 입력할때 공백,줄바꿈을 그대로 적용(게시판 글내용보기) -->
<h1>CSS3에서 스타일을 적용시킬때 브라우저별로 적용이 안되는 경우
접두어 ->Chrome,Opera,Safari-> -webkit (ex -webkit-animation-duration:3s)
FireFox -> -moz-속성명
IE기준 -> -ms-속성명</h1>
</pre>
</div>
</body>
</html>
2. CSS3의 추가된 속성2(이미지의 크기)(2)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3에서의 추가된 속성(1).html</title>
<style>
body {
background: url(../images/bg3.jpg);
/* background-size:넓이 높이
background-size:300px 200px; */
background-size: 80% 80%;
background-repeat: no-repeat;
/*반복적으로 이미지를 출력X */
padding-top: 200px;
}
</style>
</head>
<!-- <body bgcolor="yellow"> -->
<body>
<div>
<p>CSS3는 배경이미지에 관련된 속성이 추가
배경이미지를 불러올때 크기를 지정해서 불러올 수있다.
</div>
</body>
</html>
3. CSS3에서의 추가속성(3)(Text-Shadow)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3에서의 추가속성(3)(Text-Shadow).html</title>
<style>
/*
text-shadow:수평(글자와 그림자사이의 거리) 수직(글자와 그림자사이의 거리)
그림자의 흐림정도 그림자의 색상;
움직이는 거리(오->왼)
-접두어-animation-duration:작동시간(초)
-접두어-animation-name:애니매이션 이름
@-webkit-keyframes 만들고자하는 애니매애션이름 { 기능 부여 }
*/
h1 {
text-shadow: 4px 4px 10px #333333;
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
}
@-webkit-keyframes slidein {
/* 동작 포인트를 지정 */
from {
/* 시작점 */
margin-left: 100%;
/* 여백의 크기를 줄이는 효과 */
width: 100%;
}
to {
/* 종료지점*/
margin-left: 0% width:100%;
}
}
</style>
</head>
<body>
<h1>Text Shadow</h1>
<p>CSS3에서는 text-shadow속성을 이용해서 문자에 그림자효과 부여 가능
그림자를 만들때 수평/수직위치,흐림정도,그림자 색상을 지정가능
</body>
</html>
4. 자바스크립트언어의 특징(1)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>4.자바스크립트언어의 특징(1).html</title>
<script>
//alert("자바스크립트 처음실행") // 한줄주석
/* 여러줄 주석
alert("자바스크립트 연습")
*/
</script>
</head>
<body>
<script>
// alert("본문에서 실행됨")
</script>
<section>
<header>자바스크립트 언어</header>
<article>
<ol>
<li>html문서 내부에서 head태그 내부에서 <script>태그 내부에 작성,본문</li>
<li>프로그래밍언어 문장(파일로 저장(js))(소스파일)->컴파일(컴퓨터가 알아듣는말로 변환)
->실행(메모리에 올려놓고 작업(로딩)</li>
<li>자바스크립트언어는 컴파일 과정(=문법체크)X, 실행과정만 존재한다.(단점)</li>
<li>플랫폼(운영체제)에 상관없이 다 실행이 된다.(장점)</li>
<li>따로 자바스크립트파일로 작성해서 불러올 수 있다.</li>
</ol>
<script src="myscript.js"></script>
</article>
</section>
</body>
</html> 자바스크립트=>html문서내부에서 작성
브라우저가 번역해서 실행해주는 컴퓨터 언어
1.컴파일 과정X ->실행만 존재 O
2.함수형 언어=>** 함수(주요기능)<--->** 자바(메서드)
1)**변수->상수->**자료형->실행
5. 변수의 개요 및 작성법(2)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>5.변수의 개요 및 작성법(2).html</title>
<script>
//var name="홍길동"; //name변수에 홍길동이라는 문자열을 저장하라
//prompt("입력을 받는 문장을 출력")=>입력->확인
var name = prompt("당신의 이름은 무엇입니까?");
//출력문->document.write("출력할문장,변수)
var age = prompt("당신의 나이는?");
//var age=23;
// age=24; //변수명=새로운값을 저장
var dname = prompt("당신의 부서명은?");
document.write("테스트<p>");
document.write(34 + "<p>");
document.write(true + "<p>"); //논리적인값은 대문자로 시작하면 안된다.
document.write("당신의 이름은" + name + "입니다.<br>"); //+ 결합의 기호로 사용
document.write("당신의 나이는" + age + "살이군요!<br>");
document.write("근무하는 부서는" + dname + "이군요<p>");
</script>
</head>
<body>
<ol> 변수의 개요 및 특징
<li>입출력 프로그램(=입력을 받아서 처리해주는 프로그램)</li>
<li>변수->사용자로부터 값을 입력(문자,숫자,논리적인값(참 또는 거짓)) 받아서 저장
메모리(RAM)에 저장(특정한 일시적인 공간)</li>
<li>var 변수명(단어)=저장할값;</li>
<li>출력문은 document.write(출력대상자) 형태로 출력</li>
<li>변수(variable)=>변하는 수(중간에 다른값으로 변경될 수가 있따.</li>
<li>변수이름=>영문자+숫자+특수기호=>숫자부터 시작X</li>
<li>에러잡기가 어렵다.(debug)디버깅하기가 어렵다.->chrome(검사) </li>
</ol>
</body>
</html> 변수->상수(Constant)=>변하지 않은 수(숫자)
변수=>계산 목적=>연산자
6. 연산자(산술,관계)(3)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>6.연산자(산술,관계)(3).html</title>
<script>
/*
연산자->연산(=계산)을 하기위한 기호
1.산술연산자=>+,-,*,/,%(나머지)=> 3(계산이 되는 대상자(항)+5(항)=8 =>이항연산자
단항산술연산자=>+5, -5(음수)(부호)
2.관계연산자(=비교) 4>5 ,>=,<= 참(true) 또는 거짓(false) 인지를 알려주는 연산자
5==5 (= 저장목적) (==) 값이 같은지를 비교할때 사용
!= 같지 않다면 5!=4 (true)
*/
</script>
</head>
<body>
<script>
document.write("산술,관계연산자 출력<br>");
//+
var res = 20 + 30;
document.write("res=>" + res + "<br>");
//-
res = 20 - 30;
document.write("res=>" + res + "<br>"); //단순하면서 반복적인 문장(단순,반복)
//*
res = 20 * 30;
document.write("res=>" + res + "<br>");
// %
res = 20 % 30;
document.write("res=>" + res + "<br>");
alert(res) //대화상자형태로 값을 출력
</script>
</body>
</html> 변수=>문자,숫자,논리적인값=>램의 특정공간에 저장
var 변수명=값
**** 언제 변수를 사용하느냐? ****
1.입출력 프로그램을 작성할때 변수 필요=>몇개? 성격
2.계산할때 변수가 필요(ex 계산기)
3.현재 프로그램의 상태를 기억시킬 필요가 있을때 변수가 필요
=========처음 프로그램을 실행시켰을때 초기값===
ex)그림판 =>왼쪽버튼을 누르지 않은것으로 기억
var mouseclick=false;
만약에 왼쪽버튼을 클릭했다면 그림이 그려진다.
=>제어문(if문)
if(마우스를 눌렀다면) 그림을 그려라
7. 연산자(논리)(4)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>7.연산자(논리)(4).html</title>
</head>
<body>
<script>
/*
산술,관계,논리=>참과 거짓을 판별할 수 있는 연산자(true or false)
and(그리고) && or(또는) || not(!) T->F, F->T
&& or
T T T T F
T F F T F
F T F T F
F F F F T
*/
document.write("논리연산자를 이용<p>");
var su1 = (2 > 5) && (5 < 7)
document.write("su1=>" + su1 + "<br>"); //false
// ||
var su2 = (2 > 5) || (5 < 7)
document.write("su2=>" + su2 + "<br>"); //true
document.write("(!su2)=>" + (!su2) + "<p>") //false
</script>
</body>
</html>
8. 함수의 개요 및 작성법(5)
alert("자바스크립트 연습") =>alert함수를 호출했다.
prompt("당신의 이름은?") =>prompt함수를 호출
caller함수=(회사의 직원)------------>worker 함수
업무
함수명(함수가 처리해야할 항목)
=>매개변수)(직원이 처리해야할 업무)
매개변수X ,매개변수,,,,
alert("자바스크립트 연습")
->alert함수를 호출하면서 매개변수
함수가 업무를 다 처리하고나서
결과를 보고->반환값이 있다(return 값)
=========================
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>8.함수의 개요 및 작성법(5).html</title>
<script>
/*
프로그램(회사), 함수(=직원)
함수->어떤 기능을 가진 최소한의 작업단위
기능=>.값을 입력을 받아서 저장시키는 기능,계산,출력
종류->1.내장함수=>자바스크립트에서 자체적으로 제공되는 함수(alert,prompt,,,)
2.사용자정의 함수=>새로 작성해야할 함수
형식) function 함수명(=직원명)(매개변수1,매개변수2,,,){
함수의 기능(입력->저장,계산,출력)
}
1.매개변수(X),반환값(X)=>단순하고 반복적인 일을 주로하는 경우
함수를 작성하는 이유=>대신 처리해주는 역할=>작업의 양을 줄일 수 있다.
*/
function print() { //함수를 선언->함수를 만드는 행위
//함수의 기능->변수,연산자 계산,제어문 출력
document.write("단순하고 반복적인 일을 주로 하는 함수<br>")
}
</script>
</head>
<body>
<script>
//업무지시를 하는것=>함수호출한다. 형식) 함수명() or 함수명(매개변수1,매개변수2,,,)
print()
print()
print()
print()
print()
</script>
</body>
</html>