20일차 2021.02.26.금 CSS , 자바스크립트

빅데이터 교육과정 (2021-01-25 ~ 2021-06-24)/WEB (02-22 ~)

20일차 2021.02.26.금 CSS , 자바스크립트

hwangpro 2021. 2. 28. 03:54

CSS를 사용하는 이유 : 일괄성과 편의성

Html 문서가 등장한 목적은 간단하고 빠르게 인터넷 상에 정보를 공유할 수 있는 문서를 만드는 것

겉 모습은 CSS로 ~~~ (예쁘게 꾸미는 건 CSS로)

CSS 정의

코드 작성

- 인라인 스타일 지정

- 2.01.html

- 태그에 직접 스타일 지정하는 방법

- 하나의 태그에만 원하는 스타일 지정 / 많이 쓰진 않음 / 그 순간만 적용할 때 !

- 같은 스타일을 사용하는 태그가 많다면 스타일 코드를 작성하는 작업이 많아진다는 단점있음

- CSS로 지정

코드 작성

<div>와 <span>의 차이 :

div : 블록 형식 공간 구분 division 구분,분류

span : 인라인 형식 공간 구분

인라인 : 쉽게 말하면 딱 그 크기

위에서 span은 그냥 글씨 자체만 따로 묶은 것임

링크 걸지 않고 포함시켜서 쓰는 방법

아이디는 앞에 #을 붙여서 표현 / 아이디는 중복으로 못 씀 / 아이디를 미리 지정해놓고 선언

클래스는 같은 걸 쓸 수 있다. / 각자 똑같은 걸 쓸 수 있다. **클래스 형태 많이 씀

subtitle

클래스를 지정할 때 같은 클래스라 할지라도 태그별로 지정가능하게 설정

위에 다 만들어놓고 밑에서 다 갖다쓰는 것

디테일하게 다 만들어놓고 밑에서 조합하는 것

5개를 쓰고 여기서 또 골라쓸 수 있는 게 class 특성

css html 내부에 사용

<style type="text/css">

선택자 {} / .title처럼 변수

</style>

css 외부 파일 불러오기

<link rel="stylesheet" type="text/css"

href="css주소">

<style type="text/css">

@import url("css주소");

</style>

중복될 시 : 최근 것을 따름

ex. css파일, html 내 css -> 후자

-> 자바의 오버라이딩과 비슷하군.

인라인 스타일 : 직접 지정 (HTML Body 내)

태그 명 : 태그 이름으로 지정

(Ex. *, tr, table, h1 등)

* : 전체 태그

ID 명 : ID 속성을 사용하여 지정, # 사용

(아이디는 고유하므로 하나당 하나씩, 중복 없이 사용)

클래스 명 : class 속성을 사용하여 지정, .사용

(중복되게 사용하고 싶을 때 class로 만들자)

- 태그와 클래스 선택자 조합 사용 (태그.클래스)

-> 특정 태그만 따로 디자인 하고싶다! 할때 사용

자바 스크립트 (확장자 ~.js)

document=객체

new를 입력하지 않고 바로 쓸 수 있는 객체를 '내장객체'라고 한다. (static과 같음)

var = varuable의 약자

var a로 쓰면 됨

var firstname; -> 선언

무조건 타입 var가 처음에 붙음

배열: 동일한 데이터 타입을 메모리상에 순차적으로 확보한 것

var 배열명 = new Array();

배열명.push(1); -> 데이터가 들어있는 상태에서 항상 push는 항상 마지막에 넣음

자바스크립트에선 배열 지정을 안 해도 됨.

arrNumber.push(1);

배열 - var asd = new Array(); - 사이즈 만들필요 없다.
배열명[0] = 1;
배열명[1] = 2;
배열명[2] = 3;
배열명[3] = 4;
배열명[4] = 5;

document.write(배열명[1]);
배열명.push(4); 이러면 배열명[3]에 4가 들어간다. 마지막에 들어가는 느낌.
배열명.push(5);

자바와 동일

예외처리

리턴타입을 안 씀

대신 funtion이라는 함수명을 써야함

자바 스크립트에서 리턴타입을 안 쓴게 리턴값이 없어서 그런게 아님.

생략해준거임

매개변수를 줄 때도 타입을 명시하지 않음.

스크립트 : 쉽게 간단한 텍스트 편집기 프로그램으로 작성하며 속도가 빠르고

실행속도가 빠른 것

document.write("Hi"); // Like Syso of JAVA, document is object

</script>

내장 객체 : 만들지 않고 바로 사용 가능한 객체 (Like static of JAVA)

다 필요없고 var로 변수를 씀

var 변수명 = 값;

var 배열명 = new Array();

배열명.push(값); 또는 배열명[인덱스]=값;

산술, 대입, 비교, 논리, 조건 -> 다들 아시죠?!

if, switch, for, while, continue, break문 -> 다들 아시죠?!

try ~ catch문 -> 다들 아시죠?!

예외 처리

var firstname = "윤";

// document.write("난"+lastname); // 에러가 안나고 아예 보이질 않음

try {

document.write("난"+lastname);

} catch(ex) {

document.write(ex.message);

}

함수

var로 변수를 하니 리턴타입도 안쓴다. (Like Constructor of JAVA)

-> 명시를 안할뿐 리턴타입은 있단다.

function 함수명(매개변수) {

// 실행코드

}

함수명(); // 호출

Ex. 덧셈!

