인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

진우님의 프로필 이미지
진우

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

React 실전프로젝트 질문

해결된 질문

작성

·

421

·

수정됨

0

스크린샷 2023-07-16 오후 11.55.09.png스크린샷 2023-07-16 오후 9.42.40.png

왜 강의와 다르게 이렇게 표시되는게 맞는지 굼금해서 올려봅니다.

아니라면 왜 이런지 알려주시면 감사하겠습니다.

밑에는 App.css입니다.

@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Yeon+Sung&display=swap');

body {
    background-color: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Nanum Pen Script';
    min-height: 100vh;
    margin: 0px;
}

@media (min-width: 650px) {
    .App {
        width: 640px;
    }
}

@media (max-width: 650px) {
    .APP {
        width: 90vw;
    }
}

#root {
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.App {
    min-width: 100vh;
    padding-left: 20px;
    padding-left: 20px;
}

/* my button */

.MyButton {
    cursor: pointer;
    border: none;
    border-radius: 5px;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    font-size: 18px;

    white-space: nowrap;
    font-family: 'Nanum Pen Script';
}

.MyButton_default {
    background-color: #ececec;
    color: black;
}

.MyButton_positive {
    background-color: #64c964;
    color: white;
}

.MyButton_negative {
    background-color: #fd565f;
    color: white;
}

/* header */

header {
    padding-top: 20px;
    padding-bottom: 20px;

    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
}

header > div {
    display: flex;
}

header .head_text {
    width: 50%;
    font-size: 25px;
    justify-content: center;
}

header .head_btn_left {
    width: 25%;
    justify-content: start;
}

header .head_btn_right {
    width: 25%;
    border-left: 25px;
    justify-content: end;
}

header button {
    font-family: 'Nanum Pen Script';
}

/* DiaryList */

.DiaryList .menu_wrapper {
    margin-top: 20px;
    margin-bottom: 30px;

    display: flex;
    justify-content: space-between;
}

.DiaryList .menu_wrapper .right_col {
    flex-grow: 1;
}

.DiaryList .menu_wrapper .right_col button {
    width: 100%;
}

.DiaryList .ControlMenu {
    margin-right: 10px;
    border: none;
    border-radius: 5px;
    background-color: #ececec;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    cursor: pointer;
    font-family: 'Nanum Pen Script';
    font-size: 18px;
}

/* DiaryItem */

.DiaryItem {
    padding-top: 15px;
    padding-bottom: 15px;

    border-bottom: 1px solid #e2e2e2;

    display: flex;
    justify-content: space-between;
}

.DiaryItem .emotion_img_wrapper {
    cursor: pointer;
    min-width: 120px;
    height: 80px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
}

.DiaryItem .emotion_img_wrapper_1 {
    background-color: #64c964;
}

.DiaryItem .emotion_img_wrapper_2 {
    background-color: #9dd772;
}

.DiaryItem .emotion_img_wrapper_3 {
    background-color: #fdce17;
}

.DiaryItem .emotion_img_wrapper_4 {
    background-color: #fd8446;
}

.DiaryItem .emotion_img_wrapper_5 {
    background-color: #fd565f;
}

.DiaryItem .emotion_img_wrapper img {
    width: 50%;
}

.DiaryItem .info_wrapper {
    flex-grow: 1;
    margin-left: 20px;
    cursor: pointer;
}

.DiaryItem .diary_date {
    font-weight: bold;
    font-size: 25px;
    margin-bottom: 5px;
}

.DiaryItem .diary_centent_preview {
    font-size: 18px;
}

.DiaryItem .btn_wrapper {
    min-width: 70px;
}

/* DirayEditor */

.DirayEditor textarea {
    font-family: 'Nanum Pen Script';
    font-size: 20px;

    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    resize: vertical;

    border: none;
    border-radius: 5px;
    background-color: #ececec;

    padding: 20px;
}

.DirayEditor .control_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.DirayEditor section {
    margin-bottom: 40px;
}

.DirayEditor h4 {
    font-size: 22px;
    font-weight: bold;
}

.DirayEditor .input_date {
    border: none;
    border-radius: 5px;
    background-color: #ececec;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;

    cursor: pointer;
    font-family: 'Nanum Pen Script';
    font-size: 20px;
}

.DirayEditor .emotion_list_wrapper {
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 2%;
}
/* EmotionItem */

.EmotionItem {
    cursor: pointer;

    border-radius: 5px;
    padding-top: 20px;
    padding-bottom: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.EmotionItem img {
    width: 50%;
    margin-bottom: 10px;
}

.EmotionItem span {
    font-size: 18px;
}

.EmotionItem_off {
    background-color: #ececec;
}

.EmotionItem_on_1 {
    background-color: #64c964;
    color: white;
}

.EmotionItem_on_2 {
    background-color: #9dd772;
    color: white;
}

.EmotionItem_on_3 {
    background-color: #fdce17;
    color: white;
}

.EmotionItem_on_4 {
    background-color: #fd8446;
    color: white;
}

.EmotionItem_on_5 {
    background-color: #fd565f;
    color: white;
}

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

보내주신 코드만으로는 현재 정확한 원인을 파악하기 어렵습니다(원인이 다른 파일에 있을수도 있어요)

따라서 강의 질문 공지사항에 맞춰, 현재 프로젝트를 깃허브나 코드샌드박스에 업로드 하신 다음

링크 형태로 보내주시면 제가 살펴보겠습니다. 감사합니다

진우님의 프로필 이미지
진우

작성한 질문수

질문하기