html 5) Study

[웹코딩 가이드] 홈

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

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

☞ 이 페이지는 html 코딩 입문자를 위한 기초 가이드입니다만, html/Css, Javascript 등의 웹 프로그래밍 전반에 걸쳐 본격적으로 학습하고자 한다면; 문서를 찬찬히 살펴보시기를 권합니다..

Start ..

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

실습용 웹사이트 폴더 만들기
먼저, 실습을 위한 가칭 my-root 폴더를 만들고, 이 폴더의 루트에서 웹사이트 진입점이 되는 index.html 파일을 작성하고, 여타 소스 파일들이 들어갈 폴더들을 만들어 웹사이트 구조를 생성한다
[ 실습용 Web사이트 폴더 구조 ] 
                                        
                                            my-root ← 내 웹사이트(예컨대, www.sosohan.xyz) 루트 폴더
                                                index.html ← 웹사이트 진입 파일은 항상 루트에 위치해야 한다!
                                                favicon.ico ← 탭 및 제목표시줄 아이콘
                                                home-log.svg ← 루트에 위치한 다른 파일들
                                                ..
                                                /css ← 루트 폴더 아래 css 파일 보관용 폴더
                                                /js ← 루트 폴더 아래 javascript 파일 보관용 폴더
                                                /images/my-image.png ← 루트 폴더 아래 이미지 소스 보관용 폴더와 그 안에 있는 파일
                                                /my-ex/ex.html ← 루트 폴더 아래 my-ex 폴더 안에 있는 ex.html 파일
                                                /my-ex/sample/read.txt ← 루트 폴더 아래 my-ex/sample 폴더 안에 있는 read.txt 파일
                                                ..

☞ 폴더 및 파일의 이름은 공백이 없는(웹브라우저와 웹서버, 그리고 프로그래밍 언어들은 공백을 각자 다른 방식으로 다룬다!) 영문 소문자로 작성하며(웹서버는 대부분 영문 대/소문자를 구분한다!), 연결된 단어로 이름을 지을 때는 (밑줄보다는)하이픈을 사용하는 것이 좋다 ← 예컨대, 구글 검색엔진은 하이픈은 단어 구분자로 취급하지만, 밑줄은 단어 구분자로 취급하지 않는다!

1. 위와 같은 웹사이트 폴더 구조에서, 현재 문서를 기준으로 하는 상대경로로 파일에 접근하려면 다음과 같이 할 수 있다:
  • index.html 문서에서 같은 폴더 내 home-log.svg 파일에 접근하기: home-log.svg 또는 ./home-log.svg ← ./는 현재 폴더를 가리킨다
  • index.html 문서에서 images 폴더에 위치한 my-image.png 파일 참조하기: images/my-image.png 또는 ./images/my-image.png
  • my-ex 폴더에 있는 ex.html 문서에서 루트 폴더에 있는 home-log.svg 파일 참조하기: ../home-log.svg ← 폴더 구조상, 한 단계 위에 있는 home-log.svg 파일(두 단계 위라면; ../../home-log.svg)
  • my-ex 폴더에 있는 ex.html 문서에서 images 폴더에 있는 my-image.png 파일 참조하기: ../images/my-image.png ← 폴더 구조상, 한 단계 위로 올라가고, 거기서 다시 내부 images 폴더에 있는 my-image.png 파일
2. URL 절대경로로, 곧 https://www.sosohan.xyz 식으로 위와 같은 구조의 웹사이트에 직접 접근할 수 있다 - 예컨대, index.html 파일을 포함한 위 웹사이트 구성 폴더 및 파일들이 웹서버에 업로드되면; 이는 웹서버의 루트(호스팅 업체에 따라 다르지만, 보통 www 이나 html, home 등의 이름이 붙어있다) 아래에 자리잡게 되고, 웹사이트의 도메인이 https://www.sosohan.xyz라면; 웹서버는 URL에서 진입 페이지를 불러오기 위해 루트에서 index.html 파일을 찾게된다

✓ 루트 폴더의 특정 파일을 명시하여 직접 연결하거나, 또는 곧바로 하위 폴더 내 특정 문서로 연결해줄 수도 있다: https://www.sosohan.xyz/my-ex/ex.html

░ 웹에서의 파일 관리를 위해서는; 웹에 자신이 작업한 결과물을 저장하고 어떤 컴퓨터에서든 사용가능하게 해주는 파일 저장 시스템인 도 활용할 수 있습니다 ← 만약 그 폴더가 웹사이트 파일을 포함한다면, 자동적으로 웹사이트로써 제공됩니다!

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

* cf) <title> 태그 안에 적어준 문서 제목 은 웹브라우저 제목표시줄 및 북마크의 이름이 되며, 검색엔진에서도 가장 먼저 고려됩니다!

* cf) 비쥬얼 스튜디오코드의 [확장] 아이콘을 클릭한 뒤 (필요하다면;)Korean Language Pack.. 으로 검색하여 한글 언어팩을 설치하고, [탐색기] 아이콘을 클릭하여 (코딩 연습을 위해 자신이 미리 만들어둔 연습용)폴더를 선택합니다([파일-작업 영역에 폴더 추가]). 다음, [파일-기본 설정-테마-색 테마](코딩 작업영역 색상설정)와 [파일-기본 설정-설정]에서 (글자 크기, 탭 간격 등..)자신에게 필요한 부분들을 새로 설정해줍니다 ← 여타 설정 옵션들([관리] 아이콘)은 비쥬얼 스튜디오코드의 [도움말]을 참조하십시오

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

a ⤶

(* 다음줄: 다시..) a*3 ⤶ , (* 또 다음줄: 또 다시..) a*5 ⤶

(! 이런 모습이 되었나요?)

1) 제대로 되었다면; 이제 커서를 아래 코드에 표시된 위치에 놓으십시오 ← 그 전에, 먼저 코드 밑에 붙은 설명부터 읽어보십시오..

☞ 비쥬얼 스튜디오코드에서 입력 시 다중 커서 기능을 사용하려면; 먼저, <선택영역-다중 커서에 Ctrl+클릭 사용> 및 <선택영역-다중 커서를 위해 Alt+클릭으로 전환> 메뉴를 설정해주십시오 - (앞으로 계속 써먹어야하는 넘이니)메뉴간 전환하면서 <Alt+클릭>과 <Ctrl+클릭>의 작동 방식을 스스로 확인하면서 애써 익히도록 하십시오 ㅡㅡ;

2) 이어서, 맨 앞 <a>의 입력 커서 위치에서 아래로 쭈~욱 <Alt+드래그>로 일렬 선택하여 내용 입력한 뒤.. ⤶해보세요. 다시, 나머지 지점마다 각각 <Ctrl+클릭>하여 복수로 선택하고서 내용 입력한 뒤.. ⤶하여 직접 결과를 확인해보세요 - 선택한 뒤 화살표 키 또한 사용해보세요

(! 이런 모습이 되었나요? 아래와 같은 결과를 만들지 못했다면; 계속 연습하세요 ㅡㅡ;)

* cf) 이것은 세로로 일렬 동시 입력 및 원하는 지점들 동시 입력 실습인데, (Emmet Codding, Lorem ipsum과 함께)이거 알아두면 코딩 시의 쌩! 'Nogada'(재팬 제품 불매 중이라서 영어로 ㅎ)가 확 줄어듭니다 ^^

마크업의 기본 지침
아래는, html 코딩 시 표준으로 삼을만한 입니다. 본인에게 편한 것이 우선이지만, 생판 모르는 남이 와서 코드를 읽어볼 때도 혼잡하지 않도록 작성하시길 권합니다 - 머, 강제는 아닙니다 ^^
1. html 문서 내에서 얼마나 많은 연속된 공백(및 줄바꿈)을 사용하든 웹브라우저는 코드를 렌더링할 때 단 한칸의 공백으로 줄여줍니다. 그럼에도 왜 많은 공백(및 줄바꿈)을 사용할까요? 답은, 그저 코드의 가독성을 위한 것일 뿐입니다 ㅡㅡ;

이곳은 제 웹사이트입니다: 자주 들러주세요.. 소소한 이야기

