HTML
Hyper Text Markup Language 의 약자로, 네트워크가 연결된 웹 페이지에서 문서를 작성하고, 읽고, 공유하기 위해 만들어진 체계이다.
markup : (텍스트, 문서의) 표시 및 지정 표기Tag
<tag> 를 통해 웹페이지에서 보여질 내용을 나타낸다. 시작태그<tag> 와 종료태그</tag> 로 이루어진 블록을 요소라고 한다. tag 는 약속된 명령어이기 때문에 고유한 기능을 가지고 있다.
tag | 기능 | 빈 태그 | 기능 |
<strong> | 굵게 | <br> | 줄바꿈 |
<u> | 밑줄 | <hr> | 구분선 |
<i> | 이탤릭체 | ||
<button> | 버튼 | ||
<textarea> | 입력창 | ||
<img src=““/> | 이미지 삽입 | ||
<video><source src=””> | 비디오 삽입 |
빈태그 두가지는 실무에서는 많이 사용되지 않는다.태그는 고유한 기능을 가지고 있지만, 속성과 값으로 부가적인 기능을 구현할 수 있다.
태그 | <input> |
<input type=”text”> | 텍스트 입력창 |
<input type=”password”> | 마스킹되는 입력창 |
<input type=”checkbox”> | 체크박스 생성 |
중첩또한 가능하다.
<input type=”text” placeholder=“이름을 입력해 주세요”>
placeholder : 안내문구 표시하는 기능위 예시에서 type 과 placeholder 속성이 중첩되어 있다. 이때 type 은 특정한 값, 특정한 속성만 가질 수 있음을 명시하자.
태그의 특징
block 요소와 inline 요소•
block 요소 : <div>, <h1>, <hr>, <p> . . .
•
inline 요소 : <span>, <input>, <image>, <a> . . .
종속 태그 : 다른 태그와 함께 상호작용을 해야하는 태그를 말한다.<select> : 선택박스 태그
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
HTML
복사
[목록태그]
<ol>
<ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
HTML
복사
<li> 를 <ol> 로 감싸면 numbering 이 된다.<ul>
<ul>
<li>Milk</li>
<li>Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
HTML
복사
<li> 를 <ul> 로 감싸면 번호가 아닌 기호가 생기며, <ol>, <dl>, <ul> 과 중첩하여 사용이 가능하다. Head tag 와 body tag•
Head tag : 검색엔진을 위한 영역
•
Body tag : 브라우저에서 보여지는 영역
<!--HTML5 버전 선언 방법 -->
<!DOCTYPE html>
<html>
<!-- 검색 엔진을 위한 영역 -->
<head>
<title>사이트 이름</title>
<meta name="description : 사이트 소개" />
<!-- 다른 사이트에 이미지 알리기 -->
<meta property="og:image" />
<!-- 다른 사이트에 사이트명 알리기 -->
<meta property="og:title" />
<!-- 다른 사이트에 사이트상세 알리기 -->
<meta property="og:description" />
</head>
<!-- 브라우저에서 보여지는 영역 -->
<body>
<!-- 웹페이지의 상단(또는 상단메뉴) 부분 -->
<header></header>
<!-- 웹페이지의 좌측(또는 우측메뉴) 부분 -->
<nav></nav>
<!-- 웹페이지의 독립적인 섹션 부분 -->
<section></section>
<!-- 웹페이지의 블로그, 뉴스, 기사 등 -->
<article></article>
<!-- 웹페이지의 하단 기업정보 부분 -->
<footer></footer>
</body>
</html>
HTML
복사