Bootstrap 5) Study 2

부트스트랩 색상

░ 부트스트랩 v5.3)의 에서 Css 색상 변수들은 :root로 전역 설정되며, 다크 색상모드에서도 또한 (기존 테마 색상들은 변경되지 않은 상태에서)그에 맞추어 자동 조정된다!

부트스트랩의 색상 파레트: .text-body와 .bg-body 클래스는 <body> 기본 텍스트색과 배경색을 나타내며, .text-reset 클래스는 현재 요소의 텍스트 색상을 부모요소의 색상으로 되돌린다; 부트스트랩 v5.3)의 신규 색상 파레트에는 기존의 테마 색상들에다 -secondary(연한 색상 for color와 bg), -tertiary(더 연한 색상 for color와 bg), -emphasis(더 진한 텍스트 for color) 등이 추가되었다; 부트스트랩 v5.3)의 신규 색상 파레트에서 배경색과 테두리 색상에는 -subtle(연한 색상 for bg와 border) 색상 변수가 추가되었다

텍스트색 및 배경색, 요소의 불투명도: 텍스트의 불투명도를 설정하는 .text-opacity-75/50/25, 배경색의 불투명도를 설정하는 .bg-opacity-75/50/25는 모두 색상 클래스와 함께 조합하여 사용해야 한다!; 요소의 불투명도는 .opacity-0/25/50/75/100 클래스로 설정한다: .opacity-25 .opacity-50 .opacity-75

그라디언트 배경: 배경색과 함께 다음과 같은 사용자정의 .bg-gradients 클래스를 만들어 추가해주면 배경에 자신만의 그라디언트를 더해줄 수 있다

타이포그래피

░ 여기서는 부트스트랩 v5.3)의 텍스트, 글꼴 관련 클래스들을 간략히 살펴봅니다..

텍스트 타이포그래피: 아래 예제 코드를 보면서 .display-1/2/3/4/5/6 대 .fs-1/2/3/4/5/6간 차이를 눈으로 새겨두시면 됩니다; 마찬가지로, <h#> 태그들과 .lead 클래스, <body> 기본 텍스트, <small> 태그간 글자의 크기 및 굵기 차이를 눈으로 새겨두시면 됩니다; 그밖에, 다음과 같은 글꼴 관련 클래스들이 있다

점보트론 디자인

░ 부트스트랩 v4) 버전에서 있었던 점보트론은 v5) 버전으로 올라가면서 공식적으로는 폐기되었다. 하지만, 여전히 Css 및 부트스트랩 유틸리티 클래스들을 이용하여 만들어 쓸 수 있는데, 점보트론 내부에는 다른 부트스트랩 요소 및 클래스를 포함하여 거의 모든 유효한 html을 넣을 수 있다:

점보트론 디자인: 아래는, 사용자정의 .jumbotron 클래스를 작성하여 예전의 점보트론 디자인을 재현해본 것입니다:

패러그래프

░ 여기서는 부트스트랩 v5.3)의 문단, 인용문 관련 클래스들을 간략히 살펴봅니다..

문단 정렬: 아래는 기본적인 문단 수평 정렬인데(Css 3에서의 .text-left/center/right), 뷰포트에 따라 따라 반응하는 .text-*-start/center/end 클래스를 사용할 수도 있다 ← 참고로, 부트스트랩 5) 버전에서는 left/right 속성명은 제거되었습니다 - 대신, start/end 속성명을 사용하십시오(여타, 同); 텍스트 수직 정렬을 설정하는 .align- 클래스(기본값: .align-baseline)는 인라인, 인라인블록, 인라인 테이블 및 테이블 셀 요소에만 영향을 미친다 ← 인라인이 아닌 컨텐츠에는 플렉스박스를 사용해야 한다!

줄 높이: html 문서 기본, 또는 부트스트랩에서 재설정한 기본값인 .lh-base 클래스의 line-height 값은 대략 1.5 정도이다

텍스트 자르기, 래핑 및 오버플로: .text-truncate 클래스는 현재의 화면 너비를 벗어나는 영역서부터는 자르고, 나머지는 ...로 표시한다 ← 이 클래스는 블록레벨 요소 및 인라인-블록 요소에서만 작동된다!; html에서는 기본적으로 텍스트가 길어지면 자동 줄바꿈하여 다음 줄로 내려간다(기본값인 .text-wrap). 하지만, 해당 요소에 .text-nowrap 클래스를 주면; (텍스트가 길어져서 다른 영역을 침범하더라도)자동 줄바꿈을 하지 않는다

