html 5) Study

이제 웹 코딩을 배우기 위한 긴 여정을 시작합니다..

Web 표준은 html로 웹사이트 틀을 만들고, Css로 꾸며주고, Javascript로 동작시키는데.. 이것들은 각각 분리하여 작성되어야 나중에라도, 누구라도,, 알아보기 쉽고 유지 관리에도 도움이 된다!

░ 우선.. 이 Web 코딩 강좌는 html 5와 Css 3, Bootstrap 5에 의거하여(추가적으로, 약간의 자바스크립트 코드도 가미하고, 외부 플러그인 라이브러리들도 좀 써서) 작성되었음을 알리며 문을 엽니다 - 곧, 이 웹사이트의 모든 모양과 움직임, 다양한 효과 등은 다 그 자체로 이 강좌에 나오는 내용들을 바탕으로 해서 작성된 것입니다!

html 5) Study

이미지 다루기

░ 여기서는 웹문서에 이미지를 삽입하는 기본 방식을 간략히 살펴봅니다. 이미지 전반에 관련된 포괄적, 심층적 이해가 필요하신 분은 문서를 참조하십시오..

이미지 삽입하기
1. <img> 태그는 문서에 이미지 소스 를 삽입하는데, 닫는 태그는 없다. 여기서 alt 속성은 이미지 설명 인데, 스크린리더기는 이 값을 읽어 사용자에게 이미지에 관해 알려주기에 항시 넣어주는 것이 좋다:

이미지 소스가 없음 ㅡㅡ;

☞ 위 코드에서는 src에 적합한 이미지 소스가 없으므로 alt 속성에 주어진 값으로 대신 표시해주고 있다 ← 아니라면; 없는 이미지를 찾는다고 한참 더 버벅댈 수 있습니다 ㅡㅡ;

➥ alt 속성값에 빈 문자열("")이라도 넣어주는 것은; 예컨대, 단순한 장식용 이미지인 경우, 스크린리더기 등의 비시각적 브라우저에게는 이미지가 컨텐츠의 중요 부분이 아니므로 렌더링을 하지 않아도 된다는 의미로 전달되며, 나아가 이미지를 복사 & 붙여넣기할 때와 이미지 링크를 북마크할 때도 alt 속성에 들어있는 값을 사용하므로 SEO 차원에서도 유익하다!

2. 이미지의 너비(width)와 높이(height)를 (실제 크기로)넣어주고, alt 속성으로 (공란일지라도)대체 텍스트를 설정해주면; 브라우저는 네트워크 오류나 컨텐츠 차단, 죽은 링크 등의 이유로 이미지를 표시할 수 없는 경우에 툴팁으로 표시해준다 ← 이는 브라우저가 좀 더 빠르게 내려받도록 하는데도 도움이 되므로 웹사이트 최적화를 위해서도 유익하다!

☞ title 속성은 대부분의 태그에서 사용할 수 있지만, <img> 태그의 alt 속성을 대체하여 사용하는 것은 좋지 않다 - 이 속성으로 추가 정보를 제공할 수는 있겠지만, 꼭 알려야하는 중요한 정보라면; alt 속성을 사용해야 한다!

➥ width 및 height 속성을 써서 이미지의 크기를 지정해주는 것은 좋은 일이지만, 이미지의 크기를 조정하는 데 사용하는 것은 좋지 않다 - 이미지 편집도구를 써서 미리 올바른 크기로 조정하여 삽입해주는 것이 (다운로드 속도를 높이고 이미지 왜곡을 방지한다는 점에서)최선이고, 불가피하게 이미지의 크기를 조정해야 한다면; Css 스타일시트를 써서 설정해주는 것이 좋다!

░ 구글 에서는 사용자 인터페이스 디자인의 표준을 제시하는 동시에 폰트, 아이콘, 이미지 등 수많은 오픈소스(및 코드)를 제공하고 있으니 한번 들러 보십시오..

이미지맵 작성하기
<map>(& <area>)는 이미지 맵(클릭 가능한 링크 영역)을 정의한다. 이미지 맵을 작성하려면; 먼저, <img> 태그에서 이미지 소스 와 함께 맵이름 을 지정해주고, 다음, <map> 태그 안에서 그 맵이름 을 써서 <area> 태그로 이미지맵 영역들을 만들어주면 된다:

