html 5) Study

Web Codding 입문

░ 아래는, html 코딩 첫 입문자를 위한 기초 가이드입니다만, html/Css를 본격적으로 배워보고자 한다면; 문서를 찬찬히 한번 살펴보시길 권합니다..

실습용 웹사이트 폴더 만들기: 먼저, 실습을 위한 가칭 my-root 폴더를 만들고, 이 폴더의 루트에서 웹사이트 진입점이 되는 index.html 파일을 작성하고, 여타 소스 파일들이 들어갈 폴더들을 만들어 웹사이트 구조를 생성한다:

웹문서의 기본구조: html은 html 태그 요소들로 웹문서의 구조를 의미론적으로 정의하는 마크업 언어 로서, html 요소 ^Element 는 태그(및 속성 ^Attribute), 그 안의 내용 ^Contents 로 구성되는데, 요소 안에 요소를 중첩할 수도 있다:; html 요소의 속성(속성명= "값")은 해당 요소의 동작이나 기능을 정의하는데, html 요소에는 해당 html 태그 자체가 지닌 기본 속성들 외에도, Css 스타일시트를 적용하기 위한 Css 속성(class= "속성명") 및 ID 속성(id= "아이디명")도 가질 수 있다:; html 요소의 대부분은 문서를 렌더링하여 해당 요소의 기능을 수행함과 함께, 동시에 태그 내부 컨텐츠를 화면에 표시하는데 쓰이지만, 이미지()나 양식 컨트롤() 등 (컨텐츠를 포함할 수 없고, 단지)객체로 바꿔주기만 하는 '빈' 요소들도 있다:; 기본적으로 단락은 <p> 요소로 둘러싸며, 제목은 <h#>(#은 1 ~ 6) 요소로 넣어주게 된다. <h1>은 페이지 전체를 대표하는 제목이며(따라서, 가급적이면 페이지 당 하나만 사용하는 것이 좋다!), 나머지는 페이지 계층구조에 따라 그 밑으로 배치된다

Visual Studio Code

░ 웹 코딩을 위해서는 가장 먼저 코드를 작성할 에디터가 준비되어야 하는데, MS-Windows 운영체제에서라면; 를 권합니다

Visual StudioCode 사용하기: 1. Visual StudioCode를 다운로드하여 설치하고, 설치가 끝나면 프로그램을 실행합니다..; 2. 위에서 살펴본 html 문서의 기본구조, 그리고 바로 밑에서 만날 Bootstrap 5) 시작템플릿 및 시맨틱웹 문서구조를 기반으로 하여 그때, 그때.. 하나, 하나.. 직접 손으로 코딩하면서! 결과를 확인하십시오 - 정 귀차니즘이 발동될 땐, 그냥 카피하여 쓰셔도 무방합니다만,, 권장 사항은 전혀 아닙니다(ㅎ~)

마크업의 기본 지침: 아래는, html 코딩 시 표준으로 삼을만한 기본 지침들입니다. 본인에게 편한 것이 우선이지만, 생판 모르는 남이 와서 코드를 읽어볼 때도 혼잡하지 않도록 작성하시길 권합니다 - 머, 강제는 아닙니다 ^^; ✓ html 문서 내에서 얼마나 많은 연속된 공백(및 줄바꿈)을 사용하든 웹브라우저는 코드를 렌더링할 때 단일 공백으로 줄여줍니다. 그럼에도 왜 많은 공백(및 줄바꿈)을 사용할까요? 답은, 그저 코드의 가독성을 위한 것일 뿐입니다 ㅡㅡ;; ✓ 선택적 닫기 태그는 생략하지 않는다: <li> .. </li> ← 원칙적으로는, <li> 태그 뒤에 닫는 태그 </li>를 넣든 말든 상관없습니다만, (li 내부 코드가 아주 길어지는 경우도 많아)넣어주는게 (제 견해로는)코드 작성 및 읽기에 더 편합니다..; ✓ 닫기 태그가 필요없는 요소는 맨 끝에 /> 식으로 (앞의 공백과 함께!)슬래시를 넣어주기도 하고 생략하기도 합니다만.. 머, 편한대로 하시면 됩니다.. ← 다만, 일부 템플릿 엔진에서는 슬래시를 요구하는 경우도 있다고 하니, 귀찮더라도 포함시켜주는 것이 나을 수도 있습니다..; ✓ 가능하면; 가장 적은 복잡성으로 최소한의 마크업을 사용하고, 불필요한 부모 요소는 피하도록 한다:

