HTML (Hyper Text MarkUp Language)
: 웹페이지에 정보를 담아 표시하기 위한 마크업 언어- Hyper Text : 현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
- MarkUp Language : 마크(태그 등)로 둘러싸인 언어, 문서나 데이터의 구조를 명시하는 규칙을 정의한 언어의 한 종류
(ex.<p>Hello World</p>)
HTML 구성요소
<p>(시작태그)Hello World(contents,내용)</p>(끝태그) : element,요소<p align="center">Hello World</p>
: 시작 태그 안에 있는 속성(attribute)="값(value)" 을 통해 해당 요소에 스타일 등 추가적인 내용을 넣을 수 있음 (글자색,크기,배경색,여백 등)
HTML 기본 구조
- 참고 : VSCODE에서 HTML파일을 생성 후,
!치고 ENTER 누르면 DOCTYPE 소스 자동 완성
<html> ~ </html>: 웹 문서의 시작과 끝 태그<html>는<head>와<body>로 이루어져 있음
<head> ~ </head>: 웹브라우저가 웹문서를 인식하는 데 필요한 정보를 입력하는 부분<head>내에 내용들은<tilte>빼고는 눈에 보이지 않는 부분- 웹페이지 본문에서는 보이지 않는 부분
<meta> 웹 문서 정보 </meta><title> 웹 문서 제목 </title>: 브라우저의 탭에서 확인 가능
<body> ~ </body>: 실제 웹브라우저 화면에 나타나는 내용- 웹페이지 본문에서 보이는 부분
<body>의 속성 : background (배경이미지 지정), bgcolor 또는 background-color (배경색 지정), text (글꼴색 지정), link (링크 색 지정), blink (방문했던 링크 색 지정), alink (링크를 클릭하는 순간의 색 지정)<body>내의 태그<h> 제목 </h>: h1~h6까지 있음 (숫자가 커질수록 크기 작아짐)<p> 텍스트 단락 </p>: 내용을 단락으로 표현- 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐
<span> 내용 </span>: 내용을 문장으로 표현(내용만큼만 자리 차지)<div> 내용 </div>: (한 줄 차지)<br/>: 줄바꿈(개행) ( 시작태그만 있는 태그 = 보이드 태그 )<hr/>: 수평선, 단락 구분- 속성 : align (정렬방식), color (색), size (굵기), width (가로길이), noshade (그림자 없게)
<b> 굵은텍스트 </b>,<strong> 굵게 강조텍스트 </strong>: 텍스트 굵게- 화면 낭독기는
<strong>태그만 강조하여 읽어줌
- 화면 낭독기는
<i> 기울일텍스트 </i>,<em> 기울게 강조텍스트 </em>: 텍스트 기울임꼴<img src=”이미지 파일 경로” alt="대체용 텍스트" />: 이미지- 이미지 파일 경로는 절대경로와 상대경로 둘 다 가능
<a href="url" > 텍스트/이미지 </a>: 앵커태그(하이퍼링크)- 텍스트/이미지를 누르면 연결한 주소(url)로 이동
target="_blank"속성 : 새 탭에서 열어줌
<object width="너비" height="높이" data="파일"></object>: 오디오, 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일 삽입
시맨틱 태그
HTML의 태그는 그 이름만 봐도 의미를 알 수 있어서 시맨틱(semantic) 태그라고도 한다.
웹 문서 구조를 나타내는 태그들이 새로 추가되었다.
<header>: 헤더 영역
<nav>: 내비게이션 영역<main>: 핵심 콘텐츠를 담는 영역
<article>: 독립적인 콘텐츠를 담는 영역 (신문이나 잡지의 기사처럼 웹에서 실제로 보여주고 싶은 내용을 넣음)<section>: 콘텐츠 영역 (독립적인 콘텐츠가 아닌 몇 개의 콘텐츠를 묶는 용도로 사용)<aside>: 사이드 바 영역 (본문 내용 외에 왼쪽 또는 오른쪽 또는 아래쪽에 만들고, 필수 요소는 아님)<footer>: 푸터 영역 (사이트 제작 정보, 저작권 정보, 연락처 등)<header> 헤더 영역 <nav> 내비게이션 영역 </nav> </header> <main class="contents"> 본문 영역 <section id="s1"> ... </section> <section id="s2"> ... </section> </main> <footer> 푸터 영역 </footer>시맨틱 태그를 사용하는 이유는 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문이다.
목록 태그
- 번호 없는 목록 태그
<ul> <li>번호없는 항목1</li> <li>번호없는 항목2</li> </ul> - 번호 있는 목록
<ol type="번호 종류" start=시작번호 reversed> <li>번호 있는 항목1</li> <li>번호 있는 항목2</li> </ol>type속성 :type = "1"(기본값, 숫자)
type = "a"(영문소문자)
type = "A"(영문대문자)
type = "i"(로마숫자 소문자)
type = "I"(로마숫자 대문자)
start속성 :start = 1(기본값, 1부터 시작)reversed속성 : 번호 순서 반대로 하는 속성
표(테이블) 태그
형식
<table align="정렬방식" bgcolor="배경색" border="테두리 두께" bordercolor="테두리색" width="너비" height="높이">
<caption> 표 제목 </caption>
<tr align="정렬방식" bgcolor="배경색" height="높이">
<th align="정렬방식" bgcolor="배경색" width="너비" height="높이" colspan="병합할 열 개수" rowspan="병합할 행 개수"> 열 이름 </th>
</tr>
<tr align="정렬방식" bgcolor="배경색" height="높이">
<td align="정렬방식" bgcolor="배경색" width="너비" height="높이" colspan="병합할 열 개수" rowspan="병합할 행 개수"> 데이터 </td>
</tr>
</table><table>: 테이블(표) 태그 ( 안에는 제목, 행, 열에 대한 태그 포함 )<caption>: 테이블(표) 제목 태그<tr>: table row , 테이블(표)의 행 태그 ( 안에는 각 값에 대한 태그 포함 )<th>: table head , 테이블(표)의 열이름 태그 (<tr>안에 존재)<td>: table data , 테이블(표)의 데이터 태그 (<tr>안에 존재)
예시
<table border="1px" align="center">
<caption> 표 제목 </caption>
<tr bgcolor="pink"> <!-- tr : table row-->
<th> 열제목1 </th> <!-- th : table head-->
<th> 열제목2 </th>
</tr>
<tr>
<td> 1행 1열 </td> <!-- td : table data-->
<td> 1행 2열 </td>
</tr>
<tr>
<td> 2행 1열 </td>
<td> 2행 2열 </td>
</tr>
</table>
입력 양식(폼) 태그
형식
<form name="폼이름" action="내용을 처리해줄 서버 프로그램 지정" method="데이터 전송 방식">
<label for="연결할 입력태그의 id값">레이블</label>
<input type="입력상자 종류" id="id값" name="이름" value="입력값|표시값" placeholder="힌트내용" actofocus required readonly />
<textarea cols="가로너비" rows="세로너비">텍스트박스 안에 작성되는 내용</textarea>
<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
<option value="값3">내용3</option>
</select>
<fieldset>
<legend> 그룹이름 </legend>
입력 태그들
</fieldset>
<input type="submit" value="제출버튼" />
<input type="reset" value="초기화버튼" />
</form><form>: 입력 양식을 감싸는 폼 태그 (눈에 보이지 않는 추상적인 태그)action속성 : 양식 안의 데이터를 어디로 보낼 지 지정 가능method속성 : get 또는 post 방식 지정
<input/>: 입력 상자 태그 (종류 다양함, 보이드 태그)type속성 :
type = "text"(기본값, 입력상자) ,
type = "password"(비밀번호, 입력값 가려줌) ,
type = "checkbox"(체크박스, 여러항목 선택 가능) ,
type = "radio"(라디오버튼, 한 항목만 선택 가능)
(radio와 checkbox는 같은 항목들끼리 name속성을 동일한 값으로 설정),
type = "file"(파일 첨부) ,
type = "color"(색상 선택) ,
type = "number"(스핀박스, 위/아래 스핀 누르면 숫자 증감) ,
type = "range"(슬라이드막대, 마우스로 수량 선택) ,
type = "date"(날짜) ,
type = "datetime-local"(날짜 + 시간) ,
type = "hidden"(눈에 보이지 않지만 서버로 넘겨주는 값),
type = "button"(기능 없는 버튼모양),
type = "submit"(전송버튼),
type = "reset"(리셋버튼)
(button, submit, reset 버튼에 표시할 내용은 value속성으로 설정)autofocus속성 : 자동으로 입력 커서 갖다 놓는 속성required속성 : 필수로 입력해야 하는 속성placeholder="힌트 내용": 힌트를 표시해주는 속성readonly: 읽기 전용 필드 속성min=최소값 max=최대값 step=숫자간격: input태그 type이 number, range 의 최소/최대/간격 속성
<textarea>: 여러 줄 입력가능한 텍스트박스 태그<select>: 드롭다운 목록상자 태그<select>안에<option>여러 개 작성- 선택된
<option>의 value값이 넘어감
<fieldset>: 폼 요소들을 그룹으로 묶어주는 태그<legend>: 그룹이름을 지정해주는 태그 (<fieldset>안에 작성)
예시
<form>
<!--label태그의 for 값에 연결할 input태그 id값 넣기-->
<label for = "id명">레이블명</label>
<input type="text" id="id명">
<br/>
<!--텍스트박스-->
<label for = "textbox">text</label>
<input type="text" id="textbox"> <br/>
<!--비밀번호 : 입력값을 자동으로 가려줌-->
<label for = "pw">passward</label>
<input type="password" id="pw"> <br/>
<!--체크박스 : 여러항목 선택-->
<!-- 같은 항목의 체크박스들은 name 값을 같게 설정 -->
<label for = "basketball">농구</label>
<input type="checkbox" name="hobby" id="basketball">
<label for = "soccer">축구</label>
<input type="checkbox" name="hobby" id="soccer">
<label for = "baseball">야구</label>
<input type="checkbox" name="hobby" id="baseball"> <br/>
<!--라디오버튼 : 하나만 선택 가능 -->
<!-- 같은 항목의 라디오버튼들은 name 값을 같게 설정 -->
<label for = "female">여자</label>
<input type="radio" name="sex" id="female">
<label for = "male">남자</label>
<input type="radio" name="sex" id="male"> <br/>
<!--파일첨부-->
<input type="file"> <br/>
<!--색 선택-->
<input type="color"> <br/>
<!--스핀박스 : 수량 선택-->
<input type="number"> <br/>
<!--슬라이드막대 : 수량 선택-->
<input type="range"> <br/>
<!--날짜-->
<input type="date">
<input type="datetime-local"> <br/>
<!--기능 없고 형태만 버튼모양-->
<input type="button" value="버튼"/> <br/>
<button type="reset">초기화</button>
<button type="submit">제출</button> <br/>
<!--여러 줄 입력가능한 텍스트영역-->
<textarea cols="가로너비" rows="세로길이"></textarea> <br/>
<!--드롭다운 목록상자-->
<select name="" id="">
<option value="basketball">농구</option>
<option value="soccer">축구</option>
<option value="baseball">야구</option>
</select>
<fieldset> <!--폼 요소들을 그룹으로 묶음-->
<legend>그룹이름</legend>
<!--폼 요소 들-->
</fieldset>
</form>
기타
- 경로
- 절대경로 : 어떤 페이지/파일이 가진 고유한 경로 (외부 웹페이지로 연결할 때 사용)
- 상대경로 : 특정 위치를 기준으로 파일을 찾는 경로 (내부 자료를 연결할 때 사용)
./(현재위치, 생략가능),../(상위폴더로 이동)- ex.
../../source/image.jpg: 현재폴더에서 상위폴더의 상위폴더에서 source폴더의 image파일
- cmd에서 활용
- dir(맥은 ls) : 현재 디렉토리에 있는 파일 확인
- cd 파일명 : 이동(change directory)
- cd ..\ : 상위폴더로 이동
개발, 분석 배운 내용 정리하기!