본문 바로가기

전체 글

(1092)
[노마드코더]코코아톡 클론코딩 (8)(2021.1.8 ~ 9) 본 내용은 해당 강의 토대로 작성 Cloning time 1. more.html More Screen part One chats.html을 토대로 코드 작성하기 margin, padding 페이지에 맞게 조절 .more-screen .icon-row { margin-top: 35px; } .more-suggestions { margin-top: 50px; border-top: var(--main-border); padding-top: 40px; } .more-suggestions__title { margin-bottom: 30px; } 자주 사용되는 find-icon 컴포넌트화 하기 css/components/icon-row.css에 icon-row 클래스명으로 정리 styles.css에 import ...
[노마드코더]코코아톡 클론코딩 (7)(2021.1.8) 본 내용은 해당 강의 토대로 작성 Cloning time 1. chats.html Chats Screen part One 이제부터는 전의 html코드를 가져와서 사용하므로 빠르게 진행할 수 있다. 목표로하는 페이지의 모습에 맞게 header와 icon들을 적절한 것들로 바꾼다. 상단 icon 추가 하단 chat icon 채워짐 효과(다른 icon으로 대체) 하단 friends icon 비워짐 효과(다른 icon으로 대체) subtitle 추가 및 프로필 삭제 등 margin, padding을 조절한다. Chats Screen part Two badge component 지난 시간에 만들었던 badge는 이번 페이지에도 사용되므로 component화 한다. css/components/badge.css 에 ..
[노마드코더]코코아톡 클론코딩 (6)(2021.1.7 ~ 8) 본 내용은 해당 강의 토대로 작성 Cloning time friends.html Friends 페이지를 Cloning한다. Navigation bar VSC 단축키 nav>ul>li>*4>a 위 단축키를 입력하면, 아래의 html 코드가 생성 html 코드 작성 Navigation bar의 기본 html 코드를 작성한다. BEM 작명법을 사용한다. CSS 코드 작성 componetns 폴더 아래에 nav-bar.css를 생성하고 CSS 코드를 입력한다. styles.css에 꼭 @import 한다. .nav { background-color: #f9f9fa; padding: 20px 50px; border-top: 1px solid rgba(121, 121, 121, 0.3); } .nav__list {..
[노마드코더]코코아톡 클론코딩 (5)(2021.1.7) 본 내용은 해당 강의 토대로 작성 Git and Github Git: 파일의 변경 내역을 관리할 수 있다. Github : Git의 사항을 조회할 수 있다. Github Desktop : Github과 데스크톱을 연동한다. .gitignore : git으로 추적하고 싶지 않은 파일을 적어놓으면, 해당 파일을 무시된다. Cloning time 1. Introduction 카카오톡을 HTML과 CSS만으로 구현한다. 로딩 화면 회원 가입 페이지 친구 목록 페이지 대화 목록 페이지 검색 페이지 더보기 페이지 설정 페이지 채팅방 백엔드는 적용하지 않는다. 2. index.html 기본적으로, 대부분의 웹 서버는 index.html을 먼저 읽어 낸다. HTML과 CSS로 위 페이지를 Cloning 한다. 기본 구..
[동빈나]이코테 2021 강의 몰아보기(8) (2021.1.6) 본 내용은 해당 강의 토대로 작성 이진 탐색 1. 이진 탐색 개요 순차 탐색 : 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데이터를 하나씩 확인 이진 탐색 : 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법 시작점, 끝점, 중간점을 이용하여 탐색 범위 설정 2. 이진 탐색의 시간 복잡도 연산 횟수는 log2N에 비례 시간 복잡도는 O(logN)보장 3. 이진 탐색 소스코드 : 재귀적 구현 def binary_search(array, target, start, end): if start > end: return None mid = (start + end) // 2 # 찾은 경우 중간점 인덱스 반환 if array[mid] == target: return mid # ..
[노마드코더]코코아톡 클론코딩 (4)(2021.1.6) 본 내용은 해당 강의 토대로 작성 Advanced CSS 1. Transitions 어떤 상태에서 다른 상태로 변화할 때 애니메이션 효과를 줄 수 있다. 규칙 transitions는 state가 없는 요소에 붙어야 한다. 그렇지 않으면 자연스럽게 동작하지 않는다. state에 들어있는 것을 기준으로 애니메이션 효과를 준다 사용 예시 Go home a:hover에서 변경되는 것들을 기준으로 애니메이션 효과가 적용된다. color 1s ease-in-out 적용할 속성, 시간, 변화하는 방법 순으로 쓴다 바뀌는 모든 속성에 적용할 때는 all 1s ease-in-out을 쓴다. https://matthewlein.com/tools/ceaser 에서 다양한 변화 방법을 볼 수 있다. 자신이 원하는 Transi..
[동빈나]이코테 2021 강의 몰아보기(7)(2021.1.6) 본 내용은 해당 강의 토대로 작성 정렬 알고리즘 정렬(Sorting)이란 데이터를 특정한 기준에 따라 순서대로 나열하는 것 문제 상황에 따라 정렬 알고리즘이 공식처럼 사용 1. 선택 정렬 처리되지 않은 데이터 중 가장 작은 데이터를 선택 후 맨 앞에 있는 데이터와 바꾸는 것을 반복 이중 반복문으로 구현 선택 정렬 동작 예시 처리되지 않은 데이터 중 가장 작은 데이터를 선택하여 가장 앞의 데이터와 바꾼다. 이러한 동작을 반복한다. 선택 정렬 소스코드 array = [7, 5, 9, 0, 3, 1, 6, 2, 4, 8] for i in range(len(array)): 0 ~ 9 min_index = i # 가장 작은 원소의 인덱스 for j in range(i + 1, len(array)): if arra..
[노마드코더]코코아톡 클론코딩 (3)(2021.1.5) 본 내용은 해당 강의 토대로 작성 Learning CSS 1. Flexbox inline block은 기기마다 출력되는 화면이 다르며, 최적값을 찾기 힘든 단점이 있다. Flexbox는 반응형 디자인을 지원하기 때문에 inline block의 문제점을 해결할 수 있다. 사용 예시 Flexbox 사용은 아래와 같은 규칙이 있다. 부모 엘리먼트를 felx container로 만들어야 한다. 이 경우에서는 div가 자식 엘리먼트이다. body가 부모 엘리먼트이므로 이곳에 felx를 적용한다. justify-content : main axis의 설정(가로,기본값) aling-items : cross axis의 설정(세로,기본값) body가 height가 기본값이면, align-items를 사용해도 그대로인 것처..