컴굥일지

ch1.4 : align-self and order align-items과 비슷한 일을 한다.(cross axis) 다만, 한 box에만 해당한다. .father { display: flex; flex-direction: row; /*default: row*/ /*Main Axis*/ justify-content: space-around; height: 100vh; } .child { width: 200px; height: 200px; background: peru; color: white; } .child:nth-child(2) { align-self: center; } .child:nth-child(3) { align-self: flex-end; } 위와 같이 코드를 쓰면 아래와 같은 결과가 나온다...

ch1.0 : Life Before Flexbox display: block; block은 element이고, block옆에는 어떠한 element도 올 수 없다. display: inline-block; block 속성을 유지하면서, 옆에 element가 올 수 있다. But, 가로로 block이 나열될 때, 옆에 이상한 공백이 생기게 된다. display: inline; inline은 box가 아니다. 유동적이기 때문에, width와 height가 없다. ex) text ch1.1 : First Rule of Flexbox flexbox에서는 children과 이야기 하지 않는다. flexbox에서 뭔가를 움직이고 싶을 땐, flexbox container를 만들어서 사용한다. flexbox cont..

졸업 프로젝트를 진행하면서 내가 진짜 아무것도 모른다는 것을 느꼈다. 그래서 뭐라도 해봐야겠다는 생각에서 강의를 듣기 시작했다. 어떤 것을 먼저 공부할까 고민하다가, 항상 프로젝트를 할 때 가장 곤란했던 CSS 레이아웃을 선택했다. 개인적으로 토이 프로젝트를 하려고 해도, css가 어려워서 항상 머리가 아팠다. 뭔가 코딩을 해서 쨘! 하고 돌렸을 때 결과가 예쁘게 잘 나와야 계속하고 싶은 마음이 드는데, CSS 조절이 잘 안 돼서 항상 보기가 불편했다. 반응형 web을 좀 제대로 구현해보고 싶은 마음도 있었다. 그래서 노마드코더에서 CSS Layout 강의를 구매해서 들어보기로 했다.

[WYSIWYG의 소개 및 적용] WYSIWYG : 게시글을 작성할 수 있도록 해주는 기능 ⇒ 글을 쓸 때 글씨를 굵게 하거나 언더라인을 쓸 수 있게 하는 등 풍부하게 글을 작성할 수 있도록 해줌 articleapp의 form.py로 가서 아래 코드 작성 content = forms.CharField(widget= forms.Textarea(attrs={'class': 'editable'})) articleapp 내의 template의 create.html에 아래 코드 추가(editor 페이지에서 가져온 코드) update.html에도 위 코드 추가 마지막으로 form.py에 아래 코드 추가 project = fomrs.ModelChoiceField(queryset=Proje..

[RedirectView을 통한 SubscribeApp 시작] python manage.py startapp subscribe app settings.py에 subscribeapp 추가 urls.py에 subscribeapp으로 가는 경로를 생성 앞서 진행한 앱 생성 방법과 동일 [Field Lookup을 사용한 구독 페이지 구현] Model.objects.filter(pk = xxx, user= xxx)에서 (pk = xxx, user= xxx)는 And function Or function 도 존재 WHERE statement 도 존재 앞으로 구현할 것 유저가 구독하고 있는 프로젝트를 확인하는 것 그 프로젝트 안에 있는 모든 게시물들을 가져오는 것 원래는 예를 들어 Articlesl.objects.f..

[ProjectApp 구현] Create / Detail / List View 를 구현한다. (Update / Delete는 구현하지 않는다. Success_url to related Project (프로젝트 만들면 이후 이어질 페이지 정하기) Login_required to CreateView (최소한 로그인은 해야 프로젝트를 할 수 있게 하자) Model : title / description / image / created_at =========================================================== python manage.py startapp projectapp settings.py에 projectapp 추가 urls.py #projectapp/urls from..

1. 모션 인식 - PoseNet PoseNet은 MobileNet 기반의 pose estimation 네트워크입니다. PoseNet의 장점은 아래와 같습니다. 1. TensorFlow.js에서 실행이 가능하기 때문에, js 기반으로 코딩이 가능합니다. 2. 웹캠/핸드폰 카메라로 실행할 수 있습니다. 3. 브라우저 상에서 실행이 되고, 데이터가 남지 않습니다. OpenPose와 Django로 배포가 실패했기 때문에, 저희 팀은 js 기반으로 코딩이 가능하다는 점이 매우 중요했습니다. 백엔드로 배포하여 프론트와 연결하는 것보다, 프론트에 붙여서 같이 배포하는 것이 훨씬 쉬웠습니다. PoseNet은 SinglePose와 MultiplePose를 검출 할 수 있습니다. SinglePose는 한 사람만 추정하며..

1. OpenPose with Django 저희 팀은 백엔드로 Django를 사용하기로 했습니다. 그래서 AI파트도 Django로 작성하면 나중에 배포할 때 좀 편하지 않을까 싶었습니다. 그러나 생각보다 예시 코드가 많지 않았습니다. 저번 포스트에서 적은 코드는, 새로운 창을 띄워서 거기에 웹캠 영상이 송출되는 방식이었습니다. 하지만 제가 원하는 방식은 아래 사진과 같이 웹페이지에 한 부분에서 동영상이 송출되는 방식입니다. 이와 관련된 코드에 대해 아래에 기술하도록 하겠습니다. 2. Django에서 카메라 켜기 일단 먼저 django에서 카메라를 키는 코드를 알아보겠습니다. #urls.py from django.urls import path from . import views urlpatterns = [..

문제 https://www.acmicpc.net/problem/2865 문제 내용 참가자 n명의 m개 장르에 대한 능력치가 주어진다. 본선 진출 인원은 k명이고, 본선에서는 단 하나의 장르만 부를 수 있다. 상근이가 참가자별로 장르를 선택해주는데, 이때 본선 진출자들이 본선에서 고른 장르의 능력의 합을 구하면 된다. 문제 풀이 greedy문제이다. 일단 참가자별로 가장 높은 능력을 저장한다. (vector이용) 그리고 능력치를 내림차순으로 정렬한 뒤, 앞에서부터 k개를 더하여 출력하면 된다. 출력 시, 소수점 첫째 자리까지 반올림하여 출력하는 것에 유의하면 된다. 코드 #include #include #include using namespace std; int main() { ios_base::sync_..

[모바일 디버깅, 반응형 레이아웃] 모바일 앱으로 접속하는 방법 python manage.py runserver는 python manage.py runserver 127.0.0.1:8000와 같다. 코드 돌아가는 컴퓨터에서만 실행할 수 있다. 다른 device로는 불가능 python manage.py runserver 0.0.0.0:8000으로 터미널에 치면, 다른 device에서도 접속 가능 #pragmatic/settings.py ALLOWED_HOSTS = ['*'] #모든 호스트에 대해 허용을 한다. => 나중에 배포시에는 주의할것 현재, 모바일에서는 디자인이 예쁘게 되어있지 않다. ⇒ 아래와 같이 수정한다. shrink-to-fit=no는 firefox에 맞춘 설정이다. initi..