로그인 회원가입

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기

[에른 공방] 테두리에 그라데이션 넣기 (1)

Profile
공산1968

234.png

꺼라위키에서 내가 제일 좋아하는 밴드 문서들을 뒤적이다가 세계 최고 밴드의 상단 틀들이 너무 초라해서 최근에 전부 다 휘황찬란하게 바꿔주고 있는데, 여기서 문득 든 고민이 "과연 테두리에 그라데이션을 넣을 수 있을까" 였음

한 20분동안 이것 저것 만지면서 놀다가 어느정도는 가능하다는 것을 발견함

위 틀은 내 사용자 문서(사용자:LeNouvelFrance)에 저장된 거임 횡단보도 느낌 주려고 노력하고 뭐 그랬는데 중요한건 테두리임

방법이 약간 아날로그하긴 한데

 

||<tablewidth=500><tablealign=right><tablebgcolor=#fff,#1f2023> {{{#!wiki style="margin: -5px -10px; padding: 8px 10px; border: 2px solid transparent;margin-bottom:0px;background:linear-gradient(transparent,transparent) padding-box,linear-gradient(to bottom, #6395B8,#3A3F43,#222,#E6E4CF) border-box;"

{{{#000,#1F2023 {{{#!wiki style="background-color:Currentcolor; padding: 35px; border-radius:px;text-align:center; word-break: keep-all"

{{{#!wiki style="margin: -52px -45px"

|| <!--문서 내용--> ||

}}}}}}}}}}}} ||

 

쉽게 정리하자면 wiki style HTML로 틀 내의 그라데이션을 넣을 수 있는데, 거기서 border-box HTML을 통해 안쪽은 흰색으로 채우고 테두리만 드라데이션을 채우게 함

그리고 안쪽에 틀 내용을 채워넣는건데 문제는 바로 채워넣을시 잉여공간이 너무 많이 생김

그래서 틀 안에 틀을 넣는 방법으로 {{{#!wiki style="margin: -52px -45px" }}}을 정함(margin은 틀의 너비에 따라 직접 정해야하는데 500px 틀 기준으로는 -52px -45px가 가장 안정적으로 나옴)

이 방식을 사용하면 밖의 테두리 그라데이션 속의 틀을 margin 값을 통해 꽉 차게 넣어 테두리에 그라데이션을 넣는게 가능함

한데 틀 속에 틀을 넣는 방법이라 나무위키에서는 테두리와 틀 내용 사이에 1px정도의 간격이 발생하고 밑에 빈 공간이 생김(이건 추후 해결할 수 있을것 같음) 거기다가 수동으로 margin값을 구해야해서 추가적인 연구가 필요한데

그리고 미디어위키랑 나무위키랑 엔진 달라서 미디어 위키에 구현하는 과정도 필요한데 이건 오늘 졸리니까 자고 이번주에 한번 테스트해볼 생각임

머 이정도로만 되도 테두리 그라데이션을 구현하기 위한 최소한의 발은 내디뎠다고 봄

안되는건 뭐 에른 신께서 어떻게든 해주실거니까 상관 없겠지

 

댓글
1
Profile

대체역사, 설정, 창작, 위키이용시 궁금한 점이나 팁 등 제이위키에 대한 광범위한 내용을 다룹니다.

번호 제목 글쓴이 날짜 조회 수
공지 🔨설정 이곳은 대체역사/설정/창작/위키 게시판입니다. (2) 21.09.20 27393
643 ✒️창작 [창작] 월간공방 표지 (1) 22.10.08 414
642 일반 건전한 제이위키 (3) 22.04.11 411
641 일반 여기서 재밌는 세계관들. (14) 22.10.17 406
640 ✒️창작 [와르샤와] All Endings: Korea (Part 1) 21.12.18 406
639 ✒️창작 [창작] HAPPY HALLOWEEN 22.10.30 404
638 🎇인정단체 [월간공방] 서풍 세계관 인터뷰 (7) 22.10.29 397
637 일반 세계관 추천좀 (2) 22.07.12 391
636 📰뉴스 [변화의 시대] 민사련, 민주진보연대로 명칭 변경 23.09.17 387
635 ✒️창작 [창작] Pray For Ukraine (1) 22.03.04 387
634 📰뉴스 [변화의 시대] 변화당, 국민의힘 'ㄱㅎ' 로고에 혹평 23.09.07 380
633 ✒️창작 [창작] 2023년 포스터 22.12.31 376
632 💡정보/팁 세계관을 잘 쓰기 위한 팁들 (2) 21.11.28 373
631 ✒️창작 [창작] 연재 재개. (1) 22.07.23 368
630 📢알림 저스트에이전시 해체 선언문 + 관련 공지사항 (2) 22.06.30 367
629 💖추천 [추천] 세 개의 제국 21.09.24 367
628 일반 [어나더어스] 틀을 바꿔본, 그러나 스포일러일 수 있는. (1) 22.12.01 366
627 💡정보/팁 인물 실루엣 사진 만들기(모바일) (2) 22.07.09 348
626 ✒️창작 [창작] 2022 (but improvement) 22.12.31 343
625 🔨설정 제20대 대선 포스터 만들어봄 21.01.19 343
624 🔨설정 Novel Ai로 만든 이셰노이 비나 등장인물 (3) 22.10.15 341

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기