23.4.07
홈화면을 다 끝냈지만 아직 남은게 있습니다. 바로 바둑판인데요, 바둑판은 바둑사이트의 중요한 역할을 합니다. 여기 제가 쓴 코드인데요, 세계 최초로 Ai가 쓴 코드입니다 그와 동시에 세계 최초로 Ai가 코드를 쓴 사이트가 되겠지요.
그럼 여기 Ai가 쓴 코드입니다. 한번 보시죠!
<!DOCTYPE html>
<html>
<head>
<title>바둑공원</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script>
// 마우스를 갖다대면 메뉴를 보이게 함
document.addEventListener("DOMContentLoaded", function() {
var menuItems = document.querySelectorAll(".menu_wrap > ul > li");
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener("mouseover", function() {
this.querySelector("ul").style.display = "block";
});
menuItems[i].addEventListener("mouseout", function() {
this.querySelector("ul").style.display = "none";
});
}
});
</script>
</head>
<body>
<h1>바둑공원</h1>
<div class="menu_wrap">
<ul>
<li>
<a href="#">홈</a>
<ul>
<li><a href="https://AvariciousProperAdmins.coolhanhee.repl.co">about</a></li>
<li><a href="#">만들게 된 이유</a></li>
<li><a href="#">QNA</a></li>
</ul>
</li>
<li>
<a href="#">바둑</a>
<ul>
<li><a href="#">바둑판(개발중)</a></li>
<li><a herf="#">인공지능과의 대결!</a></li>
</ul>
</li>
<li>
<a href="#">대회</a>
</li>
<li>
<a href="#">커뮤니티</a>
</li>
<li>
<a href="#">회원가입</a>
</li>
<li>
<a href="#">로그인</a>
</li>
</ul>
</div>
<main>
<section>
<h2>새로운 대회 공지</h2>
<p>2023년 4월 15일부터 18일까지 전국대학생 바둑대회가 개최됩니다.</p>
<a href="#">더 보기</a>
</section>
<section>
<h2>최근 게시물</h2>
<ul>
<li><a href="#">한국서바이벌바둑대회 우승자 발표</a></li>
<li><a href="#">제3회 바둑그랑프리 대회 결과</a></li>
<li><a href="#">현대바둑신문에서 김창현 9단 인터뷰</a></li>
</ul>
</section>
<section>
<h2>인기 기사</h2>
<ul>
<li>
<a href="#" class="article-link">
<img src="article1.jpg" alt="인공지능 바둑 AI의 발전과 한계">
<h3>인공지능 바둑 AI의 발전과 한계</h3>
<p>최근 인공지능 바둑 AI가 대회에서 인간 선수를 이기는 기적적인 모습을 보였지만, 그 한계와 문제점도 여전히 존재합니다.</p>
</a>
</li>
<li>
<a href="#" class="article-link">
<img src="article2.jpg" alt="일본 바둑의 역사와 문화">
<h3>일본 바둑의 역사와 문화</h3>
<p>일본 바둑은 오랜 역사와 문화를 지니고 있으며, 한국과는 다른 독자적인 발전을 거쳐 왔습니다.</p>
</a>
</li>
<li>
<a href="#" class="article-link">
<img src="article3.jpg" alt="세계 바둑계의 대표적인 선수들">
<h3>세계 바둑계의 대표적인 선수들</h3>
<p>세계 각국에서 활동하는 바둑 선수들 중에서 대표적인 인물들을 소개합니다.</p>
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>바둑공원 © 2023</p>
</footer>
</body>
</html>
이 코드대로 실행하면
<li><a herf"#"></a></li>부분에게 코드가 실행되어 마우스를 올렸을때 관련 콘텐즈가 나옵니다.
https://Paduk-park.coolhanhee.repl.co<- 여기에 들어와보시면 예시를 보실 수 있어요
다시 본론으로 들어와서 바둑판을 만드는데 제가 마음에 들어하지 않는것이 있었는데요, 드디어 Ai가 해냈어요!!
위 사진을 보면 색감도 나쁘지 않으며, 선도 깔끔하게 있습니다. 사진이 잘렸지만
아무튼 명암을 넣어야 하는데..... 갈길이 멀다.......ㅠ
이제 선을 넣어야 해요! 선을 넣으려면 row 가 들어가야 하는데요, 이건 나중에 수정할게요!
