2021.01.06

게시판의 댓글 작성 기능까지 구현을 완료했다.

작성 외의 수정, 삭제, 대댓글 등은 추후 추가할 예정이다.

댓글은 Comment 라는 새로운 스키마의 생성과

User 와 Post 둘 다 관계를 설정해 줘야 해서 좀 까다로웠다.

 

 

추가된 개발 상황

 - 댓글 기능 추가

 

추가할 기능

 - 댓글의 수정 및 삭제

 - 대댓글

 - 비밀번호 오류가 발생 수정 예정

 

 

댓글 기능 추가

 

MongoDB 생성된 모습

 

 

nodejs와 mongoDB를 활용한 간단한 게시판 만들기를 진행해 보았습니다.

CSS와 JS는 bootstrap의 힘을 빌려서 작성했습니다. 개발도구로는 vscode를 사용했습니다.

코드는 아래의 저장소에서 볼 수 있습니다.

처음 공부하고, 만들어 보는 페이지라서 가독성과 클린 코드, 문법 등은

부족합니다.

그 점 양해 부탁드립니다.

github.com/holicAZ/Nodejs

 

holicAZ/Nodejs

Contribute to holicAZ/Nodejs development by creating an account on GitHub.

github.com

 

저작자표시 비영리

'개발일지 > 게시판 만들기' 카테고리의 다른 글

게시판 만들기 #6  (0) 2021.01.21
게시판 만들기 #5  (0) 2021.01.14
게시판 만들기 #4  (0) 2021.01.13
게시판 만들기 #3  (0) 2021.01.07
[2020.12.01 ~ ] 게시판 만들기 #1  (0) 2021.01.05

 

플렉스 박스란?

 -  플렉스 박스는 플렉스 컨테이너, 플렉스 요소로 구성됩니다.

 -  요소를 블록 타입으로 설정하려면 display 속성값을 flex로, 인라인 타입으로 정의 하려면 inline-flex로 설정합니다.

 -  플렉스 컨테이너는 무조건 하나 이상의 플렉스 요소를 포함해야 합니다.

 -  플렉스 요소는 플렉스 라인이라는 가상의 선을 따라 위치합니다.

 

 

플렉스 박스(flex box) 레이아웃

 

플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.
이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다.

 

 

플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같습니다.

 

display 박스 타입 설정
flex-direction 요소들의 위치 방향을 설정(ex 좌->우)
justify-content 요소의 수평 방향 정렬 방식 설정
align-items 요소의 수직 방향 정렬 방식 설정
flex-wrap 플렉스 라인 풀일 때 줄 바꿈 설정
flex-flow flex-direction 및 flex-wrap 이용한 스타일을
한 줄에 설정 가능
align-content flex-wrap 속성 동작 변경 가능
플렉스 라인 정렬

 

 

또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같습니다.

 

 

order 요소의 순서 설정
align-self align-items 속성보다 우선순위
요소마다 서로 다른 align 속성값 설정 가능
flex 요소의 너비 상대적 설정 가능

 

더 자세한 사항은 (www.tcpschool.com/css/css3_expand_flexbox) 참조

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 9 repositories available. Follow their code on GitHub.

github.com

티스토리툴바