TIL/JavaScript (14) 썸네일형 리스트형 [프로젝트] 프로필 사진 변경하기, 프로필 사진 원에 맞춰서 등록하기 세미프로젝트에서 마이페이지 기능을 맡았다. 프로필 사진 원에 맞춰 수정하는 것과, js에서 change메소드를 넣어서 프로필 사진 바꿔보자. imgfix라는 div안에 img에 id=imgArea 클래스를 넣어줬다. input type=file에도 imgfile이라는 id값을 넣어줬다. 기존css는 imgfix사이즈를 200px로 맞춰줬다. 이 상태에서 사진을 올리게되면 이미지가 확대되어 깨지고, 원 모양이 아닌 정사각형 모양이다. object-fit 값을 contain으로 주니 원본 사이즈가 div사이즈에 맞춰서 깨지지않게 들어가진다. 여기서 radius값을 70%를 주니까 완전한 원모양이 안된다 읭 object-fit 값을 cover로 하니 이미지 전체가 다 채워지며 이미지가 깨지지 않는 것을 확인할.. [JavaScript] 정규표현식 정규 표현식 - 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어로 정규 표현식을 이용하면 입력 된 문자열에 대하여 특정 조건 검색, 치환 가능 - 복잡한 조건문 대신 간단하게 처리 가능 정규 표현식(Regular Expressions)의 객체 생성 - 자바스크립트에서는 RegExp 객체와 문자열 메소드를 조합해 정규 표현식을 사용한다. - 정규 표현식은 패턴(pattern)과 선택적으로 사용할 수 있는 플래그(flag)로 구성된다. 정규식 사용 메소드 정규 표현식 메소드 - test : 문자열에서 정규식 변수의 값과 일치하는 값이 있으면 true, 없으면 false 반환 문자열 메소드 - match : 문자열에서 정규식 변수의 값과 일치하는 모든 값 반환 - replace : 문자열에서.. [JavaScript] 폼 이벤트 폼 이벤트 - document.forms : 문서에 존재하는 form들을 반환 Ex. document.forms.memberJoin : name 속성이 memberJoin인 문서 내의 form Ex. document.forms[0] : 문서 내의 가장 첫 번째 form - form.elements : 해당 form 내의 name 속성이 일치하는 element 들을 반환 Ex. form.elements.userid : name 속성이 userid인 해당 form 내의 element - 폼 요소 탐색에 쓰이는 프로퍼티는 태그 구조에 의존하지 않아 태그 깊이와 무관하게 form.elements 사용해 접근 - 반대로 모든 요소는 element.form으로 폼에 접근 가능(역참조) 회원가입 미리 만들어놓은 폼 .. [JavaScript] 마우스 이벤트, 키보드와 스크롤 이벤트 마우스 이벤트 종류 mousedown/mouseup : 요소 위에서 마우스 왼쪽 버튼을 누를 때, 마우스버튼을 누르고 있다가 뗄 때 mouseover/mouseout : 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 커서가 요소 위에 있다가 요소 밖으로 움직일 때 mousemove : 마우스를 움직일 때 click : 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 contextmenu : 마우스 오른쪽 버튼을 눌렀을 때 - 마우스 왼쪽 : 0 - 마우스 오른쪽 : 2 - 휠(가운데) 클릭 : 1 - 마지막 더블클릭까지 확인됨 마우스 이벤트 좌표 클라이언트 좌표(clientX, clientY) : 웹 문서를 기준으로 각각 왼.. [JavaScript] 이벤트 이벤트 마우스 이벤트(click, mouseover, mouseout, mousemove...) 폼 요소 이벤트(submit, focus) 키보드 이벤트(keydown, keyup) 문서 이벤트 등의 DOM 이벤트 들이 있는데 이러한 이벤트가 발생했을 경우 실행되는 함수를 이벤트 핸들러라고 하며 핸들러를 할당하는 방법은 다양하다. 1. HTML 속성 HTMl 안의 onevent 속성에 이벤트 핸들러 할당하는 방법 Ex. 등 간단한 코드는 그냥 작성하기도 하지만 코드가 같다면 별도의 함수를 만들고 이를 호출한다. 클릭해보세요 마우스를 올려보세요 핸들러 내부에 쓰인 this의 값은 핸들러가 할당된 요소 => 이벤트가 발생한 button 2. DOM 프로퍼티 요소 객체가 가지고 있는 onevent 속성에 이벤.. [JavaScript] BOM(Browser Object Model) window 객체 - window 객체는 자바스크립트의 최상위 객체이며 BOM과 DOM으로 나뉜다. BOM(Browser Object Model) : location 객체, navigator 객체, history 객체, screen 객체 DOM(Document Object Model) : document 객체 window 객체 - 브라우저 창에 대한 설정을 하는 객체 window.open('주소', '이름 또는 open 방식', '형태'); 13_문서수정 네이버 화면 높이랑 실제 화면에서 사용 가능한 높이가 다른 이유는 작업표시줄 여부에 따라 다름 location 객체 - 브라우저 주소 표시줄과 관련된 객체 실행확인 네이버로 이동 네이버로 이동 새로고침 새로고침 현 위치에서 새로고침 구글로 이동 navi.. [JavaScript] 문서 수정 노드 생성 document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다 document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음) element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다. 노드 삽입, 삭제 node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입 node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입 node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입 node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입 node.replaceWith(노드나 문자열) :.. [JavaScript] 요소 검색 원하는 요소 노드에 접근하기 document.getElementById - 요소에 id 속성이 있으면 위치에 상관 없이 (부모, 자식, 형제 등의 상대적 위치와 관계 없이) document.getElementById(id) 메소드를 통해 접근할 수 있다. - id 속성 값을 그대로 딴 전역 변수를 이용한 접근도 가능하지만 해당 id 값과 동일한 변수가 생기는 이름 충돌 가능성이 있어 지양하는 것이 좋다. - 문서 내의 id 속성 값을 중복 되어서는 안되며 중복 된다면 document.getElementById 메소드 동작에 문제가 발생한다. div 영역 p 영역 클릭 할 때 마다 색상 변경 element.querySelector('선택자') : 제공한 선택자와 일치하는 element 내의 첫 번째 ele.. 이전 1 2 다음