☞ 모든 태그는 소문자로 작성하는 습관을 들이는 것이 좋고, 속성 값은 반드시 따옴표(작은 따옴표 또는 큰 따옴표)로 묶어주어야 한다!

2. 중첩된 요소는 2칸이나 4칸 소프트 탭으로 들여쓰기 해준다 - 이는 코드를 읽기쉽게 하고, 모든 환경에서 코드가 동일하게 렌더링되는 것을 보장한다! 한편, 닫기 태그가 필요없는 요소는 맨 끝에   /> 식으로 (앞의 공백과 함께!)슬래시를 넣어주기도 하고 생략하기도 합니다만.. 머, 편한대로 하시면 됩니다

☞ 참고로, 맨 끝의 /> 앞은 예상밖의 에러를 막기 위해 반드시 공백을 주어야 한다!

3. 가능하면; 가장 적은 복잡성으로 최소한의 마크업을 사용하고, 불필요한 부모 요소는 피하도록 한다:

html Start 1

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

Html 요소의 구성: 태그와 속성, 컨텐츠
1. html은 html 태그 요소들로 웹문서의 구조를 의미론적으로 정의하는 마크업 언어로서, html 요소 Element 는 태그 Tag(및 속성 Attribute), 그 안의 내용 Contents 로 구성되는데, 요소 안에 요소를 중첩할 수도 있다:
[ html 요소의 구조 ]

☞ 위에서 p 요소 란 여는 태그와 닫는 태그, 그 사이에 있는 컨텐츠 (내부에 중첩된 또 다른 요소들도 포함하는)전부 를 의미한다!

2. html 요소의 속성(속성명= "값")은 해당 요소의 동작이나 기능을 정의하는데, html 요소에는 해당 html 태그 자체가 지닌 기본 속성들 외에도, Css 스타일시트를 적용하기 위한 Css 속성(class= "클래스명") 및 ID 속성(id= "아이디명")도 가질 수 있다:

이곳은 제 소소한 이야기 웹사이트입니다

☞ 참고로, 단지 참/거짓 상태만을 나타내는 active, disabled 등의 속성들도 있다

3. html 요소의 대부분은 문서를 렌더링하여 해당 요소의 기능을 수행함과 함께, 동시에 태그 내부 컨텐츠를 화면에 표시하는데 쓰이지만, 이미지()나 양식 컨트롤() 등 (컨텐츠를 포함할 수 없고, 단지)객체로 바꿔주기만 하는 '대체요소'들도 있다:

☞ 한편, 객체로 변환되지도 않으면서 닫는 태그가 없는(따라서 내부 컨텐츠도 갖지 않는) '빈' 요소들도 있는데, 이러한 '빈' 요소들에는 <br>(줄바꿈)이나 <hr>(수평선) 같이 컨텐츠 자체가 필요없는 태그들도 있고, 또는 <link href="URL">이나 <script src="URL"></script>와 같이 속성을 통해 요소에 대한 정보를 제공하기만 하는 태그들도 있다

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

간혹, 코딩 중 임시로 더미 문장을 넣어주어야 할 때가 있는데, VisualStudio Code 에디터에서 lorem ⤶ 해주면 된다: <p>lorem ⤶</p>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error nobis, nam atque possimus aliquam cumque laboriosam laudantium quas animi et eaque illum quae tenetur maxime veniam quaerat, alias ab corrupti.

글자 꾸미기 태그들
1. <b> 태그는 단순히 굵게 표시할 텍스트에, <strong>은 매우 중요한 강조에 사용된다(중복 사용도 가능하다). <i> 태그는 (기술적 용어, 관용구, 느낌 등의)단순히 기울여서 표시할 텍스트에, <em>은 다소간 약한 강조에 사용된다
2. 그밖에, <sub>아래 첨자 및 <sup>위 첨자, 단순히 취소선을 그어주는 <s>와 단순 밑줄을 그어주는 <u>, 삭제된 텍스트임을 알려주는 <del>(및 대체된 텍스트임을 표시하는 <ins>), 작은 텍스트인 <small>도 있다. 한편, <mark> 태그는 노란색 형광펜으로 덧칠해준다
특수문자 넣기
1. html에서는 공백을 수천개 넣든, 줄바꿈을 여러번 하든 오직 하나의 빈칸으로 취급한다. 따라서, Space 키로 만드는 하나의 빈칸 외에, 빈 칸이 연속으로 더 필요할 때가 있는데.. 그럴 때는 맨 앞에 &를 넣고 nbsp(= 빈칸) 적고, 맨 뒤에 ;를 붙여주면 된다: 뒤로 3칸   비움
좌측 꺽쇠(lt) <, 우측 꺽쇠(gt) >, 큰 따옴표(quot) ", 작은 따옴표(apos) ', And 기호(amp) &, 저작권 기호(copy) ©, 등록상표(trade) ™, 엔터키 모양(ldca) ⤶, 각도 기호(deg) °, 등등..
2. 그외, 한글 Windows 기본인 한글자모+한자키(기호 문자)에다, 윈도우키+점(이모지 아이콘)도 있고.. 정 안되면; 최후의 보루로 (모든 코딩의 원초적 무기, 바로 그 무대뽀) Ctrl+C & Ctrl+V로 가져다 붙일 수도 있습니다 ^^

✓ 참고로, html 문서의 문자 인코딩이 <meta charset= "utf-8">로 설정되어 있다면; 최신 브라우저들에서는 (html 코드에서 사용해야 하는)<(꺽쇠 기호)와  (공백 문자)를 제외하고는, 대부분 Ctrl+C & Ctrl+V로 가져다 붙이는 방식으로 쓸 수 있습니다!

* cf) 간혹은 웹문서에 수학 기호 및 수식 등을 넣어야할 때가 있는데.. 그런 경우에는 수식 입력을 도와주는 Equation Editor ↓ 와 같은 플러그인 라이브러리를 써볼 수 있습니다

➥ 플러그인이란?

플러그인이란? 여러 전기 기기를 꽂아서 쓰는 멀티탭을 생각하시면 됩니다. 곧, 자바스크립트를 써서 특정 작업을 수행하도록 만들어진 라이브러리나 앱을 불러다 자신의 웹문서에 삽입하여 쓰는 것을 말합니다만, 자바스크립트에 대한 최소한의, 간혹은 상당한 수준의 이해를 전제로 합니다

➥ 이 강좌 사이트 군데, 군데,, 약간의 플러그인 라이브러리들도 포함되어 있습니다. 이런게 있나보다 하면서 대충, 대충,, 간단히 실펴보시고.. 나중에 진짜로 필요해지면 찬찬히 뜯어보십시오

Equation Editor

░ 간혹은 웹문서 작성 시 수학 수식을 넣어주어야 할 때가 있는데, 이 경우 수학 표기를 기술하고 그 구조와 내용을 담고 있는 XML 마크업 언어인 로 직접 작성하는 것은 그리 간단치 않으므로, html 문서에 수학 관련 수식들을 넣으려면; 같은 수식 입력기 라이브러리를 쓰는 것이 쉽다!

수식 입력기: Equation Editor
1. 먼저 관련 Css 및 스크립트를 CDN으로 링크하고 스크립트를 초기화해주어야 한다:
[ Equation Editor CDN 링크 및 초기화 ] 
                                        
                                            <head>
                                                <title>수식입력기</title>

                                                <!-- Css CDN 링크 -->
                                                <link rel="stylesheet" href="https://editor.codecogs.com/eqneditor.css" />
                                            </head>

                                            <body>
                                                <!-- 에디터용 컨테이너 작성할 곳 -->
                                                
                                                <!-- 스크립트 CDN 링크 -->
                                                <script src="https://editor.codecogs.com/eqneditor.api.min.js" crossorigin="anonymous"></script>

                                                <!-- Equation Editor 초기화 -->
                                                <script type="text/javascript">
                                                    textarea= new EqEditor.TextArea('latexInput')
                                                    .addToolbar(new EqEditor.Toolbar('toolbar'), true)
                                                    .addOutput(new EqEditor.Output('output'))
                                                    .addHistoryMenu(new EqEditor.History('history'));
                                                </script>

                                                <!-- 작성된 기호를 html에 삽입하기 위한 latex 플러그인 CDN 링크 -->
                                                <script src="http://latex.codecogs.com/latexit.js"></script>
                                            </body>
