0. HTML 태그
- HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용된다.
1. HTML의 태그 구조
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>
2. <!DOCTYPE>
- 가장 첫 줄에 위치해야하는 선언문
- 무슨 버전의 HTML을 사용했는지 브라우저에 알려주는 역할
3. html태그
- <!DOCTYPE>를 제외하고 모든 HTML element(요소)들은
<html></html>로 감싸져 있다.
4-1.head 태그
- html태그 다음에는 항상 head태그가 위치한다.
- 내용 : 사이트 제목/ 설명/ 부가정보 ....
- 형태 :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
4-2. head 태그 내용
1) <meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 문자 인코딩
2) <meta name="viewport" content="width=device-width"> : 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미.( 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다)
4-3. title 태그
- 브라우저 탭에 보이는 페이지 이름입니다.
5. body 태그
- body태그는 항상 head태그 다음에 위치합니다.
- body태그 안에서 화면에 보여져야할 태그들이 존재!!!
6. h1, h2, h3, h4, h5 태그
- 글자 크기...
- 숫자가 올라갈수록 글씨 크기가 점점 작아진다.
7. span 태그
- 주로 텍스트를 넣어주는 태그
- line break가 되지 않고, 한 줄에 이어서 나오게 됨.
inline-element : 한 줄에 이어서 나오는 요소
8. p태그
- paragraph의 줄임말
- 주로 문단을 통으로 넣을 때가 많다.
- span태그와 달리 줄바꿈이 발생한다.
9. a태그
- a태그를 클릭시 화면이 이동한다.
- href 속성 : 이동해야 하는 주소를 적는다.
- 예) <a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">이동하기</a>
10-1. div 태그
- 웹 사이트에서 섹션을 나눌 때 사용!!
- a, p, img 등의 태그는 그 자체로 어떤 기능을 하는지 알 수 있다.
- div는 자체로 의미가 있지는 않다.
10-1. div 태그 사용 이유
- 비슷한 부분끼리 긃으로 지어줄 수 있다.
- 레이아웃 분리
- class,id 같은 속성을 부여하여 css.. 등 다양한 기능을 유용하게 사용 가능하다.
개발자 매뉴얼