Semantic Web

░ 에서 랜드마크로 지정된 시맨틱 태그는 웹 페이지의 구조를 안내하는 탐색 지점 역할 을 한다. 곧, 랜드마크는 검색엔진에 웹 페이지의 정확한 구조를 알려주며, 또한 스크린리더기가 컨텐츠의 중요한 섹션을 올바르게 찾아갈 수 있도록 안내한다!

랜드마크 시맨틱 태그들: 1. <header>에는 사이트 제목과 로고(및 검색창), 사이트 소개글, 내비게이션 메뉴바 등이 배치된다:; 2. 웹 페이지 바닥글인 <footer>에는 주로 연락처 정보, 개인정보 보호 및 쿠키 정책, 저작권 고지 등 모든 페이지에 표시할 사이트 바닥글 정보가 들어간다:; 3. 랜드마크 시맨틱 태그들로 작성하는 웹 페이지 전체 레이아웃은 문서의 기본 컨텐츠를 담은 <main>(및 <aside>) 등과 함께 대략 다음과 같은 구조로 구축된다:

Role 속성: 1. role 속성을 쓰면 html 태그에 최소한의 의미 체계를 부여하고, 문서의 맥락에서 해당 요소가 갖는 역할을 설명해줄 수 있다. 이는 스크린리더기 등의 보조 기술, 그리고 경우에 따라서는 검색엔진에도 중요하다. 곧, role 속성이 부여하는 역할을 통해 스크린 리더기 등은 사용자가 원하는 컨텐츠에 빠르게 액세스할 수 있으며, 이를 통해 스크린리더 사용자에게 대화형 요소와 상호작용하는 정확한 방법을 제공할 수 있게된다: <main role= "main"> .. </main>; 2. 나아가, role 속성을 사용하면 태그가 암시하는 것과 다른 역할을 비롯하여 의미가 없는 모든 요소에 의미론적 역할을 부여할 수도 있다. 예컨대, <button> 태그에는 버튼이라는 기본적인 역할이 있는데, 어떤 요소에든 role= "button" 속성을 부여하면; 그 요소를 (실제로 버튼의 기능을 수행하지는 않지만, 의미론적 차원에서)버튼으로 변환할 수 있다: 클릭해보세요.. ← 실제 버튼의 기능은 못하고, 단지 버튼의 모양새만 흉내내고 있을 뿐이다!

aria- 속성: 1. aria- 속성은 주로 태그의 현 상태를 나타내거나, 태그의 의미를 설명하기 위해서 사용되는데, 이 WAI-ARIA 상태 및 속성은 접근성 트리만을 수정하여 스크린리더기 등의 보조기술이 사용자에게 컨텐츠를 제공하는 방법을 수정할 뿐, 요소의 기능이나 동작에 대해서는 아무것도 변경하지 않는다!

Codding Starter

░ 프레임워크는 빠르고, 확장 가능하며, 반응형으로 동작하는 프런트엔드 툴킷으로서.. 부트스트랩에서 기본 제공하는 그리드시스템 및 유틸리티 구성요소들을 이용하고, 부트스트랩에 내장된 JavaScript 플러그인을 활용하면 웹 디자인에 생명력을 불어넣을 수 있다!

시맨틱웹 레이아웃: 이 는 사용자와 브라우저 및 검색엔진을 위해 태그에 의미를 담아 작성하는 Web 표준에 기반한 웹문서 작성의 전형적인 예이니, 전체 구조와 함께 한 문장 한 문장 다 찬찬히 살펴보시기 바랍니다..

부트스트랩 시작하기: 이 는 부트스트랩 공식 사이트에서 가져온 스타터 문서를 살짝 다듬은 것인데, 이 페이지로 연습용 index.html 파일을 만들어 직접 코딩하면서 이후의 모든 실습을 진행하시면 됩니다..

