■ HTML이란?
○ HTML : HyperText Markup Language
- HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
- Markup : 표시 (콘텐츠를)
- Language : 언어
> 하이퍼 텍스트와 콘텐츠를 표시해주는 언어
> 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어
○ HTML은 콘텐츠를 정의
- 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의함
- 완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어진다.
- HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다.
○ HTML 문서 : 확장자가 HTML
- 텍스트 편집기 : Brackets, VScode
- 웹 브라우저 : 크롬, 엣지
■ 개발자 도구 / 코드 에디터
○ 웹사이트 개발용 도구로, 대부분의 최신 브라우저에는 개발자
도구가 탑재 되어 있다. HTML CSS 코드 확인, 모바일 모니터링,
네트워크 상태점검, 스크립트 명령어 확인 등 편의를 제공
○ 단축키 F12버튼 누르면 개발자도구 열림
○ 코드에디터 : 프로그래머가 소스코드를 편집하기 위해 사용하는 소프트웨어
- 텍스트를 더 빠르게, 더 편하게 작성하기 위해서 사용
- 자동완성 + 하이라이팅 기능이 추가
■ HTML 코드 기초 문법
○ 태그 : HTML 코드에서 정보(콘텐츠)를 정의하는 형식
○ 태그
- <> 홀 화살괄호 와 </> 슬러시로 시작과 끝을 표시한다.
- 태그명은 콘텐츠의 성격과 의미를 나타냄
- 단일태그는 콘텐츠를 감쌀필요가 없어서 시작과 끝을 구분하지 않음
<태그> or <태그/>
- 태그 사용 형태
<태그명> 내용 </태그명>
○ 속성
- 태그의 부가적인 기능을 정의, 선택사항
- 시작태그의 내부에 정의 개수에는 제한 없음
<태그명 속성명 ="속성값"> 내용 </태그명>
○ 주석
- 사람들간 공유하기 위한 메모로 사용
<!-- 주석내용 --><p>안녕하세요</p>
<br><br> <!--줄을 띄어주는 태그-->
<strong style="color: #00ffff;">안녕하세요</strong>
<!-- style 속성을 사용하고 스타일에 맞게 넣어주는 태그 -->
■ HTML 문서의 구조
<!DOCTYPE html> <!--최신 표준문법으로 작성된 문서의미-->
<html> <!--내용-->
<head> <!--설정-->
<meta charset="UTF-8"> <!--단일 태크-->
<title>홈페이지</title> <!--문서 제목-->
</head>
<body>
내용을 작성
</body>
</html>
○ <!DOCTYPE html>
- 문서의 첫부분에서 문서 유형을 지정하는 단일태그
- 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입
○ <html></html>
- 문서유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타냄
- 내부에 다양한 태그들이 포함되어 문서의 내용을 구성
○ <head></head>
- 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보
○ <meta charset ="utf-8">
- 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그
- 한글을 표시하기 위해 문자 세트를 지정하는 작업 영문과 한글을 모두 사용 하기 위해 UTF-8 방식을 사용
○ meta 태그
- HTML문서의 메타 데이터를 정의
- 메타데이터 : 데이터에 관한 구조화된 데이터 (데이터를 설명하는 데이터)
- 항상 head 태그 안에서 사용한다.
- 문자세트, 페이지 설명, 키워드등
- 웹페이지에 대한 정보를 제공 하므로 검색엔진이 검색시 참고
○ 주로 사용되는 속성
- charset : 문자 세트
- name : 문서 정보
- content : 메타데이터 내용
※ UTF-8
유니코드를 위한 가변 길이 문자 인코딩 방식
Unicode Transformation Format - 8bit
1byte 기준 인코딩
○ <title> </title>
- 문서의 제목을 나타낸다.
○ <body></body>
- 실제 브라우저 화면에 표시될 내용을 입력
- 텍스트 태그, 이미지 태그, 인터페이스 등
- 태그 내부에 태그를 포함하는 방식으로 콘텐츠를 구성할 수 있다.
■ 텍스트 태그
○ 문단(Paragraph) : p 태그
- 문단 요소를 나타내는 태그 문단과 문단 사이에 공백이 있음
<p>문단사용1</p>
<p>문단사용2</p>
○ 제목(Headine) : h 태그
- 제목요소를 나타내며 숫자 1일 때 가장 크고 6일때 가장 작음
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
○ 수평선 : hr 태그
- 주제 변경 또는 내용 구분을 위해 사용
<p>문단사용1</p>
<hr>
<p>문단사용2</p>
○ HTML 텍스트의 특징
- 엔터로 줄바꿈을 표시하지 않는다. (코드에서 무시함)
- 스페이스를 통한 공백도 한번씩 밖에 인정되지 않음\
○ 줄바꿈 태그, 공백문자
- 공백을 표시 하고자 할때는 사용
- br 태그가 줄바꿈 담당
■ 태그의 구분
○ 태그의 구분
- 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
- 인라인 요소 : 자기에게 필요한 만큼 공간만 차지
○ 블록 내부에 블록을 넣어주면 새로운 층이 생겨서 공간을 차지한다.
○ 인라인 요소 내부에는 인라인 요소를 넣어도 자신만의 공간만을 차지한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>홈페이지</title>
</head>
<body>
<h1>제목표시</h1>
<p>문단을 나타내는
<p>새로운 문단 태그</p>
<strong>진하게 </strong>
<em>기울이기<mark>형광색 </mark> </em>
</p>
<!-- P태그를 3개로 인지해준다. -->
</body>
</html>■ 이미지 태그
○ img 태그 이미지를 표시할 때 사용하는 태그
- 단일 태그로 닫아줄 필요 없다.
- 콘덴츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정
기본형태
<img src= "표시 이미지 파일" alt="이미지설명" />
- src 속성 : 표시할 이미지의 위치 정보와 파일명을 입력 받는 속성(이미지의 URL을 입력)
※ URL (Uniform Resource Locator) : 주어진 고유 자원 주소
이미지가 어디에 있는지 알려주기 위해 사용하는 규약
- alt (Alternative:대안, 대체) : 대체 텍스트 역할
이미지가 로딩되기전이나 로딩에 실패시 대체 텍스트가 표시
○ 이미지 크기조절
<img src= "표시 이미지 파일" alt="이미지설명" width="너비값" height="높이값" />
- 너비와 높이는 기본적으로 픽셀(px) 단위로 적용된다.
- ""는 안넣어도 되지만 넣는 것이 기본
■ 컨테이너 태그
○ 컨테이너 태그 : 콘텐츠나 레이아웃에 영향 없이 여럿을 묶어 관리하기 편하게 만드는 역할
- 콘텐츠 구별, 공통 시타일 적용시 사용
- <div></div> : 블록 레벨 컨테이너
- <span></span> : 인라인 컨테이너
<body>
<div>
<h1>HTML 배우기</h1>
<p>기본 배우기</p>
<strong>
<span>기초</span> 보기
</strong>
<hr>
</div>
<h1>CSS 배우기</h1>
<p>구조 확인하기</p>
</body>■ 전역속성
○ 전역 속성(Global attributes)
- 모든 HTML 태그의 공통으로 사용할 수 있는 속성
- 속성이란 : 태그의 부가적인 기능을 정의
- 시작 태그의 내부에 정의, 개수는 특별한 제한 없음
○ 속성 추가방법
<태그명 속성명="속성값" 속성명="속성값"> 내용 </태그명>
○ 대표속성
- id : 요소에 고유한 이름을 부여하는 식별자 역할 속성
- class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성
- style : 요소에 적용할 css 스타일 선언하는 속성
- title : 요소의 추가 정보를 제공하는 텍스트 속성, 툴팁
※ 툴팁 : 마우스 올렸을때 뜨는 메모창
○ id와 class 차이
- id : 태그에 유일한 이름을 붙이고 싶을 때 사용함
전체 페이지 에서 단하나의 요소에만 지정
- class : 유형별로 분류하고 싶을 때 사용 (다중, 중복가능)
반복적으로 쓰이는 유형으로 반복해서 사용가능
- CSS에서는 id명 앞에 #(Crosshatch) 을 넣어줌, class 앞에는 .(Dot)
id속성이 class 보다 우선적으로 적용됨
ID, Class 사용하기
<body>
<div id="htmsd">
<h1 class="title">HTML 배우기</h1>
<p>기본 배우기</p>
<hr>
</div>
<div id="csssd">
<h1 class="title">CSS 배우기</h1>
<p>구조 확인하기</p>
</div>
</body>
Title 사용하기
<body>
<div id="htmsd">
<h1 class="title" title="열심히">HTML 배우기</h1>
<p>기본 배우기</p>
<hr>
</div>
<div id="csssd">
<h1 class="title">CSS 배우기</h1>
<p>구조 확인하기</p>
</div>
</body>
Style 사용하기
<body>
<div id="htmsd">
<h1 class="title" title="열심히">HTML 배우기</h1>
<p>기본 배우기</p>
<hr>
</div>
<div id="csssd" style="background-color: red; color: aqua;">
<h1 class="title">CSS 배우기</h1>
<p>구조 확인하기</p>
</div>
</body>■ 링크 (Link)
○ 링크(Link) : 현재 문서에서 다른문서로 이동하는 연결
○ a 태그 (anchor)
- href(hyper reference) 속성을 통해 다른 url로 연결하는 링크를 만든다.
- 인라인 요소
- targer 속성 : 현재탭("_self"), 새로운탭("_blank")
Web page 이동
<body>
<a style = "color: red; " href="https://www.naver.com/">
네이버 이동</a>
<br>
<a href="https://www.google.com" target="_blank">
구글 이동</a>
</body>■ 목록
○ 목록 : 연관 있는 항목(Item)들을 나열한 것을 의미
- 순서있는 목록 (Ordered List)과 순서없는 목록 (Unordered List)로 구분
- 목록안의 항목 (List item) <li></li> 태그 : 항목 하나를 표현시 사용하는 태그
- 모두 블록 레벨 요소임 <ol><ul><li>
○ 순서 없는 목록 <ul></ul> 태그
○ 순서 있는 목록 <ol></ol> 태그
<body>
<h2>동물 목록</h2>
<ul>
<li>사자</li>
<li><strong>호랑이</strong></li>
<li>늑대</li>
<li>고양이</li>
</ul>
<h2>수업목록</h2>
<ol>
<li>디자인</li>
<li style="background-color: burlywood;"><mark>html</mark></li>
<li>css</li>
<li>javascript</li>
</ol>
</body>■ 입력(input)
▶ input 태그
- 사용자로부터 값을 입력 받을 수 있는 대화형 컨트롤
- 기본적으로 인라인 요소로 단일 태그
○ type속성
- 값에 따라 입력 요소의 형태나 입력 데이터 유형이달라짐
○name 속성
- 입력 항목에 대한 이름으로 식별자
<body>
<input name="tx" type="text" placeholder="입력"> <br><br>
<input type="button"> <br><br>
<input type="color"> <br><br>
<input type="range"> <br><br>
<input type="date"> <br><br>
</body>▶ select 태그
- 다수 선택지를 포함 할수 있는 선택 메뉴
- option 태그를 사용해서 작성할 수 있다.
- value 주후 처리 (자바스크립트를 통한 처리)
<select name="st" id="a">
<option value="">html</option>
<option value="">css</option>
<option value="">js</option>
</select>▶ form 태그
- 서버로 전송되는 태그
- 서버와 클라이언트의 관계에서 요청 및 응답을 해주는 태그