☞ <area> 태그에서는 맵의 모양(shape)과 좌표 영역(cords)을 지정한다

  • shape="rect" cords="x1,y1, x2,y2" 사각형의 좌상단 모서리 (x1, y1)좌표와 우하단 모서리 (x2, y2)좌표
  • shape="circle" cords="x,y, r" 원의 중심점 좌표(x, y)와 반지름(r)
  • shape="poly" cords="x1,y1, x2,y2, .., xn,yn[, x1,y1]" 다각형의 각 꼭지점 좌표들 ← 좌표값은 이미지의 좌상단 꼭지점을 기준으로 하는 px 단위임
400x200 이미지

☞ 마우스 포인터를 위 그림 위에서 움직이면서 풍선 도움말을 확인하십시오. 위 코드에서는 href 속성값을 비워두었지만, 필요하다면; 저 각각의 영역들에 웹문서 등을 링크해줄 수 있습니다 ← 여기서는 이미 알고 있는 사각형의 크기를 기준으로 각 영역의 범위를 지정해주었지만, 이미지 편집 프로그램을 이용하면 특정(모양에 맞추어진) 영역 좌표를 확인하여 설정해줄 수도 있습니다!

Webp 이미지
는 웹에서 이미지에 우수한 무손실 및 손실 압축, 알파 채널을 제공하는 최신 이미지 형식으로서, <picture>(& <source>) 요소와 함께 사용할 수 있다:
[ Webp 이미지 사용법 ]
jpg 이미지

반응형 이미지

░ 고해상도 이미지는 다운로드 시 시간상 지체 문제가 있을 수 있고, 기기간 화면 크기 및 가로/세로 방향에 따른 편차나 (텍스트를 포함한 이미지의 경우)축소 시 텍스트 내용을 알아보기 어려울 수 있다는 점 등의 문제가 발생할 수 있다 - 이러한 문제들을 해결하기 위해 나온 것이 바로 기법이다!

반응형 이미지
1-1. 동일한 이미지를 기기에 따라 더 크게 또는 더 작게 표시하고 싶을 때, <img> 태그의 srcset 및 sizes 속성을 이용하면; 화면 너비에 맞추어 서로 다른 이미지 파일을 지정해줄 수 있다: 이미지는 콤마로 구분하여 실제 크기별로(480w, 800w 등) 복수로 나열하는데, 브라우저는 먼저 기기 너비를 확인한 뒤, sizes의 미디어 조건에 맞는 srcset 이미지 파일을 찾아서 불러온다:
[ img 요소의 srcset 속성 (1) ] 
                                        
                                            <img
                                                srcset="img-480w.jpg 480w, img-800w.jpg 800w" ← 480w, 800w는 이미지의 (렌더링을 변경하기 위해 Css를 적용하지 않은)실제 px 너비를 의미한다
                                                sizes="(max-width: 600px) 480px, 800px" ← (뷰포트 너비가 600px 이하면); 480px 크기로, 그 이상이면; 800px 크기로 표시하라
                                                src="img-800w.jpg" ← 브라우저에서 위 코드들이 지원되지 않는다면; 여기로 온다!
                                                alt=""
                                            />

☞ sizes의 슬롯 너비에서, 절대너비(480px)를 제공하는 대신 뷰포트에 대한 상대너비(예컨대, 50vw)를 제공할 수는 있지만 %는 사용할 수 없다!

1-2. 가령, (뷰포트 크기가 거의 동일한)스마트폰만을 대상으로 한다고 가정하면; sizes 속성없이 srcset 속성만 사용하여 브라우저가 적절한 해상도의 이미지를 선택하도록 할 수도 있다:
[ img 요소의 srcset 속성 (2) ]

☞ 이미지의 크기를 Css에서 img { width: 320px; }로 정의하였다고 가정할 때, 접속한 디바이스의 디스플레이 해상도가 각 Css 픽셀당 디바이스 픽셀이 1개인 경우 1x, 2개 이상이라면 2x에 해당하는 이미지가 로드된다!

