CSS (8) 썸네일형 리스트형 CSS display 옵션들에 대해 알아보기 CSS display 옵션들에 대해 알아보기 오랜만에 CSS와 관련된 포스팅을 작성하는 듯 하다. 이번 포스트에서는 CSS 속성들 중 'dispaly'에 대해서 알아보는 시간을 가지고자 한다. display 속성은 HTML 요소가 어떻게 표시되는지를 결정하는 중요한 속성이다. display의 주요 옵션이 무엇이 있는지 알아보고, 각각 어떤 기능을 하는지 간단하게 알아보자. 목차 display 옵션 none block inline, inline-block flex grid flex & grid 공통 옵션 기타 옵션 display 옵션 ✔ display 옵션이란? CSS에서 display 속성은 웹 페이지 내의 요소가 어떻게 보여질지, 즉 그 요소의 레이아웃 박스 유형을 결정하는 중요한 속성이다. 이 속성은.. ChatGPT로 Bulma 알아보기 ChatGPT로 Bulma 알아보기 이번 포스트에서는 ChatGPT로 CSS 프레임워크인 Bulma에 대해서 알아보고자 한다. Bootstrap, Sass, LESS는 들어보기나 했지 필자의 경우엔 Bulma는 이번에 처음 들어보는 CSS 프레임워크이다. ChatGPT에게 Bulma에 대해 설명을 요청해 보고 관련 샘플들을 받아서 한번 공부해 보자. ChatGPT가 출력해 준 내용을 기반으로 내용을 정리해 보았다. Bulma란? Bulma는 모던하고 유연한 CSS 프레임워크이다. 이 프레임워크는 Sass를 기반으로 하며, Flexbox 레이아웃 모델을 사용한다. ✔ 특징 응답형 디자인: Bulma는 모바일 기기에서 데스크탑까지 다양한 스크린 사이즈에 대응할 수 있다. 모듈형: Bulma는 모듈형 구조를 .. ChatGPT로 Tailwind CSS 알아보기 ChatGPT로 Tailwind CSS 알아보기 이번 포스트에서는 필자가 가장 좋아하는 Tailwind CSS에 대해서 간단하게 알아보고자 한다. 필자가 적당히 정리해서 작성해도 되지만 ChatGPT를 통해 요약된 내용을 받아 정리해 보겠다. 노션에 따로 노트해놓은 내용들이 있긴 한데... 공부할 때 빨리빨리 작성해서 그런지 뭔가 건너뛴 부분이 좀 많기도 해서 복습 겸 살짝 공부해 보려 한다. Question Tailwind css에 대해서 설명해줘 Answer Tailwind CSS는 저수준의 유틸리티 기반의 CSS 프레임워크입니다. 이는 개발자가 빠르게 사용자 정의 디자인을 구축할 수 있도록 도와줍니다. Tailwind는 사전 정의된 디자인 템플릿이나 테마를 제공하지 않는 대신, 작은 단위의 유틸리티.. ChatGPT로 Sass 알아보기 ChatGPT로 Sass 알아보기 이번 포스트에서는 ChatGPT로 스타일 시트 언어인 Sass에 대해서 알아보고자 한다. Sass는 "Syntactically Awesome Style Sheets"의 약자이며, "구문적으로 뛰어난 스타일 시트"라는 뜻이다. 정말 구문적으로 뛰어난 스타일 시트인지 한번 알아보자. ChatGPT의 WebPilot 플러그인을 사용하여 Sass를 검색 후에 설명해달라고 요청했으며, 각 기능별 예시를 출력 요청하고 해당 내용을 정리해 보았다. Question Sass CSS에 대해서 검색해보고 자세하게 설명해줘 Answer Sass(스타일시트 언어)는 햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일시트 언어입니다. 이 언어는 CSS를 확장하고, CSS를 더욱 효과적이고.. ChatGPT로 LESS CSS 알아보기 ChatGPT로 LESS CSS 알아보기 최근 회사에서 사용하는 툴에서 LESS CSS를 통해 링크의 스타일을 변경할 수 있다는 것을 알게 되어 처음으로 LESS에 대해 접하게 됐다. 얼추 알아보면서 사용해 봤는데 확실히 좋은 것 같아서 ChatGPT를 통해 간단하게 더 알아보는 시간을 갖고자 한다. 근데, LESS가 좋은 것 같긴 하지만 그럼에도 내 개인 프로젝트를 할 땐 Tailwind를 사용할 것 같긴 하다. 아무튼 지식을 늘려나가는 것은 무튼 좋은 것이니 한번 공부해 보자. ChatGPT의 WebPilot 플러그인을 사용하여 LESS에 대해 검색시킨 후 설명해 달라고 해보았다. 그리고 각 기능에 대해 설명과 예시도 출력시켜서 해당 내용들을 정리해 보았다. Question LESS CSS에 대해서 .. chatGPT가 생각하는 아름다운 CSS 버튼 스타일 (feat. before/after 가상 요소) chatGPT가 생각하는 아름다운 CSS 버튼 스타일 이번 포스트는 chatGPT가 생각하는 아름다운 버튼 스타일에 대해서 작성해 보고자 한다. 처음 포스트를 작성한 뒤로 포스트를 작성할 수가 없었는데... 이유는... chatGPT가 학습한 것이 점점 더 많아지기 시작해서인 것인지는 몰라도 처음 시도할 때는 '가장 아름다운 CSS를 작성해 줘'라고 하면 무작위로 무언가 만들어 줬는데 요즘은 무작위라기보다는 "아름다운 CSS 코드는 간결하고, 가독성이 좋으며, 쉽게 유지 관리할 수 있는 코드"라면서 아주 기본적인 코드만 작성해 준다. 몇 주 전까지만 해도 아름다운 버튼/아름다운 GRID 스타일/아름다운 애니메이션 등등 뭔가 무작위로 생성해 줬는데 요즘은 통 마음에 드는 걸 출력해 주지 않는다. 그래서 이.. chatGPT가 생각하는 가장 아름다운 CSS는 무엇일까? (2) 가장 아름다운 CSS (2) chatGPT가 생각하는 가장 아름다운 CSS 두 번째 포스트이다. 이전 포스트에서는 chatGPT가 애니메이션이 적용된 원형 박스를 생성해주었다. 예전에 테스트해보았지만 사실 이 질문을 다시하면 다른 코드를 작성해준다. 이러면 사실상 "가장 아름다운 코드를 찾아내는건 아니지 않나?" 하는 생각이 들긴하지만(줏대 없는 chatGPT🤔), 정말 굉장한 디자인을 chatGPT를 통해 얻어내서 무언가를 만들어보고자 하는 건 아니니 재미로만 봐주자. chatGPT에 쌓인 데이터를 통해 괜찮은 디자인을 추천해주는 것이니 뭐가 됐든 도움은 될 듯 하다. ❓ Q. 너가 생각했을 때 가장 아름다운 CSS를 작성해줘 😎 A. 저는 다음과 같은 CSS 코드가 아름다운 디자인을 구현한 예시라고 .. chatGPT가 생각하는 가장 아름다운 CSS는 무엇일까? (1) 가장 아름다운 CSS (1) chatGPT에게 가장 아름다운 CSS 코드를 작성해달라고 질문을 해보았다. 처음에는 반장난으로 해본 것인데 하다보면 참고할만한 스타일이 나오진 않을까 싶어서 아주 약간 기대 중이다. 과연 chatGPT가 생각하는 아름다운 스타일이 무엇일까 ❓ Q. 너가 생각했을 때 가장 아름다운 CSS 코드를 작성해줘 😎 A. CSS는 디자인을 꾸며주는 중요한 언어입니다. 이 중에서도 가장 아름다운 CSS 코드 중 하나는 다음과 같습니다. .container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #e0e0e0; } .box { width: 100px; hei.. 이전 1 다음
