전체 글410 [CSS] transform transform 속성 scale: 확대/축소 효과 rotate: 회전 효과 translate: 이동 효과 skew: 비틀기(기울임) 효과 transform:scale() - X 또는 Y 축으로 확대/ 축소 scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킨다. transform:scaleX(x축 비율); /* x축으로 확대, 축소 */ transform:scaleY(y축 비율); /* y축으로 확대, 축소 */ transform:scale(x축 비율,y축 비율) /* x축, y축으로 확대, 축소 */ transform:rotate() - 지정 요소 회전 rotate는 요소를 지정한 각도만큼 회전시킨다. 횐전 각도가 플러스 값일 경우 시계 방향으로 , 마이너스 값일 경우 반시계 방향으로 회전한.. 2022. 3. 20. [ 웹 기능 구현] Hover me 효과 넣기 목표 마우스를 text위로 올릴때 hover 효과 나타나게 하기 html 1 2 3 4 5 6 7 8 9 10 11 12 13 Hover Me Hover Me Colored by Color Scripter cs html 파일은 간단하게 태그로 Hover me를 만들어 주었습니다. css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 h1::before { transform: scaleX(0); /* resizes an element along the x-axis (horizontally) */ transform-ori.. 2022. 3. 19. [자료구조] LinkedList 사용법 & 예제 (Java) LinkedList ArrayList는 배열을 사용하여 List를 구현한 클래스입니다. ArrayList와 다르게 LinkedList(연결 리스트)는 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식의 자료구조입니다. 각각의 데이터가 노드(Node)로 구성되어 연결이 되어 있고, 노드의 포인터가 이전 노드와 다음 노드와의 연결을 담당합니다. LinkedList 장점 데이터를 추가하거나 삭제하는 것이 원활합니다. 노드(Node)는 LinkedList에 객체를 추가하거나 삭제하면 앞뒤 링크만 변경되고 나머지 링크는 변경되지 않습니다. 중간에 데이터를 추가나 삭제하더라도 전체의 인덱스가 한 칸씩 뒤로 밀리거나 당겨지는 일이 없기에 ArrayList에 비해서 데이터의 추가나 삭제가 용이합니다. L.. 2022. 3. 17. [자료구조] ArrayList 사용법 & 예제 ArrayList ArrayList는 List 인터페이스를 상속받은 클래스로 크기가 가변적으로 변하는 선형 리스트입니다. 일반 배열과 동일하게 연속된 메모리 공간을 사용하며 인덱스는 0부터 시작합니다. 일반적인 배열과 같은 순차 리스트이며 인덱스로 내부의 객체를 관리한다는 점등이 유사하지만 한번 생성되면 크기가 변하지 않는 배열과는 달리 ArrayList는 객체들이 추가되어 저장 용량(capacity)을 초과한다면 자동으로 부족한 크기만큼 저장 용량(capacity)이 늘어난다는 특징을 가지고 있습니다. ArrayList 생성 // 자바에서 ArrayList를 사용하려면 아래 구문을 추가해주어야 합니다. import java.util.ArrayList; ArrayList 사용법 ArrayList list.. 2022. 3. 16. [자바스크립트] 자료형 문자형 String 문자형은 3가지 방법으로 쓸 수 있다. const name1 = "Sam"; // ""와 ''는 큰 차이가 없다. const name2 = 'Sam'; const name3 = `Sam`; 특수 문자 사용 방법 const wrong = "I'm a boy."; //에러가 난다. const right = "I\'m a girl."; // 역 슬래쉬를 넣어주면 특수 문자를 인식한다. // I'm a girl. 백 틱은 문자 내부의 변수를 표현할 때 사용하기 편리하다. const name = "Sam"; const sentence = `My name is ${name}.`; console.log(sentence); // My name is Sam. 숫자형 Number 사칙연산이 가능하다. .. 2022. 3. 15. [자바스크립트 ] append, prepend, after, before append, prepend, after, before 페이지 로드 완료 후에 이미지를 순차적으로 로드한다던지 페이지마다 다른 내용을 보여줘야 할 때 등 동적으로 html요소를 추가해야 할때 아주 유용하게 사용되는 함수들입니다. append() 선택한요소의 자식요소 뒤에 내용삽입 prepend() 선택한요소의 자식요소 앞에 내용삽입 after() 선택한 요소의 뒤에 내용 삽입 before() 선택한 요소의 앞에 내용 삽입 // 기본 소스 코드 append() $("#parentDiv").append(''); prepend() $("#parentDiv").prepend(''); after() $("#parentDiv").after(''); before() $("#parentDiv").before(''); 2022. 3. 13. [자바스크립트] form, input 이벤트 핸들링 목표 입력된 값을 console에 뽑아 보기 html 파일 이벤트 헨들링 html 결과 JavaScript 파일 // input 창에 입력된 값 읽어와 주게 설정을 해주었다. function App() { document.querySelector('#menu-name').addEventListener('keypress', (e) => { console.log(e.key); }); } // document.querySelector('') -> html에 있는 element를 찾을 수 있다. // addEventListener('', (e)=>{}) -> 찾은 element에서 이벤트를 받아 올 수 있다. 입력창에 입력을 해도 console에 나타나지 않는다. 그 이유는 function App을 선언만하고 .. 2022. 3. 12. [자료구조] Map - HashMap, TreeMap, LinkedHashMap Map Map은 Key, Value 형식을 가지고 있다. 이 Map에는 크게 3가지의 특징이 있다. 1. Key는 중복될 수 없다. 2. Key와 Value 중 하나만 존재하지 않는다. 3. Value는 중복이 가능하다. Map 자료형에 HashMap, LinkedHashMap, TreeMap 등이 있다. HashMap HashMap은 Map을 구현하는 메서드이다. Hashing을 사용하기 때문에 많은 양의 데이터를 검색할 때 사용하기 좋다. Map user = new HashMap(); user.put("Anna", "anna12"); user.put("Sam", "sma12"); // Map의 user라고 선언하고 HashipMap으로 인스턴스 시킨 객체이다. // put이라는 메서드를 사용해서 us.. 2022. 3. 11. [ 프로그래머스 / Java ] [ 2020 카카오 블라인드 채용 코딩테스트 ] 신고 결과 받기 https://programmers.co.kr/learn/courses/30/lessons/92334?language=java 코딩테스트 연습 - 신고 결과 받기 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 programmers.co.kr 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수도 있지만.. 2022. 3. 10. 이전 1 ··· 37 38 39 40 41 42 43 ··· 46 다음 728x90