2. 다음, <body>에서 에디터용 컨테이너를 만들어준다:

☞ 위 설명대로 따라하다보니 얼떨결에 만들어진 입니다 ← 이제, 이 수식입력기에서 수식기호를 작성한 뒤, 웹문서의 필요한 곳에 붙여넣으면 됩니다..

html Start 2

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

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

경주의 국립공원 

                                                    
                                                        <html>
                                                            <head>
                                                                ..

                                                                <style>
                                                                    /* 인라인 스타일 */
                                                                </style>
                                                            </head>

                                                            <body>
                                                                <p class="htmlcssjs_ex" title="클릭해보세요.." role="button">
                                                                    경주의 국립공원
                                                                </p>

                                                                ..
                                                                <script>
                                                                    /* 인라인 스크립트 */
                                                                </script>
                                                            </body>
                                                        </html>

☞ 위 단순한 <p> 요소에 사용자정의 Css 클래스 속성값(class= "htmlcssjs_ex")을 주었습니다 - htmlcssjs_ex 의 내용은 Css 및 js 탭을 열어 확인하십시오.. ← 참고로, title= 속성은 해당 요소에 마우스를 올렸을 때 풍선 도움말을 보여주는 속성이며, role= "button" 속성(및 그 값)은 해당 요소에 버튼 모양을 만들어주도록 한 것입니다 

                                                    
                                                        .htmlcssjs_ex {
                                                            display: inline-block; padding: 8px 16px 8px;
                                                            color: white; background: rgba(147 169 142 / 0.7);
                                                            border-radius: 8px; box-shadow: 8px 8px 12px 2px gray;
                                                            text-align: center;
                                                            cursor: pointer;
                                                        }

☞ 위 <p> 요소에 입힌 스타일의 내용입니다 ← 이 코드는 웹문서의 <head> 내부에서 <style> .. </style> 안에 넣어주시면 됩니다 

                                                    
                                                        const gjPara= document.querySelector(".htmlcssjs_ex");
                                                        const gjSans= ['토함산', '남산', '구미산', '금강산', '송화산', '선도산', '단석산']
                                                    
                                                        function ChangeSan() {
                                                            let san= prompt("경주의 국립공원 7곳의 산 이름 중 하나만 맞춰보세요: ");
                                                    
                                                            san= gjSans.find(s => s === san);
                                                            if(san) gjPara.textContent= `${san}`
                                                            else gjPara.textContent= "다시 적으세요 !!"
                                                        }

                                                        gjPara.addEventListener("click", ChangeSan);

☞ 위 <p> 요소 버튼(?)을 클릭해보세요.. 버튼(?)을 클릭할 때 작동시킬 스크립트 움직임을 정의했습니다 ← 이 코드는 웹문서의 </body> 바로 직전에 <script> .. </script> 안에 넣어주시면 됩니다

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

블록레벨 요소는 그 안에 또 다른 블록레벨 요소나 인라인 요소를 포함할 수 있다. 인라인 요소는 내부에 블록레벨 요소를 포함할 수는 없지만, 또 다른 인라인 요소는 포함할 수 있다 ← 천천히 화면 너비를 줄여보세요..

✓ 웹문서에서 인라인 요소는 문단 내의 단어처럼 움직인다 - 곧, 한 행 내에서 인라인 방향으로 나란히 옆으로 자리잡는 것이다. 예컨대, <div>나 <p>와 같은 블록레벨 요소 내부에서 <span>이나 <b> 요소로 텍스트 부분의 스타일을 지정하는 데 사용되며, 모든 블록레벨에서와 같은 너비/높이, 여백 및 패딩 등의 속성은 주변 요소에 의해 무시된다!

반면, 블록레벨 요소는 서로 나란히 배치되지 않고, 밑으로 내려가서 자신의 새로운 블록레벨 라인을 만든다. 다른 Css 코드에 의해 변경되지 않는 한, 블록레벨 요소는 가로쓰기 모드에서 전체 너비로 확장되고, 모든 마진 및 패딩이 적용된다!

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

h1

h2

h3

h4

h5
h6

☞ 원래 <h#> 태그는 가로로 한 줄 전체를 차지하는 블록레벨 요소인데(곧, 원래대로라면; 위 <h#> 태그들은 각각 1줄씩 차지하여야 함), 여기서는 (앞으로도, 종종 이런 경우가 있을 터인데)간결한 시각적 비교 및 공간 절약을 위해 부트스트랩 유틸리티를 써서 임시로 한 줄에 다 늘어놓은 것이며(위 코드의 class= "d-inline-block"), 글자의 굵기 또한 기본적으로는 모두 같이 700 정도이나 Css를 써서 각각 차별성을 준 것입니다!

✓ 부트스트랩 Css를 링크하지 않은 순수 .html 문서에 위 코드를 넣고 브라우저로 열어보면; 부트스트랩 스타일이 적용된 위 모습과 다른 html의 순수한 민낯을 볼 수 있습니다 ← 참고로, 이 <h#> 태그들을 글자 크기 조정을 위해 사용하는 것은 좋지 않습니다! 글자 크기 조정이 필요하다면; Css의 font-size(글자 크기) 및 font-weight(글자 굵기) 속성, 부트스트랩의 관련 클래스들을 사용하면 됩니다..

주제의 분리: hr 태그
<hr> 태그(닫는 태그는 없음)는 한 줄 전체를 차지하는 가로 구분선(= 1px 굵기의 검은색 실선)을 그어준다: 
                                    
                                        
                                    
                                
                                    
                                        hr.hr-short_50 { width: 50%; margin: 0 auto; opacity: 0.25; }

☞ 이 또한 부트스트랩의 자체 <hr> 스타일 규격이 적용되어 html 표준 <hr> 태그의 모양(1px solid black)이 margin-top:1rem; margin-bottom:1rem; border:0; border-top:1px solid rgba(0 0 0 / 0.1); 값으로 재적용된 것이며, 추가적으로 사용자정의 Css를 써서 50% 너비(width: 50%;)와 0.25의 불투명도(opacity: 0.25;)로 재설정해주고, 다시 가로 정중앙(margin: 0 auto;)에 배치해준 것입니다. 나아가, 부트스트랩 유틸리티로 상하 간격을 재설정해주었습니다(class= "my-4")

✓ 이 <hr> 태그는 기본적으로 문단 내 장면 전환, 섹션 내 구획 변경 등 주제의 분리 를 위해 사용되어 왔지만, 최근에는 시각적 측면에서의 의미 부여 를 위해서도 자주 애용됩니다 ← 물론, 이를 위해서는 Css 스타일시트나 부트스트랩 유틸리티 등을 써서 의미에 맞게 모양을 꾸며줄 필요가 있습니다!

목록 작성하기

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

기호/순서 목록 작성하기
1. <ul>(과 <li>)는 기호목록을 만드는데, <li> 안에 <ul>이 중첩되는 경우; (들여쓰기와 함께)기본 기호가 ●(disc)에서 ○(circle), ■(square)로 순차적으로 바뀌게 된다:
  • disc
  • disc ← 아래는, li 내부 ul(의 li들)
    • circle
    • circle ← 아래는, 다시, li 내부 ul(의 li들)
      • square
      • square
    • circle
  • disc
2. <ol>(과 <li>)는 순서목록을 만드는데, <ol>에서 type=, start=, reversed= 속성을 사용하여 번호 형태를 달리 지정해줄 수도 있다:
  1. type= "1 | a/A | i/I"
  2. start= "시작번호"
  3. reversed ← 역순으로
➥ <ol>에서의 중첩 관련

