www.youtube.com/watch?v=i0FN-OwJ7QI
HTML = HyperText Markup Language
웹 페이지를 위한 지배적인 마크업 언어
제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라
링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법 제공
이미지와 객체를 내장하고 대화형 양식을 생성하는데 사용될 수 있다.
태그 <> 로 되어있는 요소 형태로 작성한다.
웹 브라우저와 같은 html 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 css 같은 스크립트를 포함하거나 불러올 수 있다.
-위키피디아
Markup Language
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지
HTML 구조 알아보기
JS Bin
Sample of the bin:
jsbin.com
개발툴을 웹페이지에서 간단하게 사용가능
<!DOCTYPE html> #document type은 html이다.
<html>
<head> #사용자에게 보여지는 UI적인 요소가 없음. 구글 검색시 나오는 타이틀/ 북마크 추가시 제목 아이콘 정의됨/ CSS파트 연결/ 메타 데이터만 있다
<meta charset="utf-8"> #utf-8 : 글자의 포멧(기본)
<meta name="viewport" content="width=device-width">
<title>JS Bin</title> #타이틀
</head>
<body> #사용자에게 보여지는 최상위의 컨테이너.
<h1>Heading1</h1>
<h2>Heading2</h2>
<button>Click Me!</button>
</body>
</html>
어떻게 이렇게?
W3C=World Wide Wed Consortium
웹의 표준화 추진 단체
브라우저 상에 잘 표현되게 표준화
태그 확인??
MDN HTML에서 정보 확인
developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language | MDN
와 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다. HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠
developer.mozilla.org
어느정도의 에러를 짐작해서 스스로 회복해 문제 없도록 함
유효한 태그를 썼는지 확인하고 싶을때
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
직접 복사 붙여넣기해서 error, warning 확인 가능함
developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
Document and website structure - Learn web development | MDN
Document and website structure In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu",
developer.mozilla.org
<박스 나누기>
웹사이트 만들때 어느정도 구조 생각해서 구역나눌 수 있는 방법
배너 -로고 / 설명/ 다운로드, 클로징
헤더 -박스/ 서치/ 네비게이션박스(박스/ 실시간검색(실시간 검색어/아이콘))
사이드바
메인 컨텐츠
리엑트 사용시 최소 단위로 나누어야 한다!!
>>>>팁: html 형식에서 내용을 쓰고 !+tab을 누르면 html 양식 완성된다
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| 반응형 웹디자인 | HTML, CSS 반응형 정리 #4 (0) | 2021.04.19 |
|---|---|
| CSS Flexbox 완전 정리 #3 (0) | 2021.04.14 |
| CSS 레이아웃 정리 display, position 완성 #2 (0) | 2021.04.14 |
| CSS 셀렉터 #1 (0) | 2021.04.14 |
| HTML 태그 완성 (0) | 2021.04.14 |
