웹 3일 (23.03.06)

Jane·2023년 3월 6일

IT 수업 정리

목록 보기

61/124

1. 설명

태그의 종류에는 3가지가 있다.
- 기능(동작) 태그 : 특정 함수가 동작을 하도록 프로그래밍이 되어 있다.
- 디스플레이 태그 : 화면에 표시되어 그려지는 태그들
- 둘 다 되는 태그
src의 경로
- 절대 경로 : 루트부터 시작하는 기준
  (C:\Users\USER\Documents\VSC_Workspace)
- 상대 경로 : 자신이 작업하는 폴더 기준
  ./ >> 자기 자신의 폴더
  ../ >> 자기 자신의 상위 폴더

MIME 타입 : 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘 / 브라우저가 인식할 수 있도록 정보를 준다.

txt 타입	image 타입	video 타입
text/plain = .txt text/html = .html text/css = .css	image/jpeg = .jpeg image/png = .png image/gif = .gif	video/mp4 = .mp4 video/ogg = .ogg

2. Markup

2-1. 리스트 관련 태그

ul : unordered list
ol : ordered list
li : list

2-2. 테이블 관련 태그

table : 전체 테이블을 감싼다.
- border : 테이블에 윤곽선을 넣어준다.
tr : table-row (테이블의 행)
td : table-data (테이블 행 안에 들어갈 내용)
- rowspan : 행 부분을 늘여서 사용
  (tr을 기준으로 적는다)
- colspan : 열 부분을 늘여서 사용
  (td의 개수에 따라 맞춘다)

<table border="1">
	<tr>
		<td colspan="3" rowspan="4">중간고사 성적 </td>
	</tr>
	<!-- 중간고사 성적이 들어가는 부분은 국영수와 다른 내용을 담고 있어서 다른 tr로 묶어준다. -->
	<tr>
		<td>국어</td>
		<td>영어</td>
		<td>수학</td>
	</tr>
	<tr>
		<td>100</td>
		<td>60</td>
		<td>80</td>
	</tr>
	<tr>
		<td colspan="2">평균</td>
		<td>80</td>
	</tr>
</table>

2-3. 이미지 관련 태그

img : 이미지를 담당하는 태그
- src : 이미지 파일의 경로를 적는다.
- alt : 이미지가 깨질 때 대체하는 텍스트
- style도 지정해줄 수 있다. (width="500" 등과 같이...)

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <p><img src="Navi_dr.png" alt="꿈 Story"></p>
    <p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png" alt="꿈 Story"></p>
    <p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr1.png" alt="꿈 Story"></p>
    <p><img src="Navi_dr.png" alt="꿈 Story" width="500"></p>
</body>

</html>

지금 작업하고 있는 이미지는 작업하고 있는 html과 같은 폴더 안에 있어야 한다. (상대 경로)
img src="aaa.jpg" 는 img src="./aaa.jpg" 로 표현할 수 있다.
(자기 자신을 표현한다)

2-4. 오디오 관련 태그 (HTML5부터 적용)

audio : 오디오를 담당하는 태그
- src : 오디오 파일의 주소 경로
- controls : 브라우저가 컨트롤할 수 있는 플레이어를 보여준다.
- autoplay : 자동재생
- loop : 반복

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <audio src="34ex1.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
</body>

</html>

2-5. 비디오 관련 태그

<!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>Document</title>
</head>

<body>
    <video controls="controls">
        <source src="./media/411.mp4" type="video/mp4" />
    </video>


    <video src="./media/411.mp4" controls="controls" type="video/mp4"></video>
</body>

</html>

2-6. 폼 태그

form은 form 태그만 있으면 동작하지 않는다.
form 태그 안에 submit button(input)이 있어야 동작한다.
- action : form을 제출하여 보낼 주소 (웹서버 프로그래밍으로 서버를 만들어야 한다.)
- method : 보내는 방식 (get / post)

	get 방식	post 방식
서버 전달 방식	URL에 폼 데이터를 추가 http://127.0.0.1:5500/practice02.html?uname=aaa&uid=id&upw=passworkd&uphone1=010&uphone2=1234&uphone3=5678&upic=&gender=w&lan=kor#	폼 데이터를 별도로 첨부하여 전달 head 안에 숨겨서 전달
HTTP 요청	브라우저에 의해 캐시되어(cached) 저장	브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.
데이터의 전송	쿼리 문자열(query string)에 포함되어 전송, 길이의 제한이 있다.	데이터는 쿼리 문자열과는 별도로 전송, 길이의 제한이 없다.
보안	비밀번호 등이 노출될 수 있으며, 보안에 취약하다.	get보다 보안성이 높다.

input type : text, password, file, radio, checkbox, submit 등
- text : 글자 입력 필드, size로 크기도 줄 수 있다., text 필드 하나에 name 하나.
- password : 글자가 마스킹되어 입력된다.
- file : 파일 업로드
- radio : 같은 이름을 가진 radio로 관리하며, value 값을 따로 준다.
  value는 하나만 고를 수 있다.
- checkbox : 같은 이름을 가진 checkbox로 관리하며, value 값을 따로 준다. (여기까지는 radio와 동일함)
  value는 여러 개 선택 가능하다. checked로 체크 표시된 상태로 보여줄 수 있다.
- submit : 누르면 어딘가로 제출할 수 있도록 한다. value값을 주면 원하는 단어로 바뀐다.
textarea : 크기에 따라서 자유롭게 입력하기
select : option을 선택하기
- 아무 것도 없으면 옵션을 하나씩 고를 수 있도록 한다.
- select multiple : 다양한 선택지를 볼 수 있으며, Ctrl과 같이 선택하면 다양하게 선택 가능하다.

3. block과 inline

block : 전체 가로 영역을 차지한다 / div, p, h1, li 등
inline : 내가 있는 부분만 자리를 차지한다 / span, img, audio, input 등

4. 예제 - 주간 히트 노래

(이미지와 오디오는 상대 경로)

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <table border="1">
        <tr>
            <td>
                <h1>주간 히트 노래</h1>
                <hr />

                <ol>
                    <li><a href="#"><img src="./img01.png" alt="1번">어머니 누구니</a></li>
                    <li><a href="#"><img src="./img02.png" alt="2번">한번 더 말해줘</a></li>
                    <li><a href="#"><img src="./img03.png" alt="3번">다른 남자 말고 너</a></li>
                    <li><a href="#"><img src="./img04.png" alt="4번">모두가 내 발아래</a></li>
                    <li><a href="#"><img src="./img05.png" alt="5번">조만간 봐요</a></li>
                </ol>
               <p>
                  <audio src="34ex1.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
              </p>
            </td>


        </tr>
    </table>
</body>

</html>

5. 기타 새로운 코드

hr : 한 줄 가로선을 추가한다.
a href="#" target="#" (target : 링크된 문서를 클릭했을 때 문서가 열릴 위치 설정)
- target = "_self" : 기본값. 현재 탭에서 뜨도록 한다. 생략 가능.
- target = "blank" : 새 창이 뜨도록 한다
- target = "_parent" : 현재 프레임의 부모 프레임에서 열기
- target = "_top" : 윈도우에서 열기
- target = "특정 프레임" : 특정 프레임에서 열기