Spring 3주차(html, css, javascript, jQuery)

- html , css

 

HTML은 뼈대고, CSS는 꾸며주는 녀석

head 태그는 CSS, Javascript 코드를 포함 / body 태그는 뼈대 전체를 포함

 

h1~h6

→ headline의 약자, 신문 제목 같은 녀석이에요.

div

→ divison, 나누는 녀석이에요. 투명 비닐봉투!

p

→ paragraph, 신문 기사 단락과 같은 텍스트 내용을 담습니다.

ul, ol, li

→ (un)ordered list, list에 해당합니다. bullet point.

span

→ 글을 중간중간 잘라내서 색을 입혀준다든지 할 때 사용합니다.

table, th, tr, td

→ 표 입니다! 엑셀 같은 표를 그릴 때 사용합니다.

img

→ 이미지를 나타낼 때 사용합니다.

 

- javascript

 

변수

let a = 3; // 변수를 처음 선언할 때 let을 써줍니다. 자료형은 써주지 않아도 되어요.
let b = 2;
console.log(a + b); // System.out.println()과 같은 녀석입니다. > 5
b = 7;
console.log(a + b); > 10

 

자료형

let name = 'bknam';
let course = "웹개발의 봄 Spring" // 자바와 다르게 홑/쌍따옴표 상관없습니다.
let num = 10;
console.log(num + name); // 문자 + 숫자 하면 둘 모두를 문자로 묶습니다. > 10bknam

 

boolean

let age1 = 18;
let age2 = 20;
let isAdult = age1 > 19;
console.log(isAdult); // false
isAdult = age2 > 19;
console.log(isAdult); // true

 

딕셔너리

let course = {
'title': '웹개발의 봄, Spring',
'tutor': '남병관'
};
console.log(course); > {title: '웹개발의 봄, Spring', tutor: '남병관'}

 

반복문

let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
for (let i=0; i<fruits.length; i++) {
let fruit = fruits[i];
console.log(fruit); > 사과, 딸기 , 수박
}

 

조건문

let fruits = ['사과', '딸기', '수박']; // List 보다 편하게 사용할 수 있습니다.
for (let i=0; i<fruits.length; i++) {
let fruit = fruits[i];
console.log(fruit == '수박');
}

 

- jQuery

 

미리 작성된 자바스크립트 함수 모음집

 

$ 로 시작하고, 괄호 안에 선택자로 대상을 적으면 된다 > ex) $('#contents').hide();

 

input 값 가져오기

$('#post-url').val();

 

input 값 넣기

$('#post-url').val('new text');

 

HTML 없애기

$('#cards-box').empty();

 

HTML 추가하기

$('#cards-box').append(` 추가할 값 `);