HTML : 웹페이지 틀을 만드는 마크업 언어
tag들의 집합 / 부등호(<>)로 묶인 html의 기본 구성 요소
<>로 시작하여 </>로 끝내는것이 한 태그 이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<script type ="text/javascript">
//자바스크립트언어 코딩
</script>
<h1>큰 제목</h1>
<div>
<span>한줄 자리 차지 </span>
</div>
</body>
</html><!DOCTYPE html> : html 문서임을 알린다.
<html></html> : 시작태그로 문서 전체의 틀을 구성
<head></head> : 문서의 메타데이터를 선언
<title></title> : 문서의 제목, 브라우저의 탭에 보여짐
<body></body> : 문서의 내용을 담는 곳
<script></script> : 자바스크립트 언어 입력하는곳
<h1></h1> : 글씨 크기를 조정 h1 부터 h6 까지 있음
<div></div> : 줄바꿈이 되는 컨테이너 블록요소이다. 한줄을 차지한다.
<span></span> : 줄바꿈이 안되는 컨테이너 인라인요소이다. 컨테츠 만큼 차지한다.
<img src ="이미지파일주소"><img> : 이미지 태그 닫는 태그가 필요 없음 // src : 이미지의 파일 주소를 가르킨다.
<a href = "이동링크" target="_blank"> 링크이름 </a><a></a> : 링크를 넣을때 이미지, 글씨 등에 링크를 넣을수 있음 // target : 이동시 페이지 설정 (새창,현재창이동)
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>
<ul>
<li>이중리스트1</li>
<li>이중리스트2</li>
</ul>
</li>
</ul><ul></ul> : 리스트를 만들이 위한것 <ol>도 있음
<li></li> : ul태그 안에서 리스트 한줄한줄을 의미 li 태그 안에 이중 ul태그를 사용하여 이중 리스트도 만들 수 있다.
<div>
ID : <input type="text" placeholder="here">
PW : <input type="text" placeholder="here">
</div>
<div>
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b
</div>
<div>
<input type="checkbox" checked> a
<input type="checkbox" > b
</div>
<button>버튼1</button>
<input type = "button" value="버튼2">
<input type="submit" value="버튼3"> 
<input> : 입력태그 이다. type엔 여러가지가 있다.
type = text : 텍스트 박스이다. // placeholder : 초기 바탕 텍스트 입력값 마우스 커서 누르는 순간 사라짐
type = radio : 라디오 체크 동그라미 체크이며 중복체크 불가 // name값을 같게 해줘야 같은 name안에서 중복체크 방지 한다.
type = checkbox : 체크박스 중복체크 가능 // checked : 초기 선택값이다.
type = button : 버튼
type = submit : 폼값 전달 버튼
<button></button> : 버튼
** Semantic 태그 **
태그만 봐도 어떤 영역 인지를 나타 낼 수 있는 태그 의미론적인 태그 입니다.
-
<article>
-
<aside>
-
<details>
-
<figcaption>
-
<figure>
-
<footer>
-
<header>
-
<main>
-
<mark>
-
<nav>
-
<section>
-
<summary>
-
<time>
'HTML_CSS' 카테고리의 다른 글
| 6. DOM 응용 (0) | 2020.09.26 |
|---|---|
| 5. DOM (0) | 2020.09.22 |
| 4.CSS_레이아웃 (0) | 2020.09.21 |
| 3.CSS_id와class (0) | 2020.09.21 |
| 2. CSS_스타일지정 3가지 (0) | 2020.09.21 |
