* HTML : Hyper Text Markup Language
웹 페이지 뼈대를 만드는 마크업 언어
Markup Language : 자료의 구조를 표현하기 위한 언어
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
* CSS : Cascading Style Sheets
마크업 언어가 실제 표시 방법을 기술하는 스타일 언어
* html 기본 템플릿 ( VSC에서 ! 타이핑 후 엔터 )
<!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>Document</title>
</head>
<body>
</body>
</html>* 기본 태그
<h1>글 제목</h1> <p>글 본문</p> <span>글자 태그</span> <img src="이미지 경로"> <a href="">링크</a> <button>버튼</button> <ul> <li>순서 없는 리스트</li> </ul> <ol> <li>순서 있는 리스트</li> </ol> <dl> /* 정의 리스트 */ <dt>정의 제목</dt> <dd>정의 설명</dd> </dl> ...이외 수많은 태그 존재
* 스타일 적용 방법 ( 3번 강추 )
이유 : html파일을 구조적으로 코딩 가능
1. 태그에 직접 넣기
<p style="font-size : 20px; color : red;">글자</p>2. html > head에 style태그 사용하기
<style> p { font-size : 20px; color : red; } </style>3. 외부 css파일(스타일) 사용하기
1) style.css 외부파일에서 작성
p { font-size : 20px; color : red; }2) html > head에 link:css 타이핑
<link rel="stylesheet" href="style.css">
* 태그 선택하여 스타일 넣는 방법
우선 순위 : 태그에 직접 넣기 > id > class > tag 순서
0. 태그에 직접 넣기
<p style="color : red;"></p>1. id 값 선택 ( # 샵 사용 )
#text { color : red; }2. class 값 선택 ( . 콤마 사용 )
.text { color : red; }3. 모든 p 선택
p { color : red; }
A fancy web like a rose