광고 수익을 창출할 웹사이트 만들어보기 2-9(Frontend 꾸미기~! CSS 삽질)

사실 나는 미대출신이다.(자퇴임)

그래서 감각이 좀 있는편이다.(아님)

 

그래서 자신있게 꾸며보자고~!(자신감만 있음)

---

일단 내 페이지의 상태를 보자.

쉽지 않다............

 

이번엔 이 페이지를 내 미적감각을 살려 꾸며보겠다.

일단 참고할만한 디자인을 찾아본다.

 

 

색감은 AI로 만드는 약간 이런 보라보라 푸르른푸릉 색감이 좋을것같다.

GPT 선생한테 초본을 뽑아달라고 해보자.

 

1. 필요한 기술

• CSS 그라데이션과 밝은 색상 팔레트를 활용.
• 글꼴(Font) 선택으로 고급스럽고 현대적인 느낌 제공.
• TailwindCSS 또는 Styled-Components 같은 UI 라이브러리 활용

이라고 한다.

바로 시작해보자.

 

일단 당연히 웹화면을 담당하고 있는 리액트서버의 App.js파일을 수정해준다.

기존 JavaScript 코드에서 변경할 사항은 CSS 스타일 적용 방식과 직접 스타일링 코드 제거다.

---

텍스트 입력창

• 기존 코드:
  • style 속성에 인라인 스타일을 직접 입력.

<input
    type="text"
    placeholder="Enter your prompt"
    value={prompt}
    onChange={(e) => setPrompt(e.target.value)}
    style={{ padding: '10px', width: '300px', marginRight: '10px' }}
/>

 

• 변경된 코드:
  • style 속성을 제거하고, CSS 클래스 input-box를 추가.
  • 스타일은 App.css 파일에서 정의.

<input
    type="text"
    placeholder="Enter your prompt"
    value={prompt}
    onChange={(e) => setPrompt(e.target.value)}
    className="input-box"
/>

 

App.css