블록쿼터: Bootstrap 5)에서 <blockquote> 태그(및 .blockquote 클래스)는 마진이 margin: 0 0 1rem;(= 상/좌우/하)으로 재설정되었고, <address> 태그는 이탤릭체에서 브라우저 기본 스타일로 재정의되고 line-height 또한 상속되며, margin-bottom: 1rem;이 추가되었다

리스트 스타일

░ 여기서는 부트스트랩 v5.3)의 리스트 관련 클래스들을 간략히 살펴봅니다..

목록 리스트: Bootstrap 5)에서는 <ul> 및 <ol>, <dl>의 margin-top은 제거되고, margin-bottom: 1rem;으로 재설정되며(내부의 중첩된 목록에서는 margin-bottom도 제거된다), 앞쪽 패딩 또한 재설정된다. 한편, <ul> 및 <ol>에서 .list-unstyled 클래스를 주면; 앞에 붙는 불릿을 없애고 앞쪽 마진도 없애준다; <ul> 및 <ol>에서 .list-inline 클래스를 주고, 각 <li>에서 .list-inline-item 클래스를 주면; 가로로 펼쳐지는 인라인 리스트를 만들 수 있다 ← 이러한 인라인 리스트는 주로 가로 메뉴바를 만들 때 활용된다!

사전목록 리스트: Bootstrap 5)에서는 <dl> 리스트에서 (html 5에서와는 좀 다르게)<dt>는 굵게 표시되고, <dd>는 margin-left: 0; margin-bottom: 0.5rem;으로 재설정된다. 한편, 가로 사전목록은 Bootstrap 5)의 그리드시스템을 써서 작성할 수 있다

박스 스타일

░ 부트스트랩 이전 버전들 속성명에서 방향을 의미하는 left/right는 Bootstrap 5) 버전에 와서 start/end로 바뀌었습니다. 이는, 최근의 Css 쓰기모드를 고려한 새로운 작명 방식인데, 부트스트랩 이전 버전들만 아니라 Css의 속성명과도 좀 상이해진 점이 있으니 기억해두십시오..

박스 테두리 스타일: 박스 테두리는 .border 클래스로 그려주는데, .border-top/bottom/start/end 클래스로 원하는 방면만 따로 그려줄 수도 있다. 반대로, 4방향에서 특정 방면만 제외하고자 할 때는; .border에 덧붙여 .border border-top/bottom/start/end-0 식으로 사용해주면 된다:; 둥근 테두리는 .border rounded 및 .border rounded-1/2/3/4/5 클래스로 작성한다; 테두리 두께는 .border border-lg (부트스트랩 기본 굵은 테두리) 및 .border border-1/2/3/4/5 클래스로 작성한다; 테두리의 불투명도는 텍스트 및 배경 색상에서와 마찬가지로, border border-색상 에다 .border-opacity-100/75/50/25/10/0 불투명도 클래스를 덧붙여서 사용한다

박스 모서리 스타일: 박스 모서리: .rounded | .rounded-pill | .rounded-circle | .rounded-0

박스 그림자 스타일: 박스 그림자: .shadow-sm | .shadow | .shadow-lg

포커스 링 스타일: .focus-ring은 포커스가 주어진 상태(:focus)의 기본 윤곽선을 제거하고 보다 광범위하게 사용자 정의할 수 있는 박스 모양으로 대체하는데, 모든 요소 및 컴포넌트에 대해 사용할 수 있다

이미지/미디어 다루기

░ 부트스트랩에서 이미지는 기본적으로 반응형 으로 동작하며, max-width: 100%; height: auto;로 부모 요소를 꽉 채우게 된다!

이미지 삽입 및 배치: 이미지 삽입 시 .img-fluid는 기본값이며, .img-thumbnail로 주면; 둥근 모서리를 가진 1픽셀 테두리(= border rounded 1px)로 이미지를 둘러싸준다; <picture> & <source> 태그와 함께 사용할 때는; 이미지 관련 클래스를 <img> 태그에 넣어주어야 한다; 이미지에 설명글을 달아줄 때는, <figure>(& .figure) 요소 안에서 <img>(& .figure-img)의 위나 아래에 <figcaption>(& .figure-caption)으로 작성해주면 된다

