의미와 정의
- 웹브라우저에서 보이도록 디자인된 문서
- 표준화된 Markup language 사용
Markup language이란?
- 태그들을 이용해서 구조적으로 작성된 것
- 일반적인 텍스트를 문법적으로 구분하기 위해서 문서에 주석
<recipe>
<title>Peanut-butter On A Spoon </title>
<ingredientlist>
<ingredient>Peanut-butter</ingredient>
<preparation>
Stick a spoon in ajar of peanut peanut-butter,
scoop and pull out a big glob of peanut-butter.
</preparation>
</ingredientlist>
</recipe>
<!-- <>는 태그이며 </>로 통래 태그를 끝냄, 태그 안에는 컨텐츠
list안에는 여러 개의 태그가 들어갈 수 있음-->개발툴 사용
- https://jsbin.com/?html,output
JS Bin
Sample of the bin:
jsbin.com
!DOCTYPE html> <!-- 문서의 타입은 html이다. -->
<html> <!-- html 태그는 html 파일의 제일 상위에 있는 태그이다. head,body로 구성되어 있음 -->
<head> <!-- 제목, 아이콘, cs파일 연결(사용자에게 보여지는 건 없고 메타데이터만 있음) -->
<meta charset="utf-8"> <!-- 글자의 포멧은 utf-8사용 -->
<meta name="viewport" content="width=device-width"> <!-- viewport정의 장치의 넓이를 다 사용함 -->
<title>JS Bin</title> <!-- 북마크 추가할때 보여지는 타이틀중 하나 -->
</head>
<body> <!-- 사용자에게 보여지는 최상위 컨텐츠 -->
<h1>Heading1</h1> <!--제일 큰 문자 -->
<h2>Heading2</h2> <!--그다음으로 큰 문자 -->
<button>Click Me!</button> <!--클릭가능한 버튼 -->
</body>
</html>결과
p, b, span, div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<p>This is a sentence <b>That</b> is</p>
<p>This is a sentence <span>That</span> is</p> <!-- span으로 css를 통해 색지정, 굵기 지정 가능 -->
<p>This is a sentence <div>That</div> is</p> <!--block-->
<body>
</body>
</html>결과
ol, ul, li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<ol type "i" reversed>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul> <!-- 아이템을 정렬할 떄 많이 씀 -->
<li>hello</li>
<li></li>
<li></li>
</ul>
<body>
</body>
</html>결과
- ol
사용법
- <ol type=”원하는 타입”>항목을 셀 때 사용할 카운터 유형.
- 'a'는 소문자 알파벳, • 'A'는 대문자 알파벳, • 'i'는 소문자 로마 숫자, • 'I'는 대문자 로마 숫자, • '1'는 숫자(기본값)를 나타남(타입지정을 안 하면 1.2.3. 이 나옴)
targer 종류
<ol reversed>
목록의 순서 역전 여부
<ol start =”시작하기 원하는 숫자”>
항목을 셀 때 시작할 수
W3C(World Wide Web Consortium)
- 웹의 표준화를 추진
- chrome, firefox, safari, Edge
- 오류 확인 가능: https://validator.w3.org/#validate_by_input
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
MDN
- 웹개발자들이 정보를 MDN사이트에서 확인
- https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
- HTML 요소 참고
https://developer.mozilla.org/ko/docs/Web/HTML/Element
- 웹사이트 구조확인
https://validator.w3.org/#validate_by_input
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
구성
BOX
- 사용자에게 보이지 않는 것
- header
- footer
- nav
- aside
- main
- section
- article
- div
- span
- form
ITEM
- 사용자에게 보이는 것들
- button
- label
- img
- video
- audio
- map
- canvas
- table
- input
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<label for="input_name">name: </label>
<input id="input_name" type="text">
<body>
</body>
</html>결과
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입
developer.mozilla.org
- a
뜻
- href특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듦
사용법
<a href=”하이퍼링크가 가리키는 URL” target=링크한 URL을 표시할 위치>
targer 종류
- _self: URL을 현재 브라우징 맥락에 표시합니다. 기본값.
- _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
- _parent: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
- _top: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
. - block
한 줄에 하나씩 블록형태로 우리가 지정 한대로 표기됨
- inline
블록 여러 개가 한 줄에 정렬
웹사이트 박스 구성 확인
- F12 or ctrl +shift +I
'웹페이지' 카테고리의 다른 글
| html, css로 간단한 자기소개 페이지 만들기 (2) | 2022.11.13 |
|---|---|
| block, inline, position 완벽 정복 (0) | 2022.11.06 |
| container (0) | 2022.11.06 |
| item (0) | 2022.11.06 |
| CSS 기본, 유용한 정보 (0) | 2022.11.06 |