본문 바로가기

2024_풀스택학원/Front-end

(11)
[jQuery] 정규표현식 버튼 타입은 기본적으로 이다. form태그 안에서만 내장되어 있는 기능 - form태그와 submit은 같이 있는 때 기능이 활성화 된다. form 태그 내 입력필드안에 있는 값을 다 긁어 모은 데이터를 서버에 보냄  - action = ""  서버에 데이터 전송 전송 평범한 버튼   페이지 이동  유효성 검사 * 정규표현식( 문자열 패턴 매칭 기술 )- 범용성 기술 ( 언어에 제한 받지 않..
[jQuery] 0513 JQuery란?JavaScript 라이브러리목적1. 더 쉬운 자바스크립트 - 편의성 증가 목적 목적2. 브라우저 호환성         -  모든 브라우저에서 동일하게 동작하는 코드를 지원 jQuery 라이브러리의 핵심 객체는 jQueryjQuery를 매번 사용하는게 불편하여 $로 alias 되어있다.  - 객체 참조는 $.-  jQuery 함수 호출은 $() 특징1. jQuery 내에 사용할 기능 95% 이상은 전부 function특징2. CSS 선택자를 사용할 수 있음.   js/jquery 출력형태1. JavaScript에서 DOM 요소 선택: JavaScript 의 document.getElementById() 메서드 사용하여 DOM요소 선택-> 해당 요소 자체가 반환됨2. jQuery에서 DOM요..
[JavaScript] slice,splice / 객체 만드는 3가지 방법 / api > 둘이 같은 문법임  fruits fruit 앞쪽에 추가 앞에서 삭제 뒷쪽에 추가 뒷에서 삭제    slice배열 내에서 특정 범위 내 요소들을 추출하여 반환하는 함수      splice 배열 내에서 특정 시작점부터 특정 개수만큼의 데이터를 삭제하거나, 특정 위치에 데이터를 끼워 넣는 기능 // splice : 배열 내에서 특정 시작점부터 특정 개수만큼의 데이터를 삭제하거나, // 특정 위치에 데이터를 끼워 넣는 기능 // 인자값1 : 시작 index // 인자값2 : 몇 ..
[JavaScript] alert, confirm, prompt FrontEnd 대표 언어 3가지HTML/CSS(External, Internal, Inline 방식)JavaScript(Live Script, ECMA Script) JavaScript?(Live Script, ECMA, Script)정적 페이지 구성용도의 html/css 를 보완하여 동적 기능을 부여할 수 있는 언어 Standard Library? JavaScript의 내장 라이브러리는 Browser로 부터 제공되며 크게 3개 카테고리로 나누어 사용한다.(Window 라는 객체에서 꺼내서 쓰는 형태)Window안에 있는 도구들은 크게 BOM / DOM / JavaScriptBOM(Browser Object Model) : 브라우저 관련 기능들을 모아둔 카테고리DOM(Document Object Mod..
[css] Grid System * Responsive Web ( 반응형 웹 )- 웹 사이트가 출력되는 장비( 스크린 크기 ) 에 반응해 구조가 달라지는 페이지 구성 기법- Media Query ( 특정 사이즈에 적용될 css를 구현 )를 통해 반응형 웹을 구현- Bootstrap5 라이브러리로 구현 가능   bootstrap : display:flex + Media Query 쉽게 반응형 웹을 만들 수 있는 라이브러리    ( 사용 목적 )    1> Prebuilt Component - 디자인 여력이 부족한 경우 미리 만들어져 제공되는 컴포넌트를 사용하면 최소한의 세련됨을          보장받을 수 있음    2> Responsive Grid System - 반응형 웹 구현 기술 Content Delivery Network ( C..
[HTML/CSS] Transform 속성과 예제 transform 이란 요소에 변화 기능을 부여하는 속성 transform 과 rotate transform의 rotate 로 요소를 회전시킬 수 있음 transform : rotate( angle ) transform : rotateX( angle ) transform : rotateY( angle ) angle은 각의 크기를 의미함 예제 ) box1에 마우스 올렸을 때 y축 기준 180도 회전( 세로 축으로 회전함 ) .box1:hover{ transform : rotateY(180deg) } transform과 translate transform의 translate로 요소를 이동시킬 수 있음 transform : translateX( 50px ) 오른쪽으로 50px이동, 음수로 지정하면 왼쪽으로 이..
[HTML/CSS] overflow-x, overflow-y / position 속성 overflow-x / overflow-y 속성 overflow 속성을 이용해서 가로 또는 세로 축의 스크롤바를 생성시키는 속성 overflow-x 속성 visible(기본값) 넘치는 내용은 밖으로 흘러 넘침 hidden 내용이 잘림. 스크롤바가 나타나지 않음 (x축의 스크롤바가 나타나지 않지만 브라우저에 따라 y축의 스크롤바는 나타나기도 함) scroll 내용이 잘리고 스크롤바가 나타남 auto 내용이 잘리고 필요할 때만 스크롤바가 나타남 overflow-y 속성 visible 넘치는 내용은 밖으로 흘러 넘침 hidden 내용이 잘림. 스크롤바가 나타나지 않음 (y축의 스크롤바가 나타나지 않는 것. 브라우저에 따라 x축의 스크롤은 나타나기도 함) scroll 내용이 잘리고 스크롤바가 나타남 auto 내..
[HTML/CSS]Float로 기본 레이아웃 만들기(예제) [quiz01] [quiz02] [quiz03] [quiz04] 기본 레이아웃 LOGO title reserved navi contents side footer navi 추가된 최종소스 LOGO title reserved Home About Portfolio Contact contents side footer 여기서 padding과 margin 이란? margin 이란 네 방향 바깥 여백 영역을 설정하는 것 padding은 네 방향 안 쪽 여백 영역을 설정하는 것 차이점? margin은 해당 요소의 주위에 빈 공간을 만드는 것이고, padidng은 해당 요소의 내부에 빈 공간을 추가하는 것임