개발자 환경 구축 2일차(24/11/12)

웹프로그래밍/HTML

개발자 환경 구축 2일차(24/11/12)

wkun 2024. 11. 12. 17:59

◎ <hr> 요소

-구분선을 그을 때 사용

<hr> 요소에 사용할 수 있는 속성

속성	값	설명
align	left, center, right	수평선의 정렬 지정 (HTML 권고하지X, CSS파트)
noshade	noshade	수평선의 입체감 제거
size	pixels	수평선의 두께 지정
width	pixels, %	수평선의 상대적 넓이 지정

----------------------------------------------------------------------------------------

CONTENTS

Section4 태그와 멀티미디어

1.HTML5 문서에서 특수문자 처리 방법

2.기본태그

3.멀티미디어 태그

Section5 입력양식과 공간 분할 태그

1.HTML5와 입력 양식 요소

2.입력 양식 태그

3.공간 분할 태그

-----------------------------------------------------------------------------------------

Section4 태그와 멀티미디어

1.HTML5 문서에서 특수문자 처리 방법

<특수문자/키보드 입력값에 매칭되는 특수이름과 아스키코드 값>

특수문자/키보드	특수이름	아스키코드
<	<	<
>	>	>
&	&	&
ⓒ	©	©
Ⓡ	®	®
#	&num;	#
스페이스바(spacebar)

특수문자 출력하기

<body>

</center>

</header>

&num; 풀스택 개발자를 위한 웹 프로그래밍 &num;

<p></p>

HTML5 & CSS3 & JavaScript & JQuery

</article>

</section>

<small>

    ® 2017

</small>

</footer>

</body>

cf)-빈요소: br, hr img, input, meta, link 종료태그 없이 사용가능

(주의: 시작 태그 반드시 공백!! ex)<hr size=" "></hr>)

-br*숫자: 갯수 늘리기

2.기본태그

◎ <pre> 태그

-공백, 특수문자, 줄 바꿈 등도 사용자가 입력한 그대로 화면에 표시

pre 태그 사용하기

<body>

</center>

</header>

<pre>

### 풀스택 개발자를 위한 웹 프로그래밍 ###

HTML5 & CSS3 & JavaScript & JQuery

< 가격 : 35,000원 >

</pre>

</article>

</section>

<small>© 아이티에듀넷 ® 2017</small>

</footer>

</body>

cf)에러사항방지 위해 되도록 특수문자 사용할 것

ex)< 가격:> 띄우기/ <가격:> 붙이면 태그로 인식

◎텍스트 관련 태그

태그	설명	태그	설명
<b>	볼드체	<ins>	아래 밑줄
<em>	강조	<del>(=<s>)	가운데 선으로
<i>	이탤릭체	<mark>	하이라이트(Hightlight)
<small>	작게	<code>	컴퓨터 코드
<strong>	중요한 내용	<samp>	컴퓨터 프로그램 샘플 출력
<sub>	아래첨자	<kbd>	키보드 입력
<sup>	윗첨자	<var>	변수

텍스트 관련 태그 사용하기

<body>

</center>

</header>

<p><i>텍스트를 이탤릭체로</i></p>

<p><mark>텍스트에 하이라이트 표시</mark></p>

</article>

</section>

</body>

cf)<del> 대신 <s> 선처리 사용가능

◎ <a> 태그

-다른 사이트 혹은 같은 문서 내 다른 위로 이동할 때 사용, anchor(닻)

-href 속성값에 URL을 입력해 원하는 곳으로 이동

<a href="URL">

URL 표기유형

-절대경로: 특정파일이나 디렉토리의 위치를 나타내는 전체경로 ex)href="http://www.W3.org/index.html"

-상대경로: 현재 작업 디렉터리(폴더)를 기준으로 특정 파일이나 디렉터리를 나타내는 경로 ex)href="hello.html"

*<base> 태그에 기본 URL 지정

