221003 Today I Learned (TIL)

 

오늘 한 일

---

1. 그제 프론트 부분 풀리퀘스트하고, 오늘도 풀리퀘스트
2. 일정이 있어 주말이랑 개천절 때 많이는 하지 못했다. 아숩

CSS

---

1. flex로 가로 정렬된 오브젝트 중 하나 고정시키기 (예시에선 파란색, 스크롤하면 핑크만 내려간다)
   • 파란색을 position:fixed로 고정한 다음 left : 60%로 민다. (핑크색 크기 50 % + 두개 합치고 남는 공간 20%/2)
   • 핑크는 flex의 영향만 받아 가운데로 오므로 margin-right : 30% (파란색이 30%라)
   • <div style="display : flex; justify-content: center;"> <div style="width : 50%;margin-top:80px;margin-right: 30%; height:1000px; background-color: pink;"> 왼쪽 </div> <div style="width : 30%;margin-top:80px;position :fixed; left : 60%;height: 500px; background-color: paleturquoise;"> 오른쪽 </div> </div>

기타

---

• 하나의 컬럼에 하나의 데이터만 들어가야 하는데 덧글은 여러개가 들어가 있으니까 아예 DB를 하나 형성한다.
• ⇒ 한 칸에 여러 데이터가 들어가야 할 경우 따로 테이블을 만든다.
• DB에 사진 파일 자체를 데이터로 넣을 수 있긴 하지만, 데이터를 찾는 것을 쉽게 하기 위해 데이터를 작게 만든느 것이 좋다. 그래서 실제 이미지 서버나 파일 서버에 실제 파일을 올리고 그 파일이나 이미지의 경로를 데이터로 넣는다.
• 장고에서 id는 자동으로 int로 잡힌다.
• 모달창 → display:flex; 와 display:none;을 분기문으로 나누기
• .create는 자동으로 save까지 되지만, 존재하는 객체를 불러와서 그 안에 있는 데이터를 수정하면 save()를 해줘야 한다.

1. 제이쿼리
   • 여러개에 한 번에 액션 부여 → class
   • 한 개에만 액션 부여 → id
   • $(’#id값’).click(function(){명령들}); : 해당 식별자가 부여된 걸 클릭했을 때 해당 명령 수행
   • $(’.클래스명’).css({display:’flex’}) : 해당 클래스의 css를 display:flex로 변경한다.
   • overflow : hidden; : 스크롤바 없애는 CSS