Nerd
Nerd
Nerd
전체 방문자
오늘
어제
  • 분류 전체보기 (439)
    • Today I Learned (333)
    • 주간회고 (8)
    • FrontEnd (5)
    • ErrorNote (7)
    • 자바스크립트 (24)
    • 알고리즘 (13)
    • html과 css (21)
    • 토이프로젝트 (5)
    • React-Native (1)
    • React (13)
    • node (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 토이프로젝트
  • 3FS
  • wil
  • TIL
  • 리액트
  • 코드숨
  • pacakge.json
  • 명령적 프로그래밍
  • React
  • 리덕스 툴킷
  • 에러노트
  • Redux
  • 메타인지
  • Today I Learned
  • package-lcok.json
  • 리액트 훅
  • 절차지향적 프로그래밍
  • npm i
  • 자바스크립트
  • 값의 할당 및 재할당
  • npm ci
  • 주간회고
  • ErrorNote
  • 파이썬 기초
  • 데이터 타입
  • 파이썬기초
  • JSX
  • 토이 프로젝트
  • 선언적 프로그래밍
  • 모던 자바스크립트

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Nerd

Nerd

TIL] details와 summary
html과 css

TIL] details와 summary

2021. 5. 29. 21:20

detail

인터넷을 하다 보면 펼치기 버튼을 눌러 숨겨져 있던 내용이 출력되는 걸 자주 볼 수 있다.

이러한 걸 해주는 것이 detail이다.

예제를 통해 살펴보자.

<details>
  <p>숨겨진 내용</p>
</details>

기본 화면

 

세부정보를 클릭했을 때

위의 예제는 사진과 같이 p태그가 숨겨져 있다가 세부 정보를 클릭했을 때 펼쳐지면서

숨겨져 있던 p태그가 나오게 된다.

summary

위의 예제를 살펴보면 세부정보라고 따로 기입한 흔적조차 없는데

웹에선 세부정보라고 나타나고 있다.

이 세부정보를 바꾸려면 어떻게 해야 할까?

summary를 사용하면 된다. 아래 예제를 살펴보자.

<details>
   <summary>클릭하세요!</summary>
   <p>안녕하세요!</p>
</details>

위의 예제에선 세부 정보 summary안에 써넣은 클릭 하세요! 가 표시되는 것을 볼 수 있다.

open

위의 예제들은 클릭을 해야만 펼쳐졌다!

하지만 처음 웹에 들어갔을 때 숨겨지지 않은 상태가 되려면 어떻게 해야 할까?

아래 예제를 살펴보자.

<details open>
   <summary>클릭하세요!</summary>
   <p>숨기지 않기!</p>
</details>

위의 예제에선 웹을 들어갔을 때 펼쳐진 상태로 보인다.

웹을 들어갔을 때 숨겨진 것과 펼쳐진 것의 차이점은

<details> 태그의 차이점이다!

만약 웹을 들어갔을 때 펼쳐진 상태로 보여주고 싶다면

<detals> 태그에 open을 추가하면 된다.


오늘은 토이 프로젝트를 진행하다 더보기를 누르면 펼쳐지는 것을 구현하기 위해

details와 summary를 사용했다!

정말 간편하고 유용한 것 같다!

이제 곧 6월 7일에 항해 2기가 시작된다.

설레고 무섭지만 열심히 공부해서 팀원들에게 피해가 끼치지 않도록 해야겠다!

파이팅!👍✍️👍✍️

'html과 css' 카테고리의 다른 글

TIL]미디어쿼리  (0) 2021.06.10
TIL] flex  (0) 2021.05.20
TIL] border  (0) 2021.05.17
TIL] table  (0) 2021.05.09
TIL]first-child, last-child 선택자  (0) 2021.05.06
    'html과 css' 카테고리의 다른 글
    • TIL]미디어쿼리
    • TIL] flex
    • TIL] border
    • TIL] table
    Nerd
    Nerd
    꾸준히 열심히 지속적으로 하겠습니다!

    티스토리툴바