프론트엔드11 자바스크립트 2 ◎ 객체(Object) - 자바스크립트가 명령가능한 모든 대상 - 모든 객체는 속성과 메서드를 가지고 있다 - 기본내장객체, BOM(browser object model), DOM(document object model), 사용자정의 객체 ● 속성 : 객체가 가지고 있는 고유한 특징을 기술한 것 - 값이 함수가 아닌 숫자, 문자열, 불리언, 객체로 이루어진 것 객체.속성 속성명: 값 ● 메서드 : 객체가 가지고 있는 동작 혹은 객체에 주는 명령 - 값이 함수인 것 객체.메서드() 메서드: function() {} * 공통의 속성과 메서드는 프로토타입으로 뺀다 ▶ 기본 내장 객체 - 기본적인 객체들로 보통의 컴퓨터 언어들이 가지고 있는 객체 String : 문자열 Number : 숫자 Math : 수학 A.. 2023. 8. 16. 자바스크립트 1 2023.07.20~ 수업 ◎ 자바스크립트 - 웹 페이지의 동작을 프로그래밍 한다 - 웹 페이지를 움직이게 하는 스크립트 언어 - HTML의 내용, CSS 등을 변경해줌 - 세미콜론(;) 생략 가능. 공백 무시. 연산자 이후 줄바꿈 가능 - 오류는 브라우저 개발자모드(콘솔)에서 확인 ● 자바스크립트 삽입 위치 1) ● 자바스크립트 데이터 표시 법 - innerHTML : 문서 객체에 HTML문자열을 속성값으로 삽입 - document.write() : 문서영역에 HTML로 작성하는 방식 - [window.]alert() : 창에 경고창 띄우는 방식 - console.log() : 브라우저 콘솔로 표시하는 방식 ● 함수 * prompt('질문텍스트', '화면표시텍스트') - 사용자에게 값을 입력받는 함수 .. 2023. 8. 9. 프론트엔드-9 ●계산하기 *왼쪽의 사진을 누르면 상세정보가 올라오는 효과 , -오버플로우 히든, 포지션 등으로 구현 *오른쪽의 계산창에 상품메뉴가 나오는 효과 만들기 -자바스크립트로 구현 ●퀵메뉴 만들기 메뉴를 누르면 아티클에 맞는 화면으로 변경 -a태그로 id를 연결해준다 - 스크롤 부드럽게 넘어가는 효과 html { scroll-behavior: smooth; } ●slide up, down효과 ● 아티클이 여러개 일 때 position 잡는 법 2023.04.25(마지막 수업) 1교시 - 포스팅하기 www.dothome.co.kr 회원가입 무료호스팅 신청 -파일 올리기 알드라이브 설치하기(추가 설치 체그 빼기) *접속하기 눌러 fip = 아이디.dothome.co.kr 아이디 비밀번호 입력 (핸드폰사진 화소가 너.. 2023. 5. 31. 프론트엔드-8 2023.4.20. 1교시 ●메뉴를 누르면 한번에 나오는 것 ▶ 보이고자 하는 카테고리(div)에 div 하나 추가해서 class ="subBox"를 만들어줌 1. display: flex; flex-wrap: wrap; // 오버된 부분(subBox) 밑으로 내리기 nav { width: 100%; } nav div { width: 10%; //7개 70% } nav div:first-child { width: 30%; //1개 30% } nav .subBox { width: 100%; //1개 100% } ->nav의 길이를 계산하면 총 200%로 화면의 100%를 넘어가므로 display: flex; flex-wrap: wrap; 하여 subBox 밑으로 내리기 2. overflow: hidden;.. 2023. 4. 20. 이전 1 2 3 다음