<ol>과 <ul>은 필요한 만큼 중첩할 수 있고, 서로 교차해서 사용할 수도 있는데, <ol> 안에서 <ol>을 중첩할 때는; (중첩된 <ul>에서 기호 형태가 바뀌는 것처럼)중첩된 <ol>에서는 1) 식으로 번호 형태가 바뀌면 좋을 듯한데, html 규칙 내에서는 그런게 없는 듯하군요. 나중에, Css를 익히시게 되면; 연구 좀 하셔서 사용자정의 스타일로 만들어 써보셔도 될 듯합니다..

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

☞ <dl> 안에 <dt> 및 <dd>만 넣을 수 있는 것은 아니고, <p> 문단 및 어떤 html 요소들도 넣을 수 있다. 또한, <dl> 안에 또 다른 <dl>을 중첩하는 것 또한 가능하다!

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

[세부 상세정보] 이곳은 처음에는 보이지 않다가 위 [요약]을 클릭하면 펼쳐져서 보여진다 ← 다시 클릭하면 닫힌다!

☞ <details> 태그에서 옵션으로 open 값을 주면 열린 채로 시작한다: <details open> .. </details>

html 태그정리

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

인용문: blockquote
<blockquote>(블록레벨 요소)는 (<p>의 기능에 더하여)안으로 들여 써지는 인용문으로 표시되며, <q>(인라인 요소)는 (인용구임을 표시하는)"큰 따옴표"가 붙여진다. 그밖에, <cite> 태그(인라인 요소)는 출처 등을, <address> 태그(블록레벨 요소)는 주소나 연락처 정보 등을 기울여서 표시해준다
웹의 힘은 보편성에 있다 - 장애를 가진 사람들조차도 다 접근할 수 있도록 하는 것이 필수적인 요소이다 - 참고, [웹 접근성]
주소: 경북 경주시 남산 삼릉, Tel: 010-2014-xxxx

☞ 위 코드를 브라우저에서 실행할 때, 태그 설명과 약간 다른 모습이 보인다면; 그건 html 5) 태그가 Bootstrap 5) 자체 규격에 의해 재정의된 때문이니 참고하십시오..

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

title 속성은 사용자에게 알려줄 추가 정보를 담아서 마우스 호버시 풍선 도움말로 알려주는데, 이 속성은 <a>, <img>, <p>, <span> 등 대부분의 태그에서 유용하게 사용할 수 있다!

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

☞ 여기서는 차이를 알 수 없지만.. 시각 장애인을 위한 스크린리더기는 datetime 속성에 들어있는 값을 읽어줍니다!

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

* cf) 문서 내부 요소에서 특정 언어를 설정해줄 때는 lang 속성을 사용할 수 있다: <span lang="jp">ご飯が熱い。</span>

요소에 설명글 달기
<figure>(와 <figcaption>) 태그는 이미지 등의 멀티미디어 요소, 표나 차트, 문단 등에 설명 글을 달아주는데, <figure>로 내부 컨텐츠를 둘러싼 뒤 그 앞이나 뒤에서 <figcaption>으로 설명 글을 붙여주면 된다:
(* 위쪽에 단 설명글)
(* 아래쪽에 단 설명글)
소스코드 작성하기
<pre>는 여러 칸의 공백이나 줄 바꿈, 프로그램 소스 등 입력하는 그대로 화면에 표시해준다. 한편, 컴퓨터 인식을 위한 소스 코드를 넣기 위해서는 인라인 <code> 태그를 사용하면 된다 
                                                h2 {
                                                    padding: 10px;
                                                }

이것은 인라인 code입니다

☞ html 코드 내부에 들어가는 꺽쇠 기호(<, >)는 html에서 사용하는 예약어이므로 이스케이프 처리해주어야 한다!

✓ 웹 문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계는 <pre> 태그가 적용된 부분을 만나면 건너뛴다. 따라서, 그 부분의 내용을 청각 장애인이나 시각 장애인이 알 수 있도록 alt(및 title) 속성을 써서 대체 텍스트를 추가해주는 것이 좋다!

* cf) 필요하다면; 현재 작성하는 html, Css, JavaScript 등의 프로그래밍 코드를 html 웹문서에서 적절히 보여주도록 도와주는 Prism.js ↓ 와 같은 플러그인 라이브러리를 사용해볼 수도 있습니다

프리즘 코드블록

░ 는 현재 작성하는 html, Css, Javascript 프로그래밍 코드를 html 웹 문서에서 적절히 보여주도록 하는데 도움이 되는 플러그인 라이브러리이다

프리즘 마크업하기
Prism.js는 웹문서에 html, Css, Script 코드를 삽입하기 위한 플러그인 라이브러리로서, 프리즘을 사용하려면; 먼저, Css 링크 및 스크립트 소스를 필요로 한다
[ Prism Css 링크 및 스크립트 소스 불러오기 ] 
                                        
                                            <head>
                                                <!-- 프리즘 Css 파일 불러오기 -->
                                                <link href="./plugins/prism.css" rel="stylesheet" />
                                            </head>

                                            <body>
                                                .. 프리즘 코드블록

                                                <!-- 프리즘 스크립트 파일 불러오기 -->
                                                <script src="./plugins/prism.js"></script>
                                            </body>

☞ 이 html 코드를 담은 박스가 바로 프리즘 Css 및 Script 소스에다, 사용자정의 Css를 약간 더 보태서 작성한 것입니다 ← Prism.js는 수백개 넘는 프로그래밍 언어들 거의 모두를 지원하지만.. 웹 코딩에서는 주로 language-markup / html / css / js 등이 자주 쓰입니다

1. 여기서는 p { color: red; }를 인라인 <code>로 마크업하였습니다: <code class= "language-css">p { color: red; }</code>
2. 여기서는, <pre>(와 <code>)를 써서 <pre> 코드블록으로 마크업했습니다:

html 코드 내부에 들어가는 <와 & 기호는 html에서 사용하는 예약어이므로, 반드시 이스케이프 처리해주어야 합니다! 

                                    
                                        <pre>
                                            <code class="language-html"> <!-- 마크업할 언어 설정 -->
                                                <p title="<pre>(및 <code>)로 코드블록 마크업하기">
                                                    html 코드 내부에 들어가는 <mark><</mark>와 <mark>&</mark> 기호는
                                                    html에서 사용하는 예약어이므로, 반드시
                                                    <abbr title="특정 문자가 html 등의 마크업 언어로 작동되지 않도록 단순 문자열로 변환하는 것">이스케이프 처리</abbr>해주어야
                                                    합니다!
                                                </p>
                                            </code>
                                        </pre>

☞ 여기서 문제는, 저 <pre>(및 <code>) 블록 내부의 html 코드 안에 들어가는 수많은 < 기호들 모두를 이스케이프 처리해주어야만 위와 같은 모습이 된다는 것입니다만..

✓ src= 속성이 없는 인라인 <script> 요소에는 text 속성이 있고, 그 안의 컨텐츠는 절대 브라우저에 표시되지 않는다. < 및 & 기호 또한 웹브라우저의 html 파서에 의해 분석되지 않고 글자 그대로 표시된다! 

                                    
                                        <pre>
                                            <code class="language-html">
                                                <script type="text/plain"> // src 속성이 없는 인라인 script
                                                    이제.. 특수문자에 대한 이스케이프 없이, 위 <pre> 코드블록 내부에 있는
                                                    html 코드 전체를 그대로 [Copy]하여 여기 [붙여넣기]해주시면 됩니다..
                                                </script>
                                            </code>
                                        </pre>
➥ <script> 태그의 type 속성에 대하여

<script> 태그의 type= 속성에 text/x 와 같이 임의의 값만 지정해주면 내부 컨텐츠는 스크립트 코드로 실행되지 않는다. x 에는 유효하되, 자바스크립트가 아닌 임의의 MIME 타입이 들어가기만하면 된다 - 곧, 내부 컨텐츠는 브라우저가 처리하지 않을 데이터 블록으로 간주된다 ← 그럼에도 문서 트리에는 남아 있으며, text 속성으로 그 데이터를 가져올 수 있다! 

                                        
                                            <script id="my-data" type="text/plain">
                                                "userId": "jcunicom", "userName": "Kjc"
                                            </script>
                                        
                                    
                                        
                                            const me_data= document.querySelector("#my-data").text
                                            console.log("사용자 정보:", me_data); // 사용자 정보: "userId": "jcunicom", "userName": "Kjc"

