html (9) 썸네일형 리스트형 GPT와 전쟁, 자동화로 종결 안녕하세요. 그간 매주 AI 활용 로또 블로그를 올려왔습니다. (참고: 기존 글은 여기에서, 이 프로그램을 통해 생성할 글 샘플은 여기에서 미리 확인하실 수 있습니다.) 매주 당첨 결과와 나름의 예측 정보를 업데이트하는데, 글을 올릴 때마다 작은 고민거리가 하나 있었습니다. 바로 '블로그 포맷' 문제였죠. 포맷이 일정하지 않거나, 필요한 정보가 빠지는 경우가 잦아 슬슬 귀찮아지기 시작했습니다.GPT 달달 볶기, 이젠 못 참겠어서 직접 나섰습니다.그동안 글 초안은 GPT에게 맡겼습니다. 덕분에 글 쓰는 수고는 줄었지만, 얘가 토해내는 글이 제가 원하는 통일된 형식과는 거리가 멀었고, 가끔 중요한 정보가 빠지기도 했습니다. 그걸 티스토리에 바로 올릴 수는 없으니, 매번 손봐야 하는 게 일이었죠. 독자 입장에.. Drag and Drop Let's see how we can implement drag and drop using JavaScript Set Up In the HTML file, add the draggable="true" to the element you want to drag and drop. Add styles /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; borde.. Client Side Storage - Web Storage Web storage API allows to store data on user’s browser. Web storage is more secure as it dose not send data to a server and has larger storage limit than cookie. HTML has two web storage objects: localStorage: No expiry date for the data stored sessionStorage: Data lost when session (browser) closed How to Use? We can use ‘setItem(‘key’, ‘value’) to store data, getItem(‘key’) for get stored data.. Toggle button with CSS Let’s make a toggle button with HTML and CSS Implementation Option 1 HTML CSS /* toggle */ label { height: 30px; width: 60px; border-radius: 30px; } input { display: none; } input:checked + span { background-color: gray; } input:checked + span::before { left: 30px; } .toggle-circle { height: 100%; width: 100%; display: block; border-radius: 30px; transition: 0.4s ease; border: 1px solid black; p.. 캔버스 HTML 요소는 캔버스 에이피아이를 사용하여 단순한 도형부터 게임까지 만들 수 있게 해 주는 유용한 기능입니다. 이 글에서는 캔버스가 가지고 있는 속성들과 그 사용법, 동적으로 캔버스 크지 지정하기, 마지막으로 캔버스를 활용한 애플리케이션 제작방법소개로 구성하였습니다. HTML 삽입 미리보기할 수 없는 소스 Inline VS Block and Inline-block 요소는 크게 inline요소와 block 요소로 나누어집니다. inline 요소는 크기를 지정할 수 없고 포함된 콘텐츠만큼만 공간을 차지하며 줄 넘김이 없으나 block요소는 부여된 높이만큼의 공간을 화면에서 차지하며 다른 요소가 같은 줄에 오는 것을 허용하지 않습니다. a inline-block 은 block과 inline의 특성을 조합하여 크기를 지정하지만 다른 요소가 같은 줄에 오는 것도 허용합니다. a block 요소들 , , , , , inline 요소들 (if it has visible controls) 마무리 이상으로 block과 inline요소에 대해 알아보았습니다. 참고 Inline elements - HTML: HyperText Markup Language | MDN In this ar.. Flex CSS flex는 레이아웃을 결정하는 디스플레이 요소 중 하나로 테이블처럼 열 또는 행을 지정해서 원하는 레이아웃을 간편하게 만들 수 있게 해 줍니다. 사용법 먼저 flex와 사용가능한 속성들을 보겠습니다. flex 지정 속성 flex-direction: flex 컨테이너의 방향을 열 또는 행으로 지정 (행이 기본값) flex-shrink: 컨테이너의 크기가 줄어들 때 줄어들 비율 flex-grow: 컨테이너의 크기가 증가할 때 증가할 비율 flex-basis: 기본크기 flex: flex-grow, flex-shrink, flex-basis를 한 번에 지정하는 속성 styling 속성 gap: 간격 정렬 속성 justify-content: 가로 또는 세로 정렬 (플렉스의 방향에 따라 달라짐) align.. 전역속성 (global attribute) 전역속성는 이름처럼 HTML의 모든 요소가 사용할 수 있는 속성를 말합니다 (다만, 전역요소를 사용하는 요소가 해당 속성효과를 사용할 수 있는지는 별론). 전역속성 목록 Global attributes - HTML: HyperText Markup Language | MDN Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements. developer.mozilla.org HTML 기본 전역속성 contenteditable contenteditable contenteditable은 모든 HTML요소에 적용가능한.. 이전 1 2 다음
