ChatGPT3 도움 받아서 갤러리 오버레이 버튼 만들기
갑자기 이런 버튼을 만들어 보고 싶어 졌습니다.
백그라운드로 들어 있는 이미지 위로 플레이 버튼이 가운데 올라가 있는 형태입니다.
대충 생각을 해보니, 이미지가 들어 있는 div는 position: relative를 주고 저 플레이버튼을 이미지(?)로 만들고 opacity로 투명도를 준 다음 position: absolute로 만든 다음 붕~ 띄워서 가운데 정렬을 하면 되는 것인가? 하는 생각이 들었습니다.
타이핑해서 코드를 작성하려다, 문득 어제 만났던 그녀가 ChatGPT3가 떠 올랐습니다.
만들기 귀찮으니 일단 ChatGPT3에게 질문을
개떡 같이 말해도 찰떡 같이 알아듣는 ChatGPT AI가 너무나 대견합니다. 요즘 제 업무를 참 많이 도와주고 있습니다.
그것도 무보수로 말이죠.
div 위에 있는 플레이 버튼을 html/css 코드로 만들어주셈~!
generate html/css code in html document, a play button over div
이렇게 대충 질문을 했는데도, 제가 찾는 목적 대상을 제대로 이해하고, 아래와 같은 코드를 추천해 줍니다.
대충 훑어보니, 제가 원하던 딱!! 그거였습니다. 놀랍습니다!
그리고 아래에는 이렇게 친절하게, 부가적인 설명도 첨언해 줍니다.
In this example, we have a .container div that acts as the container for the play button. The play button is created using a .play-button div, which is absolutely positioned in the center of the .container div. The triangular shape of the play button is created using the :before pseudo-element and a CSS border trick.
아래는 발 해석,
- 이 예에서는 재생 버튼의 컨테이너 역할을 하는 .container div가 있다.
- 플레이 버튼은 .container div의 중앙에 절대적(absolute)으로 위치한 .play-button div를 사용하여 생성된다.
- 플레이 버튼의 삼각형 모양은 :before pseudo-element와 CSS 테두리 트릭을 사용하여 생성된다.
흔히 보아오던 이런 플레이 버튼은 나중에 공부해야지~ 하고 슬쩍 미뤄두었던 실습과제였는데, ChatGPT가 바로 적시 적절한 사용 예제를 낼름 가져다줍니다. 정말 감탄하지 않을 수가 없습니다.
이걸 그냥 받아서 쓰기만 하면 실력은 별로 안 늘겠죠? 혼자 끙끙 대면서 고민하고 시도를 해봐야 머리에 오래 남는 법인데요. AI의 도움만 계속 받으면 사람은 정말 언젠가 바보가 될지도 모를 일입니다.
각설하고, 아무튼 편해서 사용해 봅니다.(이율배반적인 지점...)
에디터를 당장 열어서 테스트
바로 작업에 써먹어보기 위해 에디터를 당장 열어서 코딩을 하고 테스트를 진행해 봅니다.
물론 저 코드를 이해하면서 살짝 수정을 했습니다.
HTML <body> 영역은 div.lec-container를 만들어서 반복 사용하도록 했습니다.
<body>
<div class="lec-container">
<div class="lec-info">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium labore, odio libero architecto nihil ab consequuntur ea odit, impedit, incidunt porro officia adipisci quibusdam quae.</h2>
</div>
<div class="lec-img" style="background-image: url('./girl.png')">
<div class="play-button"></div>
</div>
</div>
</body>
CSS는 ChatGPT가 알려준 내용을 토대로, class를 연결해 가면서 수정 테스트 했습니다.(별로 고칠 게 없더라구요!)
.lec-container {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
padding: 50px 20px;
}
.lec-info {
flex-basis: 120%;
line-height: 300%;
}
.lec-info h2 {
font-size: 20px;
}
.lec-img {
position: relative;
min-width: 40%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 0;
padding-bottom: 25%;
padding-left: 20px;
border-radius: 10px;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #163963;
opacity: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.play-button:before {
content: "";
opacity: 80%;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent white;
}
브라우저에서 실행을 해봅니다.(div.lec-container 하나 더 반복했습니다)
와... 정말 기가 막히는군요. 아무 때고 가르침을 받을 수 있는 엄청난 개인 과외 선생님을 만난 기분입니다.
저도 이런 플레이 버튼은 한 번도 직접(!) 만들어 본 적이 없었더래서, 반투명한 이미지를 만들어 올리는 것으로 예상했었는데, 아니었더랬습니다!
둥그런 버튼의 경우 div를 스타일링해서 만드는 것은 예상했지만, 삼각형 아이콘을 ::before와 border 스타일링을 통해서 만든다는 것은 처음 알게 되었습니다.
.play-button { // 둥근 버튼 형태 만들기
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #163963;
opacity: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.play-button:before { // 삼각형 아이콘 형태 만들기
content: "";
opacity: 80%;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent white;
}
마치며
ChatGPT가 알려준 코드를 곰곰이 살펴보면서, 저에게는 좋은 공부가 되더라구요.
초보 탈출을 위해 코딩 근육을 강화하는 데 있어 ChatGPT는 개인 PT 선생님처럼 아주 큰 도움이 되고 있습니다.
더욱이 좋은 점은, 코딩에 대해서 조금만 공부해 둔다면 로컬환경에서 약간의 테스트 이후 실무에 곧바로 써먹을 수 있다는 점이 참 좋은 것 같습니다.
인공지능의 발전 속도는 정말 놀랍습니다.
두 어 달 후면 ChatGPT4 버전이 발표된다니, 격세지감도 이런 격세지감이 없을 것 같습니다.
즐거운 코딩생활, 즐코딩.
KINcoding
'AI' 카테고리의 다른 글
| [IIS] http:// 요청을 https:// 로 Redirection 해주기 - ft. ChatGPT 도움 (1) | 2023.02.15 |
|---|---|
| Chat-GPT를 AI를 이용하여 코딩에 도움 받기 (0) | 2023.02.01 |
| [AI] ChatGPT 사용해보기(ft. 코딩 초보자에 도움을?) (0) | 2022.12.19 |
댓글