function 함수명(매개변수1, 매개변수2) {

document.write(매개변수1+ " + " + 매개변수2 = (매개변수1+매개변수2)

}

function add(num1, num2) {

// document.write(num1+ " + " + num2 = (num1+num2);

return num1+num2;

}

var result = add(1, 3);

document.write(result);

1.window.alert("메시지"); -> 웹사이트에서 제일 많이 씀

window 생략 가능

window.confirm() -> yes or no 의 형태로 되어있는 것.

menubar=yes/no	윈도우의 menubar 표시여부
directories=yes/no	윈도우의 directory button들의 출력여부
location=yes/no	윈도우의 location box 표시여부
status yes/no	윈도우의 상태표시줄 표시여부
toolbar=yes/no	윈도우의 toolbar 표시여부
scrollbars=yes/no	윈도우의 가로 세로 scrollbar 표시여부
resizable=yes/no	윈도우의 크기가 조정될 수 있는 지 결정
width=수치	윈도우의 너비 결정
height=수치	윈도우의 높이 결정
top=수치	윈도우의 위치조절(화면 상단으로 부터 간격 조정)
left=수치	윈도우의 위치 조절(화면 왼쪽으로 부터 간격 조정)

widthopen되는 팝업 창의 너비를 지정heightopen되는 팝업창의 높이를 지정leftopen되는 팝업창의 x축 위치를 지정topopen되는 팝업창의 y축 위치를 지정scrollbars팝업창의 scrollbar를 Visible 여부를 설정 (scrollbars = no or scrollbars = yes)location팝업창의 URL 입력란을 Visible 여부를 설정 (location= no or location= yes)toolbars팝업창의 도구상자를 Visible 여부를 설정 (toolbars= no or toolbars= yes)status팝업창의 상태 표시줄을 Visible 여부를 설정 (status= no or status= yes)

location=yes, status=no

location은 최소화, 최대화, 닫기 창 크기를 얘기하는 것

status은 밑에 창들 뜨는 거

window 내장 객체의 메소드(함수)

alert, prompt, comfirm, open, settimeout, setinterval, moveBy, moveTo, resizeTo, resizeBy

window.alert("메세지"); // window 내장 객체는 생략이 가능해여!

// 웹에서 dialogue 뜨는 거

prompt("메세지") : 적는 텍스트 창이 나옴

-> alert("메세지") 콤보 가능.

---------------------------------------------------------------

var result = confirm("Yes or no로 대답해야 될 것 같은 느낌의 질문");

if (result) { //result의 자료형은 boolean 같은 느낌이라고 보면 될 것 같다.

alert("대충 맞다고 하는 문장");

}

else {

alert("대충 틀리다고 하는 문장");

}

<html>
<head>
<title>window.confirm 메서드</title>
<script language="javascript">
var result=confirm ("2020년도에 이루고자 하는 것들을 이루셨나요?");
if (result){
alert("수고하셨어요! 2021년에도 화이팅!!");
}else{
alert("저런 2021년에는 꼭 모두 이루세요!!");
}
</script>
</head>
<body>
</body>
</html>

open("팝업창주소", "이름", "속성")

새로운 팝업창이 pop up

fullscreen=yes|no|1|0 : 전체 화면 모드. IE에서만 동작합니다.

height=pixels : 창의 높이를 지정합니다.(height=600)

width=pixels : 창의 너비를 지정합니다.(width=500)

left=pixels : 창의 화면 왼쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.

top=pixels : 창의 화면 위쪽에서의 위치를 지정합니다. 음수는 사용할 수 없습니다.

location=yes|no|1|0 : 주소 표시줄 사용여부를 지정합니다. Opera에서만 동작합니다.

menubar=yes|no|1|0 : 메뉴바 사용여부를 지정합니다.

resizable=yes|no|1|0 : 창의 리사이즈 가능 여부를 지정합니다. IE에서만 동작합니다.

scrollbars=yes|no|1|0 : 스크롤바 사용여부를 지정합니다. IE, Firefox, Opera에서 동작합니다.

status=yes|no|1|0 : 상태바를 보여줄지 지정합니다.

titlebar=yes|no|1|0 : 타이틀바를 보여줄지 지정합니다. 호출 응용 프로그램이 HTML 응용 프로그램이거나 신뢰할 수있는 대화 상자가 아니면 무시됩니다.

toolbar=yes|no|1|0 : 툴바를 보여줄지 지정합니다. IE, Firefox에서 동작합니다.

setInterval(실행할 함수명, 시간);

시간 : 재동작할 때까지의 시간 (1000이면 1초에 한 번씩)

<실습> 6번 창 뜬 다음에 꺼지게 만들기

String.strike();

취소선

<!DOCTYPE html>
<html>
<head>
<title>String 객체로 코드 생성</title>
<script language = "javascript">

var s = "java";

document.write(s.strike());
</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>String 객체로 코드 생성</title>
<script language = "javascript">

document.write("java".strike());
</script>
</head>
<body>

</body>
</html>

2가지로 취소선 표시 가능

1. getElementByld 단수

value = 버튼 위에 보이는 글자

ID야. LD 아니야.

GetElementById가 document객체의 내장함수

자바로 치면 클래스랑 메소드 같다. (??)

2. getElementsByName 복수

Checkbox 중복체크가 가능. / Radio는 하나만 체크가능.

3. getElementsByTagName 복수

함수 이름

getElementById : id 하나

getElementsByName : name 배열

getElementsByTagName : 태그 배열

onclick : 버튼을 누르면 상호작용