☞ 위 코드에서 text/plain 은 일반 텍스트 를 의미하는데.. 이러한 특성은 <script> 요소를 애플리케이션에 사용할 임의의 텍스트 데이터를 안전하게 보관해둘 장소로 활용할 수 있도록 해준다!

html의 기본구조

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

웹문서의 기본구조
전체적인 html 문서는 아래와 같이 <html> 요소 내부에서 <head>와 <body> 부분으로 구성된다:
[ 웹문서의 기본구조 ]

☞ <!-- 주석 내용 --> 부분은 html 문서의 주석입니다 - 브라우저는 이 부분을 만나면; 못본체 하면서 그냥 다음으로 내려갑니다..

1. <head>에서는 작성중인 웹문서에서 사용할 모든 메타 데이터 관련 정보를 정의한다:
[ Head 부분 ]

☞ /* 주석 내용 */ 부분은 <style> 태그 안에서의 주석입니다 - 브라우저는 이 부분을 만나면; 못본체 하면서 그냥 다음으로 내려갑니다

소셜 미디어 사이트는 기본적으로 웹문서에서 페이지 제목과 설명을 올바르게 가져오며, 검색엔진과 동일한 정보를 표시해준다. 덧붙여서, Open Graph Meta Data를 이용하면 소셜 미디어에서 내 웹사이트로 연결되는 링크의 모양을 자신이 원하는 방식대로 표시해줄 수도 있다!

✓ 페이스북 같은 소셜 미디어에서 특정 웹사이트로 연결하는 링크를 게시하면 이미지, 사이트 제목, 사이트 설명이 포함된 카드가 표시되는데, 이 카드 전체가 바로 제공한 URL로 연결되는 하이퍼링크이다!

* cf) 에서는 Open Graph Meta Data 설정에 관한 표준 규정들을 정의하고 있는데, 트위터는 또 그에 맞는 방식으로 메타 데이터를 설정해주어야 하며(), 다른 소셜 미디어들 또한 트위터와 같은 독자적인 자체 규정을 갖고 있다!

2. <body>에는 현재 페이지에 표시할 모든 컨텐츠들이 배치된다: 문단은 기본적으로 <p> 요소로 둘러싸며, 제목은 <h#>(#은 1 ~ 6) 요소로 넣어준다:
[ Body 부분 ]

☞ 특히, <h1>은 페이지 전체를 대표하는 제목이며(따라서, 가급적이면 페이지 당 하나만 사용하는 것이 좋다!), 나머지는 페이지 계층구조에 따라 그 밑으로 배치된다 ← 이상이 html 웹문서의 기본적인 구성입니다. 이것들을 조합하여 하나의 문서로 만들어보십시오, 오늘 숙제입니다..

░ 이 [html 5) 기본문서], 그리고 밑에서 만날 [SemanticWeb 레이아웃] 문서 및 [Bootstrap 5) Starter] 문서 등을 기반으로 하여 그때, 그때.. 하나, 하나.. 직접 손으로 코딩하면서! 결과를 확인하십시오 - 정 귀차니즘이 발동될 땐, 그냥 카피하여 쓰셔도 무방합니다만,, 권장 사항은 전혀 아닙니다(ㅎ~)

✓ 위 기본 문서들에는 웹문서 작성 시 기준이 되는 중요한 지침들이 들어 있습니다. 이 시작 페이지들을 자신의 학습용 기반 문서로 삼아 코드를 넣어 실행한 뒤 내용들 찬찬히 잘 살펴보시고, 항시 거기 적힌 원칙들을 염두에 두고 코딩하시기를 권합니다 - 그래야 나중에 코드 읽고, 분석하고,, 수정하기 편해집니다..

뷰포트 메타태그

░ 뷰포트는 웹 컨텐츠를 볼 수 있는 창 영역이다. 이것은 렌더링된 문서 페이지와 반드시 같은 크기는 아니며, 필요 시; 웹 브라우저는 사용자가 스크롤하여 모든 컨텐츠에 액세스할 수 있도록 스크롤 바를 제공하게 된다!

뷰포트 선언
태그는 모바일 브라우저에 뷰포트의 너비를 기기 너비로 설정하고 문서의 크기를 의도한 크기의 100% 로 조정하여 문서를 모바일에 최적화된 크기로 표시해야 함을 알려준다. 곧, 뷰포트 선언은 데스크탑 화면과는 다른 스마트 기기(기본 뷰포트 너비: 980px)의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어쿼리가 기기의 화면 크기를 정확히 감지하도록 해주는 것이다 
                                    <meta name="viewport" content="width=device-width, height=divice-height, initial-scale=1">

☞ 여기서 width= device-width, height= device-height는 뷰포트 너비, 높이의 100%를 의미한다. initial-scale 은 페이지가 처음 로드될 때의 줌 값이다(0.1 ~ 10, 기본값: 1)

* cf) 웹사이트의 성격에 맞추어 뷰포트를 특정 크기로 설정할 수도 있다 - 예컨대, width=320, initial-scale=1 은 작은 스마트기기의 디스플레이에 정확히 맞추기 위해 사용될 수 있는데, 이는 브라우저가 페이지를 더 큰 크기로 렌더링할 때 문제를 일으킬 수 있다! 

                                    <meta name="viewport" content="width=320, initial-scale=1">

☞ 초기 또는 최대 크기를 설정하는 페이지의 경우, 이는 width 속성이 실제로 최소 뷰포트 너비로 변환된다는 것을 의미한다 - 예컨대, 레이아웃에 최소 320px의 너비가 필요한 경우 위와 같은 옵션을 사용할 수 있다 ← 화면이 320px보다 크면; 브라우저는 줌인 대신 화면에 맞게 뷰포트를 확장하게 된다!

░ 뷰포트는 웹 컨텐츠를 볼 수 있는 창 영역을 말하는데, 데스크탑의 뷰포트 영역은 [브라우저 개발자 화면]에서 확인할 수 있다(스마트 기기는 대부분 980px 크기로 설정되어 있다). 스마트폰과 같이 작은 기기는 불러온 웹 문서를 화면보다 넓은 이 가상 뷰포트에서 렌더링한 다음, 렌더링된 결과를 기기 화면 크기로 축소하고.. 이후 사용자는 페이지의 다른 영역을 더 자세히 보기 위해 확대/축소할 수 있게 된다. 그러나 이러한 메카니즘은 미디어쿼리를 사용하여 좁은 화면에 최적화된 페이지에는 적합하지 않다

예컨대, 가상 뷰포트가 980px인 경우 640px 또는 480px 이하에서 시작되는 미디어쿼리는 사용되지 않으므로 이러한 반응형 디자인 기법의 효과는 제한된다! ← 뷰포트 선언은 좁은 화면 장치에서 가상 뷰포트의 이러한 문제점을 완화시켜주는 역할을 하는 것이다!

웹문서 구성하기

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

랜드마크 시맨틱 태그들
1. <header>에는 사이트 제목과 로고(및 검색창), 사이트 소개글, 내비게이션 메뉴바 등이 배치된다:

Web Codding

☞ <header>가 body의 최상위 수준에 위치하면 랜드마크 역할이지만, <main>, <section>이나 <article> 안에서 사용되면 해당 섹션의 제목으로만 식별되며 랜드마크는 아니다! <nav> 또한 최상위 <header>에서 사용되면 사이트의 기본 내비게이션 역할을 하지만, <section>이나 <article> 안에서 사용되면; 해당 섹션의 내부 탐색용이다!

2. 웹 페이지 바닥글인 <footer>에는 주로 연락처 정보, 개인정보 보호 및 쿠키 정책, 저작권 고지 등 모든 페이지에 표시할 사이트 바닥글 정보가 들어간다:

Copyright © 2023 Kjc ™ inc.

주소: 경주시 남산 삼릉

☞ <footer> 또한 body의 최상위 수준에 위치하면 랜드마크 역할이지만, <main>, <section>이나 <article> 안에서 사용되면 해당 섹션의 바닥글로만 식별되며 랜드마크는 아니다!