미디어 삽입하기: 미디어 삽입 시는; .media 요소 내부에 넣어주면 된다; 유튜브 등의 동영상 삽입 시는; .ratio ratio-1x1/4x3/16x9/21x9(기본값: 1x1)로 넣어준다. 이는 <iframe>, <video>, <object> 등으로 삽입한 비디오나 슬라이드를 부모 요소의 너비에 따라 반응형으로 처리하는데, 스타일은 부모 요소의 .ratio 클래스로부터 자식 요소로 직접 적용된다

Plyr 플레이어

░ 는 html 5) 비디오, 및 등을 재생해주는 인라인 미디어 플레이어이다

Plyr 플레이어 사용하기: Plyr 플레이어를 사용하기 위해서는; 먼저 Css 및 스크립트 소스를 필요로 한다

유튜브와 비메오에서의 Plyr 플레이어

1. 유튜브와 비메오 플레이어의 경우, Plyr은 기본적으로 <iframe>을 사용하는데, plyr__video-embed 클래스 이름이 반응형 임베드로 만든다. autoplay, loop, playsinline (유튜브 전용) 등의 쿼리 매개변수를 URL에 추가할 수 있다

                                    
                                        
                                        <div class="plyr__video-embed" id="player">
                                            <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
                                        </div>

☞ plyr__video-embed 클래스는 (가장 일반적인)16:9 비율로 시작하는데, Plyr 자체가 작동하면 사용자가 지정한 비율 설정 옵션이 작동된다!

2. 또는 data-plyr-provider 와 data-plyr-embed-id 라는 두 가지 필수 데이터 속성을 가진 표준 div를 선택할 수도 있다

Vimeo Player

Youtube Player

☞ data-plyr-embed-id는 미디어 영상의 ID 혹은 URL일 수 있으며, WebVTT 자막 또한 지원한다

* cf) 한 페이지에 여러 영상을 임베드할 경우에는 각각 따로 생성해주어야 하는데, 아래와 같이 맵 배열을 이용하면 모두 순차적으로 생성된다 ← 이 경우에는 당연히, 영상에서 ID 대신 클래스를 사용하여야 합니다!

                                    
                                        const players= Array.from(document.querySelectorAll('.js-player')).map((p) => new Plyr(p));

░ 위 유튜브 플레이어에서 보았을 터인데(?), 최근들어 유튜브에서는 영상의 ID를 넣든, URL을 넣든 작동하지 않습니다 - 현재로서는 <a> 요소로 직접 링크하는 것만이 유일한 방법입니다. 아마도, 광고도 안보면서 꽁짜로 가져다 본다고 임베드 방식은 정책적으로 막아놓은 것으로 보입니다 ㅡㅡ; 양반네

Big Picture

░ 는 이미지, iframe, 인라인 컨텐츠 및 비디오를 YouTube, Vimeo 및 자체 호스팅 비디오로 선택적으로 자동 재생해준다!

빅픽쳐 갤러리: 빅 픽쳐 플러그인을 사용하기 위해서는; 먼저 Big Picture 플러그인을 위한 스크립트 소스 및 초기화를 필요로 한다; 1. Big Picture 플러그인은 썸네일을 표시할 수 있으며 클릭하면 원본 이미지가 팝업되는데, 라이트 박스 이미지는 무엇이든 래핑하여 작동된다 ← <img> 요소는 data-bigpicture= 속성을 지닌 <a> 요소 내부에 배치하여야 한다!; 2. data-bigpicture=와 data-bp= 속성을 쓰면 쉽게 라이트박스 이미지 갤러리를 만들 수 있다. 부모요소에서 갤러리 id 를 설정하고, <a> 요소에서 data-bigpicture= 속성을 써서 id 를, data-bp= 속성을 사용하여 이미지 원본을 전달해주면 된다; 3. YouTube 및 Vimeo 동영상은 data-bigpicture= 속성을 통해 동영상 id 를 제공하기만 하면 Big Picture 플러그인과 함께 사용할 수 있다

