천사님 밥 친구해요

1.변수 : 데이터 저장(옛날 방식) 옛날 방식인 var는 변수, 상수가 동시에 가능한 타입 입니다. 변수는 데이터를 저장하는 저장소 입니다. x,y,z에 데이터를 저장하고 console.log()로 호출 중입니다. var x = 100; //변수 X에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저장함 var z = "javascript" //변수 z에 문자 "Javascript"를 저장함 console.log(x); // 100 출력 console.log(y); // 200 출력 console.log(z); // javascript 출력 var는 변수, 상수가 동시에 가능하기 때문에 최근에는 사용을 안하고 있습니다.(쓰는거는 가능함) 최근부터는 let(변수), const(..

1. 10보다 큰 숫자 찾기 입니다. let arr = [1,3,5,7,9,11,13,15,17,19]; // 배열 안에 주어진 값을 저장합니다. // for문으로 배열의 길이만큼 배열의 인덱스 번호에 접근하여 자료를 호출 합니다. for(let i=0; i 10) { //저장된 값 중 10보다 큰수만 출력 됨. document.write(arr[i]); // 결과값 : 11, 13, 15, 17, 19 } } 결과값 : 11, 13, 15, 17, 19 해결 방법 배열안에 주어진 숫자를 입력합니다. for문을 통해 배열 안에 있는 자료를 하나하나 가져 옵니다. if문을 통해서 가져온 자료를 10과 비교해서 10보다 큰 숫자만 출력하게 합니다. 2. 사용자로부터 1이상 높은 값을 입력 받고 짝수만 출력하..

float 웹페이지를 제작하다보면 세로(위 -> 아래)로 block이 구조로 생성이 됩니다. 이때 좌우로 정렬하는 방법 중에 이전에 사용하던 방식인 float이라는게 있습니다.float: left를 사용하게 되면 그림처럼 (왼쪽 -> 오른쪽)으로 block들이 정렬이 됩니다. 그리고 float: left를 사용하다 보면 화면이 겹치는 현상이 발생하게 됩니다. 이때는 clear: both를 하면 겹침 문제가 해결이 됩니다. HTML 삽입 미리보기할 수 없는 소스 요약 좌우 정렬을 할 대상에 "float: left"를 사용합니다. float: left를 사용하여 이미지 겹침 현상이 일어나면 clear: both를 사용합니다. 그리고 테스트를 해서 깨짐 현상이 있는지 확인해야 합니다. clear CSS cle..

이미지 출처 if문 코딩을 하다보면 어떤 경우에는 실행을 하게하고. 어떤 경우에는 실행을 안하게 하고 싶을때가 많습니다. 이때 쓰이는게 조건문 입니다. 그 중 가장 많이 사용하는 if문 입니다. 사용방법 if(조건) { 코드 } else { 코드 } if문의 조건문이 참(true)라면 if문이 실행이 되고. if문의 조건문이 거짓(false)라면 else문이 실행이 됩니다. const number = 100; if(number === 50) { console.log("number은 50가 똑같습니다.(true)"); } else { console.log("number은 50가 똑같지 않습니다.(false)"); } 결과 : number은 50가 똑같지 않습니다.(false) 중첩 if문 중첩 if문은 조..

반복문을 하기 전에 변수에 대해 알아보자 자바스크립트에는 let(변수)와 const(상수)가 있습니다. var란 변수도 있지만 사용시 변수와 상수가 둘다 가능하기 때문에 let(변수)와 const(상수)를 사용하는 것이 효율적입니다. for문 자바스크립트에서 가장 많이 사용하는 반복문은 for문 입니다. for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리하죠. for문에서는 몇번 반복했는지 기록하기 위해 카운터를 사용하고 for문의 첫번쨰 항에서 카운터 변수를 지정합니다. 사용방법 : for(초깃값; 조건; 증가식) { 코드 } 초깃값 : 몇번 반복할지 지정하기 위해 카운터 변수를 사용합니다.이 항목에서 카운터 변수를 선언ㅇ하고 초기화 합니다. 초깃값은 0이나 1부터 시작합니다..

HTML에서 사용되는 태그 이미지 출처 : HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 있습니다. : HTML 문서의 메인 메뉴나 목차 등을 정의해 주는 태그입니다. : HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 섹션 주제에 대한 제목 요소 ~를 포함하는 것이 좋습니다. : HTML 문서 내에서 독립적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목 요소 ~를 포함하는 것이 좋습니다. : 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며 HTML 문서의 오른쪽이나 왼쪽의 사이드 메뉴나 고아고 등의 영역으로 사용됩니다. : HTML 문서의 푸터 영역을 의미하는 태그로 섹..

