본문 바로가기

분류 전체보기

(45)
jQuery 선택자 (selector) 총 정리 (2) first, last, even, odd, eq, contains, empty 1. :first 선택자 :first 선택자는 선택된 요소 집합 중에서 첫 번째 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 첫 번째 li 요소를 선택한다. $('ul li:first').css('color', 'red'); 2. :last 선택자 :last 선택자는 선택된 요소 집합 중에서 마지막 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 마지막 li 요소를 선택한다. $('ul li:last').css('color', 'red'); 3. :even 선택자 :even 선택자는 선택된 요소 집합 중에서 인덱스가 짝수인 요소를 선택한다. 예를 들어, 아래 코드는 ul 요소 중에서 인덱스가 짝수인 li 요소를 선택한다. $('ul li:even').css('color', '..
[혼공학습단] 혼자 공부하는 자바 4주차 📚 기본미션 : p. 550 [직접 해보는 손코딩] 코딩 과정 및 실행 결과 캡쳐하기 소스코드 public class AutoSaveThread extends Thread{ public void save(){ System.out.println("작업 내용을 저장함."); } @Override public void run(){ while(true){ try{ Thread.sleep(1000); }catch (InterruptedException e) { e.printStackTrace(); break; } save(); } } } public static void main(String[] args) { AutoSaveThread autoSaveThread = new AutoSaveThread(); auto..
[혼공학습단] 혼자 공부하는 자바 3주차 📚 기본미션 : 혼공 용어 노트에 용어 추가 등 노트 활용하고 공유하기 📚 선택미션 : p.512 문제 8번 풀고 풀이 과정 설명하기 public class IntegerCompareExample { public static void main(String[] args) { Integer obj1 = 100; Integer obj2 = 100; Integer obj3 = 300; Integer obj4 = 300; System.out.println(obj1 == obj2); //true System.out.println(obj3 == obj4); //false } } 박싱된 객체의 비교에 대한 문제. 박싱된 값이 아래 범위의 값이라면 ==와 != 연산자로 내부의 값을 비교할 수 있는 법칙이 있다. 타입 값..
[혼공학습단] 혼자 공부하는 자바 2주차 필수 미션 : p.330 문제 5번 실행 결과 인증 화면 캡쳐하기 선택 미션 : 객체 지향 프로그래밍의 개념을 정리하기 객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방이다. 객체 지향 프로그래밍 (Object Oriented Programming) 개발하려는 기능을 묶어 모듈화, 모듈을 재활용하기 때문에 같은 기능을 반복적으로 연산하지 않고 재사용률이 높은 프로그래밍. 업그레이드와 디버깅이 쉽다. 절차 지향 프로그래밍에 비해 상대적으로 느리다. JAVA에서의 OOP - 캡슐화 : 객체 외부에서 개채 내부 정보를 직접 접근하거나 조작할 수 없고, 외..
[혼공학습단] 혼자 공부하는 자바 1주차 혼공학습단 8기에 선정되어 이번주부터 혼공 미션을 수행하게 됐다. 처음부터 다시 복습하고 싶은 마음에 선택한 혼자 공부하는 자바. 아래의 미션 커리큘럼대로 포스팅 할 예정! 📚 기본미션 : JDK 설치 화면 인증샷 📚 선택 미션 : 학습 스케줄 직접 짜고 공유하기 평일에 일을 하는 만큼 매일 매일 하긴 힘들 것 같아서, 월/수 혹은 가능 한 요일 일주일에 두 번씩 나눠서 진도를 나가기로 했다. 미션 수행은 토요일이나 일요일에! 진도 계획 1주차 chapter 01 ~ 05 월 : 챕터 03 까지 수 : 챕터 05 까지 주말 : 티스토리 업로드 2주차 chapter 06 ~ 09 월 : 챕터 07 까지 수 : 챕터 09까지 주말 : 티스토리 업로드 3주차 chapter 10 ~ 11 월 : 챕터 10 수 ..
[Web] 웹 기초 (24) - HTML, 자바스크립트로 게시판 만들기 (2) HTML태그로 화면 구현 파일 구조 board.css : 공통 css 파일 board.js : 공통 js 파일 insert.html : 게시글 입력 화면 modify.html : 게시글 수정 화면 (insert.html 을 기반으로 작성) select.html : 게시글 조회 화면 view.html : 게시글 상세 조회 화면 조회 화면 구현 게시글 조회 (메인) 페이징 처리를 제외한 간단한 게시글 목록 게시글 순번, 제목, 작성자, 작성일, 조회수 게시글을 눌렀을 때 해당 게시물 상세 조회 화면으로 이동 게시글 검색 기능 게시글 제목을 키워드로 게시글을 필터링하여 보여준다. 게시글 입력 버튼 버튼을 눌렀을 때 게시글 입력 화면으로 이동 먼저 디자인을 제외하고 아주 간단하게 HTML 태그로 게시판 조회 화면을 구현해봤다. 게시글 ..
[Web] 웹 기초 (23) - HTML, 자바스크립트로 게시판 만들기 (1) 개요,요구사항 javascript_board 폴더를 생성하여 아래의 파일 작성하기 insert.html→ 입력 select.html → 리스트 조회 화면 view.html → 상세보기 modify.html→ 수정, 삭제 [요구조건] 입력된 데이터는 JSON타입으로 변환하여 localStorage에 저장 (DB 대신에 localStorage를 쓴다) 입력항목 (순번.serial(PK), 작성일, 작성자, 제목, 내용, 조회수) 순번은 항상 증가하도록 입력된 데이터는 function을 사용하여 객체화하시오. (toJSON()) 을 사용하여 데이터를 JSON으로 변경 [Web] 웹 기초 (24) - HTML, 자바스크립트로 게시판 만들기 (2) HTML태그로 화면 구현 파일 구조 board.css : 공통 css 파일 bo..
[Web] 웹 기초 (22) - JavaScript #15 DOM Object 응용 (2) 동적으로 이미지 삽입 자바스크립트 동적으로 이미지 삽입 이벤트가 발생할 때 이벤트 객체를 이벤트 리스너의 매개변수값으로 전달함 여기서 'event'는 상수값 아니고 이벤트 객체가 담겨있는 변수 event.srcElement 출력하면 이벤트가 담겨있는 태그가 나옴 그것의 value값은 파일의 경로! srcElement : 소스요소 name 아니라 value값 파일태그에 보안상 초기값은 넣을 수 없어서 폴더명이 fakepath (원래 경로는 보여주지 않음. 어떤 경로를 선택하든 무조건 c드라이브 fakepath) ⇒ 업로드하거나 다운로드할 수 없다 event.srcElement : 이벤트가 발생한 개체를 반환/설정 event : document 에서 발생하는 이벤트 자체를 가르킨다 srcElement : 이벤트가 발생된 docu..
[Web] 웹 기초 (21) - JavaScript #14 DOM Object 응용 (1) 동적으로 문서객체 생성 동적으로 문서객체 생성 UI/CSS 출장가고 싶은 지역 동적 선택 국가 지역 인원수 option은 빼고 select상자 틀만 만들어놓기 초기값 생성 (배열 생성, 문서 객체 생성) function init(){ /*초기값 생성하는 부분 초기값이니까 국가만 옵션에 추가*/ let arrayCty = ['미국', '일본']; let arrayZone = [ ['LA', 'New York'], ['동경', '오사카'] ]; /* arrayZone은 2차원 배열 (미국에 따른 지역, 일본에 따른 지역) 미국을 선택하면 첫번째 배열이 나오고 일본을 선택하면 두번째 배열이 나옴 */ index 0 : LA, New Year / index 1 : 동경, 오사카 let arrayCnt = [ [1,2,3,4], [5,..
[Web] 웹 기초 (20) - JavaScript #13 DOM Object 문서객체모델 (Document Object Model) 사용메소드 document.getElementById('아이디') document.querySelector('선택자') document.getElementsByName('이름') // name 속성 document.getElementsByClassName('클래스') document.querySelectorAll('선택자') 동적으로 문서객체 생성 function first(){ let header = document.createElement('h1'); let textNode = document.createTextNode('Hello DOM'); header.appendChild(textNode); document.body.appendChild(h..