트릭컬) 이미지로 접기펴기 기능 테스트

이미지를 누르면 펼쳐집니다

ep1. 프롤로그	ep5. 탐험가 마리
ep2. 여왕과 교주	ep6. 수집가 마요
ep3. 수양록 언커버링	ep7. 반란 뒤집기
ep4. 마법(?)사 에슈르	ep8. 반란 뒤집어지기

ep1. 콜드 캔 오프너	ep4. 탐험가 마리
ep2. 베니, 이겼노라	ep5. 수집가 마요
ep3. 세상에 나쁜 버터는 없다	ep6. 반란 뒤집기

ep1. 엘프는 두 번 속인다	ep4. 탐험가 마리
ep2. 불안한 동맹	ep5. 수집가 마요
ep3. 아니땐 굴뚝에 연기	ep6. 반란 뒤집기

1챕터 풀 소스코드

<br>

</div>

</summary>

<br>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td style="width: 50.0000%;">ep8. 반란 뒤집어지기</td>

</tr>

</tbody>

</table>

<p>

<br>

</p>

</details>

소스코드 설명

일단 접기기능은

내용

</details>

이렇게 기본임

<details>

<summary style="display:block;"> / 접기표시 display:block 속성은 앞에 검은 삼각형표시 지우는 서식

<div style='background-size: 30%; background-repeat: no-repeat; background-position:center; background-image: url("이미지주소"); height: 300px;'> / 백그라운드사이즈: 그림 사이즈, height - div로 주는 높이를 설정

추가.

아카에서 이미지로 접기펴기를 쓰려면 일단 '이미지' 자체로는 불가능 한 것 같음 css서식 불가능

그래서 백그라운드(배경사진)로 이미지를 넣은 [div 박스]를 접고 펼치는 기능으로 대체하는 방식

여기서 속성으로,

1) 백그라운드사이즈는 말 그대로 이미지 자체 사이즈를 말함. 픽셀(px 가로x세로)이나 퍼센트(%) 모두 지정 가능하나, 개인적으로는 px지정을 더 추천함

모든 디바이스의 화면 해상도가 다 다르다 보니, 퍼센트로 지정하다보면 작은 폰의 경우 정말 작게 나옴

오히려 픽셀로 지정하면 각각의 dpi에 대응되어 적당히 작아지거나 함

2) div의 크기를 굳이 따로 지정해야 하는가? 에 대해서인데

정확히 아는 사람은 가르침을 바람

내가 이것저것 해보니 그림 사이즈가 가로로 긴 경우 큰 해당사항이 없는데,

내 예시처럼 포스터 혹은 세로로 긴 캡쳐샷을 넣고 싶은 경우엔 div로 넣으면 무조건 짤려서 강제로 height로 지정함

이미지 사이즈가 가로로 긴 배너가 아니라면,