2. 다른 방식으로는, <picture>(와 <source>) 태그를 써서 이미지를 삽입할 수도 있다: 가령, 데스크톱에는 전체 장면을 보여주는 가로 이미지를, 모바일에는 주요 부분만 확대하여 보여주는 세로 이미지를 제공하는 등 다양한 기기 및 레이아웃에 맞게 잘린 이미지를 제공하려는 경우이다:
[ picture(& source) 사용하기 ]

☞ 위에서 <img> 요소는 맨 밑에 배치되어야 하며, 해상도를 더 세분화하고자 한다면; <source> 태그를 필요한만큼 추가해주면 된다!

➥ 웹브라우저가 시작되면 Css와 javaScript가 해석되기 전에 이미지가 먼저 로딩되는데, 이러한 작동 메커니즘은 반응형 이미지에는 도움이 되지 않고, 도리어 역효과가 날 수도 있기에 반응형 이미지를 위해서는 Css나 JavaScript보다는 html을 활용할 필요성이 생겨난다!

웹페이지 중간에 너무 큰 이미지가 포함된 경우, <img> 요소에서 지연로딩 속성(loading= "lazy")을 주면; 이미지가 뷰포트에 들어올 '가능성'(이는 브라우저가 알아서 판단한다!)이 있을 때까지 이미지 로딩이 지연되며, 이는 다른 급한 작업에 먼저 자원을 할당하게 하여 성능상의 이점을 가져올 수 있다 ← 이제 사용자가 화면을 스크롤하기 시작하면; 그 거리가 좁혀지고, 자바스크립트가 비활성화되면; 이 속성값은 자동으로 기본값으로 되돌려진다!

미디어 다루기

░ 미디어 삽입 시 보통 오디오 파일에는 <audio>, 비디오 파일에는 <video> 태그를 사용하는데, <source> 태그와 함께 사용하여 여러 미디어 파일을 지정해줌으로써 다양한 브라우저에 대응하도록 해주는 것이 바람직하다!

미디어 삽입하기
1. 아래 코드는 비디오 삽입의 기본 예인데, (위에서 아래로 순차적으로 내려가면서)<video> 태그 안의 어느 한 <source> 태그 및 맨 아래 배치한 대체 텍스트가 실행되면 나머지는 실행되지 않는다:

☞ 위 코드에서 controls 옵션은 컨트롤 막대를 표시하는데, 그 모양은 각각의 브라우저별 규격에 따라 서로 다르다!

여타 비디오 옵션들

<video> 요소의 여타 속성들로는 우선, autoplay(자동재생)와 loop(반복재생), muted(음소거) 등이 있는데, 모두 꼭 필요한 경우라면; 기본값(자동재생 안함, 반복재생 안함, 음소거 상태)으로 두는 것이 좋다!

나아가, (재생 직전 표시하는)스플래시 화면이나 광고 화면으로 쓸 수 있는 poster= "포스터 이미지", 대용량 파일의 버퍼링 여부를 설정하는 preload= "none/metadata"(기본값인 auto는 미리 다운로드하며, metadata는 메타 데이터만 미리 다운로드한다) 속성도 설정해줄 수 있다

2. <audio> 태그는 width와 height, poster 속성이 없다는 점만 제외하면, <video> 태그와 비슷하게 사용한다 - 그저 controls 속성을 넣어주는 것만으로 충분하다:

➥ 는 및 등을 재생해주는 인라인 미디어 플레이어이다. 한편, 는 이미지, iframe, 인라인 컨텐츠 및 비디오를 YouTube, Vimeo 및 자체 호스팅 비디오로 선택적으로 자동 재생해준다

자막 및 캡션 넣기
html 5)에서는 기본적으로 .srt 자막 파일을 지원하지만 모든 브라우저에서 공통적으로 지원하는 자막 파일은 .vtt인데, 안에 자막 내용과 시간을 담고 있다. 자막 파일(.vtt)을 연결할 때는 <track> 태그를 쓰는데, kind 속성에서 subtitles(자막) 및 captions(캡션) 여부를 지정해줄 수 있다:

