본문 바로가기
CSS

chatGPT가 생각하는 가장 아름다운 CSS는 무엇일까? (2)

웨이먼드 2023. 3. 9. 22:26
반응형

가장 아름다운 CSS (2)

chatGPT가 생각하는 가장 아름다운 CSS 두 번째 포스트이다.
이전 포스트에서는 chatGPT가 애니메이션이 적용된 원형 박스를 생성해주었다.
예전에 테스트해보았지만 사실 이 질문을 다시하면 다른 코드를 작성해준다.
이러면 사실상 "가장 아름다운 코드를 찾아내는건 아니지 않나?"
하는 생각이 들긴하지만(줏대 없는 chatGPT🤔), 정말 굉장한 디자인을 chatGPT를 통해 얻어내서 무언가를 만들어보고자 하는 건 아니니 재미로만 봐주자.
chatGPT에 쌓인 데이터를 통해 괜찮은 디자인을 추천해주는 것이니 뭐가 됐든 도움은 될 듯 하다.

❓ Q. 너가 생각했을 때 가장 아름다운 CSS를 작성해줘

😎 A. 저는 다음과 같은 CSS 코드가 아름다운 디자인을 구현한 예시라고 생각합니다.


<body>
  <div class="container">
    <h1 class="title">Beautiful CSS Example</h1>
    <h2 class="subtitle">This is an example of beautiful CSS design</h2>
    <a href="#" class="btn">Learn More</a>
  </div>
</body>


body {
  background-color: #fff2e6;
  font-family: 'Montserrat', sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 4rem;
  font-weight: bold;
  color: #ff7733;
  text-align: center;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 0px #ffd1b3;
}

.subtitle {
  font-size: 2rem;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background-color: #ff7733;
  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  text-decoration: none;
  box-shadow: 2px 2px 0px #ffd1b3;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  background-color: #ffd1b3;
  box-shadow: 4px 4px 0px #ff7733;
  transform: translate(-2px, -2px);
}
아래가 해당 코드의 결과이다.
포스팅하기 위해 일부 코드는 변경해서 진행했다. (body와 a 태그는 div 태그로 변경)
이전과 다르게 이번엔 body부터 해서 통으로 작성해줬다.
오렌지색 테마가 이쁘긴한데 전체적인 구조는...음... 글쎄...으음...🤔

🪄 Result

Beautiful CSS Example

This is an example of beautiful CSS design

Learn More
"Beautiful CSS Example" ... 굉장히 자신감 넘쳐보이는 샘플을 작성해준 GPT 슨생님...
저번에도 그러더니 이번에도 메인 색상이 오렌지색이다. GPT 슨생님께서는 오렌지색을 좋아하시나보다.
오렌지색을 유독 사용하는 이유가 있을까 싶어서 질문을 한 번 해봤다.

❓ Q. CSS 코드 작성해줄 때 오렌지색을 주로 사용하는 이유가 있어?

😎 A. CSS 코드 작성 시에 오렌지색을 많이 사용하는 이유는 다양합니다.

첫째, 오렌지색은 매우 밝고 눈에 잘 띄는 색상 중 하나입니다. 따라서 오렌지색을 사용하면 사용자의 시선을 끌어들일 수 있으며, 화면에서의 주요 요소를 강조하는 데에 효과적입니다.

둘째, 오렌지색은 열정, 에너지, 긍정적인 기운을 상징하는 색상입니다. 따라서 브랜드 마케팅이나 프로모션 등에서 오렌지색을 사용하면, 제품 또는 브랜드에 대한 긍정적인 인상을 심어줄 수 있습니다.

셋째, 오렌지색은 다른 색상과 쉽게 조합이 가능한 색상 중 하나입니다. 다양한 색상과 쉽게 조합되어 다양한 디자인을 구현할 수 있으며, 다른 밝은 색상과 함께 사용할 때는 시각적인 균형을 유지하는 데에도 효과적입니다.

