Common Inline Elements -기본형이 박스가 아닌(기본으로 그 줄 전체를 width로 가져가는 것들) 것 -다른 element들을 막지 않음. 딱 내부값의 길이만큼 => width 조절 불가 Spans () Images () Anchors () a programmer 이러면 a programmer 로 class이름이 pro인 것을 css파일에서 설정해줘서 일부만 밑줄있게 가능 인라인 원소의 경우, 하나가 한 줄을 다 사용하지 않기 때문에, 그 줄의 공간이 없을 때까지 계속 한 줄에 쓰여지게됨 display: inline; =>같은 줄에 계속 작성(이게 기본), 당연히 width 조절 불가 display: block; =>블록처럼, 같은 줄에 다른 것을 작성x, width조절 가능하게 함, ..
Internal CSS 해당 부분 style 바꾸는 방법 -일단 항상 " 바꾸고 싶은 부분: 바꿀 값; "형태 1. 개못생긴 방법 //이렇게 바로 옆에 작성 2. style을 따로 설정해주기 External CSS 참조할 css 파일의 주소를 명시 헤드 끝나기 전에 작성 body{ background-color: #C2DED1; /* 바꾸고 싶은 부분 : 바꿀 값 */ } hr{ border-style: none; border-top-style: dotted; border-color: gray; background-color: none; border-width: 5px; width: 5%; /* box(즉, hr)가 이제 실제 diemsion 가진다! */ } h1{ color: #576F72; font..
1. HTML : 웹 페이지의 구조를 나타냄 CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄 JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음 브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공함 p{ //CSS.css font-size : 1cm; color:#FF0000; } 효과를 넣을 수 있도록 p 택을 이용, 효과가 적용될 텍스트 작성 link 택을 이용해서, stylesheet를 로드(CSS.css에 작성한 것을 적용시키는 과정!) -> 해당 텍스트에 효과 적용된 채로 화면에 나옴 //HTML.html This is a HTML page. 이 글씨는 CSS에 의해 꾸며집니다. //JS.js var newContent = prom..
1. 변수의 scope 선언된 변수는 그 블록 안에서만 사용가능(당연함) 2. 변수의 shadowing - 서로 다른 함수에서 선언 바깥에 선언된 변수의 값 변경시 영향o 근데 블록 안에서 다시 선언하면 새로운 변수 만든거라 그 블록 밖에서는 영향x. 같은 변수명이라도! 3. method, this function f(){ console.log(this); //어떤 객체에 바인드 된 속성으로서 불린 건지 체크 가능 - 속한 게 아니라면 Window(기본) console.log("f is called"); } function setName(name){ this.name=name; //파라미터 name을 현재 객체의 속성인 name에 저장하는 함수 //이 method를 호출 할 때 this의 값은 인스턴스 ..
자바랑 똑같음 1. while 문 while( 조건식 ){ /* 반복 실행될 코드 */ } continue, break 통해 탈출이나 스킵 가능 2. do while 문 실행하고 반복여부 체크 -> 맨 처음엔 무조건 실행된다 do{ /* 반복 실행될 코드 */ }while( /*조건식*/ ); 3. for 문 var sum = 0; for( var i = 0 ; i Object.keys(객체명) 함수 사용해서 속성들만 받아 볼 수 있음 -이거 활용해서 속성..
쓰는 방법 자바와 동일 1. if 문 if(조건식){ //참인경우 실행될 코드} else if( 조건식 ){ //if 문의 조건이 거짓이고, 위의 조건식이 참인경우 실행될 코드} else{ //모든 if, else if 문이 모두 실행되지 않았을 때 실행될 코드 } 2. switch 문 switch( 비교할 값 ){ case 값1: /*비교할 값이 값1인 경우 실행될 코드*/ break; case 값2: /*비교할 값이 값2인 경우 실행될 코드*/ break; ... 여러개의 case default: /*비교할 값이 위의 모든 값과 다른 경우 실행될 코드*/ break; }
1. 배열 만들기 var arr=[]; //빈 배열. undefined var arr1 = [1,2,3,4,5]; //요소의 타입은 섞여도 되고, 모든 타입(객체 포함) 사용 가능 arr1["length"]; //배열의 길이 출력. 빈 배열이라면 0 arr2[3]; //값 반환해줌 2. 배열의 명령어 배열에 엘리먼트 추가/삭제하기 기본적으로 배열의 앞과 뒤에서 엘리먼트를 추가하거나 삭제할 수 있음. .push(element) : 배열의 뒤에 엘리먼트 추가 .pop() : 배열의 뒤에서 엘리먼트 삭제하고 리턴 .shift() : 배열의 앞에서 엘리먼트 삭제하고 리턴 .unshift(element) : 배열의 앞에 엘리먼트 추가 정렬 .reverse() : 배열 뒤집음(원본 변화o) .sort() : 크기 ..
1. 문자열의 길이 객체의 속성 접근방식은 String형태에도 유효 즉, str.length; 나 str["length"]; 형태로 길이를 알아낼 수 있다 문자열 붙이기 str.concat(str2); concat을 연달하 사용하여 여러 개 붙이기도 가능(왼쪽부터 붙음) + 연산자를 사용해서 붙이기도 가능 문자열 + 숫자 되면(순서에 상관없이) 다 문자열로 바뀜 2. 문자열 명령어 특정 위치의 문자열 알아내기 .charAt 함수 이용 => index번째. 인덱스의 범위 밖일 경우 "" 반환 첫 문자 : str.charAt(0) 마지막 문자 : str.charAt(str.length-1) 대괄호(str[5]) 사용 => 범위 밖일 경우 undefined 반환 첫 문자 : str[0] 마지막 문자 : str..
1. 연산자 + 더하기 - 빼기 * 곱하기 / 나누기 => 숫자형 자료형이 자유롭기 때문에, 몫이 아니고 진짜 나누기라는 것 % 나머지 ++, -- 사용 가능 (+= 도 가능) Math 관련 명령어 Math.pow(A,b) : A의 B승을 구해 줌 -> 처음 나옴 Math.sqrt(A) : A의 제곱근을 구해 줌 Math.random() : 0~1 사이의 임의의 난수를 발생시켜 줌 2. 함수 - 일반적인 함수와 사용하는 방법 동일 fuction 함수명( 파라미터1, 파라미터2 ){ //실행할 코드 return 결과값; //결과값 반환 } 3. relational operator(관계연산자) - > 대소비교 logical operator (논리연산자) - and, or, not 안씀!! 이건 걍 파이썬에서..
1. 변수는 모두 다 var로 선언 자바스크립트의 변수에 -숫자 자료형(number type): 정수, 실수 구분없이 -문자열 자료형(string type) -boolean 자료형 : 참(true), 거짓(false) -object(객체): 더 복잡한 형태 사용 가능 typeof(변수)로 자료형 체크 가능! 개발자 도구에서 interaction하는 경우 변수 이름, 명령어 거기다 입력으로 사용 가능 2. 프롬프트는 사용자로부터 받은 문자열을 돌려주기 때문에, 뭘 입력하든 string으로 됨 parseInt, parseFloat으로 원하는 number 타입으로 변환해줌 수학적 오류가 있는 값은 NaN이나 Infinity로 표현됨 단, parseInt와 parseFloat는 명령어 뒤에 따라오는 괄호의 문자..
