JiYoung Dev 🖥

🎈 박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름 → 박스는 공간 효율성이 좋기 때문 요소의 부피감을 결정하는 개념 박스모델은 HTML 요소를 패딩(padding), 마진(margin), 그리고 내용(content)으로 구분 1. 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 2. 패딩(padding) 내용과 테두리 사이의 간격 (눈에 보이지 않음) 3. 테두리(border) 내용과 패딩 주변을 감싸는 테두리 4. 마진(margin) 테두리와 이웃하는 요소 사이의 간격 (눈에 보이지 않음) 🎈 마진(margin) 테두리를 기준으로 요소의 바깥 여백 지정 background-color 속성으..

🎈 배열 실습 🎈 함수 특정 기능을 수행하는 소스 코드를 하나로 묶어 필요할 때마다 호출하여 사용하기 위한 구조 // 함수 : 특정 기능을 수행하는 소스 코드를 하나로 묶어서 // 필요할 때마다 사용하기 위한 구조 // 함수 선언 function intro() { console.log('안녕하세요. 저는 신지영입니다👩'); } // 함수 호출 intro(); // 매개변수 function lunch(menu) { console.log(`점심으로는 ${menu} 먹었습니다🥰`); } lunch('가츠동'); // 매개변수 + return문 function dinner(menu){ return `저녁으로는 ${menu} 먹을 거에요!😸`; } console.log(dinner('라면')); 위와 같이 함수를..

🎈 자바스크립트 반복문 실습 for문 실습 // 1. 사용자로부터 시작 숫자와 마지막 숫자를 입력 받는다. // 1-1. 입력창을 입력 : prompt ** 리턴타입 String // 1-2. String -> Number : 형변환 // 1-3. 어딘가에 저장 : 변수 let startNum = Number(prompt('시작할 숫자를 입력하시오.')); let endNum = Number(prompt('마지막 숫자를 입력하시오.')); // 2. 시작~마지막 숫자까지의 합을 구한다. let sum = 0; for(let i = startNum ; i > sum 출력 console.log(`${startNum}부터 ${endNum}까지의 합은? >> ${sum}`); while문 실습 자바스크립트에서 ..

코드 작성시 주석 작성을 통해 다른 사람이 코드를 보아도 이해하기 쉽도록 할 것! 🎈 CSS 📖 CSS(Cascading Style Sheets)란? HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어 (프로그래밍 언어X, 마크업 언어X, 스타일 시트 언어O) Cascading(캐스케이딩)은 폭포, 위에서 아래로 쏟아지는 뜻을 가진 단어로 같은 요소에 여러 개의 스타일이 중복되었을 때 스타일 우선순위와 상속을 통해 어떤 스타일을 적용할지 결정한다는 의미 📖 왜 CSS를 따로 만들었을까? HTML만으로 웹페이지를 제작하는 경우 HTML 요소의 세부 스타일을 일일이 지정해야 함. 이 작업은 매우 많은 시간이 걸리며, 완성한후에도 스타일의 변경 및 유지 보수가 어려움. → 정보 표현(HTML)과 디자인..

🎈 변수 데이터를 저장하는 공간 자바와 달리 자바스크립트는 느슨하게 자료형을 체크한다. → 자바에서는 변수명 앞에 자료형을 작성하여 변수 선언을 하지만 → 자바스크립트에서는 자료형에 관계 없이 변수선언 키워드(let)을 사용하여 변수를 선언한다. 📖 변수 선언 키워드 3가지 ⚙️ var 변수 재선언 가능 변수 재할당 가능 ⚙️ let 변수 재선언 불가능 변수 재할당 가능 ⚙️ const 변수 재선언 불가능 변수 재할당 불가능 // 변수 : 데이터를 담을 공간 let num = 3; // let -> 변수 선언 키워드 // num -> 변수 이름 // 3 -> 변수에 할당된 값 // 재선언 : 같은 변수 이름으로 다시 변수를 선언하는 것 // 재할당 : 선언된 변수에 다시 값을 할당하는 것 // var :..