.input-box {
    padding: 15px;
    width: 300px;
    border: none;
    border-radius: 30px;
    outline: none;
    font-size: 1.2rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

 

---

 

스타일 재사용 가능

• 인라인 스타일링은 코드 중복을 유발하지만, CSS 클래스를 사용하면 재사용 가능.
• 예: 버튼 스타일링에서 동일한 generate-button 클래스 사용.

예시: 버튼

• 기존 코드:
  • 각 버튼에 대해 스타일을 반복 정의.

<button onClick={handleGenerate} style={{ padding: '10px 20px' }}>
    {loading ? "Generating..." : "Generate"}
</button>

• 변경된 코드:
  • 스타일 정의는 CSS 파일에서 관리:

<button onClick={handleGenerate} className="generate-button">
    {loading ? "Generating..." : "Generate"}
</button>

• App.css

.generate-button {
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    background: #6a11cb;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

---

1. 글로벌 스타일 적용
   • 기존 코드:
     • 각 컴포넌트의 개별 스타일링에만 집중.
   • 변경 후:
     • App.css에서 app-container 클래스와 같은 전역 스타일 적용.
     • 배경, 글꼴, 기본 레이아웃 등 글로벌 스타일 추가.

예시: 배경 스타일

• 기존:
  • 배경 스타일 정의가 없었음.
• 변경 후:
  • React 컴포넌트의 최상위 div에 className="app-container" 적용

<div className="app-container">

• App.css

.app-container {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 55%, #fbc2eb 100%);
    color: #ffffff;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
}

 

---

1. Kakao 버튼 및 이미지 스타일링 변경
   • 기존: 인라인 스타일로 버튼과 이미지를 정의.
   • 변경 후: CSS 클래스를 사용.

예시: 카카오톡 버튼

• 기존 코드:

<button onClick={shareToKakao} style={{ marginTop: '10px', padding: '10px 20px' }}>
    Share to Kakao
</button>

• 변경된 코드:
  • 스타일 정의는 CSS에서 관리

<button onClick={shareToKakao} className="kakao-button">
    Share to Kakao
</button>

• App.css

.kakao-button {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: #ffe812;
    color: #3a1d1d;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.kakao-button:hover {
    background: #fdd835;
    transform: scale(1.05);
}

---

요약

1. 인라인 스타일 제거:
   • 모든 style 속성을 CSS 클래스(className)로 대체.
2. CSS 파일 추가:
   • App.css 파일을 생성하고 스타일 정의를 분리.
3. 글로벌 스타일 정의:
   • app-container 클래스를 통해 배경, 글꼴, 레이아웃 등 전체 앱의 스타일링 추가.
4. 재사용 가능한 스타일링:
   • 버튼, 입력창, 이미지 등에 재사용 가능한 CSS 클래스(generate-button, input-box 등) 정의.

---

뭔가 휘몰아쳤지만, 사실 바뀐건 별로 없다.

App.js에 있던 style 속성들을 App.css라는 파일을 만들어 여기에서 관리하게끔 구현한 것 뿐이다.

별도로 배경색 만들고 중복된 코드 없이 미리 지정해둔 style 을 재활용하는 것이다.

 

근데 사실 내용 잘 모른다. (그래서 깊게 설명도 못함.... 그냥 아~ 요렇게 하는거네~ 하고 넘어가는 수준임)

나는 프론트앤드 잘모름.

그냥 칙칙피티 선생님이 만들어준거 그대로 가져다 쓴 것 뿐임.

 

아무튼 결과를 한번 봐보자~!

---

오우 분홍부농~~~~

 

너무 분홍색이다.

상남자의 색이지만 나는 하남자이므로, 좀더 하남자힉힉호물(나) 같은 색으로 변경해주겠다.

 

App.css 부분의 app-container가 배경을 담당하는 느낌이니 이부분을 어두운 우주테마로 바꿔보자.

/* 배경: 검정색 메인, 파랑과 보라 */
.app-container {
    text-align: center;
    padding: 20px;
    background: radial-gradient(circle, rgba(10, 10, 10, 1) 60%, rgba(20, 20, 30, 1) 100%);
    color: #ffffff;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

 

---

 

 

시꺼먼게 넘 좋다. 근데 좀 우주치고 썰렁한 것 같다.

좀 더 웅장한 느낌을 주고싶다.

 

일단 우주이미지처럼 파랑+보라+검정을 좀 섞어서 배경을 만들어준다.

 

• radial-gradient를 사용해 중앙이 조금 밝고 바깥으로 갈수록 어두워지는 검정, 파랑, 보라 톤의 배경을 생성

(radial-gradient는 중심점에서 바깥쪽으로 퍼지는 원형(또는 타원형) 색상 그라데이션을 만드는 CSS 함수라고 한다.)

/* 배경: 우주 느낌의 그라데이션 */
.app-container {
    text-align: center;
    padding: 20px;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 40, 1) 20%, rgba(25, 25, 112, 1) 60%, rgba(0, 0, 0, 1) 100%);
    color: #ffffff;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

 

 

오케이 딱 어둡어둡한 색감이 나왔다.

 

이제 여기에 파랑/보라 별효과를 추가해본다.

 

• ::before를 사용해 파랑(blue)과 보라(purple)의 네뷸라 느낌을 추가.
• 애니메이션(nebula-move)으로 천천히 움직이도록 설정.

네뷸라(Nebula)는 우주에 떠 있는 성운으로, 가스와 먼지가 모여 밝게 빛나는 구름처럼 보이는 천체 현상을 말한다.

별이 탄생하거나 죽을 때 형성되며, 다양한 색상과 형태로 우주에서 관찰된다고 함

 

::before를 사용해 네뷸라 효과를 만들려면, radial-gradient를 활용하여 색상이 섞이는 듯한 배경을 만들어야 한다고 한다.

애니메이션과 투명도를 추가하면 천천히 움직이고 퍼지는 네뷸라 느낌을 낼 수 있다.

 

이거아님

 

/* 파랑/보라 별 효과 */
.app-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 255, 0.2) 10%, transparent 90%),
                radial-gradient(circle, rgba(138, 43, 226, 0.15) 8%, transparent 92%);
    background-size: 200px 200px, 300px 300px;
    background-position: 30% 50%, 70% 30%;
    opacity: 0.3;
    z-index: 1;
    animation: nebula-move 8s infinite alternate ease-in-out;
}
/* 파랑/보라 네뷸라 애니메이션 */
@keyframes nebula-move {
    0% {
        background-position: 30% 50%, 70% 30%;
    }
    100% {
        background-position: 35% 55%, 65% 25%;
    }
}
/* 컨텐츠는 배경 위에 위치 */
.app-container > * {
    position: relative;
    z-index: 2;
}

 

App.css에 스타일을 추가해주면 몬가몬가 천천히~ 움직이는 애니메이션이 추가된다.

(맨 아래쪽 .app-container > *는 배경(네뷸라, 안개)보다 자식 요소(UI 콘텐츠)가 위에 보이도록 설정하는 코드다. )

 

 

마음에 든다.  굿맨 ~

 

다음편에는 버튼의 위치를 바꿔볼 것.

---

다음편에..... 께속.......