분류 전체보기
-
css-positioncss 2023. 9. 15. 16:06
position: static ㄴ 기본값, 코드 순서대로 배치됨 ㄴ top,bottom,left,right 값들 무시 position: relative ㄴ 요소가 원래 위치를 기준으로 얼만큼 움직일지 지정 ㄴtop,bottom,left,right를 이용하여 원래위치를 기준으로 이동, 겹치기가능 position: absolute ㄴ 배치기준이 (자신이아니라) 상위 부모들 중에서 position이 static이 아닌 부모를 기준으로 설정 ㄴ 요소 상위에 position 속성이 static이 아닌 요소가 없으면 DOM트리의 최상위인 body가 배치 기준이된다 ㄴ 그래서 (가장 가까운) 부모를 기준으로 top,bottom,left,right 속성 적용 ㄴ 그래서 대부분 어떤 요소의 position을 absolu..
-
CSS - 버튼위에 아이콘 올리기css 2023. 9. 14. 16:52
HTML) CSS 코드) .voice_button_box{ position:relative; } .fa-microphone{ position:absolute; top:50%; left:50%; transform: translate(-50%,50%); } css에서 top:50%; left:50%; 만 쓸 경우, 아이콘의 왼쪽 상단 모서리가 가운데로 배치된다 왜냐하면 top:50%; 는 상단 모서리가 가운데로 위치, left:50%; 는 왼쪽 모서리가 가운데로 위치 되기 때문이다 그래서 이 코드만 쓰면 아이콘이 정확한 가운데로 정렬되지는 않는다 transform: translate(-50%, -50%); 그래서 이코드를 통해 요소의 기준점을 왼쪽 위가아니라 가운데로 옮겨놔야한다. 그래야 아이콘의 중앙지점이..
-
CSS - flexcss 2023. 9. 14. 14:53
CSS - display : flex; ㄴ 정의 : display : flex는 자식요소들의 정렬을 위해 사용한다 ㄴ 자식요소들이 inline인지 block인지에 상관없이 레이아웃 설정가능 ㄴ 부모에게 길이를 주고 자식들은 flex를 주어 정렬하는 방법을 많이 쓴 - flex container (부모) 속성 : flex-direction, flex-wrap, justify-content, align-items, align-center - flex item (자식) 속성 : flex, flex-grow, flex-shrink, flex-basis, order 와 같은 상황에서 세로로 정렬을 하고 싶다면 flex를 이용한다 display:flex 를 이용하면 자식들이 세로로 정렬된다 여기서 자식1과 자식2의..
-
CSScss 2023. 9. 3. 17:00
head태그안, style태그안에 CSS코드 작성한다 선택자 ㄴcss에서 자기가 어디에가서 달라 붙어야하는지를 알려주는 역할 1.tag 2.id 3.class ㄴ id 선택자는 태그의 이름으로 하나의 웹페이지에서 하나만 존재해야한다 (중복x) ㄴ 하나만 지정하기에, 선택자중에서 우선순위가 가장 높다 ㄴ그다음은 class, 그다음은 element 선택 ㄴid에 접근할때는 #을 쓴다 ㄴ class에 접근할때는 .을 쓴다. class는 여러개 지정할떄 쓴다 ㄴ선택자는 범위가 넓을수록 우선순위가약하다 ㄴ중복되어 적용시 우선순위가 높은 것이 적용된다 ㄴid가 가장 세고, 태그가 가장 약하다 css 선택자 지정 팁) 1) '>' 쓸때 .box > img{ } 는 box클래스의 직계자손(아들, 1단계 아래만) 중 i..
-
6.너비우선탐색(BFS) / 깊이우선탐색(DFS)카테고리 없음 2023. 6. 1. 02:30
두가지 방식 모두 그래프를 이용하여 표현 1. 깊이우선탐색(DFS : depth first search) -하나씩 자식노드들을 끝까지 파고 내려간다 -재귀함수로 구현하면 더 간단해진다 -스택사용 2. 너비우선탐색(BFS : Breadth first search) -노드들을 단계별로 나누어 한단계씩 탐색해나간다 -같은 레벨에 있는 노드들끼리 탐색한다 (루트 - 첫번째 자식 노드들 - 두번째자식 노드들 - 세번째자식 노드들) -큐사용 -너비우선탐색을 이용하면 최단 경로를 찾을 수 있다 최단 경로는 여러 의미로 사용될 수 있다 ex) 1: 체스 게임에서 가장 적은 수로 승리하는 방법 (최소한의 수) 2.맞춤법 검사기(가장 적은 개수의 글자를 고쳐서 올바른 단어를 만드..
-
[TIL] 자료구조5 - 해시 테이블TIL 2023. 5. 28. 19:27
해시 테이블 -가장 유용한 자료 구조중 하나 1. 가게에서 물건의 가격 찾을때 빨리 찾는 순서는? -> 모든 가격표를 외운 알바생 > 정렬된리스트 > 정렬되지 않은 리스트 2. 가게에서 물건의 가격 찾을때 빨리찾는 순서와 시간복잡도는? -> 모든 가격표를 외운 알바생(O(1)) > 정렬된리스트(이진 탐색) (O(log n)) > 정렬되지 않은 리스트(단순 탐색)(O(1)) 가격을 외운 알바생을 만드는 법 : 해시 함수 해시테이블은 언제 사용해야할까?-> 해싱은 특정 데이터가 "들어온 순서 상관 없이" 삽입, 삭제, 검색이 자주 발생하는 경우에 사용하기에 좋다. 해시함수 조건 1. 일관성을 가져야한다 같은 문자를 넣었을때는 항상 같은 값이 나와야만 한다 ex) apple을 넣..
-
equals와 == 차이점, 동등성 vs 동일성카테고리 없음 2023. 2. 21. 19:21
equals 메소드는 비교하고자하는 대상의 내용 자체(값 자체)를 비교하지만, == 연산자는 비교하고자하는 대상의 주소값을 비교한다. String a = "aaa"; String b = a; String c = new String("aaa"); (a와 b는 같은 주소값, a와 c는 다른 주소값이지만, 같은내용) 실행문장) System.out.println(a.equals(b)); System.out.println(a == b); System.out.println(a == c); System.out.println(a.equals(c)); 실행 결과) true true false true + b.equals(c) 는 true b == c는 false 이다. ////////////////////////////..