HTML이란?
Hypertext Markup Language의 약자로, 웹 페이지를 구성하는 언어이다.
HTML 주석
<!-- 화면에 표시되지 않는다. 개발자에게 코드를 설명하기 위해 작성 -->HTML 구성요소
- 태그
<html>
<head>
</head>
<body>
</body>
</html>- 요소
- 빈 요소 : 내용 없이 구조적인 기능만 하는 요소
<br/>, <hr/>
2. 블록 요소 : 부모 요소의 전체 너비를 차지하는 내용 요소.
자동 줄바꿈이 일어나며, 인라인 요소와 블록 요소를 포함할 수 있다.<h1></h1>, <div></div>, <p></p>
3. 인라인 요소 : 필요한 공간만을 차지하는 내용 요소.
너비와 높이를 지정할 수 있으며, 인라인 요소만 포함 가능하다.<a></a>, <span></span>, <strong></strong>
- 속성
태그를 보조하는 명령어로 태그 안쪽에서 작동한다.
id, class, style, width, height, href 등
HTML 태그 종류
기본 태그
<h1> </h1> : 제목. h1~h6 <p> </p> : 본문 <br> : 줄바꿈 <hr> : 수평 줄 그어줌 <img> : 이미지 삽입. src, alt 속성 사용 <a> </a> : 하이퍼링크 삽입. href, target 속성 사용 <div> </div> : 영역을 설정할 때, 블록 요소 <span> </span> : 영역을 설정할 때, 인라인 요소 <ul> </ul>, <ol> </ol> : 순서 없는 리스트, 순서 있는 리스트 <li> </li> : ul, ol의 필수 자식 요소
문자 꾸미기 태그
<b></b> : 두껍게! <strong></strong> : 두껍게! + Semantic 한 의미를 지님 <i></i> : 이탤릭 <em></em> : Emphasized, 강조! 기울여서 표시됨 <del></del> : 중간 줄! <u></u> : 밑 줄!
사용자 입력 Form & Input 태그
<input> 태그 type • button : 버튼을 생성 • text : 텍스트 입력 받음 • password : 입력 값을 자동으로 안 보이게 처리해주는 텍스트 받음 • checkbox : 여러 선택지 중 여러 개 선택 가능한 박스 • radio : 여러 선택지 중 하나만 선택 가능한 버튼 • date : 날짜 선택 폼. datetime-local으로 시간까지 선택 가능 • color : 색상 선택 • range : min, max 사용해 범위를 선택할 수 있다 • file : 파일 선택 받음. accept 속성으로 파일 종류 선택 가능, capture 속성으로 카메라 on 가능 • textarea : 텍스트 입력 받는 박스 크기 조정 가능. width, height 사용 가능 • select : 선택 메뉴 만듦. disabled로 보이지만 선택할 수 없게 설정 가능
표 만들기 태그
<table> : 표를 만들 때 표를 감싸는 태그 <tr> : 표 내부의 행 <th> : 행 내부의 제목 칸 <td> : 행 내부의 일반 칸<table> 속성 • border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding : 셀 내부의 간격 • align : 테이블 정렬 속성 • width 와 height : 테이블의 너비와 높이 • bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색<td> 태그 속성 • colspan : 해당 칸이 점유하는 열의 수 지정 • rowspan : 해당 칸이 점유하는 행의 수 지정
+) HTML 요소를 작성할 때 Semantic하게 작성해야 하는 이유
- 검색 최적화(SEO)
- 유지 보수성
Sejong Univ.