☞ kind 속성의 caption 값은 주로 음향효과 및 기타 관련 오디오 정보가 포함된 스크립트 작성 및 번역에 사용한다!

[ WebVTT 자막 작성하기 ] 
                                        
                                            00:00:22.230 --> 00:00:24.606 // 시작시간 --> 종료시간
                                            자막 내용 // 한 줄 이상 가능, 밑에서 한 줄 띄우고..
                                            
                                            00:00:30.739 --> 00:00:34.074
                                            다음 자막 
    
                                            ..

Svg 이미지

░ Svg 이미지는 XML 텍스트 파일로 정의하기에 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며, 검색과 색인 및 압축도 가능하다. 또한, Svg 파일은 브라우저에서 캐시할 수 있으므로 페이지 내 여러 곳에서 사용하는 경우라면; 로딩 속도 측면에서도 유리하다

Svg 이미지 삽입하기
위치와 색상을 구성하는 픽셀 격자들로 이루어지는 Raster 이미지(JPEG, PNG, GIF)와는 달리, 알고리즘으로 꼭지점과 선, 색을 구성하는 Vector 이미지(SVG)는 용량이 적고 확대 시에도 화질이 떨어지지 않아 반응형 웹사이트에 적합하며, Css로 스타일을 지정하고 DOM이나 JavaScript에서 조작하는 것이 가능하기에 다양하게 활용할 수 있다
1. html 5에서는 <img> 태그로 Svg 이미지를 불러들일 수 있는데, src, alt 속성과 함께 width나 height 속성도 반드시 필요하다:

부트스트랩 로고

☞ <img> 요소에서 Svg 이미지를 사용할 때; 스크린리더기 등이 Svg 이미지를 인식하지 못하고 건너뛸수 있기에 role="img" 속성을 넣어줄 필요가 있다. 반면, 단순한 장식용 이미지일 뿐이라면; (그냥 건너뛰라고)role="none" 속성을 넣어줄 수도 있다!

2. 한편, Svg 이미지를 지원하지 못하는 브라우저에 대응하기 위해서 srcset 속성을 사용할 수도 있다:

☞ Svg를 지원하는 브라우저에서는 image.svg를 불러오고, 미지원 브라우저에서는 기본 image.png를 보여주게 된다!

인라인 SVG 작성하기
인라인 Svg를 쓰면; Css 스타일 설정이 가능하고, 소스 코드 자체를 수정할 수도 있다. 나아가, <a> .. </a> 요소로 감싸서 간단히 하이퍼링크를 만들 수도 있다
1. <svg> 태그로 인라인 Svg 이미지를 작성할 수 있는데(내부 컨텐츠는 위에서 아래로 순차적으로 렌더링된다), width나 height, xmlns 속성도 반드시 필요하다:
원

☞ Svg 문서의 좌상단 모서리는 x, y 좌표 (0, 0)이 되며, 한 지점의 위치는 좌상단 모서리에서 시작하는 px 단위(x축 양수는 오른쪽 방향, y축 양수는 아래쪽 방향)이다: <rect x="0" y="0" width="200" height="100"> ← 좌상단 모서리에서 시작하는 너비 200px, 높이 100px의 사각형

2. fill 및 stroke 속성은 SVG 도형이나 텍스트, 그라디언트 및 패턴의 색을 설정한다:

░ Svg 이미지는 직접 만들기보다는(너무 어렵습니다 ㅡㅡ;), 대개 같은 벡터그래픽 프로그램으로 만들어씁니다..

➥ SVG 뷰박스

기본적으로 Svg 문서의 1px 은 출력장치의 1px 에 매핑된다. - 곧, 사용자 단위와 화면 단위는 1:1의 비율로 동작한다: 지금 SVG 캔버스 전체 크기는 200 x 200 (px)이다. 그러나 viewBox 속성을 사용하여 (0, 0) 좌표에서 시작하는 100 x 100 Svg 이미지를 200 x 200 화면에 표시하고, 100 x 100 영역을 효과적으로 확대하여 이미지를 두 배 크기로 표시할 수 있게 된다!

