본문 바로가기

멀티캠퍼스 풀스택 과정/프론트엔드53

프론트엔드3-4. JavaScript의 내장객체 String, Math, Array 1. String 1) length, indexOf, search indexOf와 search는 찾는 문자열이 없으면 -1 반환 더보기 더보기 2) 문자열 일부구하기 slice(index, index), substring(index, index), substr(index, count) 3) 문자열 변경하기 replace("기존문자열", "바꿀문자열"), toUpperCase( )와 toLowerCase( ) 4) 문자열 연결하기, 아스키 코드 찾기 txt1.concat(txt2), txt.charAt(인덱스), txt.charCodeAt(인덱스) 5) 자바스크립트는 배열형 변수에 [ ]하지 않아도 된다. 2. Math 더보기 더보기 첫번째 데이터는 x에 두번째 데이터는 y에 (연산된 결과가 양수이면 왼쪽.. 2022. 2. 9.
프론트엔트3-3. login form 만들기 / 이메일 분리하기 1. div와 ul을 이용해서 login form을 만들기 1. submit버튼을 이용하기 1) HTML 파일 로그인 아이디 비밀번호 submit버튼을 누르게 되면 원래는 바로 action이 실행되는데 onsubmit을 사용하게 되면 지정된 함수가 실행된다. submit 버튼의 실행 처음 이벤트가 발생되는 곳 -> type="submit" value="로그인" onsubmit으로 이동 return의 값이 true일 때면 action으로 이동(action이 실행된다.) false이면 현재 페이지 유지(아무일도 일어나지 않음) 여기서 true의 의미(아이디 비밀번호 둘 다 있을 때)와 false의 의미(아이디나 비밀 번호 둘 중 하나 없어도) 2) CSS 파일 더보기 2)-1 가운데 정렬 2)-2 main .. 2022. 2. 9.
프론트엔드3-2. JavaScript의 함수(메서드)와 이벤트 함수(function) 동작해야 할 목적대로 명령을 묶어놓은 것 자바스크립트에는 이미 여러 함수가 만들어져 있어서 가져다 사용할 수 있다.(alert( )나 write( )) 함수의 선언 및 호출 함수는 호출하지 않으면 실행되지 않고, 호출시에만 실행된다. 함수의 매개변수 타입은 굳이 적지 않아도 된다.(js는 동적타입이기 때문에 변수에 어느타입이나 다 들어갈 수 있다) 예제) 버튼을 누르면 gugudan 함수 실행 더보기 예제) (1)함수명이 없는 이벤트 생성, (2)innerHTML로 선택자의 내용 변경 더보기 이벤트(Event) 웹 브라우저나 사용자가 행하는 동작 웹 문서 영역안에서 이루어지는 동작만 가리킴 [마우스 이벤트] onclick 사용자가 HTML요소를 클릭할 때 이벤트 발생 ondbcli.. 2022. 2. 9.
프론트엔드3-1. JavaScript 기본(입출력방법과 Dom요소의 선택) JavaScript HTML문서에 프로그래밍 하기 위한 언어 인터프리터 언어 최근 웹 브라우저 대부분에 자바스크립트 코드를 컴파일하는 JIT 컴파일러가 내장되어 있어 실행속도가 매우 빨라졌다 동적 프로토타입 기반 객체 지향 언어 c++이나 java는 객체를 생성하는 클래스 기반 객체 지향언어 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 기반 객체 지향 언어 객체를 생성한 후에도 property와 method를 동적으로 추가하거나 삭제할 수 있다. 동적 타입 언어 변수 타입이 없다. 프로그램 실행 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀔 수 있다. js로 하는 일 웹 요소를 제어한다. 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다. 웹 사이트 UI 부분.. 2022. 2. 9.
프론트엔드2-3. tab메뉴 만들기 먼저 이런 탭 메뉴 사진들 가져오기 1. 기본 구조 만들기 1. ul로 메뉴, radio, 사진 첨부 html 파일 블로그 카페 지식공간 영화 뮤직 웹툰 브런치 게임 2. CSS파일 @charset "UTF-8"; /*초기화*/ body, ul, li {margin:0; padding:0; list-style-type:none;} 2. li과 radio를 연결시키기 li인 블로그 글자를 클릭하면 연결된 radio가 checked 된다. 이렇게 모든 li를 radio와 연결시키면 된다. 그 다음에 라디오 버튼 숨기기 블로그 1. css 파일 @charset "UTF-8"; body, ul, li {margin:0; padding:0; list-style-type:none;} /*메뉴*/ #menu>li {.. 2022. 2. 8.
프론트엔드2-2. 반응형 웹(미디어쿼리)과 meta 태그 반응형 웹: 웹 페이지 하나로 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지 미디어쿼리: 미디어 타입에 따라 CSS를 적용할 수 있는 기능 반응형 웹 페이지는 미디어 쿼리를 사용해 개발한다. 지원하는 미디어 타입: all(모든 장치), screen(화면), print(프린터), aural(음성 장치), projection(프로젝터), tv(텔레비전) 등등.. 미디어 쿼리의 사용법 1. 를 사용(비추천, 모든 css를 내려받아서 size가 커진다.) 미디어 타입이 스크린이고, 화면의 최대 넓이가 768px로 지정-> 화면의 너비 768이하일 때 적용된다. 2. @media 사용(css 파일 안에서) @media screen and (max-width: 768px) {.. 2022. 2. 7.

티스토리툴바