-페이지 내 요소 위치 표기: href="#top" ex)책갈피

1)웹주소(url)->절대O

http:// 상대O

2)PC 파일경로->절대X: 보안상 문제

C:// 상대O

3)VS Code 파일 경로->절대X: 구조가 바뀔 우려, 깨짐

상대O

C://~

*상대경로 이미지 현재위치표시

<img src="./dog.jpg"> 현재위치폴더

<img src="./img/dog.jpg"> 현재폴더

<img src="../dog.jpg"> 상위폴더

◎웹 사이트 간 이동

-href 속성: 연결하고자 하는 웹 사이트의 URL 지정

-target 속성: 링크를 클릭했을 때 웹 사이트가 열릴 곳 지정

속성값	설명
_blank	새로운 웹 브라우저 창
_self	현재 웹 브라우저 창(기본)
_parent	부모 웹 브라우저 창
_top	웹 브라우저 전체 영역

1)타깃 속성값에 따른 결과 확인하기

<body>

</center>

</header>

<a href="http://www.w3.org" target="_blank">W3C 사이트(blank wondow)</a><p/>

<a href="http://www.w3.org" target="_self">W3C 사이트(self wondow)</a><p/>

<a href="http://www.w3.org" target="_parent">W3C 사이트(parent wondow)</a><p/>

<a href="http://www.w3.org" target="_top">W3C 사이트(top wondow)</a><p/>

</article>

</section>

</body>

2)베이스 태그 사용하기

<head>

</head>

<body>

</center>

</header>

<a href="standards/" target="_blank">W3C STANDADS</a>

<P/>

<a href="Consortium/mission.html" target="_blank"> W3C MISSION</a>

<P/>

<a href="Constrium/facts.html" target="_blank">FACTS ABOUT W3C</a>

<P/>

<a href="Constrium/presskit.html" target="_blank">PRESS AND ANALYSTS</a>

<p/>

</article>

</section>

</body>

◎문서 내 특정 위치로 이동

책갈피 기능 사용하기

<body>

</center>

</header>

<P/>

</article>

</section>

...생략

...생략

...생략

...생략

</body>

◎이메일 링크

-<a> 태그의 href 속성값에 이메일 주소 작성

<a href="mailto: 이메일 주소">내용</a>

이메일 링크 걸기

<body>

</center>

</header>

</body>

*?: 마침

cf)설정-기본앱-메일 설정(로그인 해두기)

◎무순서 목록

-순서가 없는 목록

-<ul> 태그 사용, 각 항목은 <li> 태그로 입력

-목록의 각 항목 앞에는 불릿(bullet)이 붙음

cf) style="list-type:disc"(기본) /●

style="list-type:circle" /○

style="list-type:square" /■

style="list-type:none" /기호없음

◎순서 목록

-순서가 있는 목록

-<ol> 태그 사용, 각 항목은 <li> 태그로 입력

-목록의 각 항목에는 기본값으로 type="1"이 적용

cf)type="1" /1,2,3...

type= "A" /A,B,C...

type="a" /a,b,c...

type="Ⅰ" /Ⅰ,Ⅱ,Ⅲ...

type="ⅰ" /,ⅱ,ⅲ...

◎정의형 목록

-각 항목을 정의하기 위한 목록

-<dl> 태그 사용

-정의 한 각 항목은 <dt> 태그를, 각 항목에 대한 <dd> 태그를 사용

목록 출력하기

<body>

<ul>

<li>Coffie</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

</article>

</section>

<ol>

<li>Apples</li>

<li>Banana</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</article>

</section>

<dl>

<dd>- JavaScript</dd>

</dl>

</article>

</section>

</body>

cf) MDN Reference 태그 호환 확인

◎<table> 태그

-<tr> 태그: 행 생성, <td> 태크: 열 생성(기본값 보통글씨체, 왼쪽정렬)

-<th> 태그: 표의 머리를 정의, 셀 제목 글자를 강조하는 역할

