본문 바로가기
반응형

전체 글135

Bootstrap을 이용한 반응형 Article 만들기 기초 부트스트랩(Bootstrap) 부트스트랩은 CSS를 활용한 프레임워크라고 볼 수 있습니다. 뭔가 상당히 어려운 말로 들리기는 한데 결론적으로 웹 페이지 제작시 사용하게 되면 매우 큰 도움을 줍니다. Boot + strap = 신발끈? 부츠 앞을 조이는 끈을 영어로 부트스트랩이라고 하죠. 그래서 이번에는 아주 기초적인 부트스트랩 사용법을 정리해보기로 합니다. 결과물 미리보기 아래와 같은 결과물을 만들려고 합니다. 웹 페이지에서 흔히 볼 수 있는 제목 + 내용 + 버튼의 조합을 이루는 컨텐츠의 형태입니다. 부트스트랩은 '반응형'을 기본으로 하고 있기 때문에 기본적으로 반응형 결과물로 만들어집니다. 같은 결과물을 가지고 브라우저 가로 폭을 늘려보면 알아서 잘 반응형으로 보여집니다. 빈 HTML 문서 준비 VS.. 2022. 12. 11.
구글 애드센스(Google Adsense) 계정 활성화 이후 ads.txt 이슈 처리 구글 애드센스를 신청한 이후 8일 만에 계정이 활성화 되었다는 안내 메일을 받았습니다. 안내 메일을 받은 이후 블로그에 광고가 노출되기 시작하는 걸로 보아 제대로 연동이 되는 것으로 보여집니다. 일단 매우 신기합니다. 내 글에 광고가 게재가 되었고 정말로 이게 수익이 발생한다고? 하는 기대감 약간, 호기심 약간 듭니다. 어차피 좋아하는 코딩 공부 내용을 정리 메모해두면서 한번 더 복습하고 나중에 비슷한 문제에 부딪혔을 때 다시 참고하기 위한 목적으로 개설한 티스토리인데 예기치 않은 수익은 과연 얼마나 나와줄런지 매우 궁금하기 짝이 없습니다. 구글 애드센스 ads.txt란 무엇인가? 구글에 따르면 광고를 판매하는 자가 승인을 받고 하고 있는 것인지 검증을 하는 솔루션인 것으로 보여집니다. https://s.. 2022. 12. 10.
생애 최초 Google Adsense 신청기 - 한 번에 승인(ft. 티스토리 블로그) 구글 애드센스(Google Adsense) + 티스토리 블로그 구글 애드센스는 구글의 광고 플랫폼입니다. 광고주들의 광고들을 블로그나 애플리케이션 그리고 웹페이지 등에 노출을 시켜줌으로써 광고를 실현해주고 수익을 쉐어해줍니다. 오옷? 수익을 만들 수 있다고라? 1. 티스토리 개설 - 2022년 11월 21일 저도 지금까지는 크게 관심을 갖지 않고 있다가 이번에 티스토리를 새롭게 개설하게 되면서 저도 한번 재미로(?)라도 일단 한번 신청 해보자고 생각이 들었습니다. TISTORY.는 클릭 몇 번으로 쉽게 개설이 가능합니다. 지난 11월 21일 개설 이후 1일 1포스팅을 꾸준히 하고 있습니다. 애드센스 관련하여 구글링을 해보니 라고도 불리면서 이런 저런 경험담과 노하우가 전해지고 있던데 저는 크게 신경쓰지 .. 2022. 12. 9.
재미있게 Grid 공부하기 - Grid Graden 문제풀이 15~28 CSS에서의 Grid 시스템 이란? 이전 포스팅에서도 알려드렸던 내용을 잠깐 복습하고 가도록 합니다. Flex와 달리 Grid는 각 셀을 이루는 가로축 세로축 가이드라인(=Grid)를 기준으로 합니다. 양수로 카운트 할 때는 좌에서 우로 음수로 카운트 할 때는 우에서 좌로 Grid Number를 지정할 수 있다고 했습니다. 그리고 Grid의 시작은 부모(Container) 요소에서 display: grid;를 주는 것으로 시작합니다. 그리고 grid-template-columns와 grid-template-rows를 이용해서 바둑판 모양의 격자를 만들고 시작하게 된다고 했죠? #garden { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; gri.. 2022. 12. 8.
재미있게 Grid 공부하기 - Grid Garden 문제풀이 1~14 얼마 전 포스팅에서 다룬 Flexbox Froggy와 더불어 Grid를 재미있게 학습할 수 있는 Grid Garden을 한번 풀어보았습니다. 이 문제도 한 1년 전쯤에 이미 풀어보았던 것인데요, 저의 경우 Flex를 더 자주 사용하다보니 Grid에 대한 기억이 가물가물해진 김에 다시 한번 문제를 풀어보게 되었습니다. 문제는 https://codepip.com/ 에서 회원가입/로그인을 진행하면 풀 수 있습니다. 저는 처음에는 Grid가 Flex 보다 더 직관적인 것도 같고 쉬운 것도 같고 그랬던 거 같았는데 Flex를 자주 사용하다보니 Flex가 오히려 쉬워진 감이 있습니다.^^; 최근 Web에서는 Layout 배치에 있어 Flex와 Grid를 잘 섞어서(?) 사용하고 있으니 두 가지 기능 모두 잘 살펴두.. 2022. 12. 7.
버튼을 클릭하면 클립보드에 복사하기, Button, Clipboard 주말을 맞이하여 잠깐 생각해둔 바 있던 개인 프로젝트를 진행해보고 있습니다. 당근빠따 실력은 아직 미천하지만 그 동안 공부해온 내용 수준 안에서 완성을 해 볼 수 있는 수준으로 기획했습니다. Kin Converter라고 일단 대충 이름을 붙여봤는데요 상단 Textarea에 코드를 넣고 [ Convert ] 버튼을 클릭하면 변경된 코드가 아래쪽 Textarea에 출력되고 이때 알아서 복사해가거나 [ Copy to ClipBoard ] 버튼을 클릭하면 메모리에 복사가 되어 퍼가기 쉽게 하는 기능입니다. 요즘은 유튜브나 다른 서비스들에서도 저렇게 버튼을 클릭하면 생성된 코드를 메모리에 복사해주는 그런 기능들을 자주 볼 수 있습니다. 자, 실습! 일단 버튼을 하나 만들고 onclick 이벤트를 받으면 copyT.. 2022. 12. 6.
반응형

티스토리툴바