SVGs 아이콘

░ 부트스트랩은 향상된 접근성 및 벡터 지원 이라는 측면에서 을 선호한다!

부트스트랩의 Svg 아이콘: 1-1. 부트스트랩의 Svg 아이콘을 사용하려면; 먼저, <header> 안에서 부트스트랩 아이콘을 사용하기 위한 CDN 링크를 넣어주어야 한다; 1-2. 이어서, html 문서 내에서 Svg 아이콘을 직접 작성해주거나(), 갖고 있는 Svg 아이콘을 일반적인 이미지처럼 <img> 요소로 참조하거나() 할 수 있는데, width 및 height 등의 속성도 함께 사용할 수 있다; 2. 순전히 장식용인 아이콘에는 aria-hidden= "true" 속성을 추가해서 보조기술로부터 숨겨주어야 하며, role= "img" 및 aria-label 속성으로 그 의미를 보조기술에 알려주어야 한다 ← 그렇지 않은 경우에는; 적절한 방법으로 대체 텍스트를 제공해주어야 한다!

오픈소스 아이콘

░ 부트스트랩에서 기본 제공하는 SVGs 아이콘 외에도 다양한 오픈소스 아이콘 제공 사이트들이 있는데, 이러한 오픈소스 아이콘들은 <body> 안에서 사용하려는 아이콘 이름을 <i>나 <span> 태그 등으로 (각 사이트에서 제공하는 방식에 맞추어)추가해주면; 외부 오픈소스 아이콘을 웹문서에 불러들여 사용할 수 있다

오픈소스 아이콘: 은 스크립트 파일을 CDN으로 불러와서 초기화 설정을 해준 이후에 <i>나 <span> 태그를 써서 사용할 수 있는데, 에 표시된 이름으로 불러들여 쓰거나(), 또는 다운로드하여 <img> 태그로 삽입해줄() 수도 있다:; 또한, Feather 아이콘과 같은 방식으로 사용한다. 먼저, CDN 링크와 스크립트 파일을 불러온 이후에 <i>나 <span> 태그를 써서 이용할 수 있다; 은 .fill-색상 및 .stroke-색상 클래스로 SVG 색을 채워줄 수 있다. 한편, 아이콘 크기 변경은 간단히 svg 요소의 width와 height 속성을 사용하면 된다

아이콘 링크

░ 모든 아이콘에 대한 클래스를 가진 아이콘 폰트 또한 부트스트랩 아이콘에 포함되는데, 필요할 때 html 문서에서 클래스 이름으로 참조하면 된다

아이콘 붙은 링크: 는 사용하고자 하는 <a> 태그 안에서 텍스트 앞 또는 뒤에 <i> 태그로 .bi-아이콘이름으로 넣어주는 것만으로 충분하다: 소소한 이야기; 아이콘의 크기, 배치 및 색상은 자동으로 조정되는데, 아이콘 모양을 변경하려면; Css의 font-size 및 color 속성을 사용할 수 있다; 부트스트랩의 .icon-link(및 .icon-link-hover) 클래스는 인라인 flexbox 스타일 및 .gap 기본값을 써서 기본 링크 스타일을 수정하고, 아이콘과 텍스트의 쌍을 빠르게 정렬해준다:

확장 링크

░ 확장 링크는 링크 클릭 범위 를 확장하는데, Css가 작동하는 방식에 의해 대부분의 <table> 요소에서는 사용할 수 없다!

확장 링크의 기본: <a> 요소에 .stretched-link 클래스를 추가하면; 가상요소 ::after를 통해 그 부모 요소로까지 클릭 범위가 확장되는데, 이때 <a>의 부모요소는 .position-relative로 설정되어 있어야한다

카드에서의 확장링크: 카드는 부트스트랩 자체 규정에 의해 .position-relative로 설정되어 있으므로, 카드 안에서 사용한 .stretched-link는 기본적으로 카드 박스 전체로 확장된다

미디어 구성요소에서의 확장링크: 미디어 구성요소에서 사용한 확장 링크는 미디어 박스 전체로 확장되지 않으므로, 별도로 .media 컨테이너에 .position-relative 클래스를 추가해주어야 한다:

컬럼에서의 확장링크: 컬럼에서의 확장 링크는 다른 컬럼으로까지 링크 범위가 확장되지 않고, 현재 컬럼 내부만으로 확장 링크의 범위가 제한된다 ← 단, 해당 컬럼에서의 .position-relative는 필요하다!

확장링크가 작동하지 않는 경우: 만일 확장 링크가 제대로 작동되지 않는다면; 컨테이닝 블록이 그 원인일 가능성이 많은데, 다음 Css 속성들이 요소를 컨테이닝 블록으로 만든다: static 이외의 position 값, none 이외의 transform, perspective, filter 값 등..

캐러셀 슬라이드

░ 캐러셀은 Css 3d 트랜스폼과 약간의 스크립트로 구축된, 이어진 컨텐츠들(이미지나 텍스트 등) 사이를 순환하는 슬라이드 쇼 이다

캐러셀 기본: 캐레셀에서 슬라이드 크기를 자동으로 정규화하지는 않으므로, 컨텐츠 크기를 적절하게 조정하려면 추가 유틸리티나 사용자정의 스타일을 사용해야 한다; 캐러셀은 이전/다음 버튼과 표시자 도 지원하는데, 필요에 따라 추가하고 스타일링해주면 된다. 또한, 캐러셀은 기본적으로 터치스크린 기기에서의 좌/우 스와프를 지원하는데, 이 기능을 비활성화하려면; data-bs-touch= "false" 값을 추가해주면 된다; 색상 설정은 루트 요소, 부모 래퍼 혹은 컴포넌트 자체에서 data-bs-theme= "dark" 속성을 사용해주면 된다 ← 이는 Css의 filter 속성을 써서 기본값인 white 계열과 대비되는 색상으로 반전시킨다!; 캐러셀 아이템간 자동 순환 시간 간격을 변경하려면; 개별 .carousel-item에서 data-bs-interval= "밀리초" 속성을 추가해주면 된다; 자동 재생 슬라이드는 data-bs-ride= "carousel" 속성을 주면된다. 이 API를 지원하는 브라우저에서 웹페이지가 표시되지 않으면(예컨대, 브라우저 탭이 비활성화되거나 브라우저 창이 최소화된 경우) 캐러셀 순환이 중지된다 - 자동 재생은 마우스를 가져가면 일시 중지되는데, 이 동작은 pause 옵션으로 제어할 수 있다 ← ride 옵션을 data-bs-ride= "true"로 설정하면; 페이지 로드 시 자동으로 순환을 시작하지 않되, 첫번째 사용자 상호작용 후에 시작된다!

캐러셀 슬라이드쇼: 캐러셀 슬라이드 중의 하나는 반드시 .active 클래스를 지정해주어야 한다. 또한, 특히 단일 페이지에서 다수의 캐러셀을 사용하는 경우에, 선택적 컨트롤을 위해 고유한 id를 설정해주어야 한다. 컨트럴 및 표시자 요소들에는 캐러셀 요소의 id에 일치하는 data-bs-target= "대상요소", 또는 링크용 href= "#대상요소" 속성이 주어져야 한다

Swiper 캐러셀

░ 은 하드웨어 가속 전환과 놀라운 기본 동작을 갖춘 가장 현대적인 모바일 터치 슬라이더로서, 모바일 웹 사이트, 모바일 웹 앱 등에서 유용하게 쓸 수 있는데, 일반 PC 환경에서도 또한 잘 작동된다!

스위퍼 캐러셀: 스위퍼 캐러셀 플러그인을 사용하기 위해서는; 먼저, 다음과 같이 Swiper 관련 CDN 링크, Script 소스 및 초기화를 필요로 한다

사용자 상호작용

░ 필요하다면; 특정 요소에 role= "button" 속성을 추가함으로써 기본 커서를 (버튼 요소 없이도)포인터로 변경하여 대화형임을 강조할 수 있다: <span role= "button" tabindex= "0">대화형</span>

상호작용 방지하기: .text-decoration-none 클래스는 <a> 태그의 링크 밑줄을 제거하며(소소한 이야기), .pe-none 클래스는 포인터(마우스, 스타일러스펜, 터치 등)과의 상호작용도 방지한다(소소한 이야기)