표 만들기

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</article>

</section>

</body>

◎표 제목 삽입

-<caption> 태그 사용

◎셀 병합

-rowspan: 셀을 세로로 병합, 속성값으로 병합하고 싶은 행의 수만큼 지정

-colspan: 세를 가로로 병합, 속성값으로 병합하고 싶은 열의 수만큼 지정

1)셀 병합하기

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</article>

</section>

<p></p>

<tr>

</tr>

<tr>

</tr>

</table>

</article>

</section>

</body>

2)셀 병합하기

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</article>

</section>

</body>

◎시멘틱 태그

-<thaed>: 표 머리말

-<tbosy>: 표 본문

-<tfoot>: 표 꼬리말

◎임베디드 콘텐츠 태그

-멀티미디어 데이터를 웹 문서에 포함할 때 사용하는 태그

ex)<img>: 이미지 파일 삽입, <audio>: 오디오 파일 삽입, <video>:동영상 파일 삽입

*이미지 파일 특징

GIF(확장자 .gif)

-256개 색상만 지원하며 다른 파일에 비해 용량이 작음

-무손실 압축 방식 사용

-투명 이미지와 움직이는 애니메이션 이미지 만들 수 있음

JPG(확장자 .jpg)

-작은 용량으로 사진과 같이 섬세한 생상과 명암을 표현하기 때문에 웹에서 가장 맣이 사용

-손실 압축 방식

-GIF와 같은 투명 이미지나 움직이는 이미지는 만들 수 없음

PNG(확장자 .png)

-무손실 압축 방식사용하기 때문에 높은 품질의 이미지 처리할 수 있고 GIF와 같은 투명 이미지도 사용 가능

-이미지가 복잡할 경우 파일의 크기가 커지는 단점

◎<img> 태그

-웹 문서에 이미지 삽입시 사용

◎ <img> 태그 속성

-src: 이미지 파일이 지정된 경로 지정, 필수 속성
-alt: 이미지를 웹 브라우저에서 표시하지 못했을 경우 표시되는 대체 텍스트 지정
-width/height: 이미지의 가로, 세로 길이를 픽셀 단위로 지정(% 단위를 사용하면 웹브라우저의 크기에 따라 이미지 크기가 조절 되도록 지정 할 수 있음)

-style: 이미지의 스타일(크기, 위치 등)을 픽셀 단위로 지정
-border: 이미지 경계선의 두께를 픽셀 단위로 지정

1)이미지 삽입하기

<body>

</body>

2)이미지에 링크 걸기

<body>

<h3>이미지를 클릭하세요</h3>

</body>

3)이미지에 제목 붙이기

<body>

</figure>

</figure>

</body>

3.멀티미디어 태그

◎<audio> 태그

-웹 페이지에 오디오 파일을 삽입하는 태그

◎ <audio> 태그 속성

-scr: 재생할 오디오 파일이 저정된 경로 표시

-controls: 재생 제어기 표시

-loop: 반복 재생

-autoplay: 자동 재생

-muted: 음소거 상태로 시작

-preload: 미리 다운로드

◎<source> 태그

-여러 형식의 오디오 파일을 동시에 제공할 때 사용

-재생에 적합한 파일이 없다면 마지막 문장 출력

오디오 삽입하기

<body>

오디오 파일을 재생할 수 없습니다.

</audio>

</body>

◎<video> 태그 사용

-비디오 파일을 웹 문서에 삽입할 때 사용

- <source> 태그로 여러 가지의 비디오 파일을 동시에 제공

◎<video> 태그 속성

-scr: 재생할 비디오 파일이 저정된 경로 표시

-controls: 재생 제어기 표시

-width, height: 비디오의 가로/세로 크기 설정

-loop: 반복 재생

-autoplay: 자동 재생

-muted: 음소거 상태로 시작

-preload: 미리 다운로드

