위는 대충 미방용.
1. 서론
가끔 글을 쓰다 보면 너무 길어지는 글의 경우, 아래 경우처럼 접어서 보여주고 싶은 경우가 있다.
위는 대충 번역을 정리해둔 표인데, 모바일에선 가독성이 떨어지기도 하고 너무 길면 본문까지의 스크롤이 너무 길어서 접어둘 필요가 있다.
이때, 편집기에서 제공하는 HTML 코드 보기를 이용하여 위의 내용을 간단히 접어버리는 방법을 알아보고자 한다.
2. HTML <details> 태그
※ 이 설명은 달고 싶어서 다는 것이기에 보기 싫은 사람은 "3. 본론" 항목으로 바로 이동 바람.
원래 <details> 태그가 존재하기 전에는 접는 방법을 구현하려면 꽤나 복잡했다.
이전에는 <a> 태그로 클릭이 가능하게 만들고 바로 밑에 <span> 태그를 만든 다음, jQuery로 $(document).ready({}); 안에 접을 <a> 태그가 클릭 되었다면, <span> 태그의 CSS 값을 display: none; 에서 display: block; 으로 바꿔주는 방법을 사용했는데, 이는 알다시피 매우 비효율적이고, 사용자가 전부 설정해줘야 하는 문제가 있다.
이런 중구난방식 HTML4.01의 문법 문제를 해결하기 위해 등장한 것이 바로 HTML5라고 볼 수 있다.
HTML5에서는 이전부터 자바스크립트로 구현하던 일부 기능을 HTML로 만들어두었는데, 그 중 하나가 바로 이번에 알아볼 <details> 태그인 것이다.
(출처: w3schools.com)
웹쟁이들이라면 참고하는 w3schools 홈페이지 되시겠다. 위의 내용에서도 알 수 있듯이 <details> 태그는 공식적으로 지정된 문법이며, 보여주고 싶은 컨텐츠를 닫았다, 열게 만들어주는 태그라고 볼 수 있다.
이러한 <details> 태그는 우리 뒤져버린 인터넷 익스플로러를 제외한 Chrome (크로미윰 계열 브라우저인 마소 엣지, 네이버 웨일 포함), 파이어폭스, 사파리, 오페라 등 다양한 브라우저에서 모두 지원하고 있는 기능이다.
그러므로 여기서 HTML를 한 번 지정해두면 어떤 브라우저로 탐색을 하든 모두 똑같이 동작한다는 것을 보장한다는 것이다. 서론은 됐으니 본론으로 들어가서 사용하는 방법을 쉽게 그림과 함께 알아보고자 한다.
3. 본론
1) 먼저 아래 그림처럼 코드 보기를 눌러 HTML 코드를 확인한다.
2) 편집기의 역할은 사용자가 HTML 태그를 작성하지 않더라도 다양한 서식을 넣을 수 있도록 도와주기 위한 기능도 포함되어 있다. 우리가 이렇게 타이핑을 하는 동안, 사용자가 입력한 모든 태그는 아래 사진처럼 HTML 태그로 변환된다.
사실 저 안의 HTML의 내용은 중요하지 않다. 우리는 이걸 수정하는 것이 아닌, 기능을 추가하기 위해 확인하는 거니까 말이다. 따라서 아래 그림처럼 감쌀 구획을 대략적으로 확인만 해준다.
3) 이제 고난의 순간이다. 한번이라도 HTML을 다뤄본 사람이라면 껌 씹듯이 바로 처리하겠지만, 생전 처음 보는 사람들은 '뭐 어쩌라는 거야?' 하며 당황하게 될 것이다. 그래서 아래 그림처럼 자세하게 설명을 붙여왔고, 또 설명이 안 될 수도 있으니 아래 적어둔다.
*** 아래는 설명 ***
- 먼저 "<details>" 라고 감쌀 내용 제일 위에 적어준다. 오타가 하나라도 나면 안 된다. 정확히 적어주길 바란다.
- 그 다음 감싸려고 하는 내용 맨 끝에 "</details>"라고 붙여준다. 이는 HTML의 닫는 태그로써, 해당 태그의 끝을 의미한다. 이 역시 오타 없이 제대로 적어주도록 하자.
4) 이 과정은 따라하지 않아도 괜찮다. <details> 태그를 선언만 하면 어떻게 되는지 육안으로 보여주기 위한 항목이다. "코드 보기" 에서 나가면 다음과 같이 <details> 태그가 감쌀 영역을 모두 묶어준 모습을 확인할 수 있다.
5) 이 과정도 따라하지 않길 바란다. 4번의 항목에서 다시 "코드 보기"를 눌러 들어가면, 알아서 들여쓰기를 해준 모습을 확인할 수 있다. 간혹 가다, <details open=""> 이라고 되어 있는 경우가 있는데, open=""이라고 적어두면 details 태그를 열린 상태로 게시할 수 있다. 하지만 아카 편집기에서는 아무리 open="" 으로 표시를 해줘도 접는 기능을 열어주진 않으니, 참고하도록 하자.
6) 다음은 접는 기능을 표시해뒀으니, 제목을 표시할 차례다. 아래와 같이 <summary></summary> 라고 정확히 입력해주어야 한다. 오타가 있으면 안 되고, 열린 태그 다음에는 반드시 닫는 태그가 위치해야 한다는 점을 잊지 말자.
덧붙여 설명하면, 저 문장의 위치는 <p>와 같이 자식으로 선언된 태그 이외에 아무 공간에 선언해도 동작하지만, 잘 모르겠다면 무조건 저기에 "한 번만" 적어주자. 이상하게 써서 동작이 안 된다고 하는 건 내 알 바가 아니다...
7) 그리고 방금 적은 저 문장의 열린 태그, 닫힌 태그 사이에 제목으로 적을 걸 입력하고, "코드 보기" 를 눌러 HTML 편집을 종료한다.
8) 아래 왼쪽 그림처럼 클릭했을 때, 감쌀 구역이 제대로 나타나는지 확인한다.
4. 결론
쓰다 보니 글이 상당히 길어졌다. 사실 이 태그의 기능을 알고 있는 명붕이들도 있을 것이고, 몰랐던 명붕이들도 있었겠지만, 아쉽게도 공식 편집기에서는 해당 기능을 공식적으로 지원하고 있지 않아 글을 접으려면 이렇게 구현하는 수 밖에 없다.
다른 곳에서도 소개한 글은 있는데, 자세하게 소개하진 않아 HTML을 잘 모르는 명붕이들이라면 이해하기 힘들 수도 있을 거 같아 다음과 같이 정리해서 글을 써보았다.
마지막으로 아무쪼록 참고가 되었으면 다행이지만, 궁금한 사항이 있으면 질문 받도록 하겠음!
명일방주 유입용 소개글(Ver.24.05)
