HTML, tag
Hyper Text Markup Language
자료의 구조를 표현하기 위한 언어
웹페이지를 만들고 디자인할 때 사용
모든 웹페이지는 html 언어로 작성
- html 기본템플릿 (첫 파일명은 index.html부터 시작)
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="./layout2.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body></body>
</html><head>에는 사이트 생성에 필요한 인코딩형식, 사이트제목, CSS나 JS파일 등이 들어갈 수 있음
<body>에는 실제 웹사이트에서 보여줄 글, 그림 등이 들어간다.
html 태그
<tag>
html은 태그로 작성
<p>안녕</p>이런 식의 태그들을 열고 닫은 후 내부에 글을 넣고 그림을 넣을 수 있다.
- 기본 태그 목록
<p>글 본문</p>
<h1>글 제목</h1>
<img src="이미지 경로">
<a href="주소">내용</a>
<button>버튼</button>
<ul><li>리스트</li></ul>
<ol><li>리스트</li></ol>태그를 열었으면 </태그명>으로 닫기
but 닫지 않아도 되는 태그들도 존재한다. ex) <img>
특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가정보를 기입한다.
href는 클릭시 이동할 링크를 src는 파일 경로를 기입
<h1>~<h6>태그
-
heading의 약자
1~6까지 설정 할 수 있음 -
Block 속성
이런식으로 1>>>6순서대로 굵기와 크기가 줄어든다.
하이
하이
하이
하이
하이
하이
-
글제목은
<h1></h1>본문은<p></p>에 작성
<ul><li>리스트</li></ul>태그
<ol><li>리스트</li></ol>태그
<ul></ul>unordered list ( 번호 없이 만들어짐)
<li></li>list item
<ol></ol>ordered list (1, 2, 3~으로 만들어짐)
<a>태그
<a href="속성(이동하는페이지)">내용</a>
ex) <p>안녕하세요 <a href="https://naver.com">이동하기</a></p>이렇게 작성하면
안녕하세요 이동하기 > 이렇게 출력
<nav></nav>태그
- navigation
기능은<div>와 같음 하지만 navigation bar 만들때<div>보다 읽기 쉬울 수 있음
비슷한 태그들 <section> <footer>
<nav>
<ul class="navbar">
<li>영화</li>
<li>맛집</li>
<li>IT</li>
<li>컴퓨터</li>
</ul>
</nav>
좋은 글 감사합니다.