html 5) Study

Start ..

░ 웹 코딩을 위해서는 가장 먼저 코드를 작성할 에디터가 준비되어야 하는데, MS-Windows 운영체제에서라면; 비쥬얼 스튜디오코드를 권합니다. 먼저, 를 받아서 설치하십시오..

실습용 웹사이트 폴더 만들기: 먼저, 실습을 위한 가칭 my-root 폴더를 만들고, 이 폴더의 루트에서 웹사이트 진입점이 되는 index.html 파일을 작성하고, 여타 소스 파일들이 들어갈 폴더들을 만들어 웹사이트 구조를 생성한다; 파일 접근 상대경로: 위와 같은 웹사이트 폴더 구조에서, 현재 문서를 기준으로 하는 상대경로로 파일에 접근하려면 다음과 같이 할 수 있다:

비쥬얼 스튜디오코드 사용하기: Visual StudioCode를 다운로드하여 설치하고, 설치가 끝나면 프로그램을 실행합니다.. 비쥬얼 스튜디오코드의 메뉴에서 [파일-새파일] 하고서는(이어서, 아무 생각 말고 그냥 Enter키 누르세요), Untitled-1 이라는 이름으로 생성된 새 문서에서 [파일-다른 이름으로 저장]한 뒤, 자신의 작업용 폴더를 선택하여 (가칭)Start.html 이란 이름으로 저장해줍니다; 이어서, 비쥬얼 스튜디오코드에서 방금 만든 Start.html 파일을 열어 html:5 ⤶ , 이어서 <title> .. </title> 태그 안의 .. 부분에 원하는 문서 제목을 적어줍니다 ← 여기서 ⤶ 기호는 Tab, 또는 Enter 키를 뜻함 - 이하 同 ^{같을 동}

코딩 시작해보기: 일단, <body> 안에서 다음과 같이 코딩해보세요 - 이는 가장 기본적인 에밋 코딩법인데, 나중에 더 배울겁니다..

웹문서의 기본구조

░ 본격적인 학습을 시작하기 전에, MDN에 있는 을 찬찬히 한번 읽어보시길 권합니다 - 웹브라우저로 인터넷을 거닐 때 그 이면에서 무슨 일이 일어나는지에 관해 간결히 설명해주고 있습니다..

웹문서의 기본구조: 전체적인 html 문서는 아래와 같이 <html> 요소 내부에서 <head>와 <body> 부분으로 구성된다:; 1. <head>에서는 작성중인 웹문서에서 사용할 모든 메타 데이터 관련 정보를 정의한다:; 2. <body>에는 현재 페이지에 표시할 모든 컨텐츠들이 배치된다: 문단은 기본적으로 <p> 요소로 둘러싸며, 제목은 <h#>(#은 1 ~ 6) 요소로 넣어준다. <h1>은 페이지 전체를 대표하는 제목이며(따라서, 가급적이면 페이지 당 하나만 사용하는 것이 좋다!), 나머지는 페이지 계층구조에 따라 그 밑으로 배치된다

마크업의 기본 지침

░ 아래는, html 코딩 시 표준으로 삼을만한 입니다. 본인에게 편한 것이 우선이지만, 생판 모르는 남이 와서 코드를 읽어볼 때도 혼잡하지 않도록 작성하시길 권합니다 - 머, 강제는 아닙니다 ^^

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

html Start 1

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

Html 요소: html은 html 태그 요소들로 웹문서의 구조를 의미론적으로 정의하는 마크업 언어로서, html 요소 ^Element 는 태그 ^Tag(및 속성 ^Attribute), 그 안의 내용 ^Contents 로 구성되는데, 요소 안에 요소를 중첩할 수도 있다; html 요소의 속성(속성명="값")은 해당 요소의 동작이나 기능을 정의하는데, html 요소에는 해당 html 태그 자체가 지닌 기본 속성들 외에도, Css 스타일시트를 적용하기 위한 Css 속성(class="클래스명") 및 ID 속성(id="아이디명")도 가질 수 있다; html 요소의 대부분은 문서를 렌더링하여 해당 요소의 기능을 수행함과 함께, 동시에 태그 내부 컨텐츠를 화면에 표시하는데 쓰이지만, 이미지()나 양식 컨트롤() 등 (컨텐츠를 포함할 수 없고, 단지)객체로 바꿔주기만 하는 '빈' 요소들도 있다

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

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

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

html Start 2

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