3. 랜드마크 시맨틱 태그들로 작성하는 웹 페이지 전체 레이아웃은 문서의 기본 컨텐츠를 담은 <main>(및 <aside>) 등과 함께 대략 다음과 같은 구조로 구축된다:
[ 웹 페이지 전체 구조 ]

☞ <h#> 제목 태그는 (위 코드에서 보이듯이)사이트 전체의 계층구조에 맞추어 적절한 위치에 배치해주어야 한다! <section>은 문서의 일반적인 독립형 영역들을 포함하는 데 사용되는데, 여기에는 반드시 제목(<h2>)이 있어야 하며 예외는 거의 없어야 한다! 이 요소는 단지 관련있는 컨텐츠들을 (스타일 설정 등을 위하여)하나로 묶기 위한 것이지 (액세스 가능한 이름이 없는 한)랜드마크는 아니다!

섹션 분할 구획
페이지 전체의 제목을 나타내는 <h1> 태그는 페이지 당 하나만 사용하는 것이 원칙이며, 그 밑으로 문서의 구조에 맞추어 <h2>, <h3>, .. 순으로 하위 제목들을 배치해준다 - 단계를 건너뛰어 마구 배치하는 것은 검색엔진이나 스크린리더기에게 불필요한 혼란을 줄 수 있다!
[ 동일 수준 컨텐츠 섹션들의 구획 구분 ]

☞ 같은 단계에 있는 서로 다른 랜드마크 섹션들의 경우에는, 위와 같이 id(및 aria-labelledby) 속성을 써서 구획을 구분해주는 것도 SEO 차원에서 유익하다!

░ 이 는 사용자와 브라우저 및 검색엔진을 위해 태그에 의미를 담아 작성하는 Web 표준에 기반한 웹문서 작성의 전형적인 예이니, 전체 구조와 함께 설명글들도 다 찬찬히 살펴보시기 바랍니다.. 나중에 Css 및 부트스트랩을 배운 뒤에 스스로의 실력으로 이 예제 문서와 같은 모양으로 꾸며주시기 바랍니다.. (숙제입니다 ㅡㅡ;)

Role 및 Aria- 속성

░ role 속성을 쓰면 html 태그에 최소한의 의미 체계를 부여하고, 문서의 맥락에서 해당 요소가 갖는 역할을 설명해줄 수 있다. 이는 스크린리더기 등의 보조 기술, 그리고 경우에 따라서는 검색엔진에도 중요하다!

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

☞ role= "button"은 스크린 리더 사용자에게 (버튼이 아닌)요소가 버튼처럼 동작해야 한다고 지시한다. 하지만, 애초에 버튼에 <button> 태그를 사용한다면; (브라우저가 버튼과 관련된 모양 및 기능을 기본 제공할 것이므로)role 속성은 불필요하다!

* cf) 이처럼 role 속성을 사용하여 모든 요소에 의미를 부여할 수는 있지만, 그보다는 그 역할과 관련하여 실제적 기능이 있는 요소를 우선적으로 고려해야 한다: ← 위와는 달리, 여기서는 실제로 버튼의 기능을 갖고 버튼으로 작동한다!
Aria- 속성에 대하여
은 주로 태그의 의미를 설명하기 위해 사용되는데, 이는 접근성 트리만을 수정하여 스크린리더기 등의 보조기술이 사용자에게 컨텐츠를 제공하는 방법을 수정할 뿐, 요소의 기능이나 동작에 대해서는 아무것도 변경하지 않는다!

☞ aria-label 속성은 오로지 (스크린리더기 등에)'보이도록'하기 위한 보조적 기술일뿐, 남용하는 것은 좋지 않다!

✓ 웹코딩 시에는 가급적 사용자 인터페이스를 보다 직관적으로 만드는 것이 우선시되어야 하며, 명확한 지침이 필요하다면; 모두에게 제공하도록 하는 것이 좋다 - 예컨대, 추가적인 지침 또는 명확한 사용자 경험을 제공하기 위해 aria-label 속성이 아닌 aria-describedby 및 aria-description 속성과 함께 표시 가능한 텍스트를 사용할 수가 있다!

탐색 내비게이션

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

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

aria-labelledby= 속성은 상호작용되는 요소에 레이블된 문자열 값을 정의한다 - 요소의 기본 접근자 이름이 없는 경우, 또는 그 컨텐츠를 명확하게 설명하지 못한 경우, 그리고 해당 요소에게 의미를 주기 위한 객체와 연관된 DOM 안에 보이는 컨텐츠가 없는 경우 등..

☞ 필요한 경우, 이처럼 aria-labelledby= 속성을 써서 액세스 가능한 이름(여기서는, Sec1_heading)을 제공해주면 랜드마크 역할을 부여할 수 있다!

하이퍼링크
1. <a> 태그는 텍스트( 소소한 이야기 )나 이미지( 로고 )에 링크를 걸어주는데, href 속성에 들어갈 값 으로는 절대 URL이나 (현재 문서를 기준으로 하는)상대 URL( 세계관 이야기 ) 모두 가능하다
[ href의 속성값 ]

☞ href 속성값에 #(= 페이지 다시 읽기) 혹은 #top(= 스크롤해서 맨 위로 이동하기)을 넣어주면; 페이지 최상단으로 올라가며, #!를 넣어주면; 탱자~ 탱자 놀면서 아무 일도 하지 않습니다 ^^ 여기서, 뭔가 번뜩하며 뇌리를 스쳐가는 천재적인(?) 추측을 하셨을 듯도 합니다만.. 아쉽게도, #bottom은 없습니다 - 필요하다면; 사용자정의 Css나 자바스크립트를 써서 만들어주셔야 합니다 ← 예컨대, 이 페이지의 좌상단 모서리에 떠 있는 [맨 아래로..] 버튼

2. <a> 태그는 텍스트나 이미지만 아니라 <h#> 같은 블록레벨 요소에도 링크를 걸어줄 수 있다:
소소한 이야기
  ← 참고로, 인라인 요소인 <a>에 블록레벨 요소인 <h6>을 포함했기에, 이 <h6>을 인라인 요소로 만들기 위해 부트스트랩 유틸리티를 추가했습니다: <h6 class= "d-inline">

☞ target= 속성값에 _blank 를 넣어주면 새창(및 새 탭)으로 열어준다(기본값인 _self 는 현재 창에서 열어준다) ← 덧붙여서, target="_blank"로 주면; (웹사이트 보안을 위해 window.opener를 허용하지 않는)rel="noopener" 설정이 암묵적으로 제공된다는 이점도 부가된다!

비 html 리소스(예컨대, PDF, Word 문서, 스트리밍 비디오/오디오 등)로 연결하는 경우, 사용자의 혼동을 줄이기 위해 명확한 문구를 넣어주는 것이 좋다:

href 속성값에 mailto:메일주소 로 넣어주면; (내 컴퓨터에 설치된 기본 메일앱을 열어)메일 보내기로 연결된다. tel:전화번호 는 전화걸기 또는 주소록으로 연결되지만, 기기에 따라 다양한 방식으로 작동한다:

<a> 요소에서 href 속성값과 함께 download="파일명"을 넣어주면; 파일 다운로드로 연결된다:

* cf) 설치된 다른 앱을 열 수 있는 링크를 포함할 때는 사용자에게 명확히 알려줄 필요가 있다: 우선, 여는 태그와 닫는 태그 사이에 있는 텍스트를 통해 열려는 링크의 유형을 알리는 것이 우선이고, 더 필요하다면; [href^="mailto:"](href 속성값이 mailto:로 시작한다면;), [href$=".pdf"](href 속성값이 .pdf로 끝난다면;) 등의 Css 스타일링 타겟팅을 사용할 수도 있다!

앵커: 문서 내부에서 이동하기
우선, 가고싶은 지점마다 id 속성을 이용해 각기 다른 이름으로 앵커(= 도착지)를 만들고, <a> 태그(= 출발지)에서 href="#앵커이름" 속성으로 앵커와 연결해준다 ← 아래 코드의 맨 위와 맨 밑에 있는 <p> 태그의 id= 속성에 지정된 이름 과 그 내부 <a> 태그에 설정된 href= 속성에 지정된 값 을 비교하면서 찬찬히 살펴보십시오..

