*크롬창에서 컨트롤 시프트 C를 누르면 element요소가 박스로 보인다.
HTML 기본
HTML 은 프로그래밍 언어가 아닙니다; 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방�
developer.mozilla.org
HTML(Hypertext Markup Language) - 컨텐츠 구조를 정의하는 마크업 언어 (프로그래밍 언어 아님)
wrap - 컨텐츠의 서로 다른 부분들을 씌운다.
enclose - tag로 감싼다.
<p> 떡볶이 먹고 싶다 </p> -> 문단 태그로 감싸서 문단임을 명시
<p> : 여는 태그
</p> : 닫는 태그
컨텐츠 : 태그 사이에 있는 내용
요소 : 여는 태그, 닫는 태그, 컨텐츠
속성: 추가적인 정보를 담음
1. 요소 이름과 속성 사이에 공백이 필요
2. 속성 이름 뒤에는 등호(=)가 와야함
3. 속성 값은 인용부호(" , ')로 감싸야함
요소 중첩(nesting)
<p>떡볶이 <strong>진짜</strong> 먹고 싶다.</p>
빈 요소(empty elements)
<img> 태그가 대표적인 예
효과를 주기 위해 컨텐츠를 감싸지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My test page</title>
</head>
<body>
<!--페이지 안으로 이미지를 삽입하는 코드-->
<p>떡볶이 <strong>진짜</strong> 먹고 싶다.</p>
<img src="image/puppy.jpg" alt="My test image">
</body>
</html><html>
: 페이지 전체 컨텐츠를 감싼다. 루트(root)요소
<head>
: 키워드, 검색 결과에 표시되길 원하는 페이지 설명, CSS, 문자 집합 선언(인코딩 방법) 등이 포함
사용자에게 보여지는 것은 없음
<body>
: 사용자들에게 보여지는 모든 컨텐츠가 담김
<meta charset ="UTF-8">
: 사용자에게 보여지는 문자 집합을 UTF-8로 인코딩한다.
<title>
: 페이지가 로드되는 브라우저 텝에 표시, 북마크나 즐겨찾기 페이지를 설명할 때 사용
제목
h태그
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
목록
li 태그
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>
하이퍼링크
a 태그 (anchor의 약자라고 함)
<a href="https://www.naver.com">네이버</a>
'Web > HTML CSS JS' 카테고리의 다른 글
| Java Script - Class (0) | 2020.09.24 |
|---|---|
| Java Script - function (2) | 2020.09.23 |
| Java Scripts - HTML안에 JS파일 불러오는 위치, async, defer (0) | 2020.09.23 |
| Java Script 변수타입 및 기본예제 따라하기 (0) | 2020.09.23 |
| CSS 기본 (0) | 2020.09.22 |