숨겨진 대화형 컨텐츠: 시각적으로는 숨기되, 스크린리더기 등에는 알려야 하는 컨텐츠에는 .visually-hidden 클래스를 사용할 수 있는데, 이는 추가적인 시각 정보나 단서를 (예컨대, 색상을 통해 무언가를 알리고자 하는데)볼 수 없는 사용자에게 그 의도를 전달해야할 때 유용하다; 시각적으로 숨겨진 대화형 컨텐츠의 경우, .visually-hidden-focusable 클래스를 사용할 수 있는데, 포커스가 주어지면 컨트롤이 표시된다

텍스트 선택방식: .user-select-all/none 클래스는 사용자가 텍스트 단락에서 클릭할 때 컨텐츠가 선택되는 방식을 설정한다

상태표시 바

░ 플레이스 홀더와 스피너 보더는 컴포넌트 또는 페이지에서 무언가가 로딩 중임을 표시하며, 프로그레스 바는 프로젝트의 현재 진척 정도를 표시한다

플레이스 홀더: 플레이스 홀더는 .placeholder 클래스와 (너비 설정을 위하여)그리드 컬럼으로 만든다. 플레이스 홀더의 높이는 기본적으로 부모 요소의 크기를 기반으로 하지만, .placeholder-lg/sm/xs 클래스로 변경해줄 수도 있다. 너비는 그리드 컬럼이나 .w- 유틸리티 클래스, 또는 인라인 스타일을 통해 변경해줄 수 있고, 색상은 기본적으로 currentColor를 사용하는데, .bg-색상 클래스로 변경해줄 수도 있다; 애니메이션에는 .placeholder-glow/wave 클래스를 사용할 수 있다

스피너 보더: 부트스트랩에서 스피너 보더는 스크립트 없이 단지 html과 Css로만 작성하는데, rem 단위 사이즈 및 display: inline-flex;로 빌드된다. 스피너 보더의 형태에는 .spinner-border 및 .spinner-grow가 있고, .spinner-*-sm/lg 클래스를 써서 크기를 설정해줄 수도 있다; 스피너 보더의 색상은 기본적으로 currentColor(부모요소의 색상)으로 빌드되는데, .text-색상 및 .text-bg-색상 클래스를 써서 변경해줄 수도 있다

프로그레스 바: 프로그레스 바는 두 개의 html 요소와 너비 설정을 위한 Css, 약간의 추가적인 속성들로 구성된다. 프로그레스 바를 쌓고, 거기에 애니메이션을 적용하고, 그 위에 텍스트 레이블을 배치해줄 수 있다; 프로그레스 바의 높이 및 값 범위를 나타내기 위해 .progress를 래퍼로 사용하는데, 이 래퍼는 role= "progressbar" 속성과 접근을 위한 label 및 접근 가능하게 만드는 aria 속성들(aria-label, aria-labelledby)을 필요로 한다. 그 내부에서 바와 레이블을 위해 .progress-bar를 배치하는데, 색상 및 너비는 인라인 스타일이나 유틸리티 클래스, 또는 사용자정의 Css를 사용하여 설정할 수 있다; 프로그레스바의 모양은 .progress-bar 클래스에 .progress-bar-striped 및 .progress-bar-animated 등을 덧붙여서 설정해줄 수 있다; 다중/누적 프로그레스바를 위해서는 래퍼로 .progress-stacked 클래스를 사용하는데, 멀티 진행률 표시기에서의 너비는 .progress-bar가 아닌 .progress에서 설정해주어야 한다

프로그레스 바

░ 플러그인을 사용하면 반응형의 스타일리시한 웹용 진행률 표시기를 쉽게 만들 수 있는데, 애니메이션은 모바일 장치에서도 잘 작동된다!

프로그레스 바: Progress Bar에서는 Line, Circle 및 SemiCircle 등 몇 가지 모양을 기본 제공하는데, 먼저, 스크립트 소스를 불러들여야 한다

Focus & Tab

░ 폼 컨트롤, 버튼, 링크과 같은 상호작용 요소는 포커스를 주거나 탭을 통해 이동하는 것이 가능한데, 탐색 포커스 순서는 기본적으로 소스 코드의 눈에 보이는 흐름과 동일하다 ← html의 tabindex 속성을 써서 실제 탭 순서를 변경하거나 Css의 order 속성 등을 써서 시각적 렌더링 순서를 변경하는 것은 사용자의 접근성에 악영향을 끼칠 수 있으므로 주의해서 사용해야 한다!

