빈 태그(셀프 클로징 태그)
예를 들어서 img태그가 있다.
종류에는 뒤에 /가 없는 빈 태그 뒤에 /가 있는 빈 태그가 있다.
html5에서는 두개다 쓸 수 있다.
혼용하지만 않으면 되고 환경에 따라 한가지 방식만 써야할 수 있다.
DOCTYPE(DTD)
html에도 버전이 있다. 기본적으로 6가지가 있다.
1, 2, 3, 4, XHTML, 5
html5버전으로 작성하고자 한다면 이렇게 하면 되는데
10년전까지만해도 xhtml을 사용해서 유지보수를 해야 한다면
html파일 제일 상단에 해당 버전에 맞는 doctype을 설정해야 한다.
meta태그
meta태그는 웹 페이지의 기타 모든 정보를 표현할 수 있다.
문자 인코딩 방식, 검색엔진에게 제공하기 위한 정보의 종류(메타 데이터 / author(제작자), description, keywords, viewport 등)
<meta charset="UTF-8"> // 문자를 인코딩하는 방식. 예전에는 euc-kr이 사용됬으나 요즘에는 더 효율적인 utf-8을 쓴다. 아시아권에서 많이 사용한다.
<meta name="author" content="박태준">
<meta name="description" content="우리 사이트가 최고!">link태그
rel : (필수)관계를 지정
href : 위치를 지정
<link rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.png">script태그
<script src="./js/main.js"></script>웹 표준 검사하기
W3C validator에서 html을 업로드하고 테스트를 할 수 있다.
Github 상단 헤더 따라 만들기 예제
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Github</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="container-left clearfix">
<div class="logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="github logo">
</div>
<div class="menu clearfix">
<div class="menu-items">Personal</div>
<div class="menu-items">Open Source</div>
<div class="menu-items">Business</div>
<div class="menu-items">Explore</div>
</div>
</div>
</div>
</div>
</body>
</html>main.css
body {
margin: 0;
padding: 0;
}
.header {
/* 기본적으로 width, height는 auto로 되어있고 font-size는 16px로 되어 있다. */
/* background: yellowgreen; */
border-bottom: 1px solid lightgray;
}
.container {
width: 980px;
margin : auto;
/* background: tomato; */
}
.container-left {
/* 헤더에 패딩을 넣는것보다(즉, 최상위에 넣는 것보다) 사용하려고 하는 곳과 가까운 곳에 넣는 것이 좋다. .header보다 .container보다 여기*/
padding: 20px 0;
}
.logo {
float: left;
margin-right: 5px;
}
.logo img {
/* 아래 약간 비어있는 공간을 없앤다 */
display: block;
}
.menu {
float: left;
}
.menu-items {
float: left;
/* 수직 가운데 정렬은 어렵기 때문에 패딩으로 띄운다 */
/* 원래 요소간 거리를 띄울 때는 마진으로 하나 여기서는 패딩으로 했을 때 동일한 효과를 낼 수 있어서 패딩을 썼다. */
padding: 8px 10px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}'Developer Camp[Fastcampus NKLCB] 2021.07 > 2021.07~ FastCampus 네카라쿠배2기' 카테고리의 다른 글
| 2일차 : FORM, INPUT (0) | 2021.07.13 |
|---|---|
| 2일차 : 테이블 (0) | 2021.07.13 |
| 1일차. HTML, CSS(3) (0) | 2021.07.12 |
| 1일차. HTML, CSS(2) (0) | 2021.07.12 |
| 1일차. HTML, CSS 기본적으로 알고있어야 하는 지식 (0) | 2021.07.12 |
댓글