오늘은 HTML에 대해 배웠다.
HTML이란?
HTML을 역사 알기위해선 옛날 인터넷의 시대를 거슬러 올라가면 되는데
인터넷은 원래 전쟁시절에 사용하기위해 만들었다고한다. 그러던 와중 민간인에게 풀어놓은게
인터넷으로 발전했고 그 중 마이크로소프트가 만들어낸 XHTML(Extensible Hypertext Markup Language)은 HTML과 동등한 표현 능력을 지닌 XML 마크업 언어로, HTML보다 엄격한 문법을 가진다. 과 다른 사람들이 뭉쳐서 만든 HTML이 있었는데 마소는 독점욕이 강해서 혼자서만 독점하려고 아주 아주 사용하기 힘들게 만들었다.
그 때문인지 사람들은 안쓰기 시작했고 결국 HTML5에서 포기하고 합쳐졌다고 한다..
HTML은 프로그래밍 언어가 아니다.
마크업 언어라고한다.
프로그래밍 언어는 자바, 파이썬, C 이렇게 프로그램의 구현을 위해서 작성하는 언어가 프로그래밍 언어이고
마크업 언어는 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다. 데이터를 기술한 언어라는 점에서 프로그래밍과 확실하게 차이가 난다.
또 튜링 머신에서 튜링 완전하기 위해서는 조건 분기문을 가지고 있고 메모리의 임의의 값을 수정할 수 있어야 한다. 하지만 마크업 언어는 이러한 과정을 하지 못하기 때문에 튜링 완전하지 않으며 프로그래밍 언어의 정의에 부합하지 않는다.
그럼 이제 설치환경을 구축해보자.
HTML은 프론트엔드, 백엔드 구분에서 프론트 엔드로 들어가며 프론트 엔드는 다들 VSCODE를 애용한다고 한다.
그러니 우리도 특화되있는 VSCODE를 사용하여 공부하면 된다.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
에 가서 VS코드를 설치하고
왼쪽에 테트리스 같은 모양을 눌러서 위 설치프로그램중 필요한 것을 다운받아서 설치하면 된다.
그럼 기본세팅이 끝나게 된다.
바로 시작해보자
<!DOCTYPE html> <!-- html문서 형식 선언-->
<html lang="ko"> <!-- html문서의 시작, 끝을 표시해주는 태그
lang속성은 페이지가 어느나라 언어로 되어있는지를 표시-->
<head>
<meta charset="utf-8">
</head>
<body>
Hello, world!
</body>
</html>간단하게 보는 HTML 기본 구성이다.
head 부분은 직역으로 머리부분을 나타내고 문서의 각종 정보와 제목, 설명 ,외부파일을 가져오는 것들을 작성 한다.
body 부분은 몸체, 즉 화면상에 출력해서 보여주고하는 모든 정보와 내용을 작성하게된다.
<head> <!-- 머리부를 나타냄 : 문서의 각종 정보 제목, 설명, 외부파일을 가져오는 것 등을 작성-->
<meta charset="UTF-8"> <!-- 종료태그 없음 -->
<meta name="generator" content="VScode"> <!--generator : 이 문서를 작성한 프로그램-->
<meta name="aythor" content="Dodle"> <!--해당 문서의 저자-->
<meta name="descriptrion" content="html을 공부하기위한 문서">
<title>글자관련태그</title>
</head>헤드부분만 집중적으로 보면 이렇게 보인다.
meta를 사용해서 저자라던가 .. 프로그램이라던가 .. 기본적인 정보를 적어준다.
이어서 몸체부를 뜯어보자
글자 관련 태그
제목 태그 h1~h6
<body><!--몸체부를 나타냄 : 화면상에 출력해서 보여주고자하는 모든 정보 / 내용을 작성하는 부분-->
<!--h관련 태그(h1~h6)-->
<h1>제목 태그입니다</h1>
<h2>제목 태그입니다</h2>
<h3>제목 태그입니다</h3>
<h4>제목 태그입니다</h4>
<h5>제목 태그입니다</h5>
<h6>제목 태그입니다</h6>
위부터 h1 ~ h6로 진행된다.
<hr> <!--수평선 넣는 태그-->
저렇게 줄 하나 그어져 있는게 <hr>의 역할이다.
문단을 나누는 태그 p
<h3>문단을 나누는 태그 : p, pre</h3>
<p>문단 영역을 나누는 테그로는 p태그와 pre태그가 있다.
p태그는 줄바꿈을 하고자한다면 별도의 태그를 작성해야한다. <br>
그리고 공백은 한개의 공백만을 표시하기 때문에
별도의 기호 문구를 기술해야 한다.
</p>
문단을 나누는 태그 pre
<pre>
pre태그는 시작태그에서부터 종료태그까지 입력된 내용을 그대로 표현하는 태그다
줄바꿈 이라던가 여러개의 공백을 바로 인식함
</pre>
<h3>그 밖에 글자를 다루는 태그들</h3>
일반글꼴(태그로 감싸지 않은 텍스트)
b
<b> b: 글자를 굵게 표시하는 태그</b>
strong
<strong>strong : 이것도 글자를 굵게 표시하는 태그 + 스크린리더</strong>
<!--웹 접근성 시각장애인 스크린리더 보다 더 강조하여 표시됨-->
em
<em>em : 글자를 기울여서 보여주는 태그</em>
i
<i>i : 글자를 기울여서 표시하는 태그</i>
mark
<mark>mark : 형광펜 효과를 주는 태그</mark>
u
<u>글자에 밑줄이 그어지는 태그</u>
s
<s>글자에 취소선을 넣어주는 태그</s>
small
<small>글자를 작게 표현해주는 태그</small>
sub
기본글자에 <sub>sub : 아래첨자 </sub>를 나타내는 태그의
<sup>sub : 윗첨자</sup>를 나타내는 태그--
address
<address title="internet of Thins">IOT</address>란 각종 사물에 센서와 통신기능을 사용
응용
<p>태그 중첩해서 사용해보기
<b><em>굵게, 기울여서보여주기 <em><b<br</em></em></b>
</p>
목록관련태그
순서 없는 목록태그
ul, li
<li>목록1</li>
<li>목록2</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
목록태그 중첩도 가능
<ul>
<li>HTML</li>
<ul>
<li>글자관련태그</li>
<li>목록관련태그</li>
</ul>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
순서 있는 목록태그
ol
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<!--기본적으로 1부터 시작하는 숫자값-->
<!--type속성을 이용해서 변경가능(속성값 : 숫자, A, a, i, l)-->
<!--start속성을 이용해서 시작값 변경가능-->
<!--reversed 속성을 이용해서 역순으로 표기가능-->
<ol type="i", start="5" reversed>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
설명과 관련한 목록태그
dl
<dl>
<dt>제목을 입력하는 태그</dt>
<dd>설명을 입력하는 태그</dd>
<dt>제목을 입력하는 태그</dt>
<dd>설명을 입력하는 태그</dd>
<dt>제목을 입력하는 태그</dt>
<dd>설명을 입력하는 태그</dd>
</dl>
표 관련 태그
표에 대해 간단한 사용법이다.
<!--
표 : 웹 문서에서 자료를 정리할 때 주로 사용
행과 열로 이루어져있고 ,행과 열이 만나는 지점을 셀이라고 함
표를 만드는 태그에는 <table>, <tr>, <th>, <td>가 있다.
<table></table> : 기본적인 표를 생성해주는 태그
<tr></tr> : 표의 한 행을 나타내는 태그
<th></th> : 표의 제목 셀을 나타내는 태그 -> 글자 굵게, 가운데 정렬
<td></td> : 표의 일반 셀을 나타내는 태그
<table>
<tr></tr>
<th></th>
<th></th>
<tr></tr>
<td></td>
<td></td>
<tr></tr>
<td></td>
<td></td>
</table>
-->
-기본적인 표 만들기-
<h1>기본적인 표 만들기</h1>
<table border="1"> <!--border 속성 : 표의 테두리 두께-->
<caption><b>웹 브라우저의 종류</b></caption>
<!--caption 테이블의 제목을 추가하는 태그 -->
<tr>
<th width = "120" height="50">브라우저</th><!--width, height속성을 이용해서 가로, 세로 길이 지정가능-->
<th width = "80">제조사</th>
<th width = "300">홈페이지</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>MS</td>
<td>https://www.microsoft.com</td>
</tr>
<tr>
<td>사파리</td>
<td>애플</td>
<td>https://www.apple.com</td>
</tr>
<tr>
<td>chrome</td>
<td>google</td>
<td>https://www.goolge.com</td>
</tr>
</table>
-표의 행과 열을 합치는 속성-
<!--
셀(th, td)테그의 속성을 이용해서 행 또는 열을 합칠 수 있음
colspan="2" : 2개의 열을 합치기
rowspan="2" : 2개의 행을 합치기
-->
<h3>이력서</h3>
<table border="1">
<tr>
<td width="130" height="130" colspan="2" rowspan="2">사진</td>
<td width="80" >이름</td>
<td width="200">도도도</td>
</tr>
<tr>
<td>연락처</td>
<td>010-0000-0000</td>
</tr>
<tr>
<td width="70" height="50">주소</td>
<td colspan="3">경기도 군포시 ooo ooo ooo ooo</td>
</tr>
<tr>
<td width="130">자기소개</td>
<td colspan="3">안녕하세요 저는 ooooooooooooooooooooooooooooooooooooooooooooooo</td>
</tr>
</table>
-5행 3열 표-
<h1>5행 3열 표</h1>
<!--5행 3열 표 만들기-->
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<th>reg</th>
<th>353</th>
<th>루라라라</th>
</tr>
<tr>
<th>ㄷㄹㅈ</th>
<th>342</th>
<th>루라라라</th>
</tr>
<tr>
<th>ㅎㄱㄷ</th>
<th>351</th>
<th>루라라라</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>총인원</th>
<td colspan="2">3명</td>
</tr>
</tfoot>
</table>
이미지 및 멀티미디어 태그
<img src="삽입하고자하는 이미지의 경로" [alt="이미지 설명 문구"] width="가로길이(px/%)" height="세로길이(px/%)">
src에는 상대경로를 alt에는 설명을 ! (시각장애인을 위해 스크린 리더로 이미지를 읽어주기도 한다. 또는 오류가 났을 시 대체 텍스트로 나온다)
<img src="resources\image\sample1.PNG" alt="멧땃쥐">
-width 속성과 height 속성-
-이미지의 가로, 세로 길이 조정가능<br>
-고정길이(px), 가변길이(%)로 지정 -> 기본 px
<h4>고정길이단위(px) : 화면사이즈가 조정이돼도 이미지 크기는 변하지 않는다.</h4>
<img src="resources\image\sample1.PNG" width="200" height="150" >
<img src="resources\image\sample1.PNG" width="200" height="100" >
<img src="resources\image\sample1.PNG" width="100" height="150" >
<img src="resources\image\sample1.PNG" width="100" height="100" >
<h4>가변길이단위(%) : 화면 사이즈 또는 부모요소 사이즈에 따라 이미지 크기도 변경</h4>
<img src="resources\image\sample1.PNG" width="10%" height="150" >
<img src="resources\image\sample1.PNG" width="15%" height="150" >
<img src="resources\image\sample1.PNG" width="15%" height="150" >
<img src="resources\image\sample1.PNG" width="20%" height="150" >
오디오 관련 태그 (잘 사용하지 않음, 옛날 싸이월드 느낌)
<!-- <audio str="" controls autoplay loop></audio>
src : 오디오파일경로
controls : 재생도구 출력여부
autoplay : 자동재생 여부 지정(크롬x)
loop : 반복재생 여부 지정
-->
<audio src="파일경로" controls loop></audio>
비디오 관련 태그(유튜브 느낌)
<!--
<video str="" control autoplay loop width="" height=""
poster="썸네일이미지 경로"></vidio>
-->
<video src="동영상이 저장된 경로" controls autoplay loop width=""></video>
영역 관련 태그
블럭요소 : 한 줄 단위로 영역을 차지함 (옆 공간을 다 못쓰게 하는 녀석들)
예) 줄 바꿈이 적용되어 이미 존재하는 태그의 다음줄에 다음영역이 잡힘 (p, pre, "div" ....)
인라인요소: content(내용) 영역에 해당하는 부분만 영역을 차지하는 요소
예) 줄바꿈이 적용되지 않아 다음 영역이 바로 옆으로 적힌다. (b, mark, s, img, "span" ...)
div 태그
<h2>div 태그와 span태그의 차이점 1 : 줄바꿈 적용</h2>
<h3>div 태그</h3>
<p>div 태그는 블럭요소로 한 줄 단위로 영역을 차지한다(이미 존재하는 태그 다음 줄에 영역이 잡힘)</p>
<div style="background: red;">첫번째 영억</div>
<div style="background: orange;">첫번째 영억</div>
<div style="background: yellow;">첫번째 영억</div>
span 태그
<h3>span 태그</h3>
<p>span태그는 인라인 요소로 content 영역만 차지(줄바꿈이 발생되지않고 옆으로 영역이 잡힌다.)</p>
<span style="background: red;">첫번째 영억</span>
<span style="background: orange;">첫번째 영억</span>
<span style="background: yellow;">첫번째 영억</span>
div태그와 span태그의 차이점2 : 영역지정방식이 다르다.
div 태그
<h3>div태그 : 사각형 박스로 영역을 지정</h3>
<div>
(서울=연합뉴스) 성서호 기자 = 정부가 전공의 집단 이탈에 따른 '의료공백'을 메우기 위해 1천억원이 넘는 예비비를 편성한 데 이어, 매달 2천억원에 육박하는 건강보험 재정을 투입한다.
보건복지부는 7일 의사 집단행동 중앙재난안전대책본부(중대본) 회의 결과 월 1천882억원 규모의 건강보험 재정을 지원하기로 했다고 밝혔다.
</div>
span 태그
<h3>span 태그 : 문장단위로 연결을 지정</h3>
<span>
(서울=연합뉴스) 성서호 기자 = 정부가 전공의 집단 이탈에 따른 '의료공백'을 메우기 위해 1천억원이 넘는 예비비를 편성한 데 이어, 매달 2천억원에 육박하는 건강보험 재정을 투입한다.
보건복지부는 7일 의사 집단행동 중앙재난안전대책본부(중대본) 회의 결과 월 1천882억원 규모의 건강보험 재정을 지원하기로 했다고 밝혔다.
정부는 전공의 집단사직에 따른 비상진료체계 운영 장기화에 대비해 기존에 시행 중인 과제들은 지원 기간을 연장하는 한편, 건강보험 재정 투입을 통해 이달 11일부터 새 지원방안을 추진한다.
우선 비상진료 기간에 '중증환자 진료체계'를 유지하고 적극적으로 진료한 기관에는 사후 보상을 추진하고, 경증환자를 하급병원으로 돌려보내는 회송에 대한 보상도 추가로 인상한다.
응급 상황에 대응하고자 교수 등 전문의가 중환자를 진료할 때 줄 정책 지원금도 신설한다.
심정지 등 응급상황에 대응하는 일반 병동 신속대응팀에 대한 보상도 강화한다.
이와 함께 응급환자의 신속한 전원과 24시간 응급의료체계 유지를 위한 보상도
</span>
iframe
<p>웹 문서 안에 다른 웹페이지를 추가하는 태그(인라인요소)</p>
<iframe src="04_이미지및멀티미디어태그.html" width="600" height="800"></iframe>
하이퍼링크 관련 태그
하이퍼링크 기능은 웹문서의 가장 핵심적인 기능
클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 해주는 기능
텍스트를 클릭해 링크를 이동하는 방법, 이미지를 클릭해서 넘어가는 방법 등 ..
페이지 내에서 링크를 통한 이동도 있음(상위로 올라가는 탑버튼)
a태그의 href 속성
<ul>
<li><a href="01_글자관련태그.html">글자관련태그</a></li>
<li><a href="02_목록관련태그.html">목록관련태그</a></li>
<li><a href="http://www.naver.com">네이버</a></li>
</ul>
target 속성
*target 속성 : 연결된 페이지를 어느탭에서 열건지 지정(_self(기본값), _blank(개발할 때 많이 씀))
<a href="http://www.google.com" target="_blank">구글사이트로이동</a>
<a href="http://www.daum.net" target="_self">다음사이트로이동</a>
왼쪽 구글을 누르면 새로운 인터넷 창에서 열리고
오른쪽 다음을 누르면 열려있던 인터넷 창에서 열린다.
img 태그( 사진누르면 링크로 이동)
<h3>*img 태그 이용해서 링크 만들기</h3>
<a href="http://www.w3schools.com" target="_blank">
<img src="resources/image/sample1.PNG">
</a>
응용(긴 글에서 한 번에 위로가는 거 만들기)
<h3 id="main">한 페이지 내에서 아이디 속성은 1개만 존재한다 / 이를 이용해서 점프하는 링크 만들기</h3>
<a href="#main">위로</a>
얼마나 밑에 있든 "위로" 를 누르면 제일 위로 이동하게 된다.
원리는 우리가 설정한 main을 찾아가는 것.
입력양식 및 홈 관련 태그
input태그
<h2>input태그</h2>
<p>사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크박스 등등을 만들 수 있다</p>
아이디 : <input type="text"> <br> <!--인라인 요소 : 블럭이였으면 한칸 아래로 떨어져야한다.-->
비밀번호 : <input type="password"> <br>
성별 : <input type="radio">남
<input type="radio">여 <br>
<input type="submit" value="회원가입">
form관련 태그
<form action="">
<h2>폼 관련 태그</h2>
<p>
form 태그 내에 submit 버튼 클릭 시 해당 form안에 작성된 <br>
사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할 수행
form action="" method ="" <br><br>
*action 속성 : 해당 form에 사용자가 입력한 값들을 전달하면서 요청을 보낼 서버의 경로 제시 <br>
*method 속성 : 요청 전송 방식을 지정하는 속성 (get(기본값) / post) <br>
> get방식 : 요청시 사용자가 입력한 값들이 url에 노출되는 방식 <br>
> post방식 : 요청시 사용자가 입력한 값들이 url에 노출이 되지 않는 방식 <br>
form 내에 submit 버튼 클릭시 action에 지정한 서버로 사용자가 입력한 값들이 <br>
넘어가면서 요청이 된다(key=value 세트로 전달)
</p>
<form action="search.do" method="get">
<fieldset>
검색어 : <input type="text" name="keyword"><!-- name은 전송 시 key값이 된다-->
<input type="submit" value="검색">
</fieldset>
</form>
<fieldset>
안녕하세요
</fieldset>
filedset, legend
<h3>filedset : 그룹을 묶는 태그(기본적으로 테두리가 존재)</h3>
<h3>legend : 해당 그룹의 제목을 붙이는 태그</h3>
<form action="test.do" method="post">
<fieldset>
<legend>제목1</legend>
입력 : <input type="text" name="text1"> <br>
입력 : <input type="text" name="text2"> <br>
</fieldset>
<fieldset>
<legend>제목1</legend>
입력 : <input type="text" name="text1"> <br>
입력 : <input type="text" name="text2"> <br>
</fieldset>
<input type="submit">
<input type="reset">
</form>
text와 관련된 input 태그의 타입
<h2>text와 관련된 input 태그의 타입</h2>
<h3>type = "text"</h3>
<p>
- 한줄짜리 텍스트를 입력할 수 있는 텍스트 상자(기본 값)
- 생략하거나 잘못쓰면 자동으로 type="text"
</p>
아이디 :
<input type="text" name="userid" placeholder="아이디를 입력햊쉐요" maxlength="12" required>
<br><br>
<input type="submit">
<h3>type="password"</h3>
<p>
비밀번호를 입력할 수 있는 텍스트 상자
</p>
비밀번호 :
<input type="password" name="usedpwd" placeholder="영문, 숫자, 특수문자 8~15" maxlength="15", required>
--
<h3>type="search" | url | email | phone"</h3>
<p>겉모습은 일반 텍스트 상자와 유사하지만 각각의 정보에 맞게 세분화된 기능 제공</p>
검색 :
<input type="search" name="keyword"> <br>
홈페이지 : <input type="url" name="keyword"> <br>
이메일 :
<input type="email" name="email"><br>
전화번호 :
<input type="phone" name="phoen"> <br>
<br><br>
<input type="submit">
textarea
<p> -텍스트 상자이나 여러줄을 입력할 수 있음</p>
<textarea name="descript" id="" cols="30" rows="10" style="resize: none;"></textarea>
숫자와 관련된 input 태그의 타입
nunber
<h2>숫자와 관련된 input 태그의 타입</h2>
<form action="test.co">
<h3>type="number"</h3>
<p> -숫자값만 작성 가능한 텍스트 상자
-스핀박스가 표시됨(스핀박스 : 위/아래 화살표버튼)
</p>
수량 :
<input type="number" min="0" max="20" step="5" value="5">
</form>
range
<h3>type="range"</h3>
<p>-슬라이드바를 통해 숫자 지정가능</p>
점수 :
<input type="range" name="score" min="0" max="100" step="20">
날짜 및 시간과 관련된 input 태그의 타입
<form action="">
<h3>type="date | month | week | time | datetime-local"</h3>
date : <input type="date"> <br>
<!--연도, 월, 일 입력받을 수 있는 텍스트상자-->
month : <input type="month"> <br>
<!--연도, 월 까지 입력받을 수 있는 텍스트상자-->
week : <input type="week"> <br>
<!--연도, 주 입력받을 수 있는 텍스트상자-->
time : <input type="time">
<!--오전 | 오후, 시, 분을 입력받을 수 있는 텍스트상자-->
</form>
select box
<h3>select box</h3>
<select name="asd" id="">
<option value="">파란색</option>
<option value="">빨간색</option>
<option value="">노란색</option>
<option value="">초록색</option>
<option value="">보라색</option>
</select>
양이 진짜 많다...
DB처음에 select 배우는 느낌이 스멀스멀 올라오고있다.
솔직히 어렵게 느껴지지는 않지만 양이 많아서 나중에 구현할 때 애먹지 않기 위해 복습해야 할 것 같다..
해보니까 마크업 언어가 뭔지 확실하게 느꼈다.
'HTML+CSS' 카테고리의 다른 글
| HTTP의 상태 코드(에러) 총정리! (0) | 2024.04.03 |
|---|---|
| HTML과 CSS에서 글꼴을 바꾸는 방법 (0) | 2024.03.11 |
| [2일차] CSS (0) | 2024.03.08 |