Html 요소의 기본 구성: 일단, html 태그 <p> 안에 '경주의 국립공원 퀴즈'라는 텍스트만 적어봤습니다. 화면 표시 결과는? 경주의 국립공원 퀴즈 ← <p>경주의 국립공원 퀴즈</p>

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

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

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

Codding Start

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

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

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

aria- 속성에 대하여: aria- 속성은 주로 태그의 의미를 설명하기 위해서 사용되는데, 이 은 접근성 트리만을 수정하여 스크린리더기 등의 보조기술이 사용자에게 컨텐츠를 제공하는 방법을 수정할 뿐, 요소의 기능이나 동작에 대해서는 아무것도 변경하지 않는다!; aria-labelledby 속성은 상호작용되는 요소에 레이블된 문자열 값을 정의한다 - 요소의 기본 접근자 이름이 없는 경우, 또는 그 컨텐츠를 명확하게 설명하지 못한 경우, 그리고 해당 요소에게 의미를 주기 위한 객체와 연관된 DOM 안에 보이는 컨텐츠가 없는 경우 등..

Bootstrap 5

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

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

탐색 내비게이션: 랜드마크 시맨틱 태그들로 섹션 을 구획하여 작성된 웹문서라면; 각 섹션별 제목 또한 그 의미에 맞추어진 html 5 태그들을 써서 달아주는 것이 당연하다. 나아가, <nav> 태그는 탐색 섹션에 사용하기에 가장 적합한 요소로, 스크린리더 및 검색엔진에 자동으로 관련 정보를 제공해준다!; 1. 대화형 요소에서, aria-label 속성을 추가하여 탐색 목적에 대한 간략한 설명을 제공해주는 것도 좋다:; 2. 대화형 요소에서, aria-labelledby 속성을 추가하여 참조할 (이름이 지정된)요소와 연결해줄 수 있다:

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

Css Stylesheet 입문

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

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

Css 스타일링 가이드: 아래는, 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(..);는 스크립트의 로그값(곧, 코드 실행의 결과물)을 [브라우저 개발자 화면]의 [콘솔] 탭에 표시해준다 ← 참고로, console.debug/info/warn/error(); 등은 모두 console.log();의 별칭에 다름 아니다!

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

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

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

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

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

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

웹서핑 내비게이션

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

하이퍼링크: 1. <a> 태그는 텍스트( 소소한 이야기 )나 이미지( )에 링크를 걸어주는데, href 속성에 들어갈 값 으로는 절대 URL이나 (현재 문서를 기준으로 하는)상대 URL( 세계관 이야기 ) 모두 가능하다; 2. <a> 태그는 텍스트나 이미지만 아니라 <h#> 같은 블록레벨 요소에도 링크를 걸어줄 수 있다:
소소한 이야기
← 참고로, 인라인 요소인 <a>에 블록레벨 요소인 <h6>을 포함했기에, 이 <h6>을 인라인 요소로 만들기 위해 부트스트랩 유틸리티를 추가했습니다: <h6 class="d-inline">

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