Css Stylesheet 입문

░ html은 컨텐츠의 모양을 정의하는 것이 아니라 의미를 담은 컨텐츠를 구축하는데 사용되며, 웹페이지의 모양 꾸미기는 Css Stylesheet의 영역이다!

웹문서에 스타일 적용하기: Css 스타일시트는 웹페이지를 꾸며주기 위한 코드로서, html 문서에 있는 특정 부분들에 원하는 스타일을 적용하는데.. 아래 코드는 특정 요소(여기서는, <p> 요소)에 스타일을 설정하고 있다; 1. 외부 스타일시트 파일 링크하기: Css 코드를 별도의 파일로 작성하고(예컨대, my-style.css), html 문서에서 <link>하여 사용한다; 2. 현재 문서 내부에서 스타일 정의하기: 아래 코드처럼, <link> 부분은 제거하고, 외부 css 파일의 내용을 그대로 <style> .. </style> 안으로 옮겨주면 됩니다

스타일링 가이드: 아래는, Css 스타일시트 작성 시 표준으로 삼을만한 기본 지침들입니다; 1. 스타일시트 작성 시 클래스 이름 작명, 색상 표기방식 등에서의 일관성을 유지하고, 코드를 알아보기 쉽도록 작성한다:; 2. 너무 구체적인 선택자를 만드는 것은 코드를 혼란스럽게 하므로, 보편적으로 사용할 선택자를 만드는 것이 좋다:; 3. 모든 페이지에 걸쳐 일반적으로 적용되는 스타일과 각각 부분적으로만 사용되는 스타일을 분리하여 작성하면 스타일의 유지/보수에 유용하다:; 4. 필요한 곳에서 적절히 주석을 달아준다 - 논리 섹션으로 주석들을 분리하고, 코드에 나타나지 않는 문자열을 써서 검색 시 바로 점프할 수 있도록 하는 것도 유용하다:

html의 Script

░ 는 웹문서에 동적 움직임을 주기위해 만들어진 프로그래밍 언어로서, 자바스크립트로 작성한 프로그램이 스크립트인데, 브라우저에 내장된 자바스크립트 엔진은 스크립트 코드를 읽어들여서 분석하고(= 파싱), 컴퓨터가 알 수 있는 기계어로 번역하여(= 컴파일), 그 코드 내용을 실행해나가게 된다!

웹문서에 스크립트 적용하기: 스크립트는 html 문서 내부에서 작성해주거나, 또는 외부 스크립트 파일을 불러올 수도 있는데.. 스크립트 코드는 우선, 예제 연습용으로 간단한 html 파일을 만든 후(예: _js.html), 아래 2가지 방법으로 웹문서에 적용할 수 있다; 1. _js.html 문서의 </body> 바로 위 <script> .. </script> 내부에서 인라인 스크립트 코드로 작성해준다:; 2. *.js 스크립트 파일을 만들어(예: _js.js) 그 안에서 스크립트 코드를 작성한 뒤, _js.html 문서에서 <script>의 src 속성으로 _js.js 파일을 불러온다:

콘솔 API: 은 JavaScript 웹 애플리케이션을 테스트하고 디버그하는 도구로서, 그 결과물은 웹브라우저의 [브라우저 개발자 화면](F12 키)으로 들어가서 [콘솔] 탭을 찾아가서 확인할 수 있는데, console.log(..);는 스크립트의 로그값(곧, 코드 실행의 결과물)을 [브라우저 개발자 화면]의 [콘솔] 탭에 표시해준다:

콘솔 메시지창: alert("알림 메시지")는 콘솔창에 알림 메시지 를 보여주며, confirm("확인 메시지")은 확인 메시지 (와 함께 [확인/취소] 버튼)을 표시한다(리턴 값: true/false). 한편, prompt("입력 프롬프트"[, "초기값"])는 사용자 입력 프롬프트 (및 초기값 )를 나타낸다:

태그에 정보 담기: html 태그에 data-이름= "값" 속성(이름 에 대문자는 들어갈 수 없다!)을 사용하면 해당 태그에 특정 정보를 추가할 수 있는데, 이 정보는 Css 및 JavaScript에서 읽어들여 조작할 수 있다:

Codding Start

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

웹문서의 기본 구성: html은 웹문서의 내용을 구성하고 의미를 부여하는 데 사용하는 마크업 언어이며, Css는 그 html 문서에 원하는 모양을 입혀주기 위한 스타일 규격이다. 한편, javaScript는 웹문서에서 동적으로 추가, 제거되고 변경되는 컨텐츠를 만들고 조작할 수 있도록 해주는 스크립트 언어이다: <p>‘경주의 국립공원’</p> ← 여기서는 html 태그 <p> 안에 텍스트만 적었습니다..

블록레벨 요소 대 인라인 요소: <div>(= 블록레벨 요소)와 <span>(= 인라인 요소) 태그는 (섹셔닝상의 레이아웃과는 무관하게, 단순 흐름상)특정 영역들로 구분하여 묶어주는데 사용되는데, 기본적으로 <span>, <a> 등의 인라인 요소는 가로 방향으로만 (자신이 지닌 컨텐츠 양만큼)자리잡을 수 있는 반면, <div>, <p> 등 블록레벨 요소는 (부모요소의 크기 내에서)가로 방향 전체를 차지하면서 한 줄을 넘치면 세로 방향으로도 확장된다:

문단: p 및 br 태그: <p> 태그는 (앞뒤로 줄 바꿈이 있는)텍스트 단락을 만드는데, 브라우저 창 너비를 넘어서면 자동으로 줄이 바뀌어 아래로 내려간다(* 여기서, p 요소 내부에서 강제로 br 태그를 사용함)
← 중간에 강제로 줄을 바꿔주려면; 필요한 곳에서 <br> 태그(닫는 태그는 없음)를 넣어주면 된다!

글자 꾸미기: b 태그는 단순히 굵게 표시할 텍스트에, strong은 매우 중요한 강조에 사용된다(중복 사용도 가능하다). i 태그는 (기술적 용어, 관용구, 느낌 등의)단순히 기울여서 표시할 텍스트에, em은 다소간 약한 강조에 사용된다. 한편, mark 태그는 노란색 형광펜으로 덧칠해준다:

특수문자 넣기: html에서는 공백을 수천개 넣든, 줄바꿈을 여러번 하든 오직 하나의 빈칸으로 취급한다. 따라서, Space 키로 만드는 하나의 빈칸 외에, 빈 칸이 연속으로 더 필요할 때가 있는데.. 그럴 때는 맨 앞에 &를 넣고 nbsp(= 빈칸) 적고, 맨 뒤에 ;를 붙여주면 된다 ← 필요한 만큼 연속적으로 넣을 수 있다: ( ); 좌측 꺽쇠(lt) < , 우측 꺽쇠(gt) > , 큰 따옴표(quot) " , 작은 따옴표(apos) ' , And 기호(amp) & , 저작권 기호(copy) © , 등록상표(trade) ™ , 엔터키 모양(ldca) ⤶ , 각도 기호(deg) ° , ..

더미 이미지 삽입하기: Web 문서에 더미 이미지를 삽입하고자할 때는 Place-hold 사이트를 이용할 수 있다:

html 5) 목록 리스트

░ html은 목록 작성을 위해 <ul> 기호목록, <ol> 순서목록, <dl> 설명목록을 기본 제공하는데, 펼치고 접는 <details> 서랍목록도 또한 제공한다 - 이하, html 목록 작성 관련 태그들을 간략히 살펴봅니다..

기호/순서 목록 작성하기: 1. <ul>(과 <li>)는 기호 목록을 만드는데, <li> 안에 <ul>이 중첩되는 경우; (들여쓰기와 함께)기본 기호가 ● (disc)에서 ○ (circle), ■ (square)로 순차적으로 바뀌게 된다:; 2. <ol>(과 <li>)는 순번 목록을 만드는데, type, start, reversed 속성을 사용하여 번호 형태를 지정해줄 수도 있다:

사전목록 작성하기: <dl>(과 <dt>, <dd>)은 사전 목록을 만드는데, <dl>에서 설명 목록 영역을 규정한 뒤 그 안에서 <dt>로 제목을 붙이고, <dd>(복수 나열 가능)로 설명을 넣어준다:

서랍목록 작성하기: <details> 태그는 사용자가 보거나 숨길 수 있는 추가 세부정보를 정의하는데, 내부 <summary> 태그에서 요약 정보를 보이고, 클릭하면; 그 아래 정의된 세부정보가 펼쳐지게 된다:

html 5) Typography

░ 아래에서.. 이런게 있다 하면서 알아둘 만한 html 태그들 몇가지 간략히 소개합니다..

인용문: <blockquote>(블록레벨 요소)는 (<p>의 기능에 더하여)안으로 들여 써지는 인용문으로 표시되며, <q>(인라인 요소)는 (인용구임을 표시하는)"큰 따옴표"가 붙여진다. 그밖에, <cite> 태그(인라인 요소)는 출처 등을, <address> 태그(블록레벨 요소)는 주소나 연락처 정보 등을 기울여서 표시해준다:

Abbr 태그(및 title 속성): <abbr> 태그는 title 속성과 함께 사용되어 마우스 커서를 올렸을 때 축약 표시된 약어의 원본(또는, 설명글)을 보여준다: HTML이란?

Time 태그(및 datetime 속성): <time> 태그는 datetime 속성과 함께 사용되어 보조 기기(예컨대, 스크린리더기)가 이해할 수 있는 형태로 날짜나 시간을 나타낸다: [오늘]은 5.18 광주항쟁 기념일

Ruby(와 rt) 태그: <ruby> 태그는 주로 동아시아권 국가들의 글자에 주석을 함께 표기하기 위하여 사용되는데, 주석으로 표기할 내용은 <ruby> 안에서 <rt>로 넣어주면 된다: 동아시아권 국가들(중국 한국 일본)

소스코드 작성하기: <pre>는 여러 칸의 공백이나 줄 바꿈, 프로그램 소스 등 입력하는 그대로 화면에 표시해준다. 한편, 컴퓨터 인식을 위한 소스 코드를 넣기 위해서는 인라인 <code> 태그를 사용하면 된다:

하이퍼링크와 앵커

░ 사용자에게 웹 탐색을 안내하는 방식에는 여러 가지 유형이 있으며 이를 표시하는 방법 또한 다양하지만.. 그 요점은 사용자가 잘 안배된 적절한 안내에 따라, 가장 적은 수의 클릭으로 손쉽게 해당 페이지로 이동할 수 있도록 도와주어야 한다는 것에 있다!

하이퍼링크: 1. <a> 태그는 텍스트(소소한 이야기)나 이미지()에 링크를 걸어주는데, href 속성에 들어갈 값 으로는 절대 URL이나 (현재 문서를 기준으로 하는)상대 URL(골굴암 탐험) 모두 가능하다:; 2. <a> 태그는 텍스트나 이미지만 아니라 <h#> 같은 블록레벨 요소에도 링크를 걸어줄 수 있다: 소소한 이야기

문서 내부에서 이동하기: Anchor: 우선, 가고싶은 지점마다 id 속성을 이용해 각기 다른 이름으로 앵커(= 도착지)를 만들고, <a> 태그(= 클릭하여 출발할 곳)에서 href="#앵커이름" 속성으로 앵커와 연결해준다:

외부 문서로 이동하기: 외부 html 문서(외부 사이트, 또는 현재 사이트의 다른 문서파일)에서 절대 URL, 또는 상대 URL과 함께 문서 내 (id 이름이 지정된)특정 섹션(Css 트랜스폼)으로 바로 이동할 수도 있다:

웹 탐색 및 섹션구획

░ 랜드마크 시맨틱 태그들로 섹션 을 구획하여 작성된 웹문서라면; 각 섹션별 제목 또한 그 의미에 맞추어진 html 5 태그들을 써서 달아주는 것이 당연하다!

탐색 내비게이션: <nav> 태그는 탐색 섹션에 사용하기에 가장 적합한 요소로, 스크린리더 및 검색엔진에 자동으로 관련 정보를 제공해준다!; 1. 대화형 요소에서, aria-label 속성을 추가하여 탐색 목적에 대한 간략한 설명을 제공해주는 것도 좋다:; 2. 대화형 요소에서, aria-labelledby 속성을 추가하여 참조할 (이름이 지정된)요소와 연결해줄 수 있다:

섹션 분할 구획: 페이지 전체의 제목을 나타내는 <h1> 태그는 페이지 당 하나만 사용하는 것이 원칙이며, 그 밑으로 문서의 구조에 맞추어 <h2>, <h3>, .. 순으로 하위 제목들을 배치해준다(단계를 건너뛰어 마구 배치하는 것은 검색엔진이나 스크린리더기에게 불필요한 혼란을 줄 수 있다!). 한편, 같은 단계에 있는 서로 다른 랜드마크 섹션들의 경우에는 id(및 aria-labelledby) 속성을 써서 구획을 구분해주는 것도 SEO 차원에서 유익하다:

제목 라인: <h1(~ 6)> 태그는 제목 텍스트 라인을 크고 진하게 표시한다. 대략 h1=32px, h4=16px 크기이며, 굵기는 모두 700 정도인데, html 문서의 기본 텍스트는 대략 16px(= 1em) 크기에 굵기는 400 정도이다 ← 단, 각 브라우저별 기본 규격 차이로 인해 약간씩 다를 수 있다!

주제의 분리: <hr> 태그(닫는 태그는 없음)는 한 줄 전체를 차지하는 가로 구분선(1px 굵기의 검은색 실선)을 그어준다:

요소에 설명글 달기: <figure>(와 <figcaption>) 태그는 이미지 등의 멀티미디어 요소, 표나 차트, 문단 등에 설명 글을 달아주는데, <figure>로 내부 컨텐츠를 둘러싼 뒤 그 앞이나 뒤에서 <figcaption>으로 설명 글을 붙여주면 된다:

인라인 프레임

░ 인라인 프레임을 이용하면 손쉽게 현재 웹문서에 다른 웹문서를 삽입할 수 있는데, 이는 직접 조작할 수 없는 외부 컨텐츠를 자신의 웹사이트에 포함시킬 때 매우 유용하다 - 예컨대 YouTube 동영상, 구글맵 지도, 광고 배너, 온라인 댓글 시스템 등등..

인라인 프레임 삽입하기: <iframe>을 쓰면 같은 사이트 내의 특정 문서를 현재 Web 문서에 액자처럼 삽입할 수 있는데, 인라인 프레임을 배치하고자 하는 곳에서 아래와 같은 형식으로 인라인 프레임 코드를 작성해준다:

이미지 다루기

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

이미지 삽입하기: 1. <img> 태그는 문서에 이미지 소스 를 삽입하는데, 닫는 태그는 없다. 여기서 alt 속성은 이미지 설명 인데, 스크린리더기는 이 값을 읽어 사용자에게 이미지에 관해 알려주기에 항시 넣어주는 것이 좋다:; 2. 이미지의 너비(width)와 높이(height)를 (실제 크기로)넣어주고, alt 속성으로 (공란일지라도)대체 텍스트를 설정해주면; 브라우저는 네트워크 오류나 컨텐츠 차단, 죽은 링크 등의 이유로 이미지를 표시할 수 없는 경우에 툴팁으로 표시해준다 ← 이는 브라우저가 좀 더 빠르게 내려받도록 하는데도 도움이 되므로 웹사이트 최적화를 위해서도 유익하다!

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

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

반응형 이미지

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

반응형 이미지: 1-1. 동일한 이미지를 기기에 따라 더 크게 또는 더 작게 표시하고 싶을 때, <img> 태그의 srcset 및 sizes 속성을 이용하면; 화면 너비에 맞추어 서로 다른 이미지 파일을 지정해줄 수 있다: 이미지는 콤마로 구분하여 실제 크기별로(480w, 800w 등) 복수로 나열하는데, 브라우저는 먼저 기기 너비를 확인한 뒤, sizes의 미디어 조건에 맞는 srcset 이미지 파일을 찾아서 불러온다:; 1-2. 가령, (뷰포트 크기가 거의 동일한)스마트폰만을 대상으로 한다고 가정하면; sizes 속성없이 srcset 속성만 사용하여 브라우저가 적절한 해상도의 이미지를 선택하도록 할 수도 있다:; 2. 다른 방식으로는, <picture>(와 <source>) 태그를 써서 이미지를 삽입할 수도 있다: 가령, 데스크톱에는 전체 장면을 보여주는 가로 이미지를, 모바일에는 주요 부분만 확대하여 보여주는 세로 이미지를 제공하는 등 다양한 기기 및 레이아웃에 맞게 잘린 이미지를 제공하려는 경우이다:

