[2023 신입부원 기초 스터디] 최종은 #1주차 - HTML알아가기

1.HTML이란?

Hyper Text Markup Language

 

HTML: 태그를 이용한 마크업 언어(프로그래밍 언어 X)

 

Tag: HTML을 구성하는 요소

HTML Tag의 구성

(주석==메모)

<!-- 주석내용 -->

---

Emmet: HTML에서 제공하는 자동완성기능

(공식 사이트가 있으니 참고 가능)

 

!	>	+	*	#	.	{}	$
HTML 기본 구성	자식노드 생성(Ex: div>ul )	형제노드 (Ex: div>ul+ol )	반복 생성 (Ex: div>ul>li*3)	아이디 생성 (Ex:#id , ul#id)	클래스 생성 (Ex: .class, ol.class)	콘텐츠 생성 (Ex: p.cntainer{Hello, HTML!} )	자동 넘버링 (Ex: p.num{test$}*3)

 

---

폰트(Font) 태그

글꼴 Tag

 

태그	<h1>~<h6>	<p>	<hr>	<br>	<i>	<em>	<b>	<strong>
역할	제목,부제목 표현	문단 표시	가로선 긋기	개행(줄바꿈)	이텔릭체로 표시	이텔릭체로 강조	텍스트 진하게 표시	텍스트 진하게 강조
종료태그	O	O	X	X	O	O	O	O

*표시와 강조의 차이*

'표시'는 단순히 글꼴만 변경하지만 '강조'의 경우에는 페이지 내의 중요한 부분의 경우이기 때문에 용도에 맞게 사용해야함(Ex: 스크린 리더)

 

목록(List) 태그

<ol>	<ul>	<li>	<dl>	<dt>	<dd>
순서가 있는 목록 표현	순서가 없는 목록 표현	목록 하위항목	용어를 설명하는 목록 생성	정의되는 용어의 제목 생성	용어 설명

 

*주의*

<dl>태그는 1개 이상의 <dt>-<dd>쌍의 태그를 가져야함(짝지어져야 하는 건 아님)

<li>,<dt>-<dd>태그는 밖에서 독립적으로 사용할 수 없음

<ul>태그 하위요소로 <li>태그가 위치해야함

표(Table)태그

Table의 구성

1.Table 기본 태그

<table>

<caption>

<tr>

<th>

<td>

표 제작 표 전체를 감싸는데 사용

표의 제목,설명 작성

행

제목 열 <tr>태그 안에 있어야함

일반 열 <tr>태그 안에 있어야함

*<th>,<td>*

colspan : 열을 병합 (Ex: <td colspan="2"> -> 2개의 열을 묶음)

rowspan : 행을 병합 (Ex: <td rowspan="3"> -> 3개의 행을 묶음)

 

 

2.Tabel 그룹 관련 태그

<colagroup>	<col>	<thead>	<tbody>	<tfoot>
열을 그룹으로 묶음	<colagroup> 태그의 자식, 열 단위를 나눌 수 있음	표의 제목 열을 그룹으로 묶음	표의 일반적인 데이터를 묶음	표의 하단 영역을 묶음

*<col>*

span을 이용해 그룹으로 묶을지 설정
(Ex: <col span="5"> -> 5개의 열을 묶음)

 

 

시맨틱(Semantic) 태그

시맨틱 태그: 의미를 가지는 태그

 

시맨틱 태그의 장점

1.검색엔진 최적화

2.웹 접근성 향상

3.가독성 향상

 

->용도에 맞게, 적절히 사용해야함

---

이미지(img) 태그

<img> Tag: HTML 문서에 이미지 삽입

 

*속성*

src	alt	height	width
이미지 경로 지정(필수)	스크린 리더가 alt의 값을 읽음	이미지의 고유 크기	이미지의 고유 너비

 

오디오 태그

<audio> Tag: HTML 문서에 소리 삽입

src이나 <source>를 사용해 여러개의 소리 지정 가능

(여러 오디오 중 가장 적절한 소리를 브라우저가 선택)

 

비디오 태그

<video> Tag: HTML 문서에 영상 삽입

src이나 <source>를 사용해 여러개의 비디오 지정 가능

(여러 오디오 중 가장 적절한 비디오를 브라우저가 선택)

 

*속성*

controls	autoplay	loop	muted	preload	width,height	poster=" "
재생바 표시	자동 실행	반복 재생	소리 제거	파일을 어떻게 로딩할지 지정 (기본값: auto) preload="auto"	비디오의 높이, 너비 지정	<video>에서 사용, 비디오 재생 전 화면에 표시될 이미지 지정

 

하이퍼링크 태그

<a> Tag: href속성을 이용해 하이퍼링크 생성

(Ex: <a gerf="test.html">다른 페이지로 이동 </a>)

target="_black" -> 새탭에서 열기

 

---

폼(Form) 태그1

폼(Form) : 입력받는 데이터의 묶음

폼 데이터(Form Data) == 필드(Field) : 입력받는 데이터

 

웹에서 정보를 입력받기 위해 사용 (Ex: 로그인,회원가입,글쓰기 등)

 

*속성*

action	method
데이터가 도착할 서버 프로그램의 URL	양식을 제출할 때 사용할 HTTP 메서드 post: 데이터를 별도로 첨부해 전송(보안성, 활용성 좋음)(크기제한 X) get: 주소에 데이터를 추가해 전송(크기,중요도가 낮은 데이터에 이용)

 

Input 태그

<input> Tag: 데이터 입력받기 가능 (type 속성을 통해 다양한 방법으로 데이터 입력 가능)

 

text: <input> 태그의 기본값으로 한줄의 택스트를 입력받음

label: 입력받는 필드를 설명할 때 사용(<label 태그 하위에 <input>태그 위치 가능, id와 for을 사용해 <input> 태그와 연결 가능

 

1. lable태그 하위에 놓는 방법

<label>
이름:
<input type="text" id="name"

</label>

2. for과 id속성을 사용하여 label 태그와 연결

<label for="name">이름: </label>
<input type="text" id="name">

 

Form 데이터 태그 속성

required	readonly	disabled	autofocus	placeholder
입력값 필수 명시	필드를 읽기전용으로	비활성화 (해당 필드 전송 X)	자동으로 포커스 적용	입력필드가 비어있을 때 나타날 문구 삽입

 

checkbox : 여러 항목들 중 2개 이상 선택 가능(선택 시 value값이 서버로 전송)

 

radio: 여러개의 항목 중 1개 선택 가능(선택 시 value값이 서버로 전송)

*그룹으로 묶기 위해서는 같은 타입으로 지정해야함*

 

---

폼(Form) 태그2

 

<textarea> : 여러줄의 데이터 입력 가능

속성

rows	cols
화면에 표시되는 행의 수 지정	화면에 표시되는 글자수 지정

 

<select>: 옵션 메뉴를 제공(<option>으로 각 항목을 나타내고, <select>로 <option>태그를 감싼다.)

<select name="goods" id=""goods>
  <option value="10">사과10kg</option>
  <option value="20">사과20kg</option>
  <option value="30">사과30kg</option>
  <option value="40">사과40kg</option>
  <option value="50">사과50kg</option>
</select>

 

option 안의 내용은 사용자에게 보여지는 내용이고, 서버로 전송되는 값은 value 안의 값이다.

*속성*

selectd: <select>요소에서 선택된 항목을 가리킴

 

<datalist>: 다른 컨트롤에서 고를 수 있는 <option>을 여러개 담는다

*input tag의 list속성과 datalist tag의 id속성을 같게 해야함*

<button>: 버튼 생성 (버튼이 필요한 곳 어디에나 배치 가능)

submit	reset	button
버튼이 서버로 데이터 제출(기본값)	입력필드 초기화	주로 클릭 후 JS코드 명령할 때 사용

 

head안에 배치 할 수 있는 요소

<title>: 웹 페이지의 제목을 나타냄(텍스트만 포함 가능)

<bash>: 기준URL설정 (하나의 문서에는 하나의 <base>만 존재 가능)

<link>: 외부 리소스와의 관계 명시

<style>: 스타일 규칙을 담음

<meta>: 위의 테그로 표현 못한 정보를 표현

<script>: 데이터나 자바스크립트 코드를 웹 문서에 포함

 

---