[과제] Sections 나눠보기
SVG / Canvas
SVG
- XML 기반의 2차원 그래픽
◽ HTML 태그의 집합으로 이루어짐
◽ CSS와 JavaScript로 컨트롤이 가능함
- 장점
◽ 확대 - 아무리 확대를 해도 이미지는 깨지지 않음
◽ 용량 - 이미지의 크기를 키워도 용량이 늘어나지 않음
- 단점
◽ 코드로 이루어져 있어, 복잡한 이미지의 경우 파일사이즈가 커짐
- 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용
사용방법
1. 이미지 태그로 사용하기
<img src="favicon.svg" alt="weniv favicon">2. CSS background 배경으로 넣기
button {
background: url(./favicon.svg) no-repeat 50% 50% / cover;
}3. 인라인으로 넣기
- SVG코드가 HTML문서 내에 직접 포함되므로 파일 크기가 커질 수 있음
- 캐싱이 되지 않아 성능 저하가 발생 가능
- 인라인 SVG가 많아지면 코드 가독성이 떨어짐
<button class="inline">
<svg
width="42"
height="42"
viewBox="0 0 42 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="42" height="42" rx="10" fill="#2E6FF2" />
<path
d="M32.9063 21C32.3019 21 31.8126 21.4808 31.8126 22.0748C31.8126 24.7075 29.6321 26.8504 26.9532 26.8504C24.2742 26.8504 22.0937 24.7075 22.0937 22.0748C22.0937 21.4808 21.6044 21 21 21C20.3956 21 19.9063 21.4808 19.9063 22.0748C19.9063 24.7075 17.7258 26.8504 15.0468 26.8504C12.3679 26.8504 10.1874 24.7075 10.1874 22.0748C10.1874 21.4808 9.6981 21 9.09369 21C8.48928 21 8 21.4808 8 22.0748C8 25.8932 11.1614 29 15.0468 29C17.5497 29 19.7497 27.7102 21 25.7733C22.2503 27.7102 24.4515 29 26.9532 29C30.8386 29 34 25.8932 34 22.0748C34 21.4808 33.5107 21 32.9063 21Z"
fill="white"
/>
<path
d="M15 18C16.1046 18 17 17.1046 17 16C17 14.8954 16.1046 14 15 14C13.8954 14 13 14.8954 13 16C13 17.1046 13.8954 18 15 18Z"
fill="white"
/>
<path
d="M27 18C28.1046 18 29 17.1046 29 16C29 14.8954 28.1046 14 27 14C25.8954 14 25 14.8954 25 16C25 17.1046 25.8954 18 27 18Z"
fill="white"
/>
</svg>
<span class="a11y-hidden">weniv</span>
</button>- SVG 이미지 파일을 사용하지만 별다른 조작을 하지 않는다면, HTML img태그나 CSS background 속성을 사용
- 이미지 조작이 필요하다면, 인라인으로 사용
Canvas
- JavaScript와 HTML 요소를 통해 그래픽을 그림
- 픽셀기반의 비트맵 방식
- 그래픽이 주작업인 게임에 적합
<body>
<!-- html에 캔버스 태그 생성 -->
<canvas
id="myCanvas"
width="200"
height="200"
style="border: 1px solid #000000"
></canvas>
<script>
// 캔버스 태그에 사각형 그리기
// 캔버스 객체 생성 및 컨텍스트 객체 생성
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 사각형 색상 및 크기 설정
ctx.fillStyle = "#e9e9e9";
ctx.fillRect(10, 10, 150, 150);
</script>
</body>video & audio
video
<video src-"비디오 경로"></video>
- video 태그의 속성
◽ controls : 재생, 정지 등 조작 메뉴 노출
◽ autoplay : 동영상 자동 재생
◽ loop : 동영상 반복 재생
◽ poster : 동영상 재생 전에 보여 줄 이미지
◽ preload : 페이지를 열 때 어떻게 미리 로드할지를 제어
◾ none : 비디오 파일을 미리 로딩 X / 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 빨라짐
◾ metadata : 비디오 파일을 미리 로딩 X / 파일의 메타데이터 (ex. 영상길이)를 미리 가져옴
◾ auto : 비디오 파일을 미리 로딩 / 사용자가 바로 영상을 볼 수 있또록 준비
◽ src : 동영상 주소
◽ <track> : <audio> 혹은 <video> 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)를 보여주고자 할 때 사용
◾ kind : 텍스트 트랙의 종류를 지정 / subtitles(자막), captions(설명) 등을 지정 가능
◾ srclang : 텍스트 트랙의 언어를 지정
◾ label : 텍스트 트랙의 제목 지정
<video controls poster="batman.jpeg" preload="auto" width="450" height="300">
<source src="batman.mp4" type="video/mp4">
<source src="batman.ogv" type="video/ogg">
<source src="batman.webm" type="video/webm">
<track kind="subtitles" src="foo.en.vtt" srclang="ko" label="batman">
</video>
audio
웹 페이지에 오디오 컨텐츠를 포함할 때 사용
- audio 태그가 공식적으로 지원하는 표준 오디오 파일 : MP3 / WAV / Ogg
- audio 태그의 속성
◽ src : 파일의 경로 명시
◽ controls : 기본적인 동작을 조절하는 패널 명시
◽ autoplay : 자동 재생 여부 명시
◽ loop : 반복 재생 여부 명시
◽ preload : 파일의 내용을 모두 불러올지 여부 명시
<audio src="폴더/파일명" controls autoplay loop ></audio>
크로스브라우징
- 웹페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한대로 올바르게 나오게 하는 작업 (호환성)
- 크로스브라우지을 고려하지 않으면, HTML / CSS / javaScript 등 코드가 원하는대로 작동이 불가능
- 크로스브라우징이 필요한 이유
◽ 브라우저마다 렌더링 엔진이 다르기 때문에 필요함
렌더링 엔진
페이지를 렌더링할 때 실질적으로 페이지를 작업해주는 브라우저의 엔진
<audio controls>
<source src="flow.ogg" type="audio/ogg">
<source src="flow.mp3" type="audio/mpeg">
</audio>iframe
= inline frame
- 현재 웹페이지에 다른 HTML 페이지를 포함시켜 중첩하는 기능을 제공
- iframe 속성
◽ src : 삽입될 문서의 주소
◽ width : 너비 지정 (px, %)
◽ height : 높이 지정 (px, %)
◽ title : 콘텐츠의 제목 지정 / 접근성을 위해 사용하는 것을 권장
◽ frameborder : 테두리 표시 여부 (0 : 테두리 有 / 1 : 테두리 無)
◽ scrolling : 스크롤바 표시 유무 (yes, no, auto)
◽ longdesc : 내용을 설명하는 페이지
◽ marginwidth : left(좌), right(우), 여백공간(margin)
◽ align : 정렬(top, middle, bottom, left, right)
◽ allow : iframe에서 허용할 기능들을 지정
◽ allowfullscreen : 전체화면 지원
<iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/-iuX3r8PSzU"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>form
- 사용자로부터 입력받기 위한 양식을 작성하는 태그들을 통들어 일컫는 말
- 입력한 데이터를 제출, 전송하기 위해 사용하는 태그
- 별도로 제출할 필요가 없다면, 사용하지 않아도 됨
- 사용하는 예 - 단순히 입력받은 값을 화면에 뿌려줄 때
method 속성
- 양식을 제출할 때 사용할 HTTP 메소드
GET
<form method="get" action="http://naver.com">
<div>
<label for="user-name">이름</label>
<input id="user-name" type="text" name="name">
</div>
<div>
<label for="user-age">나이</label>
<input id="user-age" type="number" name="age">
</div>
<button type="submit">버튼</button>
</form>- http://example.com?name=홍길동&age=20
- 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송
- GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장
- 쿼리 문자열에 포함되어 전송되므로, 길이의 제한이 있음 (길이 제한은 각 브라우저마다 상이)
- 보안의 취약점이 존재하여, 중요한 데이터는 POST 방식을 사용
POST
- 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식
- 브라우저에 의해 캐시되지 않고, 히스트뢰에도 남지 않음
- 데이터의 길이제한은 없고, GET방식보다 보안성이 높음
- enctype 속성
◽ text/plain : 디버깅용 및 단순 텍스트 전송, 개발용으로만 사용 권장
◽ application/x-www-form-urlencoded : 기본값
◽ multipart/form-data : <input type="file"> 이 존재하는 경우 사용
<form
action="http://localhost:8000/"
method="post"
enctype="multipart/form-data"
>
<input type="text" name="myTextField">
<input type="checkbox" name="myCheckBox">Check</input>
<input type="file" name="myFile">
<button>Send the file</button>
</form>| POST | GET | |
| 전송 | 양식 데이터를 요청 본문으로 전송 | https://example.com?name=홍길동&age=20 |
| 캐시 | X | O |
| 길이제한 | X | O |
| 보안 | GET 방식보다 높음 | 취약 |
action 속성
- 양식 데이터를 처리할 프로그램의 URL을 작성
- 데이터를 어디로 보낼것인지 지정 / 반드시 유효한 URL 사용
- 속성을 지정하지 않으면, 데이터는 form이 있는 페이지의 URL로 전송
autocomplete 속성
- 입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄
- 이전에 해당 양식의 입력된 값이 있을 경우 (브라우저에 기록이 남아 있을 경우 나타남)
- off 자동입력 X
- on 자동입력 O (기본값)
input
공통속성
| type | input 양식 컨트롤의 유형 (ex. button, text, email, file ,,,) |
| name | input 양식 컨트롤의 이름 |
| value | input 양식 컨트롤의 값 |
| autocomplete | on / off 양식 자동완성 기능에 대한 힌트 (check, radio 제외) |
| placeholder | 양식 컨트롤이 비어있을 때 나타나는 내용 - 입력에 대한 힌트 제공 (ex. 숫자, 문자 조합의 6자 이상) |
| required | 양식 전송을 위해 필수로 입력해야 하는 값 |
| disabled | 비활성화 |
| readonly | 수정불가 (읽기전용) |
readonly VS disabled
- readonly : 사용자가 입력할 수 없으나 value가 있다면 값을 넘길 수 있음
- disabled : 사용자가 입력할 수 없고 기존 value가 있어도 넘길 수 없음
input의 다양한 유형
| button | 버튼 (기본행동 없음) / value로 버튼 텍스트 표시 |
| text | 텍스트 입력 |
| 이메일 입력 | |
| tel | 전화번호 입력 |
| password | 비밀번호 입력 (값이 가려져 *로 표시) |
| url | 웹페이지 주소 입력 |
| checkbox | 단일 값을 선택하거나 선택 해제 |
| radio | 선택 항목중 하나만 선택 |
| date | 날짜 입력(년,월,일) - 시간 없음 |
| datetime-local | 날짜와 시간을 지정 |
| month | 연과 월 입력 |
| time | 시간 입력 |
| file | 파일 업로드 |
| color | 색 선택 |
| number | 숫자 입력 |
| range | 슬라이드 바 형식 |
| search | 검색 문자열 입력 (삭제 아이콘 포함) |
| reset | form 내용을 기본적으로 초기화 |
| submit | 양식 전송 |
| hidden | 보이지 않지만 값은 서버로 전송하는 컨트롤 |
email, tel, url, numer와 같은 경우 text값으로 받지 않는 이유
- type을 통해 어떤 데이터를 받는지 예측 가능
- 코드의 가독성이 좋아짐
- 모바일에서 type에 따른 키패드 UI가 조금씩 다름
- 적절한 input type은 사용자의 경험을 개선시킬 수 있음
name
- 각 폼 요소에 고유한 이름을 부여
- 서버가 어떤 데이터인지 식별이 가능
- 모든 input, select, textarea 요소에 필수적으로 설정
value
- 사용자가 입력한 값이나 기본 값을 나타냄
- 폼이 제출될 때, name 속성의 값과 함께 서버로 전송
- 주로 input 요소에 사용
-> 이름 / 값 (name / value)의 짝으로 양식과 함께 전송
button / reset / submit
- <button type=" _____ "> 태그와 동일한 기능을 수행
<input type="button" value="버튼">
<input type="reset" value="초기화">
<input type="submit" value="전송">
<button type="button">버튼</button>
<button type="button">초기화</button>
<button type="button">전송</button>
text / password / url / search / tel
- minlength : 문자수 최소 길이
- maxlength : 문자수 최대 길이
checkbox / radio / checked
- checkbox
◽ 단일값을 선택하거나 선택 해제할 수 있는 체크박스
◽ 다중선택도 가능
◽ 각 체크박스는 서로 독립적으로 작동
◽ 하나의 체크박스를 선택하거나 해제해도 다른 체크박스에는 영향을 미치지 않음
<form>
<fieldset class="fieldset">
<legend>사용 기술</legend>
<input type="checkbox" name="html" id="html" />
<label for="html">HTML</label>
<input type="checkbox" name="css" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="js" id="js" />
<label for="js">JavaScript</label>
<input type="checkbox" name="python" id="python" />
<label for="python">Python</label>
<input type="checkbox" name="django" id="django" />
<label for="django">Django</label>
</fieldset>
</form>
- radio
◽ 동일한 이름(name)을 가진 라디오 버튼 중 하나만 선택 가능
<fieldset class="fieldset">
<legend>성별</legend>
<input type="radio" name="gender" value="male" id="male">
<label for="male">남성</label>
<input type="radio" name="gender" value="females" id="female">
<label for="female">여성</label>
<input type="radio" name="gender" value="no" id="no">
<label for="no">선택 안함</label>
</fieldset>
- checked : 체크 여부
file
- 파일 지정 가능
- accept : 허용하는 파일 유형을 지정 가능
- multiple : 지정할 경우, 사용자가 여러 개의 파일을 선택 가능
<label for="profile">프로필 이미지</label>
<input
type="file"
id="profile"
name="profile"
accept="image/png, image/jpeg"
>
number
- 숫자 입력 / 화살표 컨트롤 제공
- max : 최대값
- min : 최소값
- step : 증가값
label
- 사용자 인터페이스의 항목을 나타냄
- input과 함께 사용
◽ 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해 가능
◽ label을 클릭하여 input에 포커스를 이동시키거나 활성화 시킬 수 있음
- label 안에 a 또는 button과 같은 인터랙티브 요소를 배치 X
- label 안에 h 태그 등의 제목요소를 배치 X
for-id를 이용해 연결
<label for="user-id">아이디</label>
<input id="user-id" type="text">
label 안에 input 중첩하여 연결
<label>
아이디
<input type="text">
</label>
select
- 사용자가 여러 옵션 중에서 하나 또는 여러 개를 선택할 수 있게 함
- multiple : 여러 개의 항목을 동시에 선택 가능
- size : 한 번에 노출되는 항목의 수를 조절
- required : 선택 필수
- disabled : 선택 불가
option
- 메뉴의 각 옵션을 정의
- 모든 option은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요
◽ 지정하지 않은 경우, option 내 텍스트 값으로 사용
- selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옴
optgroup
- option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있음
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240612 CSS-01 (0) | 2024.06.26 |
|---|---|
| [EST] 240611 HTML-05 (0) | 2024.06.25 |
| [EST] 240607 HTML-03 (0) | 2024.06.24 |
| [EST] 240605 HTML-02 (0) | 2024.06.24 |
| [EST] 240604 HTML-01 (0) | 2024.06.24 |