아래로 이동..

[ 이름이 지정된 앵커로 이동하기 ]

☞ <a> 링크(= 출발지)를 클릭하면; 이름이 지정된 앵커(= 도착지)가 현재 화면의 맨 위에 배치되도록 화면이 스크롤된다!

위로 이동..

* cf) Bootstrap 5)를 쓴다면; 부트스트랩 자체 설정에 의한 부드러운 스크롤 애니메이션이 기본적으로 적용되어 있지만, 필요하다면; 문서 내부에서 점프하는 앵커에 플러그인을 써서 좀 더 부드럽고 가시적인 스크롤 애니메이션 효과를 나타낼 수도 있다: 스무드 스크롤

나아가, Anchor-JS ↓ 플러그인 라이브러리를 쓰면 기존 페이지 컨텐츠에 깊은 앵커 링크를 추가해줄 수도 있다!

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

☞ 현재 폴더 한단계 위 특정 폴더(../jc-namsan) 내부의 /Start.html 파일에서 id가 "#v-pills-Gil0-2" 인 앵커

Anchor-JS

░ 플러그인은 기존 페이지 컨텐츠에 깊은 앵커 링크를 추가한다

깊은 앵커링크
Anchor-JS 플러그인을 사용하기 위해서는; 먼저, CDN 링크 및 초기화 작업이 필요한데, Anchor-JS는 딥 링크하려는 요소를 타겟팅하기 위해 Css 선택자를 사용하는 복수의 메서드 또한 제공한다:
[ AnchorJS CDN 링크 및 초기화 ] 
                                        
                                            <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>

                                            <script>
                                                /* 1. 달리 타겟팅을 설정하지 않는 기본 초기화 설정 */
                                                anchors.add(); // 'h2, h3, h4, h5, h6'의 기본 선택자로 대체된다

                                                /* 2. 혹은, 딥 링크하려는 요소를 타겟팅하기 위해 아래와 같은 방식으로 사용할 수도 있다 */
                                                anchors.add('h1'); // 페이지의 모든 h1 요소에 앵커 추가
                                                anchors.add('.anchored'); // .anchored 클래스가 할당된 요소에 앵커 추가
                                            </script>

➥ 기본 앵커 문자(§)는 언제든 아래와 같은 옵션을 추가하여 다른 유니코드 문자로 변경해줄 수 있다: 

                                    
                                        
                                    
                                
                                    
                                        var anchors= new AnchorJS() // 앵커의 인스턴스 생성
                                        anchors.options= {
                                            icon: '⇅', // AnchorJS 기본 앵커 문자 변경
                                        }
                                        anchors.add('[data-anchor]') // data-anchor 속성이 주어진 요소에 앵커를 추가한다
1. Deep Anchor는 각각의 옵션을 통해 앵커 표시 위치를 변경해주거나, 언제 앵커를 보일 것인지 등을 설정해줄 수 있다. 또는, anchors.options= { .. }로 한번에 설정해줄 수도 있다:
[ Anchor-JS 옵션 설정 ] 
                                        
                                            anchors.options.placement= 'left' // 앵커를 앞쪽에 배치한다 ← 기본값: right
                                            anchors.options.visible= 'always' // 앵커를 항상 보인다 ← 기본값: hover 시
                                        
                                    
                                        
                                            var anchors= new AnchorJS()
                                            anchors.options= { /* article 바로 아래 모든 dl 요소의 끝에 앵커를 설정한다 */
                                                icon: '⇅',
                                                titleText: '위로 이동..', /* 옵션을 추가할 때는 ,로 구분해주어야 한다! */
                                            };
                                            anchors.add('article > dl') // article 바로 아래 모든 dl 요소의 맨 아래

                                            anchors.options= { // article 바로 아래 모든 dl의 바로 밑 단계 dt 요소에 앵커를 추가한다
                                                icon: '#'
                                            };
                                            anchors.add('article > dl > dt') // article 바로 아래 모든 dl의 바로 밑 단계 dt 요소

☞ 참고로, 위 코드는 이 웹문서 전체에 적용된 딥 앵커 설정입니다..

2. 고정 내비게이션바가 있는 페이지에서는 연결하려는 제목을 가릴 수 있는데, 이를 방지하기 위해 Css의 :: 선택자를 써서 약간의 사용자 지정 스타일을 지정하여 대상 제목에 여백을 추가해줄 수 있다: 
                                    
                                        /* 1. 의사 요소를 만들어 고정 내비게이션 바의 높이로 만들어줌으로써 링크 위의 위치로 점프하도록해준다 */
                                        :target::before {
                                            content: "";
                                            display: block; height: 80px; width: 1px;
                                            margin-top: -80px;
                                        }

                                        /* 2. 또는, 아래처럼 새로운 scroll-margin-top 속성을 사용할 수도 있다
                                        - 단, 브라우저에 따라서는, 이 방식을 지원하지 않을 수도 있다! */
                                        :target { scroll-margin-top: 80px; }

* cf) AnchorJS에는 (점프 탐색 등)탐색을 동적으로 생성하는 메서드가 포함되어 있지 않다. 그럼에도, AnchorJS는 모든 앵커 요소목록(anchors.elements)을 노출하며, 이러한 방식으로 외부 코드는 요소를 조회하고 이를 사용하여 탐색을 생성할 수 있게 된다. 또한, 미리 정의된 ID를 가진 정적 내비게이션과 함께 AnchorJS를 사용할 수도 있다. 어떤 경우에는, heading 요소 대신 기존의 섹션 ID에 연결할 수도 있는데, AnchorJS에 data-anchor-id= 속성을 사용하여 이 작업을 수행하도록 지시할 수 있다: 

                                    
                                        
                                    
                                
                                    
                                        <script>
                                            anchors.add('h3');
                                        </script>

☞ 이 깊은 앵커링크 컨텐츠(anchors.add('article > dl');) 안에 커서를 올리면; 바로 아래에, 위에서 변경해준 앵커 문자(⇅)가 나타납니다. 나타난 앵커 문자에 클릭도 해보세요.. 클릭 이후 위로 올라간 뒤에, 제목에 커서를 가져가면; 또 위쪽에 설정해준 앵커 문자(#)가 나타납니다.. ← 웹 코딩 초보 단계에서는 좀 어려운 내용입니다만, 나중에.. 필요 시, 더 살펴보십시오 ㅡㅡ;

인라인 프레임

░ 을 이용하면 손쉽게 현재 웹문서에 다른 웹문서를 삽입할 수 있는데, 이는 직접 조작할 수 없는 외부 컨텐츠를 자신의 웹사이트에 포함시킬 때 매우 유용하다!

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

☞ 프레임에 설정된 height= '값'보다 소스 문서 높이가 더 클 경우; 세로 스크롤바가 나타난다!

* cf) 예컨대 YouTube 동영상이나 광고 배너 삽입, Disqus 게시판 ↓ , Google Maps 등이 바로 임베딩 기술을 이용하는 가장 대표적인 경우입니다

░ 웹사이트 탐색 방식에는 다양한 유형이 있으며, 이를 표시하는 방법 또한 다양하다: home 버튼, top/bottom 이동 버튼, (컨텐츠로 건너뛰는)이름이 지정된 앵커, 현재 문서내 탐색 드롭다운 메뉴, 아코디언(접는 박스), 브레드크럼브(탐색 경로 표시), 페이지내이션(쪽수 매기기) 등도 탐색이고, 웹사이트 내비게이션 메뉴바, 탭 내비게이션, (숨겨진 슬라이딩 메뉴인)오프캔버스 및 (버튼 클릭 대화상자로 쓰이는)모달 등의 플라이아웃 메뉴, (마우스 오버시 나타나는)반동 리액션 메뉴, (버튼 클릭시 나타나는)햄버거 메뉴 등등.. 모두 사용자의 웹 서핑을 인도하는 다양한 도구들이다!

Disqus 게시판

