쳇 gpt를 이용해서 코드를 짜보고 그걸 역으로 거슬러 올라가는 것으로 공부를 하고 있다.
html과 css가 적용되는 모습을 하나씩 차근차근 이해하고있는 중이다.
외우는게 아니라 이해하는게 중요한것 같다.
https://memojjang12345.tistory.com/62 밑에있는 코드를 사용해서 만들어봄.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>취미별 사이트</title>
<link rel="stylesheet" href="styles.css">
<style>
/* 기본 스타일 설정 */
body {font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
}
header {
background-color: #333;
color: white;
padding: 1em 0;
margin: 0;
text-align: center;
}
header h1 {
margin: 0;
}
header .search-container {
margin: 1em auto;
max-width: 600px;
}
header input[type="text"] {
width: calc(100% - 90px);
padding: 0.5em;
font-size: 1em;
}
.header button {
width: 80px;
padding: 0.5em;
font-size: 1em;
background-color: #555;
color: white;
border: none;
cursor: pointer;
}
.header button:hover {
background-color: #777;
}
main {
padding: 2em;
}
section.hobby {
margin-bottom: 2em;
}
section.hobby h2 {
border-bottom: 2px solid #333;
padding-bottom: 0.5em;
margin-bottom: 1em;
color: #333;
}
.site-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.site {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
max-width: 500px;
text-align: center;
}
.site a {
text-decoration: none;
color: #333;
font-weight: bold;
display: block;
}
.site a:hover {
color: #007BFF;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>취미별 사이트</h1>
<input type="text" id="search" placeholder="취미 검색...">
</header>
<main>
<!-- 사진 -->
<section class="hobby" id="사진">
<h2>사진</h2>
<div class="site-list">
<div class="site"><a href="https://www.pexels.com" target="_blank">Pexels - 무료 사진</a></div>
<div class="site"><a href="https://500px.com"target="_blank">500px - 사진 포트폴리오</a></div>
<div class="site"><a href="https://www.flickr.com"target="_blank">Flickr - 사진 공유</a></div>
<div class="site"><a href="https://www.photopea.com"target="_blank">Photopea - 온라인 포토샵</a></div>
<div class="site"><a href="https://isorepublic.com"target="_blank">ISO Republic - 무료 이미지</a></div>
</div>
</section>
<!-- 요리 -->
<section class="hobby" id="요리">
<h2>요리</h2>
<div class="site-list">
<div class="site"><a href="https://www.allrecipes.com"target="_blank">AllRecipes - 레시피</a></div>
<div class="site"><a href="https://www.seriouseats.com"target="_blank">Serious Eats - 요리 블로그</a></div>
<div class="site"><a href="https://www.thekitchn.com"target="_blank">The Kitchn - 요리 사이트</a></div>
<div class="site"><a href="https://www.americastestkitchen.com"target="_blank">America's Test Kitchen - 요리 테스트</a></div>
<div class="site"><a href="https://www.foodnetwork.com"target="_blank">Food Network - 요리 네트워크</a></div>
</div>
</section>
<!-- 여행 -->
<section class="hobby" id="여행">
<h2>여행</h2>
<div class="site-list">
<div class="site"><a href="https://roadtrippers.com"target="_blank">Roadtrippers - 도로 여행</a></div>
<div class="site"><a href="https://www.atlasobscura.com"target="_blank">Atlas Obscura - 이상한 장소</a></div>
<div class="site"><a href="https://www.theoutbound.com"target="_blank">The Outbound Collective - 야외 활동</a></div>
<div class="site"><a href="https://www.tripadvisor.com"target="_blank">TripAdvisor - 여행 리뷰</a></div>
<div class="site"><a href="https://www.lonelyplanet.com"target="_blank">Lonely Planet - 여행 가이드</a></div>
</div>
</section>
<!-- 독서 -->
<section class="hobby" id="독서">
<h2>독서</h2>
<div class="site-list">
<div class="site"><a href="https://www.goodreads.com"target="_blank">Goodreads - 독서 커뮤니티</a></div>
<div class="site"><a href="https://www.librarything.com"target="_blank">LibraryThing - 책 관리</a></div>
<div class="site"><a href="https://bookriot.com"target="_blank">Book Riot - 독서 블로그</a></div>
<div class="site"><a href="https://www.abebooks.com"target="_blank">AbeBooks - 중고 서적</a></div>
<div class="site"><a href="https://www.shelfari.com"target="_blank">Shelfari - 독서 네트워크</a></div>
</div>
</section>
<!-- 영화 감상 -->
<section class="hobby" id="영화">
<h2>영화 감상</h2>
<div class="site-list">
<div class="site"><a href="https://letterboxd.com"target="_blank">Letterboxd - 영화 기록</a></div>
<div class="site"><a href="https://mubi.com"target="_blank">MUBI - 영화 스트리밍</a></div>
<div class="site"><a href="https://www.filmstruck.com"target="_blank">FilmStruck - 영화 스트리밍</a></div>
<div class="site"><a href="https://www.rottentomatoes.com"target="_blank">Rotten Tomatoes - 영화 리뷰</a></div>
<div class="site"><a href="https://www.imdb.com"target="_blank">IMDb - 영화 데이터베이스</a></div>
</div>
</section>
<!-- 음악 감상 -->
<section class="hobby" id="음악">
<h2>음악 감상</h2>
<div class="site-list">
<div class="site"><a href="https://bandcamp.com"target="_blank">Bandcamp - 음악 판매</a></div>
<div class="site"><a href="https://discogs.com"target="_blank">Discogs - 음악 데이터베이스</a></div>
<div class="site"><a href="https://8tracks.com"target="_blank">8tracks - 믹스 테이프</a></div>
<div class="site"><a href="https://soundcloud.com"target="_blank">SoundCloud - 음악 공유</a></div>
<div class="site"><a href="https://www.deezer.com"target="_blank">Deezer - 음악 스트리밍</a></div>
</div>
</section>
<!-- 악기 연주 -->
<section class="hobby" id="악기">
<h2>악기 연주</h2>
<div class="site-list">
<div class="site"><a href="https://www.ultimate-guitar.com"target="_blank">Ultimate Guitar - 기타 악보</a></div>
<div class="site"><a href="https://www.pianostreet.com"target="_blank">Piano Street - 피아노 악보</a></div>
<div class="site"><a href="https://www.drumforum.org"target="_blank">Drum Forum - 드럼 포럼</a></div>
<div class="site"><a href="https://www.guitarworld.com"target="_blank">Guitar World - 기타 정보</a></div>
<div class="site"><a href="https://www.musicalchairs.info"target="_blank">Musical Chairs - 음악 정보</a></div>
</div>
</section>
<!-- 운동 -->
<section class="hobby" id="운동">
<h2>운동</h2>
<div class="site-list">
<div class="site"><a href="https://www.bodybuilding.com"target="_blank">Bodybuilding.com - 근육 운동</a></div>
<div class="site"><a href="https://www.myfitnesspal.com"target="_blank">MyFitnessPal - 운동 기록</a></div>
<div class="site"><a href="https://community.fitbit.com"target="_blank">Fitbit Community - 운동 커뮤니티</a></div>
<div class="site"><a href="https://www.acefitness.org"target="_blank">ACE Fitness - 운동 정보</a></div>
<div class="site"><a href="https://www.runnersworld.com"target="_blank">Runner's World - 달리기</a></div>
</div>
</section>
<!-- 정원 가꾸기 -->
<section class="hobby" id="정원">
<h2>정원 가꾸기</h2>
<div class="site-list">
<div class="site"><a href="https://forums.gardenweb.com"target="_blank">Garden Web - 정원 포럼</a></div>
<div class="site"><a href="https://davesgarden.com"target="_blank">Dave’s Garden - 정원 정보</a></div>
<div class="site"><a href="https://www.thespruce.com/gardening-4127765"target="_blank">The Spruce - 정원 가이드</a></div>
<div class="site"><a href="https://www.gardenia.net"target="_blank">Gardenia - 식물 정보</a></div>
<div class="site"><a href="https://www.plantsthatwork.com"target="_blank">Plants That Work - 식물 정보</a></div>
</div>
</section>
<!-- 패션 -->
<section class="hobby" id="패션">
<h2>패션</h2>
<div class="site-list">
<div class="site"><a href="https://lookbook.nu"target="_blank">Lookbook - 패션 공유</a></div>
<div class="site"><a href="https://www.thesartorialist.com"target="_blank">The Sartorialist - 패션 블로그</a></div>
<div class="site"><a href="https://www.manrepeller.com"target="_blank">Man Repeller - 패션 블로그</a></div>
<div class="site"><a href="https://www.vogue.com"target="_blank">Vogue - 패션 잡지</a></div>
<div class="site"><a href="https://www.harpersbazaar.com"target="_blank">Harper's Bazaar - 패션 잡지</a></div>
</div>
</section>
<!-- 사진 촬영 -->
<section class="hobby" id="사진촬영">
<h2>사진 촬영</h2>
<div class="site-list">
<div class="site"><a href="https://www.dpreview.com"target="_blank">DPReview - 카메라 리뷰</a></div>
<div class="site"><a href="https://petapixel.com"target="_blank">PetaPixel - 사진 뉴스</a></div>
<div class="site"><a href="https://www.photographyblog.com"target="_blank">Photography Blog - 사진 블로그</a></div>
<div class="site"><a href="https://www.fstoppers.com"target="_blank">Fstoppers - 사진 포럼</a></div>
<div class="site"><a href="https://www.chenab.com"target="_blank">Chenab - 사진 공유</a></div>
</div>
</section>
<!-- 캠핑 -->
<section class="hobby" id="캠핑">
<h2>캠핑</h2>
<div class="site-list">
<div class="site"><a href="https://www.campendium.com"target="_blank">Campendium - 캠핑 사이트</a></div>
<div class="site"><a href="https://www.recreation.gov"target="_blank">Recreation.gov - 캠핑 예약</a></div>
<div class="site"><a href="https://www.theoutbound.com"target="_blank">The Outbound - 야외 활동</a></div>
<div class="site"><a href="https://www.campingroadtrip.com"target="_blank">Camping Road Trip - 캠핑 정보</a></div>
<div class="site"><a href="https://www.bringfido.com"target="_blank">Bring Fido - 애완동물 캠핑</a></div>
</div>
</section>
<!-- 수집 -->
<section class="hobby" id="수집">
<h2>수집</h2>
<div class="site-list">
<div class="site"><a href="https://www.collectorsweekly.com"target="_blank">Collectors Weekly - 수집 정보</a></div>
<div class="site"><a href="https://www.ebay.com/b/Collectibles/2605/bn_56752037"target="_blank">eBay Collectibles - 수집품 거래</a></div>
<div class="site"><a href="https://www.the-digital-pinball.com"target="_blank">The Digital Pinball - 핀볼 수집</a></div>
<div class="site"><a href="https://www.vintagefashionguild.org"target="_blank">Vintage Fashion Guild - 빈티지 패션</a></div>
<div class="site"><a href="https://www.antiquesatlas.com"target="_blank">Antiques Atlas - 앤틱 정보</a></div>
</div>
</section>
<!-- 보드게임 -->
<section class="hobby" id="보드게임">
<h2>보드게임</h2>
<div class="site-list">
<div class="site"><a href="https://www.boardgamegeek.com"target="_blank">BoardGameGeek - 보드게임 정보</a></div>
<div class="site"><a href="https://www.tabletopgaming.co.uk"target="_blank">Tabletop Gaming - 보드게임 뉴스</a></div>
<div class="site"><a href="https://www.bggstore.com"target="_blank">BGG Store - 보드게임 상점</a></div>
<div class="site"><a href="https://www.coolstuffinc.com"target="_blank">CoolStuffInc - 보드게임 구매</a></div>
<div class="site"><a href="https://www.merchantsong.com"target="_blank">Merchant's Song - 보드게임 정보</a></div>
</div>
</section>
<!-- 컴퓨터 프로그래밍 -->
<section class="hobby" id="프로그래밍">
<h2>컴퓨터 프로그래밍</h2>
<div class="site-list">
<div class="site"><a href="https://www.github.com"target="_blank">GitHub - 코드 저장소</a></div>
<div class="site"><a href="https://www.stackoverflow.com"target="_blank">Stack Overflow - 프로그래밍 질문</a></div>
<div class="site"><a href="https://www.codecademy.com"target="_blank">Codecademy - 프로그래밍 학습</a></div>
<div class="site"><a href="https://www.freecodecamp.org"target="_blank">FreeCodeCamp - 무료 코딩 교육</a></div>
<div class="site"><a href="https://www.w3schools.com"target="_blank">W3Schools - 웹 개발 튜토리얼</a></div>
</div>
</section>
<!-- DIY -->
<section class="hobby" id="DIY">
<h2>DIY</h2>
<div class="site-list">
<div class="site"><a href="https://www.instructables.com"target="_blank">Instructables - DIY 가이드</a></div>
<div class="site"><a href="https://www.etsy.com"target="_blank">Etsy - 수공예 및 DIY 제품</a></div>
<div class="site"><a href="https://www.hometalk.com"target="_blank">Hometalk - 홈 DIY 아이디어</a></div>
<div class="site"><a href="https://www.pinterest.com"target="_blank">Pinterest - DIY 영감</a></div>
<div class="site"><a href="https://www.woodmagazine.com"target="_blank">Wood Magazine - 목공 DIY</a></div>
</div>
</section>
<!-- 수영 -->
<section class="hobby" id="수영">
<h2>수영</h2>
<div class="site-list">
<div class="site"><a href="https://www.swimmingworldmagazine.com"target="_blank">Swimming World Magazine - 수영 뉴스</a></div>
<div class="site"><a href="https://www.swimoutlet.com"target="_blank">SwimOutlet - 수영 용품</a></div>
<div class="site"><a href="https://www.usaswimming.org"target="_blank">USA Swimming - 수영 정보</a></div>
<div class="site"><a href="https://www.poolcenter.com"target="_blank">Pool Center - 수영장 관리</a></div>
<div class="site"><a href="https://www. swimswam.com"target="_blank">SwimSwam - 수영 뉴스</a></div>
</div>
</section>
<!-- 도예 -->
<section class="hobby" id="도예">
<h2>도예</h2>
<div class="site-list">
<div class="site"><a href="https://www.ceramicartsnetwork.org"target="_blank">Ceramic Arts Network - 도예 자료</a></div>
<div class="site"><a href="https://www.potterybarn.com"target="_blank">Pottery Barn - 도예 제품</a></div>
<div class="site"><a href="https://www.potterymaking.org"target="_blank">Pottery Making - 도예 정보</a></div>
<div class="site"><a href="https://www. ceramicreview.com"target="_blank">Ceramic Review - 도예 잡지</a></div>
<div class="site"><a href="https://www. clayandpaint.com"target="_blank">Clay and Paint - 도예 블로그</a></div>
</div>
</section>
<!-- 모델링 -->
<section class="hobby" id="모델링">
<h2>모델링</h2>
<div class="site-list">
<div class="site"><a href="https://www.scalemodels.com"target="_blank">Scale Models - 모델 정보</a></div>
<div class="site"><a href="https://www.modelbuilding.org"target="_blank">Model Building - 모델 빌딩</a></div>
<div class="site"><a href="https://www.zerotoys.com"target="_blank">Zero Toys - 모델 키트</a></div>
<div class="site"><a href="https://www.kitlink.com"target="_blank">Kitlink - 모델 키트</a></div>
<div class="site"><a href="https://www.hobbylinc.com"target="_blank">Hobbylinc - 모델 용품</a></div>
</div>
</section>
<!-- 글쓰기 -->
<section class="hobby" id="글쓰기">
<h2>글쓰기</h2>
<div class="site-list">
<div class="site"><a href="https://www.writing.com"target="_blank">Writing.com - 글쓰기 커뮤니티</a></div>
<div class="site"><a href="https://www.writersdigest.com"target="_blank">Writer's Digest - 글쓰기 자원</a></div>
<div class="site"><a href="https://www.scribophile.com"target="_blank">Scribophile - 글쓰기 피드백</a></div>
<div class="site"><a href="https://www.nanowrimo.org"target="_blank">NaNoWriMo - 소설 쓰기 도전</a></div>
<div class="site"><a href="https://www.thewritepractice.com"target="_blank">The Write Practice - 글쓰기 연습</a></div>
</div>
</section>
<!-- 화초 기르기 -->
<section class="hobby" id="화초">
<h2>화초 기르기</h2>
<div class="site-list">
<div class="site"><a href="https://www.plantcaretoday.com"target="_blank">Plant Care Today - 식물 관리</a></div>
<div class="site"><a href="https://www.houseplantshop.com"target="_blank">Houseplant Shop - 화초 구입</a></div>
<div class="site"><a href="https://www.thejoyofplants.co.uk"target="_blank">The Joy of Plants - 화초 가이드</a></div>
<div class="site"><a href="https://www.myfolia.com"target="_blank">MyFolia - 화초 기록</a></div>
<div class="site"><a href="https://www.plantvillage.org"target="_blank">Plant Village - 식물 커뮤니티</a></div>
</div>
</section>
<!-- 바둑 -->
<section class="hobby" id="바둑">
<h2>바둑</h2>
<div class="site-list">
<div class="site"><a href="https://www.lifein19x19.com"target="_blank">Life in 19x19 - 바둑 블로그</a></div>
<div class="site"><a href="https://www.pandanet-igs.com"target="_blank">Pandanet - 바둑 온라인</a></div>
<div class="site"><a href="https://www.go4go.net"target="_blank">Go4Go - 바둑 정보</a></div>
<div class="site"><a href="https://www.goquest.com"target="_blank">GoQuest - 바둑 게임</a></div>
<div class="site"><a href="https://www.goratings.org"target="_blank">Go Ratings - 바둑 랭킹</a></div>
</div>
</section>
<!-- 가드닝 -->
<section class="hobby" id="가드닝">
<h2>가드닝</h2>
<div class="site-list">
<div class="site"><a href="https://www.gardeners.com"target="_blank">Gardeners - 가드닝 제품</a></div>
<div class="site"><a href="https://www.gardeningknowhow.com"target="_blank">Gardening Know How - 가드닝 정보</a></div>
<div class="site"><a href="https://www.gardenweb.com"target="_blank">GardenWeb - 가드닝 포럼</a></div>
<div class="site"><a href="https://www.englishgardens.com"target="_blank">English Gardens - 가드닝 용품</a></div>
<div class="site"><a href="https://www.gardenia.net"target="_blank">Gardenia - 식물 정보</a></div>
</div>
</section>
<!-- 조깅 -->
<section class="hobby" id="조깅">
<h2>조깅</h2>
<div class="site-list">
<div class="site"><a href="https://www.runnersworld.com"target="_blank">Runner's World - 조깅 정보</a></div>
<div class="site"><a href="https://www.strava.com"target="_blank">Strava - 조깅 기록</a></div>
<div class="site"><a href="https://www.mapmyrun.com"target="_blank">MapMyRun - 조깅 경로</a></div>
<div class="site"><a href="https://www.runkeeper.com"target="_blank">RunKeeper - 조깅 앱</a></div>
<div class="site"><a href="https://www.coach.me"target="_blank">Coach.me - 조깅 목표 설정</a></div>
</div>
</section>
<!-- 낚시 -->
<section class="hobby" id="낚시">
<h2>낚시</h2>
<div class="site-list">
<div class="site"><a href="https://www.fieldandstream.com"target="_blank">Field & Stream - 낚시 정보</a></div>
<div class="site"><a href="https://www.fishinglife.com"target="_blank">Fishing Life - 낚시 커뮤니티</a></div>
<div class="site"><a href="https://www.tackletour.com"target="_blank">TackleTour - 낚시 장비</a></div>
<div class="site"><a href="https://www.fishbrain.com"target="_blank">Fishbrain - 낚시 앱</a></div>
<div class="site"><a href="https://www.thefisherman.com"target="_blank">The Fisherman - 낚시 뉴스</a></div>
</div>
</section>
<!-- 스케이트보드 -->
<section class="hobby" id="스케이트보드">
<h2>스케이트보드</h2>
<div class="site-list">
<div class="site"><a href="https://www.skateboard.com"target="_blank">Skateboard - 스케이트보드 정보</a></div>
<div class="site"><a href="https://www.skateboarder.com"target="_blank">Skateboarder - 스케이트보드 뉴스</a></div>
<div class="site"><a href="https://www.thrashermagazine.com"target="_blank">Thrasher Magazine - 스케이트보드 잡지</a></div>
<div class="site"><a href="https://www.theberrics.com"target="_blank">The Berrics - 스케이트보드 비디오</a></div>
<div class="site"><a href="https://www.skatepark.com"target="_blank">Skatepark - 스케이트보드 장소</a></div>
</div>
</section>
<!-- 요가 -->
<section class="hobby" id="요가">
<h2>요가</h2>
<div class="site-list">
<div class="site"><a href="https://www.yogajournal.com"target="_blank">Yoga Journal - 요가 정보</a></div>
<div class="site"><a href="https://www.doyogawithme.com"target="_blank">DoYogaWithMe - 요가 동영상</a></div>
<div class="site"><a href="https://www.yogawithadriene.com"target="_blank">Yoga With Adriene - 요가 비디오</a></div>
<div class="site"><a href="https://www.ekhartyoga.com"target="_blank">Ekhart Yoga - 요가 클래스</a></div>
<div class="site"><a href="https://www.gaia.com/yoga"target="_blank">Gaia - 요가 및 명상</a></div>
</div>
</section>
<!-- 테니스 -->
<section class="hobby" id="테니스">
<h2>테니스</h2>
<div class="site-list">
<div class="site"><a href="https://www.tennis.com"target="_blank">Tennis.com - 테니스 정보</a></div>
<div class="site"><a href="https://www.atptour.com"target="_blank">ATP Tour - 테니스 투어</a></div>
<div class="site"><a href="https://www.wtatennis.com"target="_blank">WTA Tennis - 여자 테니스</a></div>
<div class="site"><a href="https://www.usta.com"target="_blank">USTA - 테니스 커뮤니티</a></div>
<div class="site"><a href="https://www.tennisexpress.com"target="_blank">Tennis Express - 테니스 용품</a></div>
</div>
</section>
<!-- 헬스케어 -->
<section class="hobby" id="헬스케어">
<h2>헬스케어</h2>
<div class="site-list">
<div class="site"><a href="https://www.healthline.com"target="_blank">Healthline - 건강 정보</a></div>
<div class="site"><a href="https://www.webmd.com"target="_blank">WebMD - 의료 정보</a></div>
<div class="site"><a href="https://www.mayoclinic.org"target="_blank">Mayo Clinic - 헬스케어</a></div>
<div class="site"><a href="https://www.nhs.uk"target="_blank">NHS - 건강 관리</a></div>
<div class="site"><a href="https://www.medicalnewstoday.com"target="_blank">Medical News Today - 건강 뉴스</a></div>
</div>
</section>
<!-- 하이킹 -->
<section class="hobby" id="하이킹">
<h2>하이킹</h2>
<div class="site-list">
<div class="site"><a href="https://www.alltrails.com"target="_blank">AllTrails - 하이킹 경로</a></div>
<div class="site"><a href="https://www.hikingproject.com"target="_blank">Hiking Project - 하이킹 정보</a></div>
<div class="site"><a href="https://www.rei.com"target="_blank">REI - 하이킹 장비</a></div>
<div class="site"><a href="https://www.americanhiking.org"target="_blank">American Hiking Society - 하이킹 커뮤니티</a></div>
<div class="site"><a href="https://www.traillink.com"target="_blank">TrailLink - 하이킹 경로</a></div>
</div>
</section>
<!-- 오페라 -->
<section class="hobby" id="오페라">
<h2>오페라</h2>
<div class="site-list">
<div class="site"><a href="https://www.operanews.com"target="_blank">Opera News - 오페라 뉴스</a></div>
<div class="site"><a href="https://www.operamagazine.co.uk"target="_blank">Opera Magazine - 오페라 잡지</a></div>
<div class="site"><a href="https://www.metopera.org"target="_blank">Metropolitan Opera - 오페라 공연</a></div>
<div class="site"><a href="https://www.naxos.com"target="_blank">Naxos - 오페라 녹음</a></div>
<div class="site"><a href="https://www.eno.org"target="_blank">English National Opera - 오페라 정보</a></div>
</div>
</section>
<!-- 칵테일 -->
<section class="hobby" id="칵테일">
<h2>칵테일</h2>
<div class="site-list">
<div class="site"><a href="https://www.diffordsguide.com"target="_blank">Difford's Guide - 칵테일 레시피</a></div>
<div class="site"><a href="https://www.thecocktaildb.com"target="_blank">TheCocktailDB - 칵테일 레시피</a></div>
<div class="site"><a href="https://www.imbibe.com"target="_blank">Imbibe Magazine - 칵테일 뉴스</a></div>
<div class="site"><a href="https://www.liquor.com"target="_blank">Liquor.com - 칵테일 레시피</a></div>
<div class="site"><a href="https://www.cocktailcouple.com"target="_blank">Cocktail Couple - 칵테일 블로그</a></div>
</div>
</section>
</main>
<footer>
<p>© 2024 취미 웹사이트. 모든 권리 보유.</p>
</footer>
</body>
</html>
'코딩을해보자' 카테고리의 다른 글
| 저장용 ㅋ (0) | 2024.10.28 |
|---|---|
| 링크 사이트 만들어보자 (연습중) (0) | 2024.08.08 |