브라우저는 HTML 파일에 에러가 있다고 알려주지 않는다
장점 : 실수를 하더라도 콘텐츠를 볼 수 있다.
단점 : 무엇이 잘 못되었는지 알 수 없다.
HTML(HyperText Markup Language) : 의미와 구조를 정의할 때 사용한다.
<문서 구조 작성방법>
- 파일명과 폴더명은 항상 소문자로 작성한다.( 확장자 .html)
- 파일의 내용이 변경될 때마다 저장해 줘야 한다. ctrl + s
<!DOCTYPE html>
<html lang="kr"> //문서의 고유 언어를 설정하는 lang 포함
<!-- 사이에 있는 모든 것은 HTML 주석 -->
<head>
<title></title>
<meta />
외부적으로 보이지 않는 웹사이트의 환경설정
</head>
<body>
화면에 실제 보여지는 데이터를 작성하는 공간.
</body>
</html>< !DOCTYPE html > 브라우저에게 text 파일이 아닌 html 문서라고 알려준다.
< html> 루트 요소, 전체의 콘텐츠를 감싼다. ->html 태그 안에 모든 내용은 html 문서임
문서의 고유 언어를 설정하는 lang 속성을 포함< head> 페이지가 로딩될 때 웹 브라우저에는 보이지 않는 부분 ( 웹사이트의 환경설정 )
<title> 페이지의 제목을 설정, 로드된 페이지 브라우저의 탭에 나타나는 제목.
<meta name="" content=""> 부가적인 요소 - name과 content 두 개의 속성을 갖는다.< body> 사용자가 볼 수 있는 contet를 보여줌
HTML 요소(element)는 "태그"를 사용해서 문서의 다른 텍스트와 구분한다.
-
< p> 문단을 적는 공간 / 길이가 긴 text
-
< span> 문장을 적는 공간 / 길이가 짧은 text
-
< img> 문서에 이미지를 넣는다. self-closing tag ( 이미지는 text가 없기 때문이다.)
- src (이미지의 url) 속성은 필수
-
<h1~h6> </h1~h6> 제목
-
< ul> unordered list 순서가 없는 목록
-
< ol> ordered list 순서가 있는 목록
- < li> list item 목록 항목
-
< a> anchor의 약자로 웹을 웹으로 만들어준다. -> 다른 웹사이트로 이동하는 방법 (= 링크)
- 속성 herf (hypertext reference) 하이퍼 텍스트 참조이며 오직 < a>에만 추가할 수 있다.
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
요소(element)는 "속성(attribute)"을 가진다.
- 태그와 속성 사이에 공백이 있어야 한다.
- 속성 이름 뒤에는 등호가 와야 한다.
- 속성 값의 앞뒤에는 인용부호(" ,')가 와야 한다.
-
herf
= "이동할 곳" / 오직 < a>에만 작동
-
target
= "_self" 기본값
= "_blank" 새로운 탭에서 열림
-
src
= "이미지 주소 url " / 오직 < img />에서만 작동
-
id (unique identifier 고유 식별자)
= body 안에 어떤 태그에든 넣을 수 있다.
= element 당 하나의 id만 가질 수 있다.
id = "apple" -> # tomato (CSS)
-
class
= 여러 element에서 사용 가능
= 한 번에 여러 class 사용 가능하다 class = " tomato apple lemon"
class = "apple" -> .apple (CSS)
