Frontend/Study

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 객체 알아보기 1) 객체 - 자바스르비트에서의 객체 : 프로그램에서 인식할 수 있는 모든 대상 - 객체는 인스턴스의 형태로 만들어서 사용해야 함 ⓐ 인스턴스 만들기 new 객체명 ex) Date 객체의 인스턴스 만들기 var now = new Date(); document.write("현재 시각은 " + now); 2) 프로퍼티와 메서드 ⓐ 프로퍼티 : 객체의 특징이나 속성 ex) 제조사, 모델명, 색상, 배기량 ⓑ 메서드 : 객체에서 할 수 있는 동작 ex) 시동걸기, 움직이기, 멈추기, 주차하기 2. 자바스크립트의 내장 객체 1) Array 객체 var numbers = new Array(); //배열..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 함수 알아보기 1) 함수 선언 function 함수명() { 명령 } 2) 함수 호출 함수명() 또는 함수명(변수) ex) 함수를 이용하여 두 수 더하기 function addNumber() { var num1 = 2; var num2 = 3; var sum = num1+ num2; alert("결과값: " + sum); } addNumber(); 2. var를 사용한 변수의 특징 1) 변수의 범위 ⓐ 지역 변수 : 한 함수 안에서만 사용할 수 있는 변수 function addNumber() { var sum = 10+ 20; //함수 안에서 사용한 지역변수 } addNumber(); console.log..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 변수 알아보기 1) 변수 : 프로그램을 실행하는 동안 값이 여러번 달라 질 수있는 데이터 2) 상수 : 값을 지정하면 바뀌지 않는 데이터 2. 변수 선언 규칙 1) 영어문자와 _(언더스코어-아래다시), 숫자를 사용함 2) 영어 대소문자 구별함, 예약어 변수 이름 못 씀 3) 여러 단어를 연결한 변수이름은 중간에 대문자를 섞어쓰는게 좋음 4) 변수 이름은 의미있게! 3. 변수 선언하기 var 변수명; var a, b, c; //한꺼번에 변수 지정이 가능하다. 4. 자료형 종류 설명 예시 숫자형 따옴표 없이 숫자로만 표시(정수, 실수) var num = 1000; 문자형 작은/큰따옴표로 묶어서 나타냄 var ..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 자바스크립트의 기능 1) 웹의 요소 제어 2) 웹 어플리케이션을 만듬 3) 다양한 라이브러리 사용가능 4) 서버 개발 가능 2. ... 2) 웹 문서 외부에서 자바스크립트 작성 - 새로운 js파일을 작성한 후 확장자를 .js 로 저장한다. - js파일을 웹문서로 불러올 때는 html파일안에서 아래와 같이 작성한다. ⓔ console.log() : 콘솔 창에 출력 - 콘솔문은 괄호 안의 내용을 콘솔 창에 표시한다. - 콘솔창은 ctrl + shift + j 나 개발자도구(f11)에 들어가 콘솔탭을 클릭하면 된다. ex) 이름을 받아서 콘솔 창에 표시하기 var name = prompt("이름을 입력하세요."..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 CSS와 박스 모델 1. 블록 레벨 요소와 인라인 레벨 요소 1) 블록 레벨 요소 : 태그를 이용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 - 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈됨 ex) , , , , , ... 2) 인라인 레벨 요소 : 한 줄 차지하지 않음 - 너비(width), 높이(height)를 조절할 수 없고, line-height(높낮이 조절) 혹은 text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 01 글꼴 관련 스타일 종류 속성 사용 방법 font-family 글꼴 지정 font-family: , , ... ex) font-family : "맑은 고딕", 돋움, 굴림, ... font-size 글자 크기 font-size: | | | ex) font-size : 10px font-style 이탤릭체 font-style: normal / italic / oblique(이탤릭체) font-weight 글자 굵기 font-weight : normal / bold / bolder(더 굵게) / lighter / 100~900 * 글꼴 이름이 두단어 이상일 땐 "맑은 고딕" 처럼 큰 따옴표로 묶어준다. * 글자..

# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다. 1. 스타일과 스타일시트 1) 스타일 형식 선택자 { 속성1: 속성값1; 속성2: 속성값2 } - 선택자 : 스타일을 어느 태그에 적용할 것인지 알려줌 - 중괄호 사이에 스타일 정보를 넣음 ex) 태그에 스타일 적용하기 p { text-align: center; color: blue; } * 한 줄로 작성해도 되고, 여러 줄로 작성해도된다. (세미콜론만 붙이면!) - 스타일 주석 : /* 주석 할 내용 */ * ctrl+ ? : 주석처리 2) 스타일 시트 - 스타일 규칙을 한눈에 확인하기 위해 한 군데 묶어놓은 것 - 브라우저 기본 스타일과 사용자 스타일로 나뉠 수 있다. - 사용자 스타일은 인라인, 내부, 외..

1. Web(www=world wide web) - 웹이란 1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태 - 인터넷이란 1개 이상의 네트워크가 연결되어 있는 형태 1) 용어 ⓐ 프로토콜 : 네트워크상에서 약속한 통신규약(html, ftp, smtp, pop, dhcp) ⓑ IP : 네트워크 상에서 컴퓨터를 식별할 수 있는 주소(192.168.**) ⓒ DNS : IP주소를 인간이 쉽게 외울 수 있도록 맵핑한 문자열(naver.com) ⓓ Port : 해당 컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호(기본 포트 : 80) 2. HTML(hyper text markup language) - 웹문서를 기술하기 위한 언어 3. CSS(Cascading style sheets) - h..

Part 1 1. 배열 //선언 let 이름 = {자료, 자료, 자료, 자료, 자료}; - 배열 안에 들어있는 각 자료들을 요소라고 한다. 2. while 반복문 while (true) { console.log("무한 반복"); } 3. for 반복문 for(초기식 ; 조건식 ; 증감식) { } 4. for in 반복문과 for of 반복문 1) for in for (let 인덱스 in 배열) { } 2) for of for (let 요소 of 배열) { } 5. var 키워드 let과 다르게 var을 사용하면 스코프 외부에서도 사용할 수 있따. # 사용하지 않는 것이 좋음 4장 연습문제 1. let i = 0; while (i