외부 문서로 이동하기: 1. 외부 사이트의 절대 URL(https://sosohan.xyz) 및 상대 URL(/jc-namsan)을 써서 특정 문서(/Start.html) 내부의 (id 이름이 지정된)특정 섹션(#v-pills-Gil0-1)으로 바로 이동할 수 있다: 목없는 부처님들; 2. 현재 사이트에서 상대 URL을 써서 다른 문서파일 내부의 (id 이름이 지정된)특정 섹션으로 바로 이동할 수도 있다: 옛 우물터, 석정

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

이미지 다루기

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

이미지 삽입하기: <img> 태그는 문서에 이미지 소스 를 삽입하는데, 닫는 태그는 없다. 여기서 alt 속성은 이미지 설명 인데, 스크린리더기는 이 값을 읽어 사용자에게 이미지에 관해 알려주기에 항시 넣어주는 것이 좋다!; 이미지의 너비(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> 태그와 함께 사용하여 여러 미디어 파일을 지정해줌으로써 다양한 브라우저에 대응하도록 해주는 것이 바람직하다!

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

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

Svg 이미지

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

Svg 이미지 삽입하기: html 5)에서는 <img> 태그로 Svg 이미지를 불러들일 수 있는데, src, alt 속성과 함께 width나 height 속성도 반드시 필요하다:

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

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

폼 작성하기

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

입력폼 작성하기: 1. <form> 태그 안에서 <fieldset> 태그는 폼 요소를 하나의 구역으로 묶고 외곽선을 그려주는데, 바로 아래서 <legend> 태그로 제목을 붙여주면 스크린리더기 등에 도움이 된다; 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를 이용해 원하는 형태로 꾸미는 것도 가능해진다

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

autofocus // 해당 요소에 입력 커서를 놓는다
placeholder= "입력 메시지" // 입력란에 힌트를 표시하고 있다가 그 필드를 클릭하면 내용이 사라지고 입력이 시작된다
autocomplete // 입력시 자동완성 기능을 사용한다
readonly // 읽기 전용 필드로 지정
required // 필수 입력 필드로 지정
value= "값" // 기본값으로 보여질 내용(또는, 서버로 넘길 값)
multiple // 복수 입력(및 선택)이 가능하도록 한다
min/max= "최소값/최대값"
step= "값 사이의 간격"
size= "크기" // 해당 필드의 물리적 크기, 또는 보여줄 글자수 지정
minlength/maxlength= "최소/최대 입력가능 문자수"
disabled // 입력 필드로 진입 불가 ← textarea 필드에 약관 등을 넣어 읽기만 하도록 할 때 등..

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

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

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

테이블 작성하기

░ 은 행/열 로 구성된 데이터 집합으로서 표 형식의 데이터인데, 열/행이라는 형식 면에서는 Microsoft Excel을 생각하시면 됩니다 - 모양 면에서는, Word나 Hwp에서 '표 작성'하는 것과 같군요..

표 작성의 기본: <table> 태그 안에서 <tr> 태그로 각 행을 만들고, <th>(제목 셀: 셀 중앙에 굵게 표시된다) 및 <td> 태그(<tbody> 영역)로 셀을 만들어 그 안에 내용을 넣어준다. 나아가, <table> 태그 안에서 <thead>, <tbody>, <tfoot>로 테이블을 구성하면 화면 낭독기 등에 표의 구조를 알려줄 수 있으며, css를 써서 서로 다른 스타일을 적용시키거나 스크립트를 써서 본문 부분만 스크롤되도록 하는 등의 활용이 가능해진다!; 1. <td>나 <th> 태그(가로 행) 안에서는 colspan="개수" 속성으로 열 방향으로, rowspan="개수" 속성으로 행 방향으로 열 및 행을 합쳐줄 수 있다 ← 제목이 길어 축약이 필요하다면; 제목 행인 <th> 태그에서 abbr 속성을 사용하면 된다!; 2. <colgroup>(과 <col>) 태그(세로 열)는 열 스타일을 정의하는데, <caption> 태그 뒤, <tr> 및 <td> 태그 전에 사용되어 <col> 태그를 넣은 순서대로 한 열에 있는 모든 셀에 같은 스타일을 적용하는데, 하나의 <col>만 넣으면 첫번째 열에만 적용되며, <col> 태그의 span 속성을 이용해 둘 이상의 열을 함께 묶어줄 수도 있다 ← 단, <thead>와 <tfoot>는 제외한 <tbody>에만 적용된다!; 3. 표에 제목을 달아주려면; <table> 태그 시작 부분에 작성해주면 되고, <figure> 태그로 <table> 태그를 둘러싼 뒤 <figcaption> 태그로 <table> 태그의 바깥쪽 바로 위나 밑에 표 설명을 배치해줄 수도 있다

thead: th 1	thead: th 2	thead: th 3	thead: th 4
tbody	td 2->행 방향으로 합침: rowspan=2	td 3	td 4
tbody	td 2->행 방향으로 합침: rowspan=2	td 3->열 방향으로 합침: colspan=2
tbody	td 2	td 3	td 4
tfoot: th 1	tfoot: th 2	tfoot: th 3	tfoot: th 4

Start

html Study (1)

html Study (2)

html Study (3)

Multi-media

폼과 테이블

Start ..

Start.html

* 결과 보기

* 결과 보기

웹문서의 기본구조

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

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

마크업의 기본 지침

html Start 1

html Start 2

html & Css, JavaScript

h1

h2

h3

h4

h5

h6

Codding Start

role 속성에 대하여

Bootstrap 5

Css Stylesheet 입문

html의 Script

document.write();

html 5) 목록 리스트

html 5) Typography

pre 및 code 태그

웹서핑 내비게이션

소소한 이야기

여타 하이퍼링크 작성법

인라인 프레임 삽입하기

이미지 다루기

반응형 이미지

미디어 다루기

여타 비디오 옵션들

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">

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

테이블 작성하기

테이블 작성의 기본

table 태그의 css 속성들