Programming Learning Diary

HTML 예제

페이지 정보

작성일 21-01-14 08:34

본문

HTML 예제

다음 이미지는 GitHub 메인 페이지의 일부입니다.(이 예제에 사용된 이미지는 예전 메인 페이지의 모습입니다)
이 페이지의 일부를 HTML로 코딩해 봅시다.

완성된 페이지(https://heropcode.github.io/GitHub-Responsive/)를 공유합니다. GitHub 메인의 클론 페이지입니다.

HTML Github 예제

입문 단계에서 난이도가 올라가지 않도록(코드가 너무 길어지지 않도록) 위 화면에서 다음에 표시된 부분(Header)의 내용 일부만 구조를 정리해 봅시다.

HTML Github 예제 header

바탕화면 같은 익숙한 곳에서 example1이라는 이름의 프로젝트 디렉터리(폴더)를 생성합니다.(이름은 원하는 대로 자유롭게 지정하세요)
이제 VS Code를 실행해 파일/열기를 선택해 생성한 디렉터리를 찾아 오픈합니다.
그 안에 index.html이라는 파일을 생성합니다.(파일/새파일 > 저장 > 이름과 확장자 설정)
다음 코드와 위 구조를 비교하며 코딩해 보세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GitHub</title>
</head>
<body>
<div class="header">
<div class="container">
<div class="container-left">
<div class="logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
</div>
<div class="menu">
<div class="menu-item">Personal</div>
<div class="menu-item">Open Source</div>
<div class="menu-item">Business</div>
<div class="menu-item">Explore</div>
</div>
</div>
</div>
</div>
</body>
</html>


현재는 이 구조를 브라우저에 출력하면 다음과 같이 한장의 이미지와 메뉴에 있는 4개의 TEXT만 나옵니다.(HTML 화면에서 우클릭 > ‘Open with Live Server’ 선택)

‘Open with Live Server’ 메뉴가 없다면 VS Code 확장 기능으로 Live Server를 설치해야 합니다.

HTML 예제 결과

미완성 같지만 HTML은 역할이 끝났습니다.
이제 예쁘게 꾸미기(스타일) 위해 CSS가 필요합니다.


댓글목록

등록된 댓글이 없습니다.