░ 를 이용하면 쉽게 자신의 웹사이트에 게시판을 달아줄 수 있는데, Disqus 게시판을 등록하기 전에.. 먼저 Disqus 도움말 문서를 찬찬히 살펴보시기를 권합니다.. ← 작은 웹사이트라면; 게시판에 Disqus 광고가 포함되고, 게시판을 편집할 수도 없지만.. 그래도 돈(현재 월 20달러 ㅡㅡ;)은 안드는 [Free Version]을 선택하시면 됩니다

웹사이트에 Disqus 게시판 달기
자신의 웹사이트에 Disqus 게시판을 삽입하려면; 먼저, Disqus에 접속하여 몇 단계의 질문들에 답하면서(메일주소와 비밀번호, 웹사이트 주소가 필요함) 웹사이트 등록 및 사용자 프로필 설정을 마칩니다 ← Website Name: 부분에는 '숏네임'(= Disqus에서의 포럼)을 넣어주어야 하는데, 이는 Disqus에서의 자기 게시판 ID라고 보면 됩니다

* cf) 숏네임 shortname 은 Disqus 사이트에 할당된 고유 식별자로서, 사이트에 게시된 모든 댓글은 이 이름으로 참조된다 - 숏네임은 Disqus에 자신의 사이트 댓글과 Disqus 관리자에서 지정한 설정만 불러오도록 지시하는데, Disqus에서 댓글을 관리하려면 자신의 웹사이트를 등록하고 등록한 숏네임을 사용하여 웹사이트에 Disqus를 설치해야 한다

1. 제대로 진행되면.. 웹사이트 설정 단계로 들어가서 자신의 플랫폼을 선택해줍니다: 워드프레스 등의 특정 플랫폼으로 구축한 사이트라면; 해당 플랫폼을 선택해주면 되고, (이 [소소한 이야기] 사이트처럼)html만으로 직접 만든 웹사이트라면; 맨 아래 있는 Universal Code 를 선택하시면 됩니다
2. 다음, 자신의 웹문서에서 게시판을 넣어줄 위치에 아래 코드를 넣어줍니다: 아래 스크립트 코드에서 ShortName 에는 위 단계에서 넣어준 Website Name: 이름을 넣어주면 되는데, Disqus에서의 자기 게시판 ID라고 보면 됩니다
[ Disqus 게시판 스크립트 코드 ] 
                                        
                                            <div id="disqus_thread"></div>

                                            <script>
                                                (function() { // 이 스크립트는 수정할 수 없습니다!
                                                    var d= document, s= d.createElement('script');

                                                    // 'ShortName'에는 자신의 숏네임을 넣어주십시오!
                                                    s.src= 'https://ShortName.disqus.com/embed.js';
                                                    s.setAttribute('data-timestamp', +new Date());
                                                    (d.head || d.body).appendChild(s);
                                                }) ();
                                            </script>

                                            <noscript>
                                                Please enable JavaScript to view the
                                                <a href="https://disqus.com/?ref_noscript" rel="nofollow">
                                                    comments powered by Disqus.
                                                </a>
                                            </noscript>

Disqus 환경변수 는 disqus_config() { .. } 함수 내에 추가되며, 숏네임은 예외로 하단에 추가된다: 

                                                
                                                    /* ---
                                                        권장 환경변수: 아래 섹션을 편집하고 댓글을 삭제하여 플랫폼이나 CMS의 동적 값을 삽입하세요
                                                    */
                                                    var disqus_config= function () {
                                                        this.page.url= '현재 페이지의 URL ← 절대 URL';
                                                        this.page.identifier= '현재 페이지의 식별자 ← 문자열 또는 숫자';
                                                        this.page.title= '현재 페이지의 제목';
                                                    };

                                                    (function() { // 이 스크립트는 수정할 수 없습니다!
                                                        var d= document, s= d.createElement('script');

                                                        s.src= 'https://ShortName.disqus.com/embed.js'; // 'ShortName'에는 자신의 숏네임을 넣어주십시오!
                                                        s.setAttribute('data-timestamp', +new Date());
                                                        (d.head || d.body).appendChild(s);
                                                    }) ();

Bootstrap 5)

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

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

                                            <html lang="ko-KR">
                                            <head>
                                                <meta charset="utf-8">
                                                <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
                                        
                                                <title>Bootstrap 5) 시작하기</title>
                                        
                                                <!-- Bootstrap 5) 기본 Css 및 아이콘 CDN 링크 -->
                                                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
                                                <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

                                                <!-- 사용자정의 스타일 -->
                                                <style>
                                                    /* 현재 페이지를 위한 자신만의 스타일 작성할 곳 */
                                                </style>
                                            </head>
                                            
                                            <body>
                                                <h1>부트스트랩 5) 시작하기</h1>
                                                ..

                                                <!--
                                                    부트스트랩 v5.3.3 스크립트 & 메이슨리 레이아웃 CDN 링크
                                                -->
                                                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
                                                <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
                        
                                                <!-- 인라인 JavaScript -->
                                                <script>
                                                    // 스트립트 한줄 주석
                    
                                                    /* 
                                                        이것은 스크립트 여러줄 주석입니다
                                                        - 한 줄에서든 여러줄에 걸쳐서든 사용할 수 있습니다
                                                    */
                                                </script>
                                            </body>
                                            </html>

☞ 위 인라인 스크립트 코드는 </body> 바로 직전에 넣어주십시오 ← 웹 브라우저는 위에서부터 아래로 순차적으로 html 코드를 실행해 나가는데, (html 요소에 대해 뭔가를 해야하는)스크립트가 위에 배치되어 있으면; (스크립트가 조작해야 하는 대상 요소가 아직 나타나지 않은 상태에서.. 일을 해야만 하는)좀 난감한 상황에 처할 수도 있습니다 ㅡㅡ;

* cf 1) 코딩 결과물을 크롬이나 엣지 브라우저로 실행한 뒤, 마우스 우측버튼 단축메뉴의 <검사> 명령을 수행하여 관리자 모드( )로 들어가면 다양한 방면으로 작성한 코드를 검토할 수 있습니다..

* cf 2) 코딩 중 언제든.. 현재까지의 모든 Web 표준 규격들을 만들고 다듬어온 문서를 참조하십시오 ← 코드 작성 중 비쥬얼스튜디오 코드의 태그 툴팁에 나타나는 MDN Reference를 클릭해도 됨!

* cf 3) OpenJS 프로젝트의 에서는 "웹코딩에서의 권장사항 및 일반적인 오류를 확인하여 사이트의 접근성, 속도, 브라우저간 호환성 등을 개선"하는 데 관한 힌트를 구할 수 있습니다..

░ 이 는 나중에 만들어볼, 부트스트랩의 내비게이션 바가 가미된 단순 부트스트랩 시작 페이지의 모습입니다. 한편, 및 에는 Web3 및 Bootstrap에 기반한 웹 디자인 관련 자료들이 다양하게 구비되어 있으니 부트스트랩을 배운 이후 자신의 웹사이트를 구축할 때 언제든 찾아보십시오..

✓ ‘SEO’, ‘SEO’ 하는데.. 나중에 필요해지면; 대한민국의 인터넷 상황에 맞추어진 '검색엔진 최적화'에 관해 상세히 설명해주고 있는 도 한번 살펴보십시오..

➥ 점보트론 유닛

부트스트랩 v4) 버전에서 있었던 점보트론 유닛은 v5) 버전으로 올라가면서 공식적으로는 폐기되었다. 하지만, 여전히 Css 및 부트스트랩 유틸리티 클래스들을 이용하여 만들어 쓸 수 있다

이 Jumbotron 예제 는 사용자정의 .jumbotron 클래스를 작성하여 예전의 점보트론 디자인을 재현해본 것인데, 이 점보트론 내부에는 다른 부트스트랩 요소 및 클래스를 포함하여 거의 모든 유효한 html을 넣을 수 있다

(* 이 예제는 에서 가져와 (약간 손질한)것인데, 나중에 한번 만들어보십시오 - 다른 샘플 예제들도 많으니 한번 찾아가서 살펴보십시오..)

wave