탭 인덱스: html 전역 속성인 속성은 어떤 요소에든 추가할 수 있고, 그 요소에 Tab 키를 써서 포커스를 맞출 수 있도록 해준다 - 곧, 기본값인 0 은 요소를 포커스 및 탭 가능하게 만들어 소스코드 순서에 따르는 순차탐색 순서에 추가한다; -1 같은 음수값은 요소에 포커스를 맞출 수는 있지만, 탭할 수는 없다 ← 예컨데, 버튼이나 링크 같은 상호작용 요소에 tabindex 값으로 -1 을 주면; 더 이상 Tab 키는 사용할 수 없게된다!; 1 이상 값을 주면; 요소에 포커스 가능하고 탭할 수 있게 되지만, 우선 순위가 지정된 탭 시퀀스에 추가되어 혼란을 줄 수 있으므로 가능하면 피하는 것이 좋다 ← 다시 말해, tabindex를 써서 html 문서의 DOM 트리 순서를 변경하는 것은 좋지 않다!

탐색 포커스: 요소가 를 받을 때 기본 브라우저 동작은 포커스 링을 표시하는 것인데, 이 포커스 링은 브라우저와 운영체제에 따라 제각각이다. 따라서, 요점은 요소의 기본 스타일과 대비되는 포커스 스타일을 따로 설정해주어야 한다는 것인데, 이를 위해서는 요소에 윤곽선이나 그림자를 설정해주는 것이 일반적이다; 요소의 autofocus 속성 및 스크립트의 요소.focus(); 메서드는 페이지가 로드될 때 포커스 가능한 요소에 초점을 맞춰주며, 뷰는 그 위치로 스크롤하여 표시된다 ← 단, 이것이 순차 포커스 탐색 순서를 변경하는 것은 아니다!

Table 작성 기본

░ 부트스트랩의 Table은 (타사 위젯을 사용하는)Opt-in으로서, <table> 태그 안에서 .table로 지정해준 다음, 선택적 수정자 클래스 및 사용자 지정 스타일로 확장하게 된다!

테이블 작성하기: 테이블의 색상은 table 전체나 각 row마다, 또는 개별 셀마다 각각 설정해줄 수도 있다. 한편, 부트스트랩에서 모든 테이블 스타일은 상속되지 않는다 - 곧, 중첩된 테이블은 독자적으로 스타일을 지정해줄 수 있다; 테이블 제목을 나타내는 <caption> .. </caption> 태그는 (어디에 놓여지든 간에)기본적으로 bottom에 배치되는데, .table caption-top 클래스로 상단에 배치해줄 수 있다:

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

* 테이블 캡션
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter
footer	footer	footer	footer

html 5) Table

░ Tabel은 행/열 로 구성된 데이터 집합으로서 표 형식의 데이터인데, 열/행이라는 형식 면에서는 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 1행	td 2->행 방향으로 합침: rowspan=2	td 3	td 4
tbody 2행	td 2->행 방향으로 합침: rowspan=2	td 3->열 방향으로 합침: colspan=2
tbody 3행	td 2	td 3	td 4
tfoot: th 1	tfoot: th 2	tfoot: th 3	tfoot: th 4

Typography

미디어/아이콘/링크

상호작용

테이블

부트스트랩 색상

타이포그래피

1

2

3

4

5

6

1

2

3

4

5

6

Title .text-body-secondary small

점보트론 디자인

Hello, world!

패러그래프

리스트 스타일

박스 스타일

이미지/미디어 다루기

Plyr 플레이어

html 5) Player

Vimeo Player

Youtube Player

Big Picture

SVGs 아이콘

오픈소스 아이콘

아이콘 링크

확장 링크

Card with stretched link

확장된 링크가 있는 컬럼

캐러셀 슬라이드

기본 캐러셀 슬라이드

First slide label

Second slide label

Third slide label

Swiper 캐러셀

썸네일 캐러셀

사용자 상호작용

상태표시 바

프로그레스 바

Focus & Tab

Table 작성 기본

Table 캡션

반응형 테이블

html 5) Table

테이블 작성의 기본

table 태그의 Css 속성들