작업시간 : 4시간
HTML의 기본 구성을 이용해서 클론 코딩하는 과제였다
아직 내 지식으로는 거의 구성이 불가능했고 인터넷으로 찾아가며 겨우 기본조건이랑 요소만 맞춰서 만든 것 같다.
<html>
<body>
<header>
<title>Google</title>
<span style="text-align:left; float:font-size:11pt; color:#202124; margin-left:20px; margin-top:20px;">Google 정보</span>
<span style="text-align:left; font-size:11pt; color:#202124; margin-left:10px; margin-top:20px;">스토어</span>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
<div style="text-align:center; margin-top:200px;;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></div>
<div style="text-align:center;"><img src="image/chrome1.png"></div>
<article>
</article>
<article>
</article>
</section>
<footer></footer>
</body>
</html>
중간의 이미지랑 검색창은 만들기가 너무 어려워서 그림으로 대체했다
(과정에서 버튼의 클릭은 신경쓰지 않는다라고 적혀있어서)
나중에 자바스크립트 공부를 좀 더 해보고 HTML이랑 CSS쪽을 제대로 파보고 싶었다.
'프로젝트 > 미니프로젝트 (초단기 , 1인)' 카테고리의 다른 글
노마드코더 Next.JS 챌린지 - 로그인 화면 구현 (React-hook-form) (0) | 2022.08.14 |
---|---|
노마드코더 Next.JS 챌린지 - 백만장자 사이트 (0) | 2022.08.09 |
노마드코더 Next.JS 챌린지 - TailwindCSS 마크업 (0) | 2022.08.09 |
바닐라코딩 스타터킷 - Calendar (달력) (0) | 2022.03.23 |
바닐라코딩 스타터킷 - Baseball Game (야구 게임) (0) | 2022.03.10 |