HTML 삽입 미리보기할 수 없는 소스

산술 연산자의 종류 1. + : 더하기 연산을 할 때 사용합니다. let number = 10 + 20; console.log(number); // 30 출력 2. - : 빼기 연산을 할 때 사용합니다. let number = 30 - 15; console.log(number); //15 출력 3. * : 곱하기 연산을 할 때 사용합니다. let number = 20 * 30; console.log(number); //60 출력 4. / : 몫을 구 할 때 사용합니다. 나눗셈이라고 보시면 됩니다. 두수를 나누어서 몫에 해당하는 값을 반환하는 연산자 입니다. let number = 10 / 5; console.log(number); // 몫인 2가 출력 5. % : 나머지를 구할 때 사용합니다. %연산자는..

ID 선택자 1.HTML요소에 id로 이름을 붙일 떄에는 유일한 이름을 부여해야 합니다. 2.CSS에서는 id 선택자 앞에 #(샵)을 붙여야 합니다. 3.ID명은 숫자로 시작할 수 없습니다. 4.ex) ID선택자 CLASS 선택자 1.HTML요소애 같은 이름을 부여할 때에는 class로 이름을 붙입니다. 2.여러 개의 요소에 같은 class명을 부여하고 있습니다. class 선택자 앞에 .(점)을 붙여야 합니다. 3.CLASS명은 숫자로 시작할 수 없습니다. 4.ex) CLASS선택자 전체 선택자 1.모든 요소를 가리키는 선택ㅈ가로서 *(별)로 표시합니다. 2. 불필요하게 전체 선택자를 사용하는 것은 속도를 저하시키는 원인이 되므로, 반드시 필요한 경우가 아니면 선택자를 정확하게 명시하는 것을 권장합니다..

CSS 정의 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, @import, 인라인 스타일시트 등이 있습니다. CSS 스타일시트 지정하는 방법 1. 내부 스타일시트 CSS를 HTML 문서안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 내부 스타일 시트 지정 방법 2. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 내부 스타일 시트 지정 방법 3. @import @import는 CSS 안으로 다른 CSS 팡리을 불러들일 경우 사용합니다. 내부 스타일 시트 지정 방법 4. 인라인 스타일시트 인라인 스타일..

변수부터 익혀보자 변수란 "프로그램에서 사용하기 위해 값을 담아 놓는 바구니"라고 생각하면 쉽습니다. 변수 이름 지정하기 1.변수 이름은 숫자로 시작할 수 없고. 이름 안에 공백이 포함되어 있으면 안됩니다. 2.앞에 숫자가 오면 안됩니다.(ex: 25name) 3.글씨 중간에 띄어쓰기를 사용하면 안됩니다.(ex: na me) 4.특수문자(*, ? 등)은 인코딩할 떄 문제가 발생할 수 있으므로 사용하지 않는 것을 권장합니다.(ex: name*) 5.무의미한 변수 이름은 피합니다. 변수 선언하기 자바스크립트에는 값을 변경할 수 있는 "변수(let)"와 값이 바뀌지 않는 "상수(const)"가 있습니다. 사용할 변수를 선언하고 나면 "=" 기호를 사용해서 변수에 값을 저장할 수 있는데. 이것을 "변수에 값을 ..

HTML

시멘틱 마크업 이미지 출처(클릭) 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다. 마크업을 할 때는 "왜 시멘틱하게 마크업을 해야하지?"라는 의문이 들 수도있습니다. 모든 사람들이 정보를 동일하게 받아 들일 수 있는 환경이 아닐 수도 있습니다. 예를 들어 시각장애인의 경우에는 HTML 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다. 실제 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것이 중요합니다. 1. 메타데이터 콘텐츠 : head태그 안에 포함된 요소들로 표현, 동작 설정, ..

블록 레벨 요소(Block-level Elements) 이미지 출처 다음은 HTML 블록 레벨 요소의 전체 목록입니다. (사실 HTML5의 새로운 요소를 설명할 때, "블록 레벨"이라는 용어는 정의되지 않습니다.) 1. 블록 레벨 요소는 마크업을 할때 줄이 바뀌는 특성을 가지고 있습니다. 2. 블록 레벨 요소는 줄 바꿈이 일어납니다. 3. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 4. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다. 블록 요소 모음 : ol, ul, li, h1~h6, p, div 블록 요소는 h1~h6 블록요소의 p태그 블록요소를 자식 요소로 블럭 요소를 포함 ul과 li는 블럭 요..