FrontEnd
5/9 - HTML 태그, CSS 기본
Jiwon_Loopy
2025. 5. 11. 15:22
반응형
목차
Anchor 태그
- <a>
- 이동할 링크를 지정해주는 태그
- 하이퍼링크 속성 href와 함께 사용
- target 속성
- _blank 를 가장 많이 씀
- _blank
- 새 창
<a href = "url 또는 파일.확장자" target = "_blank"> 네이버 </a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="index.html">Go to Index</a>
</body>
</html>
- 클릭 시 하이퍼링크로 이동
미디어 태그
- 이미지 태그
- <img>
- src
- 경로
- alt
- 보여줄 수 없을 때 대체 텍스트 명시
- width, height
- 크기
- title
- 미리보기 말풍선
- src
- <img>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="img/miki.png" alt="Sample Image" width="300" height="100">
<img src="img/miki.png" alt="Sample Image" width="500" height="200">
<img src="img/miki.png" alt="Sample Image" width="300" height="200">
<img src="img/miki.png" alt="Sample Image" width="300" height="200">
<img src="img/miki.png" alt="Sample Image" width="300" height="200">
</body>
</html>
- 비디오 태그
- <video>
- src
- 경로
- width, height
- 크기
- controls=”controls”
- 재생
- src
- <video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="video/test.mp4" width="300" height="200" controls="controls">
Your browser does not support the video tag.
</video>
</body>
</html>
- 틀
- <iframe>
- 트래픽이 내 브라우저가 아닌, 외부 링크에서 발생
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://vjs.zencdn.net/8.22.0/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<iframe src="https://www.daum.net" width="500" height="500"></iframe>
</body>
</html>
- 소스 코드 복사를 통해 영상을 가져올 수도 있음
- 유튜부 영상 오른쪽 클릭 후 소스 복사
* form 태그
- 입력 양식
- 클라이언트에서 서버(프로그램)로 데이터를 전송하기 위해 사용
- 사용자한테 데이터 값을 입력 받기 위해 사용
- 태그
- method
- 전송 방식 (get)
- method의 종류
- get*, post*, put, delete …
- get
- 전송 시 주소 창에 노출
- Path, Query
- 주로 조회에 이용
- 전송량 제한
- post
- body에 담아 전송 시 주소 창에 노출되지 않음
- 전송량 제한 x
- 다른 사람한테 전달 x
- 파일 전송 가능 (멀티파트 폼 데이터)
- action
- 전송할 위치 (me)
- input 태그
- type 속성
- text
- 텍스트 입력
- password
- 비밀 번호 입력
- radio
- 라디오 버튼
- 이름이 같아야 함
- checked 되어있으면 해당 값 check
- checkbox
- 다중 선택 (배열로 받아야 함)
- 배열로 받을 때 parameterValue**s** (”hobby”), s 중요
- checked 되어있으면 해당 값 check
- file
- 파일 업로드
- anctype을 통해 파일 업로드를 위한 인코딩 방식을 지정해 주어야 함
- <form method ="" action="media.html" anctype="multipart/form-data">
- select
- 선택
- 스피너
- selected 되어있으면 해당 값 check
- mutiple
- 파일, 체크 박스 등에서 여러 개 중복 선택 가능
- hidden
- 숨김
- 필요한 값이지만, 굳이 볼 필요 없는 값을 지정할 때 사용
- button
- 버튼
- value 속성으로 버튼 속 텍스트 지정
- reset
- 지정된 값 모두 사라짐
- 초기화
- textarea
- 닫는 태그 존재
- 여러 줄 입력 유리
- number
- 숫자 올라가는 폼
- tel
- date
- tel
- url
- search
- range
- datetime-local
- month
- week
- time
- image
- date
- text
- 공통 속성
- name
- 파라미터 명
- value
- 변수 값
- 메서드 매개변수
- 변수 값
- index.do?&page=2&searchWord=검색어
- 여기서 page, searchWord가 파라미터 명
- 검색어, 2는 값
- name
- 기타 속성
- readonly
- 읽기 전용 (input)
- 전송은 됨
- disabled
- 사용 불가
- 전송 X
- placeholder
- 힌트
- 커서, 입력이 들어오면 사라짐
- autofocus
- 페이지 들어오는 순간 커서 위치
- autocomplete
- 사용자가 입력 했던 값들을 보여줌
- maxlength
- 최대 길이 제한
- required
- 요구 팝업
- ex) ! 이메일 형식이 옳지 않습니다.
- fieldset
- 폼 요소를 그룹으로 묶음
- regend
- 범례
- 그룹 묶는 곳에 제목을 붙임
- lable
- input 태그와 같은 폼 요소에 레이블을 붙일 때 사용
- id값을 통해 영역 지정에 사용 가능
- for를 통해 상호작용
- button
- 클릭 시 바로 전송
- readonly
- type 속성
- method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method ="" action="media.html" anctype="multipart/form-data">
<!-- enctype="multipart/form-data" : 파일 업로드를 위한 인코딩 방식 -->
아이디 : <input type="text" name="id" /><br />
<br />
비밀번호 : <input type="password" name="pwd" /><br />
<br />
성별 :
<input type="radio" name="gender" value= "1">남
<input type="radio" name="gender" value = "2">여<br />
<br />
취미 :
<input type="checkbox" name="hobby" value="1">게임
<input type="checkbox" name="hobby" value="2">독서
<input type="checkbox" name="hobby" value="3">영화
<input type="checkbox" name="hobby" value="4">낚시
<input type="checkbox" name="hobby" value="5">운동<br />
<br />
첨부파일 : <input type="file" name="profile" /><br />
<br />
최종학력 :
<select name="school">
<option value="1">고등학교</option>
<option value="2">대학교</option>
<option value="3">대학원</option>
<option value="4">박사</option>
</select><br />
<br />
<label for="intro">자기소개 :</label>
<textarea id="intro" name="intro" rows="5" cols="30" style="vertical-align: top;"></textarea><br />
<br />
<hidden name="hidden" name="no" value="hidden" /> <!-- 숨겨진 필드 -->
<input type="button" value="버튼" onclick="alert('버튼 클릭!')" /> <!-- 버튼 클릭 시 alert 창 띄우기 -->
<!-- 쿼리 스트링 전송 -->
<input type="submit" value="전송" />
<input type="reset" value="다시 입력" />
<br />
<br />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method ="post 또는 get" action="media.html">
아이디 : <input type="text" name="id" /><br />
비밀번호 : <input type="password" name="pwd" /><br />
<!-- 쿼리 스트링 전송 -->
<input type="submit" value="전송" />
<input type="reset" value="다시 입력" />
</form>
</body>
</html>
다양한 태그
- 줄바꿈
- <br>
- 인라인 태그
- 사용자 정의 영역 표현
- a, img, span …
- 블럭 태그
- 독자적
- 자신의 내용만 한 라인으로 독점
- p, div…
- 맨 아래로
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#target">맨 아래로</a>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p id = "target" > 여기로</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
<p> ppppppppppppppppppppppppppppp</p>
</body>
</html>
공간 분할 (레이아웃)
- 자주 쓰는 태그
- span
- 인라인 태그
- 내부 요소 까지만
- 옆에 붙음 (인라인)
- div
- 블럭 태그
- 한 행 전체를 먹는다.
- 줄 바뀜 (블럭)
- span
CSS 기본
- 디자인적 요소를 입힐 수 있는 기술
- 형식
- 선택자 { 속성1: 속성값1; 속성2: 속성값2; … }
- ex) p태그에 스타일 적용 ⇒ 텍스트 단락의 글자를 가운데로 정렬, 글자색은 파랑
p { text-align : center; color : blue; } - 스타일
- 브라우저 형 기본 스타일
- 사용자 형 스타일
- 인라인 스타일
- 내부 스타일
- 외부 스타일
메모
- 웹 상의 절대 경로는 항상 / 로 시작
- 웹 상의 최상위 경로는 - 로 시작
- 웹 상의 기본 파일은 index.html
- 최상위 경로는 내 컴퓨터의 윈도우 상이 아닌 웹 상으로 치기 때문에 루트 폴더에서 더 상위경로로 갈 수 없음
- video.js
- HTML5에서 실행 가능한 동영상 플레이어 오픈 소스
- CDN
- 컨텐츠 딜리버리 네트워크
- 지구 곳곳에 저장해두고 각각 서버에 저장되어있는 내용을 지역과 가까운 곳에서 가져오는 개념
- 폼 태그 안에 있어야 제출이 적용됨
728x90
반응형