이 글은 2020년 국비교육수업을 메모한 것이다.
당시에는 에버노트에 메모해놨었기 때문에, 티스토리 블로그를 시작하면서 백업해둔다.
(1) 6/15 html 1/2
1.html문서구조 및 내용
2.이미지 태그와 하이퍼링크
3.목록보기(ul,li)태그
4.semantic(1)
(2) 6/16 html 2/2 css 1/2
1.테이블 태그
<tr> <td> <th>
2.테이블 태그 병합
colspan="" rowspan=""
align=left|center|right
valign=top|middle|bottom
3.입력양식기본
6.video,audio태그
7.CSS [인라인/임베디드/링크]
(3) 6/17 css 2/2
1.CSS선택자(클래스)
div.a {~~~} ▶ <div class="a"></div>
2.CSS의 id선택자
#x {~~~} ▶ <div id="x"></div>
3. div,span태그의 차이점
div:block, span:inline / display:block,inline,inline-block
4.css의 BoxModel(여백,테두리)
5. 실습
background-color, background-url:url(../ ~)
6.CSS속성(문단,문자열)
line-height
word-spacing
letter-spacing
7.CSS속성(단위)
1em=100%=16px
div#tag > p
8.CSS속성(position)
position: static|absolute|relative|fix
9.Layout
float:left|right|none
clear:both
(3) 6/18 css3 javascript 1/
1.CSS에서의 추가된 속성(1,2,3)
-webkit-animation-duration: 3s
-moz-
-ms-
<pre></pre>
border-radius, box-shadow
background-size: (widht)px (height)px;
background-repeat: no-repeat;
h1 {text-shadow: 0px 0px 10px #333333;}
@-webkit-keyframes slidein{
from {margin-left:100%;
width: 100%;}
to {margin-left:0%;} }
4.자바스크립트언어의특징(1)
소스파일>컴파일>로딩
1)컴파일X로딩만
2)함수형 언어
//head태그 안에
<script>
alert("자바스크립트 처음실행")
</script>
//외부 링크
<script src="myscript.js"></script>
5. 변수의 개요 및 작성법(2)
//입출력
<script>
var name=prompt("당신의 이름은 무엇입니까?");
</script>
document.write("당신의 이름은"+name+"이군요!");
6.연산자(산술,관계,)(3) ~ 7.연산자(논리)(4)
1)산술연산자 : + - * / % 2)비교연산자 : > >= 3)논리연산자 : &&(모참참) ||(하나참참) !
8.함수의 개요 및 작성법(5)
function 함수명(=직원명,동사형)(매개변수1, 매개변수2,,,){
함수의 기능(입력->저장,계산,출력)
}
<head><script> function print() {document.write("단순하고 반복적인 일을 주로 하는 함수")} </script></head>
<body><script> print() </script></body>
(3) 6/22 javascript 2/
1.함수 작성, 종류(1)
1. 매개변수 X, 반환값X
function print1() {
document.write("1.hello"); //단순반복 업무 담당
}
2. 매개변수O, 반환값X
function print3(su, su2) { //계산=>출력
document.write("2.su+su2=>"+(su+su2)+"입니다.");
}
3.매개변수O, 반환값O
<헤드><스크립트>
function print4(su,su2) {
document.write(su+su2);
return result;
}
<바디><스크립트>
var hap = print4(30,40);
document.write(hap);
alert()
5.onclick="document.myForm.kor.focus()">
6.태그의 내용을 변경
id를 사용하여 태그 정보를 불러오고 변경하는 것
바꾸고자하는것
<div id="test">바뀌기 전 텍스트입니다.</div>
트리거 버튼
<form><input type="button" name="변경" onclick="change()"></form>
내용을 불러와서 바꾸는 것 <script><function change() {
//1) 태그의 id값이 test인 태그 정보를 가져오라
var ch = document.getElementById("test");
//2)
alert(ch) //태그 자체
alert(ch.innerHTML) //태그 내용
ch.innerHTML="바뀐 텍스트입니다" //태그 내용을 변경시키는 것
7.이벤트정리
onclick, onload, onchange, mouseover, mouseout
//이미지 hover시 이미지 변경되고 클릭시 하이퍼링크 이동
onmouseover="document.img.src='../images/kid2.gif'"
onmouseout="document.img.src='../images/kid.gif'">
<img name="img" src="../images/kid.gif"> //이 이미지를 변경
</a>
8.배경색을 변경
-
div를 만들고 헤드에 스타일 생성.
-
트리거 버튼 생성
<input type="button" value="buttonRed" onclick="setRed()">
-
헤드에 스크립트 만들고 setRed() setGreen() setBlue() 함수 생성
함수 내용: box라는 id를 가진 div를 가져오고(1) 의 style의 background를 "red"로 변경하라.(2)
: function setRed() {
var box1 = document.getElementById("box") (1)
box1.style.background="#ff0000"; (2)
}
(3) 6/23 javascript 3/
1.함수 효율성
조건식 switch
switch (n) {
case 1: color="";
break;}
2.Toggle 삼항 연산자
변수선언=(조건식)?참인문장:거짓인문장;
var text =(b_val=="네이버")?"다음":"네이버";
3.form(2).html
-
return false; : 탈출문의 return. if문 끝에 쓴다. (반환값의 return과 다르다)
-
암호글자수 .length >= 4 &&
-
리셋 funtion test3() { document.myform.reset(); }
4.배열의 개요 및 작성법.html
배열식 | a2= new Array("30","10","20","50");
배열길이 | a2.lenght => 4처럼 정수로 나옴
배열출력 | a2.sort()
배열 역순 출력 | a2.reverse()
5.form에서 radio type으로 배열 활용하기 <단일선택>, 다중?복수? if문
조건식에 해당할 경우 var sel에 +=을 사용하여 1번, 2번 등의 문자열을 추가하고
최하단에 alert(sel+"그림이 맘에 드시는군요");를 출력하여 번호를 추가한다.
조건식 세 개를 모두 추가하여 결과값이 false일 경우(즉, 선택되지 않았을경우) alert("최소 1개를 선택하라")는 말을 내보낸다.
6.checked에서 배열 활용하기 <복수선택>
조건식 switch
'┝ 개발 언어 > ┝ html_css_js' 카테고리의 다른 글
| 타입스크립트 화살표 함수 정리 (0) | 2023.06.27 |
|---|---|
| [js] location.href 시에 url이 중복되는 현상 (0) | 2022.07.06 |
| 2020/06/25(8) 미니프로젝트-2(메인페이지 작성2) (0) | 2022.03.01 |
| 2020/06/24(7) 미니프로젝트-1(상단메뉴 및 메인페이지 작성1) 드롭다운 메뉴 만드는 방법 (0) | 2022.03.01 |
| 2020/06/23(6) javascript 3/3 (0) | 2022.03.01 |