HTML text
hn 태그
<hn>제목</hn>n 자리에 1 ~ 6의 숫자 입력 → 크기별로 표시
br /, p 태그
p : 텍스트 단락을 만들어주는 태그
br / : 줄바꿈하는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text</title>
</head>
<body>
<!--Head Text 태그-->
<!-- 제목을 표기하는 태그-->
<!-- h1~ h6까지 존재하며 h1이 가장 중요한 제목 h6가 가장 덜 중요한 제목-->
<h1 style="color: blueviolet;">가장 중요한 제목입니다!</h1>
<h2>두번째로 중요한 제목입니다</h2>
<h6>가장 덜 중요한 제목입니다</h6>
<!--paragraph 태그 <p></p>-->
<!-- 단락을 표시하는 요소 -->
<!--break 태그 <br />-->
<!--강제 줄바꿈을 지정하는 요소-->
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
<br />or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
<br />you need to be sure there isn't anything embarrassing hidden in the middle of text.
<br />All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
<br />It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.
<br />The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<br />The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br />Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br />Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
❗입력편집기에서 Enter을 통해 줄바꿈을 했다고 해서 브라우저상에서도 줄바꿈이 되지 않는다. br /을 통해서 줄바꿈을 해줘야 브라우저상에서도 줄바꿈이 이뤄진다.
strong, b, em, i 태그
strong : 텍스트를 ‘굵게 강조’할 때 사용하는 태그
b : 텍스트를 ‘굵게 표시’할 때 사용하는 태그
em : 텍스트를 ‘기울여 강조’할 때 사용하는 태그
i : 텍스트를 ‘기울여 표현’할 때 사용하는 태그
<!--Strong, Emphasis-->
<!-- 특정한 단어 혹은 문장을 굵게 강조 하고 싶을때 Strong-->
<!-- 특정한 단어 혹은 문장을 기울여 강조하고 싶을때 Emphasis-->
<p>There are many <strong>variations</strong> of passages of
<em>Lorem Ipsum</em> available</p>
</body>
</html>
strong과 b 태그의 차이점
strong의 경우 화면낭독기를 사용할때 강조해서 읽게된다.
→em과 i의 차이점도 유사한가?
화면낭독기
화면낭독기는 시각장애인이 컴퓨터나 스마트폰 등의 전자기기를 사용할 수 있도록 도와주는 보조기기입니다. 화면낭독기는 텍스트나 이미지를 음성으로 변환해주어 시각장애인이 들을 수 있도록 합니다. 또한 화면낭독기는 키보드를 통해 사용자의 명령을 받아들이며, 화면에 출력되는 정보를 음성으로 전달해줍니다. 이러한 기능들을 통해 시각장애인도 컴퓨터와 인터넷을 자유롭게 이용할 수 있게 되어 더 나은 정보 접근성을 제공합니다.
그리고 인터넷이 좋지못한 환경에서는 미리 보여주는 용도로 화면낭독기를 통해 파악을 할 수 있게 한다.
HTML Block & Inline
사진에서처럼, 속성연습이라는 h1에 해당하는 요소는 한줄전체를 차지하는 반면에 네이버, 요소설명이라는 a에 해당하는 요소는 텍스트가 주어진 공간만 차지한다.
h1은 block에 해당하고 a는 Inline에 해당하기때문에 화면에 저렇게 표시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block / Inline</title>
</head>
<body style="margin:0;"> <!--전체화면에 꽉차도록 설정해주었다-->
<!-- Block-->
<!-- <hn>, <p>, <div> 요소들은 전체를 차지한다-->
<!-- 디스플레이의 가로너비 전체를 차지한다.-->
<div style="background-color: #990000;">안녕하세요</div>
<!--Inline-->
<!--<a>, <img>, <span> 요소들은 그 구역만을 차지한다-->
<!-- 내용물의 사이즈만큼 가로너비를 차지한다-->
<span style="background-color: #000099;">안녕하세요</span>
<span style="background-color: #009900;">안녕하세요</span>
</body>
</html>
배경화면 색깔의 변화를 통해서 block와 Inline이 차지하는 구분을 가시적으로 볼수 있다.
HTML List & Table
ol, li 태그 / 순서가 있는 리스트
ol : ordered list
li : list
ol태그의 타입 속성
type = “1” : 숫자 (기본값)
type = “a” : 영소문자
type = “A” : 영대문자
type = “i” : 로마 숫자 소문자
type = “I” : 로마 숫자 대문자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List / Table</title>
<!--테이블과 th, td에 스타일 지정을 위한 코드-->
<style>
table, th, td{
border: 1px solid black;
}
thead{
background-color: black;
color: azure;}
tfoot{
background-color: beige;
}
</style>
</head>
<body>
<!-- Ordered List-->
<!-- 순서가 있는 리스트-->
<!-- 리스트의 아이템을 지정할 땐 <li></li> 요소 사용-->
<!-- 순서가 있는 리스트를 사용하면 첫 아이템이 숫자 1부터-->
<!-- 번호가 자동 지정된다-->
<ol>
<li>자바</li>
<li>MySQL</li>
<li>HTML</li>
</ol>
<!--type 속성-->
<!-- type 속성을 사용하면 숫자(1), 영 대소문자(a, A),
로마숫자 대소문자로(i, I)-->
<!-- 표기 가능-->
<!-- Start 속성-->
<!-- start 속성을 사용하면 지정한 위치부터 순서대로 표기가능-->
<ol type="I" start="5">
<!-- 로마숫자 대문자 5부터 시작하는 형태로 지정가능-->
<li>자바</li>
<li>MySQL</li>
<li>HTML</li>
</ol>
ul, li 태그 / 순서가 없는 리스트
리스트 쓸때는 ol보다는 ul을 더 많이 쓰게 된다.
ul : unordered list
li : list
<!-- unordered list-->
<!-- 순서가 없는 리스트-->
<!-- 순서가 없는 리스트를 사용하면 ●, ■이 붙어서 표기된다-->
<ul>
<li>자바</li>
<li>MySQL</li>
<li>HTML</li>
</ul>
Table
SQL에서 만든 테이블과 동일. 행과 열로 구성된 셀로 이뤄진다
table, caption 태그
table ~ /table 태그 : 표를 생성
table 태그 작성만으로 표가 만들어지지 않는다.
→ 태그 안의 행과 각 행의 셀의 개수를 지정해야한다.
tr, td, th 태그
tr : 행 생성
td, th : 셀 생성
td와 th의 차이점
HTML에서 th와 td는 테이블에서 각 셀을 나타내는 데 사용되는 두 가지 요소입니다.
th 요소는 "헤더 셀"을 나타내며, 일반적으로 표의 첫 번째 행이나 열에 위치합니다. th 셀은 일반적으로 굵은 글꼴로 표시되며, 해당 열이나 행의 제목을 나타내는 데 사용됩니다. 또한 스크린 리더를 사용하는 사용자들이 웹 페이지를 탐색할 때 중요한 정보로 인식됩니다.
td 요소는 일반적인 "데이터 셀"을 나타내며, th와 달리 간단한 텍스트 또는 이미지 등 다양한 종류의 데이터를 포함할 수 있습니다. 데이터 셀은 일반적으로 일반 글꼴로 표시됩니다.
따라서 간단히 말하면 th는 제목 셀이고 td는 데이터 셀입니다. th는 일반적으로 표의 구성 요소에 대한 요약 정보를 제공하고, td는 구체적인 데이터 값을 나타냅니다.
<!-- Table -->
<!-- 행과 열로 구성되어 있는 데이터집합 표시-->
<!--<table></table> 태그로 테이블임을 명시-->
<!-- <tr></tr>태그로 하나의 행을 명시-->
<!-- <td></td> 태그로 행의 열을 명시-->
<table>
<tr>
<td>전공 자바 프로그래밍</td>
<td>프로그래밍 언어 활용</td>
</tr>
<tr>
<td>전공 자바 프로그래밍2</td>
<td>프로그래밍 언어 응용</td>
</tr>
</table>
thead, tbody, tfoot 태그
표의 구조화를 지정하는 태그
<!-- <thead> <tbody> <tfoot>-->
<!-- 테이블을 헤드, 바디, 풋으로 구조화를 시켜주는 요소-->
<br />
<table>
<thead>
<tr>
<th>교육</th> <!--중앙정렬되면서 굵게표시됨-->
<th>능력단위</th>
</tr>
</thead>
<tbody>
<tr>
<td>전공 자바 프로그래밍2</td>
<td>프로그래밍 언어 응용</td>
</tr>
<tr>
<td>전공 자바 프로그래밍2</td>
<td>프로그래밍 언어 응용</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2개</td>
<td>2개</td>
</tr>
</tfoot>
</table>
<br />
rowspan, colspan 태그
rowspan : 행을 합치는 속성
colspan : 열을 합치는 속성
<!-- colspan / rowspan-->
<!-- 행의 사이즈를 오른쪽으로 지정한 값만큼 증가시키는 속성-->
<!-- 열의 사이즈를 아래쪽으로 지정한 값만큼 증가시키는 속성-->
<table>
<thead>
<tr>
<th>교육</th>
<th>능력단위</th>
</tr>
</thead>
<tbody>
<tr>
<td >전공 자바 프로그래밍2</td>
<td >프로그래밍 언어 활용</td>
<td>활용</td> <!--추가-->
</tr>
<tr>
<td>전공 자바 프로그래밍2</td>
<td>프로그래밍 언어 응용</td>
<td>응용</td> <!--추가-->
</tr>
</tbody>
<tfoot>
<tr>
<td>2개</td>
<td>2개</td>
</tr>
</tfoot>
</table>
이렇게 표시될때 능력단위 열 안에 활용과 응용을 포함시키고 싶은 경우
<table>
<thead>
<tr>
<th>교육</th>
<th colspan="2">능력단위</th> <!--행의 범위 추가-->
</tr>
</thead>
<tbody>
<tr>
<td >전공 자바 프로그래밍2</td>
<td >프로그래밍 언어 활용</td>
<td>활용</td>
</tr>
<tr>
<td>전공 자바 프로그래밍2</td>
<td>프로그래밍 언어 응용</td>
<td>응용</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2개</td>
<td>2개</td>
</tr>
</tfoot>
</table>
</body>
</html>
<table>
<thead>
<tr>
<th>교육</th>
<th colspan="2">능력단위</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">전공 자바 프로그래밍1</td>
<td >프로그래밍 언어 활용</td>
<td>활용</td>
</tr>
<tr>
<td>전공 자바 프로그래밍2</td>
<td>프로그래밍 언어 응용</td>
<td>응용</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2개</td>
<td>2개</td>
</tr>
</tfoot>
</table>
전공 자바 프로그래밍1의 열 범위가 2가 되면서 기존의 자바프로그래밍2가 능력단위 열로 밀리게 된다. → 능력단위에 td가 추가된것과 같은 양상
→ 전공자바 프로그래밍2를 제거해줌
<table>
<thead>
<tr>
<th>교육</th>
<th colspan="2">능력단위</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">전공 자바 프로그래밍1</td>
<td rowspan="2">프로그래밍 언어 활용</td>
<td>활용</td>
</tr>
<tr>
<!--<td>전공 자바 프로그래밍2</td>-->
<td>프로그래밍 언어 응용</td>
<td>응용</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2개</td>
<td>2개</td>
</tr>
</tfoot>
</table>
프로그래밍 언어 활용의 열 범위가 2가 되면서 기존의 프로그래밍 언어 응용이 한 열 밀리게 된다. → 새 td가 추가된것과 같은 양상
→ 프로그래밍 언어 응용을 제거해줌
능력단위열에 해당하는 활용 응용부분의 tfoot부분에 공백이 생긴다
이 부분의 tfoot 행범위 증가 시켜주기
<table>
<thead>
<tr>
<th>교육</th>
<th colspan="2">능력단위</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">전공 자바 프로그래밍2</td>
<td rowspan="2">프로그래밍 언어 활용</td>
<td>활용</td>
</tr>
<tr>
<!--<td>전공 자바 프로그래밍2</td>-->
<!--<td>프로그래밍 언어 응용</td>-->
<td>응용</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2개</td>
<td colspan="2">2개</td>
</tr>
</tfoot>
</table>
</body>
</html>
HTML Image
alt속성
대체텍스트로 이미지를 시각장애인들도 이미지를 이용할수있어야한다
이미지에 왔을적에 alt가 선택되면 설명을 해준다 이미지가 뜨지 않았을적에(경로상에 존재하지않거나 외부서버가 중단된 경우) 대체용텍스트를 먼저 띄워주게된다
HTML Media
http
http://127.0.0.1:5500/html-list-table.html
http 통신 request response
이 브라우저가 통신을 통해서 127.0.0.1:5500서버로 html-list-table.html달라는 요청을 보내면 그 서버가 html-list-table.html리소스를 보고 해당 리소스에 대해서 파일을 갖고 있다면 파일을 반환해주고, 없다면 404 에러를 보내준다.
각자의 컴퓨터에서 http://192.168.1.101:5500로
요청을 보내면 /html-list-table.html이 있는지 응답을 반환하는것
요청한 브라우저에 html코드를 적용시켜서 보여주는것이다...
많은 요청이 있는데 브라우저가 하는 요청은 get 요청만 하게된다
http 통신을 통해서 127.0.0.1:5500서버로 /attribute/html-attribute.html달라는 요청을 보내면 그 서버가 /attribute/html-attribute.html리소스를 보고 해당 리소스에 대해서 파일을 갖고 있다면 파일을 반환해주고, 없다면 404 에러를 보내준다.
이 경우는 http가 아닌 내 컴퓨터안의 파일 경로를 보여주는것
object, embed 태그
object : html문서에서 각종 멀티미디어를 다루기 위한 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media</title>
</head>
<body>
<!-- Object 요소-->
<!-- html문서에서 각종 멀티미디어를 다루기 위한 요소-->
<object width="900" height="500" ⭐data="https://koreascience.kr/article/JAKO200912651517978.pdf"></object>
<!--pdf파일을 넣을수 있다.-->
<object width="400" height="300" data="https://youtu.be/rjlejRPDYQU"></object>
<!--이건 유튜브라서 적용이 안되고 직접 영상파일같은걸 적용해야한다 mp4같은 파일들-->pdf파일이 삽입된걸 확인할 수 있다.
Embed :
<!-- Embed 요소-->
<!-- HTML 문서에서 각종 멀티미디어를 다루기위한 요소-->
<embed width="500" height="500" ⭐src="https://koreascience.kr/article
/JAKO200912651517978.pdf" ⭐/> <!--닫는태그없다!-->pdf파일이 삽입된걸 확인할 수 있다.
object, embed의 차이점
embed 태그와 object 태그는 모두 웹 페이지에 외부 미디어 콘텐츠를 포함시키기 위해 사용되는 HTML 태그입니다.
embed 태그는 대개 오디오나 비디오 콘텐츠를 웹 페이지에 삽입할 때 사용됩니다. 이 태그는 보통 브라우저에 내장된 플러그인(예: Flash Player)을 통해 오디오나 비디오 콘텐츠를 재생합니다.
반면에, object 태그는 embed 태그보다 더 많은 옵션을 제공합니다. 이 태그는 외부 콘텐츠를 임베드하면서 동시에, 해당 콘텐츠에 대한 대체 콘텐츠(alternate content)를 제공할 수 있습니다. 또한, object 태그는 브라우저나 플러그인 등의 환경에 따라 다른 콘텐츠나 설정을 제공할 수 있는 유연성을 가지고 있습니다.
또한, embed 태그는 HTML5에서는 사용이 권장되지 않으며 대신 video 태그나 audio 태그를 사용하도록 권장하고 있습니다. object 태그는 여전히 사용이 가능하지만, 대체로 좀 더 복잡하고 번거로운 구문을 필요로 하기 때문에, 더 단순한 구문을 가진 video 태그나 audio 태그를 사용하는 것이 권장됩니다.
Audio, Video 태그
오디오와 비디오 파일을 삽입
속성 종류
controls : 플레이어 화면에 컨트롤 바를 표시
autoplay : 오디오나 비디오를 자동으로 실행
muted : 오디오나 비디오의 소리를 제거
poster=”파일 이름” : video 태그에서 사용하는 속성 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지 지정 = 썸네일
<!--audio / video 요소-->
<!-- 오디오와 비디오를 위한 HTML요소-->
<audio src="/asset/SAMPLE_1.MP3" controls muted autoplay></audio>
<video src="/asset/remark.mp4" controls muted
poster="/attribute/sun.png"></video>
</body>
</html>muted autoplay를 설정해두면 음소거인채로 바로 실행되게 된다.
muted autoplay를 설정해두면 음소거인채로 바로 실행되게 된다.
poster="/attribute/sun.png"설정을 하면 썸네일이 내가 지정한 사진으로 설정되고 플레이시 재생화면이 보이게된다.
HTML Hyper Link
<!-- 이미지 링크 구성-->
<a href="https://www.naver.com/">네이버</a>
<!--이걸 삽입하면 이미지 파일 누르면 네이버로 이동을 하게 된다-->
<a href="https://www.naver.com/"><img src = "./sun.png"></a>
네이버라는 텍스트 대신 이미지파일을 삽입하면 지정한 이미지를 클릭시 네이버화면으로 바뀌게 할 수 있다.
