테그와 요소
요소 - HTML 페이지를 구성하는 각 부품(제목, 본문, 이미지 등)
테그 - 요소를 만들 때 사용하는 작성 방법
테그안에 요소가 들어감.
속성
속성 - 테그에 추가 정보를 부여할 때 사용하는 것
주석
<!-- -->
기본값 변경하기 들여쓰기
스타일시트 작성과 실행
내부스타일
-HTML 페이지 내부에서 style 테그를 사용해 스타일 시트를 직접 입력
-스타일 시트가 짧은 경우
외부스타일
-스타일 시트를 별도로 생성하고 link 테그와 herf 속성을 사용해 불러옴
-협업 업무나 프로젝트의 규모가 클 경우 사용
내부 스타일 시트 작성하기
내부 스타일 시트 테그 위치
head안이나 body 끝에서 사용하는것이 일반적인 관례
<!DOCTYPE html>
<html>
<head>
<!-- 주석 단축키 "ctrl + shift + / -->
<!-- 문자셋을 지정하는 부분
UTF-8 : 한글3바이트, 영문1바이트
EUC-KR : 한글2바이트, 영문1바이트
-->
<meta charset="UTF-8">
<title>lab01</title>
<!-- 내부 스타일 시트(inline style sheet)를 정의하는 코드 -->
<style type="text/css">
h1{
color: white;
background-color: black;
}
h2{
color: yellow;
background-color: black;
}
h5{
color: green;
background-color: black;
}
</style>
</head>
<body>
<!-- <h1>테그 : 제목을 나타낼 때 주로 사용하는 테그 -->
<h1>안녕하세요.</h1>
<h2>안녕하세요.</h2>
<h3>안녕하세요.</h3>
<h4>안녕하세요.</h4>
<h5>안녕하세요.</h5>
<h6>안녕하세요.</h6>
</body>
</html>
외부 스타일 시트
스크립트 테그를 사용하되 외부에 파일을 이용해 코드작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lab02</title>
<!-- 외부 스타일 시트를 link테그로 가져오는 코드 -->
<link rel="stylesheet" href="lab02.css">
</head>
<body>
<h1>안녕하세요.</h1>
<h2>안녕하세요.</h2>
<h3>안녕하세요.</h3>
<h4>안녕하세요.</h4>
<h5>안녕하세요.</h5>
<h6>안녕하세요.</h6>
</body>
</html>@charset "UTF-8";
/* shift + tab 들여쓰기 반대로 */
/* 외부 스타일 시트로 작성함 */
h1{
color: red;
background-color: black;
}
h2{
color: yellow;
background-color: black;
}
h5{
color: green;
background-color: black;
}
