이전에 작성한 프론트 개발의 시간을 덜어주는 유용한 HTML(Part 1)에 이어서 두 번째 시간을 가져보도록 할게요.
그럼 바로 시작하겠습니다.
💡 details
게시판의 Q&A와 같은 토글 메뉴(슬라이드 메뉴)를 만들기 위해선 JS의 도움이 반드시 필요했습니다.
하지만 이젠 HTML과 CSS 만으로 토글 메뉴를 구현할 수 있습니다.
✅ details
태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용하며 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용됩니다., 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있습니다. 이러한 <details> 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않습니다.
✅ summary
<summary> 요소는 <details> 요소에서 화면에 보일 제목(visible heading)을 명시할 때 사용합니다. 제목을 클릭함으로써 <details> 요소를 보이도록 할 수도 있고 숨길 수도 있습니다.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
여기서 주목할 점은 메뉴를 클릭하면 details에 자동으로 'open'이라는 속성 값이 적용된다는 점입니다.
이 부분을 이용해서 토글 메뉴가 열렸을 때 스타일을 적용할 수 있습니다.
CSS 활성화
/* 토글메뉴 열렸을 때: 전체 */
details[open] {
padding: .5em;
}
/* 토글메뉴 열렸을 때: 제목 부분 */
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: .5em;
}
💡picture
picture 태그는 img 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용합니다.
picture 요소는 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다. 이러한 picture 요소는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다. (웹 리소스 최적화에도 도움이 됩니다.😄)
picture 요소는 0개 이상의 source 요소와 하나의 img 요소로 구성되며, 브라우저는 source 요소 중에서 해당 뷰포트와 가장 잘 어울리는 source 요소를 사용하여 선택합니다.
브라우저는 source 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 source 요소를 사용하고, 나머지 source 요소들은 무시합니다. 이때 img 요소는 picture 요소의 자식 요소 중에서 가장 마지막에 위치해야 합니다.
img요소는 picture 요소를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 source 요소가 모두 조건을 만족하지 못할 경우 사용됩니다.
<picture>
<!-- media쿼리로 최적화 이미지 노출 -->
<source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
<source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
<!-- 위 media쿼리가 적용되지 않았을 경우 Default로 노출되는 이미지 -->
<img src="/examples/images/people_200.jpg" alt="People">
</picture>
💡datalist
datalist 태그는 input 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용합니다. (예시: 추천어, 검색어 등)
datalist 요소는 사용자가 input 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공하며 인풋값에 Value값이 입력되었을 때 리스트도 필터링되어 보입니다.
사용방법은 아래와 같습니다.
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
단 필터링의 기준은 첫글자가 아니며 해당 문자열을 포함하고 있으면 나타납니다.
- (예시) m 입력 → 필터링 Mint 보여짐
- (예시) n입력 → 필터링 Coconut, Mint , Vanilla 보임
주의점 : input 요소의 list 속성 값으로 datalist 요소의 id 속성 값을 명시하여야만, 해당 datalist 요소에서 미리 정의한 옵션들을 input 요소에서 사용할 수 있습니다.
참고 :
'IT > HTML & CSS' 카테고리의 다른 글
| 반응형 웹 사이트 만들기(반응형 웹 단위도 같이 알아보기) (0) | 2022.11.23 |
|---|---|
| 프론트 개발의 시간을 덜어주는 유용한 HTML/CSS (Part 1) (0) | 2022.09.01 |
| iOS에서 input type="number" 의 숫자 키패드 적용하기 (0) | 2022.08.17 |
| 하이퍼링크를 신뢰할 수 없다면? noopener, noreferrer, nofollow (0) | 2022.07.26 |
| CSS 속성 선택자 정리 – CSS [attribute] Selector (0) | 2022.07.08 |
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
