우리가 HTML, CSS를 학습하고 만들 페이지이다. 살펴보자!!
https://heropcode.github.io/GitHub-Responsive/
GitHub: Where the world builds software
GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...
github.com
이 부분은 header에 해당하며 빨간색 네모로 contents 부분이 존재한다.
contents는 header의 중앙에 위치한다.
왼쪽 영역과 오른쪽 영역으로 구분되어 있다.
오른쪽에는 현재 배우지 않았으니 왼쪽 부분만 만들어 보자
왼쪽 영역에는 logo와 4개의 메뉴가 존재한다.
이제 구현해보자
Html language를 english에서 korea로 변경하자.
meta charset말고는 meta tag가 필요가 없으며 나중에 배울 것이기에 지우자.
body에는 section을 나누어 유지보수 및 관리에 용이하게 header section을 지정한다.
의미가 없이 분할이 가능한 div tag를 이용했다.
왼쪽 contents와 오른쪽 contents를 나누기 위해 container로 영역을 나누었다.
이미지는 img tag를 이용하며 src에는 이미지의 경로, alt에는 대체 텍스트를 지정한다.
이미지 경로: "https://heropcode.github.io/GitHub-Responsive/img/logo.svg"
각 메뉴들은 menu의 항목이니 menu-item으로 class를 지정하자.
<!DOCTYPE html>
<html lang="ko">
<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 class="container-right">
</div>
</div>
</div>
</body>
</html>
Live Server을 이용해서 웹 페이지에 출력을 해보자.
우리는 구조와 텍스트만 지정했지만 우리가 완성한 모양이 아니다.
하지만 HTML에서 할일은 끝났다.
우리가 원하는 Layout을 만들려면 CSS를 동원해야 한다.
나머지는 CSS를 배운 다음에 구현해보도록 하자.
웹 표준 검사하기
W3C validator —> https://validator.w3.org/#validate_by_upload
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
설명 —> https://yeongwoo-cho.tistory.com/195
10. 웹 표준 검사하기
웹 표준 검사하기 우리가 작성한 HTML 문서가 표준에 부합 하는지 테스트를 해볼 수 있다. Img tag에 src, alt와 같은 필수 속성을 명시하지 않았을때 에러를 검사하는 것이다. W3C validator 에 접속해서
yeongwoo-cho.tistory.com
웹 표준을 지켰음을 확인할 수 있다.
'Web Frontend > HTML & CSS Basic' 카테고리의 다른 글
| 7. CSS Properties (크기, 여백 색상) (0) | 2021.06.20 |
|---|---|
| 6. CSS 기본 문법과 Selector의 역할 (0) | 2021.06.19 |
| 4. HTML 문서의 구조 (body) -- 매우 간단 (0) | 2021.06.17 |
| 3. HTML 문서의 정보 (head tag) (0) | 2021.06.16 |
| 2. HTML 문서의 범위 (0) | 2021.06.15 |