[ 사용자 좌표계: 사용자 단위와 뷰포트 단위의 매핑 ]

☞ viewBox 속성은 사용자 공간에서 SVG 뷰포트의 시작 위치(min-x min-y)와 크기(width height)를 정의한다(값은 쉼표나 콤마로 구분한다). 그 결과, SVG 요소의 뷰포트(브라우저의 뷰포트가 아니다!) 경계에 매핑된 사각형의 사용자 공간이 생성되는 것이다!

➥ Svg 기본 도형들

<rect> 요소는 시작 지점(x, y), 너비와 높이(width, height) 및 사각형 둥근 꼭지점의 x, y 방향으로의 반지름(rx, ry)으로 정의된 Svg 사각형을 그려준다:

☞ 시작 지점(x, y), 너비와 높이(width, height) 등을 바꾸어가면서 감을 잡아보십시오..

<circle> 요소는 원의 중심 좌표(cx, cy)와 반지름 길이(r)로 정의된 Svg 원을 그려준다:

☞ 시작 지점 및 반지름 값을 바꿔줌으로써 간단히 반달 모양으로도 되고, 구멍난 원도 만들어지는군요..

<ellipse> 요소는 원의 중심 좌표(cx, cy)와 x, y 방면으로의 길이(rx, ry)로 정의된 Svg 타원을 그려준다:

☞ 여기서는, 두 타원을 같은 지점에서 출발시킴으로써 겹쳐봤습니다 ← <svg> 요소의 내부 컨텐츠는 위에서 아래로 순차적으로 렌더링된다는 점 기억하세요..

<line> 요소는 선의 시작점(x1, y1)과 종단점(x2, y2) 좌표로 정의된 Svg 직선을 그려준다:

<polyline> 요소는 연결된 직선들의 그룹으로서, 그 직선들의 모든 포인트는 points 속성 하나에 포함된다. 한편, 닫힌 다각형은 그저 첫 포인트와 마지막 포인트 지점을 같은 값으로 설정해주는 것만으로 만들어진다:

☞ 각 포인트는 반드시 (x, y) 좌표를 가져야하며 공백이나 쉼표, 줄바꿈 등으로 서로 구분된다 ← 곧, 포인트 목록 (0, 0), (1, 1)은 0 0 1 1이나 0 0, 1 1로 표기해준다!

폼 작성하기

░ Form에 입력한 정보는 웹서버로 보내지고, 웹서버에서는 웹프로그램을 통해 폼을 처리한 뒤 그 결과를 받아 다시 브라우저로 돌려주게 된다

입력폼 작성의 기본
1. <form> 태그 안에서 <fieldset> 태그는 폼 요소를 하나의 구역으로 묶고 외곽선을 그려주는데, 바로 아래서 <legend> 태그로 제목을 붙여주면 스크린리더기 등에 도움이 된다:
상품 크기 선택

☞ 라디오 버튼은 항시 <fieldset> 요소로 묶어주는 것이 좋다!

* cf) 설명과는 달리, 외곽선도 없고 폼 모양이 좀 다릅니다만, 이는 부트스트랩 기본 Css에 의해 변경된 때문이니 (html 본연의 모양을 보고싶다면)부트스트랩 Css를 주석 처리한 뒤 살펴보십시오..

2. <label>과 <input>를 함께 사용하여 입력 항목을 만들면 화면 낭독기 등을 위해서도 도움이 되고, 라디오 버튼이나 체크박스 등에서 텍스트 터치로 선택이 가능해지며, 나아가 Css로 꾸며줄 수도 있다:
➥ <input> 입력 폼필드 타입들

hidden 필드는 주로 (화면상의 폼에는 보이지 않되)폼을 서버로 전송할 때 서버로 함께 전송되는 요소(예컨대, 사용자에게 굳이 보여줄 필요가 없지만 관리자가 알아야 하는 것 - id 중복여부 확인 등의 처리 정보)에 사용된다

password 필드는 입력하는 내용이 화면에 표시되지 않고 *표 등으로 보여진다는 점만 제외하면 text 타입과 같다 ← 당연지사지만.. password 필드에서 value 속성은 사용할 수 없다!

