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와 간단한 웹 만들어보기 이 글은 스즈메의 문단속의 스포일러가 될 수 있습니다. 스즈메의 문단속 컨셉의 간단한 웹 만들어보기 '당신의 문단속' 바로가기 주말에 여자친구와 함께 영화 '스즈메의 문단속'을 보고 왔다. 신카이 마코토 감독의 작품인 '너의 이름은', '날씨의 아이'도 모두 재미있게 본 기억이 있다. 그럼에도 개인적으론 사실 크게 기대하지 않고 관람을 했는데 기대 이상으로 너무 재미있게 잘 관람하고 왔다. 특히 지진이 발생하는 것에 대한 표현과 상상력, 마치 일본 여행을 간접적으로 하는 듯한 느낌, 음악, 작화가 너무 좋았다. 일본은 3번이나 다녀오고 여행에 대한 욕구가 딱히 없는 나인데 일본 여행을 또 다녀오고 싶게 만든다... 다만 다른 사람들도 말하듯이 개연성에 대한 건 나도 조금 생각 들게 했지만 개인적으론 크게.. 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 다음