따라서 오렌지색은 CSS 코드 작성 시에 자주 사용되는 색상 중 하나입니다.
문득 생각해보니 지극히 개인적으로 '당근마켓'이 깔끔하고 이쁜 디자인이라고 생각했었는데 오렌지색을 적절하게 섞어서 그런건가 싶기도 하다.
광고를 할 목적이 전혀 아니지만, 개인 스터디를 할 때 니코쌤(노마드코더(https://nomadcoders.co))의 강의를 듣는데 내 기억이 맞다면 뭔가 샘플로 컬러를 주실 때 가장 먼저 오렌지를 사용하셨던 것 같기도 하다.
완전 초심자 분들은 니코쌤의 강의를 보는걸 정말 강력 추천한다. 다른 강의들 보다 공부할 때 스킬업이 확 된다는 것이 정말 체감이 컷다. (영어 듣기 귀 뚫기도 겸사겸사... 하지만 아직 영어는 잘 못한다...😂)

본론으로 돌아와 chatGPT는 오렌지 컬러 테마가 아름답다고 생각하는 것 같다.
사실 생각하기보다는 chatGPT에 쌓여있는 데이터 중에 오렌지색을 활용하는 데이터가 많아서 그런게 아닌가 싶다.
chatGPT가 생성해준 버튼 스타일은 참고할만한 거 같아서 이번에도 뭔가에 활용해보고자 하는데...
고민 끝에 슬라이드 쇼를 한번 생성해보았다.

prev 버튼의 스타일은 chatGPT가 생성해준 스타일을 사용했고, next 버튼의 스타일은 prev 버튼과 반대로 애니메이션이 적용되게 추가했다.
로직은 생각나는 데로 작성하긴 했는데 나중에 해당 코드를 chatGPT에게 리뷰해달라고 해보고 관련 내용도 포스팅해봐야겠다.
 
Beautiful CSS Example 1
Beautiful CSS Example 2
Beautiful CSS Example 3
 
 


<div class="slideshow-div slideshow-fadeIn">
  <div class="slideshow-body">
    <div class="slideshow-prev slideshow-btn">
        <svg xmlns='http://www.w3.org/2000/svg' fill='none'
          viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'>
          <path stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5' />
        </svg>
    </div>
    <div class="slideshow-pages">
      <div class="page slideshow-fadeIn">Beautiful CSS Example 1</div>
      <div class="page slideshow-fadeIn">Beautiful CSS Example 2</div>
      <div class="page slideshow-fadeIn">Beautiful CSS Example 3</div>
    </div>
    <div class="slideshow-next slideshow-btn">
        <svg xmlns='http://www.w3.org/2000/svg' fill='none'
          viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'>
          <path stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' />
        </svg>
    </div>
  </div>
  <div class="slideshow-dots">
</div>



.slideshow-div {
  background-color: #fff2e6;
  font-family: 'Montserrat', sans-serif;
}

.slideshow-body{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.slideshow-pages{
  min-width: 500px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.slideshow-btn {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #ff7733;
  padding: 10px;
  border-radius: 0.3rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  min-width: 25px;
}

.slideshow-prev{
  box-shadow: 2px 2px 0px #ffd1b3;
}

.slideshow-next{
  box-shadow: -2px 2px 0px #ffd1b3;
}

.slideshow-prev:hover {
  background-color: #ffd1b3;
  box-shadow: 4px 4px 0px #ff7733;
  transform: translate(-2px, -2px);
  color: #ff7733;
}

.slideshow-next:hover {
  background-color: #ffd1b3;
  box-shadow: -4px 4px 0px #ff7733;
  transform: translate(2px, -2px);
  color: #ff7733;
}

.slideshow-dots{
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}

.slideshow-dot{
  width: 15px;
  height: 15px;
  background-color: #ffd1b3;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.slideshow-dot:hover{
  background-color: #ff7733;
}

.dot-active{
  background-color: #ff7733;
}

.slideshow-pages .page{
  font-size: 1.3rem;
  font-weight: bold;
  color: #ff7733;
  text-align: center;
  text-shadow: 2px 2px 0px #ffd1b3;
}

.slideshow-pages .hide{
  display: none;
}

.slideshow-fadeIn {
  animation-name: fadeIn;
  animation-duration: 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media all and (max-width: 500px){
  .slideshow-pages{
    min-width: 200px;
  }
  .slideshow-pages .page{
    font-size: 0.8rem;
  }
  .slideshow-btn{
    font-size: 0.8rem;
    min-width: 20px;
  }
}


document.addEventListener('DOMContentLoaded', () => {
  let activeIndex = 0;
  const pages = document.querySelectorAll('.slideshow-pages .page');

  const dots = document.querySelector('.slideshow-dots');

  // slide page hide & create dots
  pages.forEach((page, index)=>{
    const dotDiv = document.createElement('div');
    dotDiv.classList.add('slideshow-dot');
    dots.appendChild(dotDiv);

    if( index === activeIndex ){
      dotDiv.classList.add('dot-active');
      return;
    }
    page.classList.add('hide');
  });

  const createdDots = document.querySelectorAll('.slideshow-dot');

  const slideHandler = ()=>{
    pages.forEach((page, index)=>{
      if( index === activeIndex ){
        page.classList.remove('hide');
        createdDots[index].classList.add('dot-active');
      }else{
        page.classList.add('hide');
        createdDots[index].classList.remove('dot-active');
      }
    });
  }

  const activeHandler = (index)=>{
    activeIndex = index;
    const lastIndex = pages.length - 1;
    
    if( activeIndex > lastIndex ){
      activeIndex = 0;
    }
    if( activeIndex < 0 ){
      activeIndex = lastIndex;
    }
    slideHandler();
  }



  // page handler 
  const prevBtn = document.querySelector('.slideshow-prev');
  const nextBtn = document.querySelector('.slideshow-next');

  prevBtn.addEventListener('click', ()=>{
    activeHandler(activeIndex - 1);
  });

  nextBtn.addEventListener('click', ()=>{
    activeHandler(activeIndex + 1);
  });

  // dots handler
  createdDots.forEach((dot, index)=>{
    dot.addEventListener('click', ()=>{
      activeHandler(index);
    })
  });
});
반응형
저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

ChatGPT로 Tailwind CSS 알아보기  (12) 2023.06.02
ChatGPT로 Sass 알아보기  (11) 2023.05.28
ChatGPT로 LESS CSS 알아보기  (7) 2023.05.27
chatGPT가 생각하는 아름다운 CSS 버튼 스타일 (feat. before/after 가상 요소)  (1) 2023.04.23
chatGPT가 생각하는 가장 아름다운 CSS는 무엇일까? (1)  (0) 2023.03.06

'CSS' Related Articles

loading

티스토리툴바