검색상자 등 정보에 맞게 분화된 텍스트 필드들 ← multiple 옵션은 복수 입력을 가능하도록 한다

숫자 입력상자, 슬라이드 숫자바 ← 브라우저에 따라서 각각 다른 모습으로 표시되기도 한다!

라디오 버튼(하나만 선택 가능), 체크박스(복수 선택 가능): 각 항목들 중 하나에 checked 옵션값을 주어 기본값으로 선택해둘 수 있다 ← 함께 묶인 라디오 버튼들의 이름은 반드시 같아야 한다!

색상 선택상자 ← 기본색상 값은 16진수여야 하며 색이름은 사용할 수 없다!

날짜 입력필드

날짜(및 시각) 입력필드 ← time(23:59), datetime(2019-01-01T23:59), datetime-local(2019-01-01T23:59)

파일 다운로드 대화상자 창을 만드는데, multiple 옵션은 복수 선택을 가능하도록 한다 ← 참고로, 브라우저에서 파일 선택이나 찾아보기 등의 버튼이 표시되는데.. 클릭하여 파일을 선택하면 파일이 첨부된다!

폼 전송버튼/리셋버튼/단순버튼/이미지버튼 ← 하지만, 이보다는 <button> 태그를 쓰는 것이 좋다!

➥ <button> 태그를 사용하는 경우에는 화면낭독기에 이 곳에 버튼이 있다는 것이 명확히 전달되고, 또한 이 버튼에는 컨텐츠를 포함할 수도 있기에 아이콘을 추가하거나 Css를 이용해 원하는 형태로 꾸미는 것도 가능해진다:

☞ 참고로, type= "button"은 자체 기능은 없고, 단지 스크립트로 연결해주는 역할만 수행한다!

➥ <input> 입력필드의 모양은 브라우저마다 각각 차별성이 있고, 그래서 <input>만 아니라 폼 관련 태그들은 대개 스타일시트를 통해 (각 사이트에 맞추어 미리 설정해둔)독자적인 초기값을 사용한다 ← 참고로, input type= "타입"에서는 브라우저 차원에서 각 타입 에 따르는 유효성 체크도 함께 이루어진다!

  • autofocus 특정 요소에 입력 커서를 놓는다
  • placeholder= "입력 메시지"; ← 입력란에 힌트를 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 해준다
  • autocomplete 입력시 자동완성 기능 사용
  • readonly 읽기 전용 필드로 지정
  • required 필수 입력 필드로 지정
  • value= "값"; ← 기본값으로 보여질 내용(또는, 서버로 넘길 값) 지정
  • multiple 복수 입력(및 선택) 가능
  • min/max= "최소값/최대값";
  • step= "값 사이의 간격";
  • size= "크기"; ← 해당 필드의 물리적 크기, 또는 보이는 글자 수 지정
  • minlength/maxlength= "최소/최대 입력가능 문자수"
  • disabled 입력 필드로 진입 불가 ← textarea 필드에 약관 등을 넣어 읽기만 하도록 할 때 등..
텍스트 입력영역
<textarea>는 (게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시하는 등의)텍스트 입력 영역을 만드는데, 옵션으로 지정한 글자수 및 라인수 보다 더 커지면 스크롤 막대가 생겨난다:

☞ 이 영역 안은 <pre> .. </pre>에서와 같은 방식으로 작동된다!

드롭다운 목록
<select>(목록 범위) 및 <option>(목록 항목들)은 드롭다운 목록을 만드는데, <option> 항목들은 <optgroup label= "그룹명"> .. </optgroup> 식으로 서로 다른 그룹별로 묶어줄 수도 있다:

☞ multiple 옵션값은 [Ctrl] 키와의 조합으로 복수 선택이 가능하도록 한다!

Progress와 meter
<progress>는 작업의 현재 진척 상황을 보여주는 색상 막대를, <meter>는 전체에서 차지하는 비중을 나타내는 색상 막대를 만든다:

☞ 참고로, 자바스크립트를 이용하면 움직이는 진행 상황을 나타낼 수 있다!

wave