reaction to the tweet
보시면 구조가 이렇게 되어있거든요
<p class="moreless_fold">
<span onclick="내용변환함수() 여러개";>
더보기여기서 스타일은 morelesss_fold에 먹혀져있죠. 버튼 이미지는 일종의 꼼수로 들어가있는데요, 이렇게 되어있어요.
.moreless_fold {
background: 이미지, 왼쪽 위, 반복안함;
padding-left: 이미지 가로폭;
}요 부분이 핵심인데요, 요소의 왼쪽에 패딩을 주어 일부러 공간을 확보해서 거기에 배경으로 지정하는 방식이에요. 몇몇 사이트에서 링크에 링크그림을 넣기위해 쓰이는 걸로 처음 봐서 배웠어요.
문제는 그건데요, 다시 HTML 구조를 볼게요.
<p class="moreless_fold">
<span>
더보기클릭 가능한 부분은 안쪽의 span 인데 왼쪽으로 강제 삽입한 이미지는 p에 들어가있어요. 그렇기에 이러한 꼼수는 쓸 수 없어요.
.moreless_fold {
width:0;
overflow:hidden;
}무슨 짓이냐면요, p 아래의 span만 딱 골라서 폭을 0으로 만들되 넘치는 건 안 보이게 하는거에요. 그러면 패딩으로 생긴 왼쪽은 남겠지만 내부 영역은 아예 안 보여지겠죠. overflow:hidden; 꼼수가 정말 여러군데에서 쓰여요.
덧붙여두자면 display:none; 을 쓰면 아예 요소 자체가 안 보이게 되니까 목적하는 바를 이룰 수 없어요.
여기서 문제는 클릭할 수 없다는 점입니다. 클릭해야 하는 요소는 p 밑에 있는 span 이고, 설정한 배경 이미지는 위의 요소인 p에 있다는게 문제죠. 근데 span 만 숨겨버렸어요. 버튼은 클릭이 안 되는 상황인거죠.
해결방법은 간단해요. 이럴 땐 브라우저의 개발자도구 (F12) 를 켜놓고 CSS를 여러모로 건드려보는게 제일 해결방법을 찾기 빠르다는건 팁으로 남겨두고요, 배경을 p 밑의 span 으로 옮겨버리는거에요. 그리고 같은 해결법을 쓰는거죠. width:0; overflow:hidden;
.moreless_fold span {
/* 배경 들여쓰기로 넣기 */
background: 배경;
padding-left: 배경 이미지의 폭;
/* 텍스트 감추기 */
width:0;
overflow:hidden;
/* span을 block 요소로 */
display:block;
}마지막에 못 보시던게 추가되어 있을텐데요, 이건 span 이 블록 요소가 아니라 글씨 높이에 따라 잘리는 문제를 해결하기 위한거에요.
이제 상위의 p는 아무 관계도 없는 태그가 되어버렸죠.
이렇게 일단락되었네요.
말씀대로 잘 됩니다! 버튼을 중앙 정렬시키고 싶었지만 그건 필요 사항은 아니니까 넘어가도 괜찮습니다.(그리고 해결 방법을 찾은 듯합니다)
다만, 생각외로 .moreless_bottom span에서는 "접기" 글자가 사라지지 않고 남아 있어서 야매이긴 하지만 text-indent:-9999em으로 안 보이게 처리는 성공했어요.