728x90
html 첫 기초를 배웠다. 아마 티스토리에 올리는 글들은 내가 공부하는 모든내용이 올라가기보단 코드내역 위주로 적어서 나중에 복습할때 편하게 할 것 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네이버</title>
</head>
<body>
<div>
<div>
<h1>안녕하세요!</h1>
</div>
</div>
</body>
</html>가장 기본적인 기능으로 head, body로 크게 두 분류로 나뉘어져 있다는 것을 알았다.
어느정도 기초 문법을 다룬 후에 만든 예제는 깃허브의 특정 이미지
를 만들기위한 html 기초예제를 구현해보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub</title>
</head>
<body>
<div class="header">
<div class = "container">
<div class = "container-left">
<div class = "long">
<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>이렇게 head부분에서 타이틀 정도만 바꾸고, body에서 크게 container를 만들고 그안에 좌측,우측 으로 나누어서 저장했다. 이를 실행하면
이처럼 나온다. 꾸민대로 나오지는 않는게 당연하다. 꾸미는건 CSS의 영역이기때문에 튼튼하게 기초만 잡았다고 생각하면 될 것같다.
728x90
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| 06_멀티미디어(img,audio,video) (0) | 2021.10.31 |
|---|---|
| 05_HTML 인라인 요소 (0) | 2021.10.31 |
| 04_content 구분 & 문자콘텐츠 (0) | 2021.10.30 |
| 03_HTML 블록과 인라인, 메타데이터 (0) | 2021.10.28 |
| 02_css 첫걸음 (0) | 2021.10.28 |