THE 나은 웹사이트

1. text-decoration 1-1. text-decoration-line(취소선, 물결선, 밑줄등으로 텍스트를 꾸며줄 때 사용, 기본값은 none) - underline : 텍스트에 밑줄을 그음 - line-through : 텍스트 취소선 - overline : 텍스트 위에 선을 그음 1-2. text-decoration-style(선의 스타일 지정) - solid : 직선 - dotted : 점선 - double : 두 줄 - dashed : '-'(dash) 모양의 선 - wavy : 물결 1-3. text-decoration-thickness : px이나 rem등으로 선의 굵기 조절 1-4. text-decoration-color : 영문으로 된 컬러값, hex코드, rgb로 선의 색상 지정..

1. 결합자란? css를 작성할 때 각 태그의 선택자를 통해 css를 적용해 줄 수 있다. 이때 하나의 선택자가 아닌 선택자와 선택자를 결합하여 좀 더 세밀하게 css를 적용해줄 수도 있다. 2. 결합자의 종류 1) 자손 결합자 어떠한 태그의 자식 태그의 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 띄어쓰기를 통해 css를 적용할 수 있다. 2) 자식 결합자 어떠한 태그의 바로 직계 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 ' > ' 기호를 사용하여 css를 적용할 수 있다. 3) 뒤따르는 형제 결합자 같은 선상에 있는 형제 태그들이 있을 때 특정한 태그 뒤에 오는 모든 형제 태그들의 스타일 속성을 지정해주고 싶을 때 사용한다. ..

1. 객체 리터럴 ** 객체 리터럴이란 중괄호로 묶여있고 key 값과 value값의 한 쌍으로 묶어 저장할 수 있는 저장소 역할이다 (1) 객체 리터럴 기본 형태 let obj = { name : 'k', age: 20, hobby : 'soccer', } let name = obj.name; let age = obj.age; let hobby = obj.hobby; obj.country = 'Korea'; console.log(name, age, hobby, country); // k 20 soccer Korea 출력 -- 객체 리터럴 내 key값과 value값의 한 쌍은 콤마(,)로 구분한다. -- 객체 리터럴 내부 value값에 접근할 때에는 2가지 방법 1) 객체이름.key값 2) 객체이름[ 'k..

1. 함수 ** 함수를 사용하는 이유? : 반복적인 작업을 줄여주고 재사용성 증가를 위해 (1) 함수의 기본 형태 function a(){ // 함수 선언문 내용 } let b = function(){ // 함수 표현식 내용 } let c = ()=>{ // 화살표 함수 내용 } (2) 함수의 매개변수와 인수 -- 함수 호출 시 인수로 괄호안에 값을 넣어주면 함수 매개변수로 받을 수 있다 function a(first, second){ console.log(first+second); } a(1,2); // 3출력 function prc(a,b,c,d,e,f){ console.log(arguments); } prc(1,2,3,4,5,6); // Arguments(6) [1,2,3,4,5,6] 콘솔에 출력 ..

1. 배열이란? - 여러가지 데이터를 저장하는 저장소 역할 let fruits = ['orange', 'watermelon', 'grape', 'apple']; ** 배열에 있는 값을 꺼내거나 수정하려면 [ ]를 이용한다. let fruits = ['orange', 'watermelon', 'grape', 'apple']; let one = fruits[0]; let two = fruits[1]; fruits[3] = 'melon'; console.log(one, two, fruits); // orange watermelon ['orange', 'watermelon', 'grape', 'melon'] 출력 [여러가지 배열 메소드] ** 배열이름은 편의상 arr로 함 - arr.unshift(값) : 배열..

1. for문 - for문의 기본형태 for(초기문;조건문;증감문){ 동작식; } * 초기문은 보통 변수를 선언 * 조건문은 조건이 false가 될 때까지 동작식 반복 수행 * 증감문은 선언한 변수를 증감해줌 for(let i=0;i

1. if문 (1) if문의 기본형태 if(조건){ 내용 // 조건이 참일 때 실행 } if(조건){ 내용 // 조건이 참일 때 실행 }else{ 내용 // 조건이 거짓일 때 실행 } if(조건1){ 내용 // 조건 1이 참일때 실행 }else if(조건2){ 내용 // 조건 1이 거짓이고 조건 2가 참일 때 실행 }else{ 내용 // 조건 1과 조건 2 둘다 거짓일 때 실행 } -- 조건을 불리언값으로 바꾸어 true이면 실행 false이면 실행하지 않거나 else if 나 else의 코드 내용이 실행된다. (2) if문 예제 let a = 3; let b = 2; let c = a+b; if(c === 3){ console.log('c = 3'); }else if(c === 5){ console.l..

1. 산술연산자 + : 더하기 연산자 - : 빼기 연산자 * : 곱하기 연산자 / : 나누기 연산자 ** : 거듭제곱 연산자 % : 나머지 연산자 2. 할당연산자 : '='을 통해 어떠한 값을 피연산자에 할당한다. 3. 논리연산자 && : and의 의미 ||: or의 의미 ! : not의 의미 4. 비교연산자 > : 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우를 의미함 =: 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같음을 의미함 b); // true 출력 console.log(!c); // false 출력 console.log(a == b); // false 출력 console.log(a == d) // true 출력 console.log..

1. 자료형 (1) 문자열(string) : 자바스크립트에서 문자열은 따옴표로 감싼다. 따옴표의 종류에는 ' '(작은 따옴표), " "(큰 따옴표), ` `(백틱)이 있다. 백틱의 경우 ${ }을 통해 변수를 입력할 수 있다. let a = 'Kim'; let b = 'Park'; let age = 20; let c = `${b}의 나이는 ${age}세`; (2) 숫자형 : 숫자형은 정수나 실수, NaN, Infinity를 나타냄. 숫자형끼리 산술연산자를 이용하여 연산이 가능하다. NaN은 Not a Number의 약자로 숫자가 아님, Infinity는 무한대를 나타낸다. let a = 13; let b = 12; console.log(a+b); // 25출력 (3) 불린형 : 값으로는 true, fal..

1. 변수란? 변수는 어떠한 값을 저장하는 저장소 역할이다. 변수는 let, var, const로 선언할 수 있으며 대입연산자 '='을 통하여 변수명에 변수 값을 저장할 수 있다. var a = 1 let b = 2 const c = 3 1,2,3이라는 값이 각각 변수명 a,b,c에 저장되었다. ** var의 경우 호이스팅등의 문제로 요즘에는 잘 사용하지는 않는다. ** 변수명 작성시 주의점 1. 변수명의 첫글자는 숫자가 될 수 없다. 2. 특수기호는 $ 또는 _ 을 제외한 다른 문자는 사용할 수 없다. 3. 자바스크립트 예약어는 변수명으로 쓸 수 없다 ex) let , function, while등 ** 변수명은 변수가 무엇을 담고 있는지 잘 설명할수 있도록 작성하는 것이 바람직하다. 2. 변수 값 수..