미디어 다루기

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

미디어 삽입하기: 1. 아래 코드는 비디오 삽입의 기본 예인데, (위에서 아래로 순차적으로 내려가면서)<video> 태그 안의 어느 한 <source> 태그 및 맨 아래 배치한 대체 텍스트가 실행되면 나머지는 실행되지 않는다:; 2. <audio> 태그는 width와 height, poster 속성이 없다는 점만 제외하면, <video> 태그와 비슷하게 사용한다 - 그저 controls 속성을 넣어주는 것만으로 충분하다:

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

Svg 이미지

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

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

인라인 SVG 작성하기: 인라인 Svg를 쓰면; Css 스타일 설정이 가능하고, 소스 코드 자체를 수정할 수도 있다. 나아가, <a> .. </a> 요소로 감싸서 간단히 하이퍼링크를 만들 수도 있다; 1. <svg> 태그로 인라인 Svg 이미지를 작성할 수 있는데(내부 컨텐츠는 위에서 아래로 순차적으로 렌더링된다), width나 height, xmlns 속성도 반드시 필요하다:; 2. fill 및 stroke 속성은 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> 태그로 제목을 붙여주면 스크린리더기 등에 도움이 된다:; 2. <label>과 <input>를 함께 사용하여 입력 항목을 만들면 화면 낭독기 등을 위해서도 도움이 되고, 라디오 버튼이나 체크박스 등에서 텍스트 터치로 선택이 가능해지며, 나아가 Css로 꾸며줄 수도 있다:

텍스트 입력영역: <textarea>는 (게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시하는 등의)텍스트 입력 영역을 만드는데, 옵션으로 지정한 글자수 및 라인수 보다 더 커지면 스크롤 막대가 생겨난다:

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

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

html 5) Study

Web 코딩 준비하기

Web 코딩 시작하기

이미지와 미디어

html 폼

Web Codding 입문

웹사이트에 파비콘 연결하기

오픈그래프 메타데이터 설정하기

Visual Studio Code

결과 보기

결과 보기

결과 보기

Semantic Web

Codding Starter

Css Stylesheet 입문

html의 Script

document.write()

Codding Start

html & Css, JavaScript

html 5) 목록 리스트

html 5) Typography

pre 및 code 태그

하이퍼링크와 앵커

여타 하이퍼링크 작성법

웹 탐색 및 섹션구획

h1

h2

h3

h4

h5

h6

인라인 프레임

인라인 프레임 표시하기

이미지 다루기

반응형 이미지

미디어 다루기

여타 비디오 옵션들

Svg 이미지

사각형 <rect>

원 <circle>

타원 <ellipse>

직선 <line>

지그재그선 <polyline>

폼 작성하기

Fieldset & legend

<input type="hidden" name="이름" value="서버로 넘길 값">

<input type="text | password" name="이름" value="초기값" size="화면에 보이는 입력 문자수" maxlength="입력 가능한 최대 문자수">

<input type="search | url | email | tel" multiple>

<input type="number | range" min="최소값" max="최대값" step="간격" value="초기 표시값">

<input type="radio | checkbox" name="이름" value="서버로 넘길 값">

<input type="color" value="기본색상">

<input type="date(yyyy-mm-dd) | month(yyyy-mm) | week(yyyy-주차)" min="최소값" max="최대값" step="간격">

<input type="time(..) | datetime(..) | datetime-local(..)" min="최소값" max="최대값" step="간격" value="초기값">

<input type="file" multiple>

<input type= "submit/reset/button/image">

입력폼에서 공통적으로 사용되는 속성들