김숭늉 마음대로

1. alert, prompt, confirm -> 브라우저의 기본함수를 사용하는것! 기본 method 라고 함!! => 쉽고 간편! 단점 : 스크립트 일시정지 (누를때마다 확인버튼을 눌러야함) 스타일링 x ( 브라우저별로 다음) const name = prompt("이름을 입력하세요."); alert ("환영합니다, " + name + "님"); const name = prompt("이름을 입력하세요."); alert (`안녕하세요, ${name}님. 환영합니다.`); const name = prompt("예약일을 입력해주세요.", "2020-10") ㄴ두개의 인수를 받음! 두번째값은 입력받을 디폴트 값! (필요시 사용 유용) const isAdult = confirm("당신은 성인 입니까?"); co..

1. #변수 어떤정보에 이름을 붙여서 사용하고 싶을떄 사용! - 문자는 항상 따옴표로 감싸주기! - 숫자는 따옴표 필요 없음! ** 변수명을 reserved word로 쓰면 안됨! (아래 URL 참고하기!) https://www.w3schools.com/js/js_reserved.asp JavaScript Reserved Words W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools..

1) 연습시간!! let onlineCourse = { name: 'Web Development - The Complete Guide', price: coursePrice, goals: ['Learn Web Development', 'Become a web developer', 'Have fun!'], } alert(onlineCourse.price); alert(onlineCourse.goals[1]); function getListItem(array,arrayIndex) { let arrayElement = array[arrayIndex]; return arrayElement; } let firstGoal = getListItem(onlineCourse.goals,[1]); 2) 메서드 (method..

자바스크립트는 라인별로 차례대로 실행됨! 1. 백틱으로 긴 문장 표현 가능 `` 2. 객체속성 (object property) 접근 alert(job.salary); * 단순히 변수에 값을 저장하고 출력 let age = 32; let userName = "Seungyeon Kim"; let hobbies = ["sports", "cooking", "reading", 1, 2]; let job = { title: "Developer", place: "New York", salary: 90000, }; alert(hobbies[0]); alert(job.salary); 3. 몇년동안 어른이었는지 계산해보기! 하드코딩 = 데이터 내부에 직접 입력하는것 age = 45 let adultYears = age -..

1. syntax(구문)! 특정 프로그래밍을 사용할때 써야하는 언어규칙을 말한다! 2. 배울 목표! 3. 자바스크립트에서 많이 사용할 value type 4.변수를 박스처럼 생각하기! 5. html 에서는 로 추가! ㄴ body에 들어가기도 하고 head에 들어가기도 함! 6. alert () 기능 -> 브라우저에게 alert를 요청함 7. 변수 (데이터컨테이너 소개) ㄴ 레이블된 데이터컨테이너를 변수라고 한다! -----> 만약 스트링이 바뀌면 하나하나 수정을 할수가 없으니까 8. 변수값은 특수문자 안됨 ($ 표시 제외!) ㄴ 띄어쓰기는 허용되기 함 ㄴ camel case(관례)를 사용함 9. 저장된 변수를 언제든 꺼내서 쓸수 있다! 10. 구분의 끝을 구분하기 위해서는 ;를 씀! (필수는 아님 BUT..

체크박스는 크게 두가지의 용도로 사용된다 1. 체크박스 만들기 ( yes on no ) Agree to terms? name 을 설정하고 버튼으로 제출하면 url에 terms=on으로 표현됨! 2. 체크박스 만들기 ( 2가지 이상 선택지 선택할수잇는 목록을 만들때) ㄴvalue 요소 추가 contact me via email contact me via phone 3. text area 시작태그와 종료태그가있다 (내용 없어도) input은 한줄만 생성하지만 text area는 여러줄! input, textarea{ width: 100%; display: block; margin-bottom: 1rem; box-sizing: border-box; font: inherit; border: 1px solid r..

1. 라벨 추가하기! label for은 id 값을 향한다. Your name -> name 은 개발자 양식에서만 보임! Submit 2. 브라우저 디폴트 스타일을 상속받는 경우? --->브라우저 상속보다 더 우선 적용됨! inherit를 사용! button { display: block; font: normal 1rem 'Robotro', san sarif; } -------------------------------------------------------------- button { display: block; font: inherit } *** button과 input에서 주로 사용 input { width: 100%; display: block; margin-bottom: 1rem; box-s..

1. Web Forms (인풋폼 input form) -> 사람들이 입력할수 있는 칸! 2. input은 void 요소 ! 마지막이 슬래쉬로 끝나게 됨! // css상 width 설정! input과 button은 인라인-블록 요소! // block으로 지정이 필요하면 display: block으로 요소를 지정해준다! Submit 3. form 요소를 추가! (양식제출) 매우 중요 ㄴ 시맨틱적 의미로 매우 중요하고 검색엔진과 보조공학장치들에게 입력양식이 시작할거라고 알려주는 역할! Submit 4. form action은 요청이 보내져야하는 url 과의 통로를 지정하는것! 5. method는 전송 되어야하는 http 요청의 종류를 선택하게 한다! GET 브라우저에게 GET 요청을 보내면서 DATA를 가지고..

1. CSS 변수나, CSS 정의 속성은 CSS파일에 직접 추가되고, HTML 선택자를 통해 이 변수들을 구현한다. 요소마다 적용된 개별의 정의를 사용하는게 아니라, CSS 속성을 그룹으로 묶어서 관리할수 있다! html { --color-grey-100: rgb(236, 236, 236); --color-grey-400: rgb(134, 134, 134); --color-grey-600: rgb(58, 58, 58); --color-grey-900: rgb(41, 41, 41); --color-primary-500: rgb(167, 226, 255); --color-primary-700: rgb(0, 170, 255); --size-1 : 18px; --size-5 : 50px; background-c..

1. 타켓 선택자 이해하기! #side-drawer:target { display: block; } --> 특정 id가 url 브라우저에 추가되면 block 을 실행하라! 2. 그럼 메인으로 돌아가려면? aside 영역안에 header 영역(햄버거)를 추가해준다! ㄴ 기존의 메인 헤더의 햄버거를 참고하여 추가! ㄴ id 값에 #를 추가해서 default menu로 갈수있도록 한다! Browse Meals My Orders ---------------------- 햄버거 메뉴 위치, 스타일은 기존 참고하여 아래와같이 정리하기 #side-drawer header { height: 5rem; display: flex; justify-content: flex-end; align-items: center; pad..