Jeden Tag, aufrichtig und lustig.

Variable (변수) 변수란, 데이터를 담을 수 있는 대상이다. ex. let myNumber = 100 ; myNumber : 변수 100 : 데이터 let myNumber : 변수 선언 (declare) myNumber = 100 ; : 데이터 할당 (assign) 변수 선언 과정과 데이터 할당 과정은 보통 동시에 진행 된다. 변수 대입연산자 X = 1 대입연산자 변수(variable)에 값을 할당할 때 대입연산자(=)를 사용한다. 대입연산자는 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할을 한다. let Var = 5; *변수 : 대입연산자를 통해 값이 바뀌는 수 * constant : 상수 ex. 1 ↕ variable : 변수 ex. x * shift+enter : 실행을 유보시킴..

데이터 유형 데이터 유형은 크게 기본유형과 참조유형으로 나뉜다. 기본형 (primitive type) 1. 숫자 (number) 2. 문자열 (string) 3. boolean 4. undefined & null 숫자 (number) 사칙연산이 가능하다. ex. let myNumber1 = 1 ; let myNumber2 = 5 ; console.log(myNumber1/myNumber2) ; *나머지 구하는 법 구글링 키워드 : java script how to calculate remainder console.log(4%2) ; 문자열 (string) ex. juice , apple let myName = 'alice' let myName = "eleven" console.log(myName) ; *..

event 이벤트는 js와 사용자가 상호작용하는데 핵심적인 역할을 함. *onclick 등의 속성-> event(사건) console.log( ); 콘솔에 로그를 남기는 j.s.의 대표적인 디버깅(출력)방법이다. 개발자가 확인하고 싶어하는 내용을 출력하는 함수다. ex. console.log(300) ; // 300이 출력 된다. console.log('사과') ; // 사과가 출력 된다. 오른쪽마우스-검사-console탭을 통해 js실행이 가능하다. *웹브라우저 , 레플릿(replit) 및 js bin을 통해 console을 실행할 수 있다. alert ( '~~~~~~~' .length) * length : 문자개수 세는 코드

java script 1. 사용자와 상호작용하는 언어 2. html을 제어하는 언어 / html을 위해 동작하는 언어 3. 웹페이지를 동적으로 만듦 4. 컴퓨터 프로그래밍 언어 *program : 순서 개념 *programming : 순서 제작 ->html은 시간개념이 없지만 js는 시간/순서개념이 존재. ->hello world ->2

동영상 삽입 1. youtube 접속 -공유 -퍼가기 -동영상 퍼가기 코드 복사 -코드 편집기에 코드 붙여넣기 -리로드 ! 2. * 이미지 태그와 달리 닫는 태그 존재. alt 속성 못씀

미디어 쿼리 responsive web (반응형 디자인)을 제작하는데 사용 된다. 반응형 디자인이란 화면 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 웹페이지를 만드는 것이다. ex. 화면의 최대 크기가 800이하일 때 display를 none하고 싶은 경우, @media (max-width : 800px) { div{ display : none ; } }

grid 단락을 나란히 배치하고 싶다면 그리드를 활용 할 수 있다. 이를 위해선 부모태그로 각 단락을 묶어야 한다. 부모태그로 묶는 방법 를 활용 할 수 있다. 는 의미가 존재하지 않는 디자인을 위한 태그이다. navigation template ** css 선택자 특정하는 법 -> 부모 선택자 이름을 앞에 붙인다. ex. => 1) id가 grid값의 하위태그로 묶여있는 ol태그를 선택한다. 2) id가 grid값의 하위태그로 묶여있는 article id값을 선택한다.

*division : 분할 디자인 목적을 위해 섹션을 나눌 때 사용하는 의미없는 태그이다. class나 id 속성을 통해 css 디자인을 하는데 사용한다. 그룹핑하고 레이아웃 분리 및 가독성 향상을 위해 사용될 수 있다. ex. 헤더, 메뉴, 주요 내용, 푸터 *block level element ↕ *inline level element *태그를 사용하는 것의 적절성을 판단 할 수 있는 사이트 http://caniuse.com Can I use... Support tables for HTML5, CSS3, etc caniuse.com

box model 웹 문서의 내용을 박스 형태로 정의하는 방법이다. 박스모델 보는 방법 박스모델을 보고 싶은 부분에 오른쪽 마우스 버튼-검사 통해서 확인 가능하다. 또한, 우측 탭 중 computed탭을 통해 상세히 확인이 가능하다. margin 요소 주변의 여백을 의미한다. margin속성을 사용하여 웹 문서 가운데 정렬하는 법 **width값이 지정되어 있어야 함! margin-left, margin-right값을 auto로 지정 ex.margin : 20px auto /*위아래 마진은 20px, 좌우 마진은 자동계산 된다.*/ ex.margin : 0 auto padding 테두리와 내용사이의 여백을 의미한다. 컨텐츠와 테두리 사이 여백을 주고 싶다면, h1 { padding : 20px ; }

block level element 화면 전체를 사용하는 요소 ex. width와 height로 크기 조정가능하다. 스타일을 패딩과 마진, 보더 속성을 사용하여 디자인 할 수 있으며 다른 요소를 밀어낸다. inline element 자기 자신의 부피, 컨텐츠만큼 사용하는 요소 ex. width와 height로 크기 조정을 할 수 없다. 패딩과 , 보더 속성을 자유롭게 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다. 해당 속성들의 상하 값이 다른 요소를 밀어내지 않는다. inline-block element inline요소 block level 요소의 특성을 모두 가지고 있다. inline 처럼 다른요소와 붙어있을 수 있고, block level처럼 width, height, margin, padd..