-poster: 비디오 파일이 재생되기 전이아 다운로드되지 않고 있는 경우 표시될 이미지의 URL을 표시

비디오 삽입하기

<body>

비디오 파일을 재생할 수 없습니다.

</video>

비디오 파일을 재생할 수 없습니다.

</video>

</body>

◎개체 삽입 태그

-이미지, 오디오, 비디오, 태그로 지원하지 않는 파일을 웹 문서에 포함하기 위해 사용

-<object> 태그, <embed> 태그가 있음

◎ <embed> 태그 사용 방법

◎ -<object> 태그 사용

개체 삽입하기

<body>

<h1>embed 태그 사용</h1>

<h1>object 태그 사용</h1>

</body>

Section5 입력양식과 공간 분할 태그

1.HTML5와 입력 양식 요소

◎웹 양식

-웹 문서에 어떤 데이터를 입력하고 그 결과값을 가져오기 위해 사용(검색)

◎폼 태그

-웹 양식을 만드는 데 사용하는 태그

-action: 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램(ASP, PHP, JSP... 등) 의 페이지 지정

-method: 웹 서버와 클라이언트 간의 통신 방법 지정(GET 방식, POST방식)

-type: 입력 양식의 모양과 기능 결정

-name: 폼의 이름 결정

◎GET 방식

-URL 뒤에 파라미터를 붙여서 데이터를 전달하는 방식

-사용자가 보내는 데이터는 이름과 값이 결합된 문자열 형태로 전달, 각 이름과 값의 쌍은 '&' 기호로 구분

·장점

-간편성: URL에 직접 데이터를 입력하거나 즐겨찾기 추가하여 간단하게 요청가능

-캐시사용: 요청한 결과를 재사용 가능

-가시성: URL에 데이터가 노출되어 쉽게 확인

·단점

-보안취약: URL에 데이터 노출이 되어 민감한 데이터는 위험(ID, PW, 주민번호 등)

-길이 제한: 최대 글자수 2,048자

GET 방식으로 데이터 전송하기

<!DOCTYPE html>

<head>

</head>

<body>

<p></p>

</form>

</body>

</html>

◎POST 방식

-HTTP Request 헤더에 파라미터를 붙여서 데이터를 전송하는 방식

-서버로 보낼 수 있는 글자수 제한 없음

-GET 방식과 비교하여 보안상 우위에 있음

·장점

-보안성: URL에 데이터가 노출되지 않음

-데이터 길이 제한 없음: 큰 용량 전송가능

·단점

-안전성: GET방식보다 느리고 무겁다

-캐시미사용: 동일한 요청을 반복적으로 보내야함

-복잡성: 데이터를 본문에 포함하여 전송하므로 처리가 복잡함

POST 방식 으로 데이터 전송하기

<!DOCTYPE html>

<head>

</head>

<body>

<p></p>

</form>

</body>

</html>

2.입력 양식 태그

◎제출 양식

-입력 데이터를 처리하기 위한 버튼 정의

-폼 태그의 action 속성에 지정된 파일로 값 전송

◎초기화 양식

-폼에 입력한 데이터 모두 초기화

◎텍스트 입력 양식

-기본적인 텍스트를 입력할 때 사용

텍스트 입력 양식 만들기

<body>

<form>

<p>이름:

</p>

<p>학번:

</p>

<p>학과:

</p>

<p></p>

</form>

</body>

◎비밀번호 입력 양식

-사용자가 입력한 문자를 보이지 않게 '...'로 처리

비밀번호 입력 양식 만들기

<body>

<form>

<p></p>

</form>

</body>

'웹프로그래밍 > HTML' 카테고리의 다른 글

개발자 환경 구축 4일차(24/11/14) (2)	2024.11.14
개발자 환경 구축 3일차(24/11/13) (6)	2024.11.13
개발자 환경 구축 1일차(24/11/11) (4)	2024.11.11

현재글개발자 환경 구축 2일차(24/11/12)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그