무루무루 개발일지

1. String 객체const str1 = 'JavaScript';const str2 = 'JavaScript';  -> 주소 공유const str2 = new String('JavaScript');  -> 따로 올라감 str1 == str2;  // 값만 같고 타입이 달라도 truestr1 === str2;  // 타입까지 비교하면 false String 객체  2. Date 객체날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체    const 변수명 = new Date();   // 현재 날짜 시간    const 변수명 = new Date(년, 월, 일, 시, 분, 초, 밀리초);  // 입력한 날짜 시간에 대한 객체연도(year)2자리로 표기    예) 23 -> 1923년4자리로 표..

1. whille문while(조건식) {    조건식의 결과가 true인 동안 반복할 문장;    ...}do {    조건식의 결과가 true인 동안 반복할 문장;    ....} while(조건식);do ~ while문은 조건식의 결과가 처음부터 false인 경우라도 한 번은 {}에 문장을 실행함 while 문   2. for문 for(초기값; 조건식; 증감식){        조건식의 결과가 true인 동안 반복할 문장;        ...    }    let sum = 0;    for(let i=1; i        sum += i;    }        let i=1;    let sum=0;    while(i         sum += i;        i++;    }    f..

1. 자바스크립트의 특징- 객체 기반의 스크립트 언어- 대소문자 구별- 문장 끝에 ; (세미콜론)을 사용 (생략 가능)* 자바스크립트의 출력Web API Console을 통해 브라우저 Console 창에 출력1. 에 작성2. * 자바스크립트의 실행 순서는 인터프리터 해석 방식이므로 위에서 아래로 실행* 주석문// : 한줄 주석/* 내용 */ : 여러줄 주석* 익스텐션 설치JavaScript (ES6) code snippets  자바스크립트의 출력  2. 변수- 데이터를 저장한 레터럴을 가리키는 메모리 공간- 값이 변경될 수 있음- 자바스크립트의 변수는 타입이 없음- let 키워드를 사용하여 변수를 선언* 파이썬name = '김사과'* 자바스크립트let name = '김사과';* 아주 옛날 옛..

과제. 홈페이지 첫 화면에 애니메이션 효과 적용하기( index.html ) muru muru NEWS WEBSITE RESUME Login Sign in LOADING... [SAKAMOTO DAYS]  ( index.css )@font-face { font-family: 'KCC-Hanbit'; src: url('https://cdn.jsdelivr.net/gh/projectnoo..

1. Css 우선순위1) 동일한 속성을 적용할 경우 나중에 적용한 것이 우선2) 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선3) 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용되면4) 우선순위 계산    - inline: 1000점    - id: 100점    - class, 속성 선택자: 10점    - element: 1점5) !important를 적용하면 0순위 ex)   ( style.css )div { background-color: purple;} ( Html ) CSS 우선순위 div 1번 div 2번 div 3번 div 4번 div 5번 ..

1. 미디어 쿼리 1 미디어쿼리1 2. 미디어쿼리2 ( 미디어쿼리2.css ) * { margin: 0; padding: 0; box-sizing: border-box; } header { width: 100%; background-color: black; margin-bottom: 20px; } nav > ul { height: 50px; list-style: none; color: gold; } nav > ul > li { float: left; padding: 10px; margin: 5px 5px; font-size: 12px; } /* 구형폰: 320px 일반폰: 360px */ nav, #contents { width: 320px; margin: 0 auto; } #intro > img { w..

1. z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음 - 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 - 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨 z-index 1번째 div 2번째 div 3번째 div 2. float - HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소의 다음에 나오는 요소방향을 결정 (left, right) - 컨텐츠 크기 만큼만 영역을 설정(블록) - float를 적용받은 요소는 다른 요소보다(배경)보다 위에 위치 float1 Lorem ipsum do..

1. 정적 위치 지정방식- static position (기본값)- HTML 요소의 위치를 결정하는 기본적인 방식- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 2. 상대 위치 지정방식- relative position- HTML 요소의 기본 위치 (정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식- top, left, right, bottom 속성값을 사용하여 재설정함 상대 위치 지정방식 상대 위치 지정방식1 상대 위치 지정방식2 상대 위치 지정방식3 3. 고정 위치 지정방식- fixed position- 웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치- 뷰포트를 기준으로 위치를 설정하는 방식- top, left, right..

1. 패딩 - 내용과 테두리 사이의 간격 또는 여백 - padding-top, padding-right, padding-bottom, padding-left - padding: 위 오른쪽 아래 왼쪽 순으로 설정 ( HTML ) 안녕하세요 ( CSS ) div#padding {padding: 20px 50px 30px 10px;} 위 오 아래 왼 div#padding {padding: 20px 50px 10px;} 위 좌우 아 div#padding {padding: 20px 50px ;} 위아래 좌우 div#padding {padding: 20px;} 사방 패딩 Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iusto dolorem place..