@@ -0,0 +1,285 @@
+@import 'https://fonts.googleapis.com/css2?family=Lobster&display=swap';
+@media screen and (max-width: 1200px) {
+  .mainRight {
+    display: none;
+  }
+
+  .article {
+    width: 100%;
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  border-collapse: collapse;
+}
+
+article {
+  width: 800px;
+  background-color: white;
+}
+
+nav {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 0px 170px;
+  height: 60px;
+}
+
+.logo {
+  width: 30px;
+  height: 30px;
+  padding-right: 15px;
+  border-right: 1px solid black;
+}
+
+.rightIcon {
+  width: 30px;
+  height: 30px;
+  margin-right: 30px;
+}
+
+.instagram {
+  margin-left: 15px;
+  font-family: 'Lobster', cursive;
+  font-size: 33px;
+  font-weight: 1;
+}
+
+.search {
+  outline: none;
+}
+
+.writeComment {
+  width: 100%;
+  height: 40px;
+  padding-left: 10px;
+  border: 1px solid #efefef;
+  outline: none;
+}
+
+.search-box {
+  > input {
+    width: 200px;
+    height: 20px;
+    border: 1px solid #dbdbdb;
+    text-align: center;
+  }
+
+  position: relative;
+  > img {
+    position: absolute;
+    width: 11px;
+    height: 11px;
+    left: 75px;
+    top: 7px;
+  }
+}
+
+main {
+  padding: 60px 0px;
+  background-color: #fafafa;
+}
+
+.content {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  margin: 0px 350px;
+}
+
+.mainRight {
+  width: 330px;
+  margin-left: 10px;
+}
+
+.feedTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 780px;
+  padding: 10px 10px;
+  border: 1px solid #e6e6e6;
+}
+
+.feedUser {
+  display: flex;
+  align-items: center;
+}
+
+.feedPicture {
+  height: 800px;
+  border: 1px solid #e6e6e6;
+}
+
+.feedId {
+  margin-left: 10px;
+}
+
+.feedMore {
+  width: 15px;
+  height: 15px;
+}
+
+.smallUserPicture {
+  width: 40px;
+  height: 40px;
+  border: 1px solid #e6e6e6;
+  border-radius: 50px;
+}
+
+.feedIcons {
+  > img {
+    width: 27px;
+    height: 27px;
+  }
+
+  > div {
+    > img {
+      width: 27px;
+      height: 27px;
+    }
+  }
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  margin: 0px;
+}
+
+.feedBottom {
+  padding: 10px 10px;
+  border-left: 1px solid #efefef;
+  border-right: 1px solid #efefef;
+  border-bottom: 1px solid #efefef;
+}
+
+.FeedBottomLeftIcon {
+  > img {
+    padding-right: 10px;
+  }
+}
+
+.like {
+  > img {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+    border: 1px solid #e6e6e6;
+    border-radius: 7px;
+  }
+  display: flex;
+  align-items: center;
+}
+
+.comment {
+  > div {
+    > div {
+      color: #a4a4a4;
+    }
+  }
+}
+
+.commentIcons {
+  float: right;
+  display: inline;
+  width: 15px;
+  height: 15px;
+  margin-left: 5px;
+}
+
+.boldFont {
+  font-weight: bolder;
+}
+
+.addCommentFrom {
+  position: relative;
+  width: 786px;
+}
+
+.postingButton {
+  position: absolute;
+  color: #cde6fc;
+  background-color: white;
+  top: 14px;
+  right: 10px;
+  border: 0;
+  outline: 0;
+}
+
+.rightTop {
+  display: flex;
+  align-items: center;
+  width: 300px;
+}
+
+.wecodeLogo {
+  width: 60px;
+  height: 60px;
+  margin-right: 20px;
+  border-radius: 50px;
+}
+
+.lightFont {
+  color: #9e9e9e;
+}
+
+.followFont {
+  color: #3797f0;
+}
+
+.rightMiddle {
+  height: 200px;
+  margin: 20px 0px;
+  padding: 12px;
+  background: white;
+  border: 3px solid #e6e6e6;
+  border-radius: 7px;
+  overflow: scroll;
+}
+
+.seeAllStory {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.friendsRecommendContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.story {
+  display: flex;
+  align-items: center;
+  margin: 10px;
+
+  > img {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+    border-radius: 50px;
+    border: 2px solid #d93081;
+  }
+}
+
+.friendsRecommend {
+  display: flex;
+  align-items: center;
+  margin: 10px;
+  > img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50px;
+    margin-right: 10px;
+  }
+}
+
+footer {
+  margin-top: 20px;
+  > .boldFont {
+    margin-top: 10px;
+  }
+}

리뷰: 반응형 아주 좋네요!!
브레이크 포인트는 기획마다 달라지지만 보통 태블릿과 데스크탑의 구분점은 1078px이라는 점 알아두세요!
모바일과 태블릿은 768px입니다!