메뉴 건너뛰기

팁(TIP) 바뀐 에디터로 적용해보는 스케줄, 가이드에 넣을 표를 예쁘게 꾸며주는 html 속성 (radius) -1편-
2,853 25
2023.07.27 23:29
2,853 25

새로운 텍스트 에디터로 태어난 더쿠

이것저것 둘러보다가 이전엔 적용 안 되어서 아쉬웠던 속성을 소개해볼까 해

케톡이 제일 필요해보이는 팁이지만 혹시 글삭하다 밀것같아서 디자인방에 남겨둡니다 홍홍

 

HTML 입문편 : https://theqoo.net/2874798740

 

 

1장

 

-radius편-

 

기존 사각사각한 표를 보다 둥글둥글게 만들 수 있는 속성 radius

쓰는만큼 복잡해지고 코드가 더러워지겠지만(...) 꾸미라고 있는거니까 잔뜩 꾸며보자

 

*radius란? 

반지름을 뜻하고 보통 border(테두리)에 곡률을 주는 용도로 쓰임

반지름이기 때문에 너비와 높이의 절반까지밖에 적용이 안됨

예시- width(너비):100px이고 height(높이):40px시 border-radius:20px까지만 적용

 

 

 

1) 첫번째 표 (전체 틀에서 테두리 살짝만 둥글게 깎기. 제일 간단함)

 

aBNYnw
(바뀐 에디터는 위 이미지처럼 커서를 가져다댔을시(사진상으로는 twitter부분에 마우스 위치) 하단에 적용되는 태그 종류가 뜨고 쉽게 수정할 수 있음)

 

 

DATE CATEGORY CONTENTS
1 음악방송 17:00 KBS2 뮤직뱅크
twitter 18:00 💌
버블 19:00 💛💛💛
31 음악방송 15:30 MBC 쇼!음악중심
twitter 18:00 💌

 

 

파란색 글씨는 기본값이라 변경하면 안되는 중요한부분들(이지만 변경해도 되긴함. 가장 기본 셋팅값)

초록색 글씨는 덬들 마음대로 뭐든지 바꿀 수 있어 (padding에 대한 설명은 2번째 표를 참조해줘 여기서도 너무 컨텐츠 간격이 광활한데 넣을게 없다, 싶으면 패딩값 넣어줘도 됨)

 

 

<center> //표전체 중앙정렬
<table cellpadding="0" cellspacing="0" style="border-collapse:separate;margin:0px;padding:0px;border-spacing:0px;
width:100%;line-height:40px;text-align:center;font-size:12px;color:#aaa;">//표 전체 적용코드. 글자사이간격, 칸과 칸 사이의 간격, 테두리속성, 내부여백, 외부여백, 테두리간격 기본 셋팅 코드. 너비:가로 전체 다 쓰기,줄간격 40픽셀, 글은 기본 중앙정렬, 기본 글자크기 12픽셀, 기본글자색 #aaa
    <tbody>
        <tr style="background-color:#FFEFD5;color:#FFB54C;font-weight:bold;"> // 줄꾸밈(한줄 전체 적용)="배경색, 글자색, 폰트굵기"
            <td style="border-top-left-radius:20px;border-bottom:solid 1px #FFEFD5;width:15%;">DATE</td> // 칸꾸밈(첫번째칸 적용)="위쪽-왼쪽 모서리 반지름 20픽셀, 칸 하단 실선으로 1픽셀의 예쁜색, 너비는 위에서 준 100%의 너비 중 15%."
            <td style="border-bottom:solid 1px #FFEFD5;width:20%;">CATEGORY</td> // 칸꾸밈(두번째칸 적용)="하단 테두리꾸미기, 너비는 위에서 준 100%의 너비 중 20%. 가운데라 둥글게 모서리 적용 필요없음"
            <td style="border-top-right-radius:20px;border-bottom:solid 1px #FFEFD5;width:65%;">CONTENTS</td> // 칸꾸밈(세번째칸 적용)="위쪽-오른쪽 모서리 반지름 20픽셀, 하단 테두리꾸미기, 너비는 위에서 준 100%의 너비 중 65%"
        </tr>
        <tr>
            <td rowspan="3" style="border-bottom:dashed 1px #FFEFD5;">1</td> // rowspan 매우 중요. 스케줄이 4개면 4줄이니까 rowspan도 4. 칸꾸밈="하단테두리 짧은 실선으로 예쁜색으로 꾸미기"
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td> // 바로 밑에 같은날 스케줄이 또 있으니 회색의 짧은 실선으로만 꾸며줌
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">17:00 KBS2 뮤직뱅크</td>
        </tr> // 위와 동일하나 기본세팅이 중앙정렬이라 가독성이 구리기때문에 왼쪽으로 따로 정렬해줌. 좌우 여백값 조정은 padding 적용 참조

        <tr>
            <td style="border-bottom:#ccc dashed 1px;">twitter</td>
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">18:00 💌</td>
        </tr>
        <tr>
            <td style="border-bottom:dashed 1px #FFEFD5;">버블</td> // 1일차 스케줄의 제일 마지막이니까 예쁜색의 짧은 실선으로 테두리를 꾸며줍니다
            <td style="border-bottom:dashed 1px #FFEFD5;text-align:left;">19:00 💛💛💛</td>
        </tr> // 위와 동일

        <tr>
            <td rowspan="2" style="border-bottom-left-radius:20px;border-bottom:solid 1px #FFEFD5;">31</td> //31일은 제일 마지막날이니 스케줄 제일 밑부분이겠죠? 예쁘게 아래쪽-왼쪽 곡률을 줘봅니다
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">15:30 MBC 쇼!음악중심</td>
        </tr>
        <tr>
            <td style="border-bottom:solid 1px #FFEFD5;">twitter</td>
            <td style="border-bottom-right-radius:20px;border-bottom:solid 1px #FFEFD5;text-align:left;">18:00 💌</td> // 마지막 스케줄은 예쁘게 아래쪽-오른쪽 곡률을 줘봅니다.
        </tr>
    </tbody>
</table>
</center>

 

 

난 일단 다크모드때문에 테두리 설정(border-bottom:1px solid #색깔)을 해놓는걸 추천하고

상단좌측, 상단우측,하단좌측,하단우측 여기에 radius를 준 상태야

 

 

<center>
<table cellpadding="0" cellspacing="0" style="border-collapse:separate;margin:0px;padding:0px;border-spacing:0px;width:100%;line-height:40px;text-align:center;font-size:12px;color:#aaa;">
    <tbody>
        <tr style="background-color:#FFEFD5;color:#FFB54C;font-weight:bold;">
            <td style="border-top-left-radius:20px;border-bottom:solid 1px #FFEFD5;width:15%;">DATE</td>
            <td style="border-bottom:solid 1px #FFEFD5;width:20%;">CATEGORY</td>
            <td style="border-top-right-radius:20px;border-bottom:solid 1px #FFEFD5;width:65%;">CONTENTS</td>
        </tr>
        <tr>
            <td rowspan="3" style="border-bottom:dashed 1px #FFEFD5;">1</td>
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">17:00 KBS2 뮤직뱅크</td>
        </tr>
        <tr>
            <td style="border-bottom:#ccc dashed 1px;">twitter</td>
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">18:00 💌</td>
        </tr>
        <tr>
            <td style="border-bottom:dashed 1px #FFEFD5;">버블</td>
            <td style="border-bottom:dashed 1px #FFEFD5;text-align:left;">19:00 💛💛💛</td>
        </tr>
        <tr>
            <td rowspan="2" style="border-bottom-left-radius:20px;border-bottom:solid 1px #FFEFD5;">31</td>
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">15:30 MBC 쇼!음악중심</td>
        </tr>
        <tr>
            <td style="border-bottom:solid 1px #FFEFD5;">twitter</td>
            <td style="border-bottom-right-radius:20px;border-bottom:solid 1px #FFEFD5;text-align:left;">18:00 💌</td>
        </tr>
    </tbody>
</table>
</center>

 

 

 

2) 두번째 표 (첫번째 줄 DATE, CATEGORY, CONTENTS 칸 각각 둥글게 모서리 깎기+ 스케줄 1일차 큰틀을 둥글게 모서리 깎기)

 

 

여긴 다크모드 테두리 적용을 보기위해 다른 표들처럼 'border-bottom:1px solid #색깔'로 밑테두리를 강조한게 아닌, 'border:1px solid #색깔'로 테두리 전체를 강조해봤어(위에도 말했듯이 다크모드를 위해 하단 테두리값이라도 무조건 설정해놓쟈 눈이 편함)

이 표에서는 다른 스케줄표들과 달리 DATE CATEGORY CONTENTS에 각자 둥근 모서리가 들어가는 바람에 저 CONTENS 회색선 그대로 17:00 뮤직뱅크, 18:00, 19:00이 좌측정렬되는 대참사가 일어나기때문에 padding:0% 5%;(위아래는 0% 좌우로 5% 여백 적용)를 꼭 넣어줘야 회색선과 실제 내용값의 거리를 5%만큼 벌릴 수 있어. 픽셀로 넣어도 되는데 모바일과 피씨 적용기준이 차이가 나기때문에 % 비율로 넣어주자.

 

 

DATE CATEGORY CONTENTS
1 음악방송 17:00 뮤직뱅크
twitter 18:00 💌
버블 19:00 💛💛💛

 

(쓸데없이 색깔칸 말고 흰칸까지 둥근모서리 넣는다고 조잡해짐.. 어차피 색 안넣으면 모서리 안보이니까 만약 쓸 덬들 있으면 저기 하늘색칸이랑 제일 마지막 스케줄칸들만 떼서 쓰면 됨)

 

<center>
<table cellpadding="0" cellspacing="0" style="margin:0px;padding:0px;border-spacing:0px;width:100%;text-align:center;font-size:12px;">
    <tbody>
        <tr style="height:40px;background-color:#B0E0E6;color:#FFF;font-weight:bold;">
            <td style="border-radius:10px;border:solid 1px #B0E0E6;width:15%;">DATE</td>
            <td style="border-radius:10px;border:solid 1px #B0E0E6;width:20%;">CATEGORY</td>
            <td style="border-radius:10px;border:solid 1px #B0E0E6;width:65%;">CONTENTS</td>
        </tr>
        <tr style="height:40px;color:#aaa;">
            <td rowspan="3" style="border-radius:10px 0px 0px 10px;border-bottom:solid 1px #B0E0E6;">1</td>
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="padding:0% 5%;border-top-right-radius:10px;border-bottom:#ccc dashed 1px;text-align:left;">17:00 뮤직뱅크</td>
        </tr>
        <tr style="height:40px;color:#aaa;">
            <td style="border-bottom:#ccc dashed 1px;">twitter</td>
            <td style="padding:0% 5%;border-bottom:#ccc dashed 1px;text-align:left;">18:00 💌</td>
        </tr>
        <tr style="height:40px;color:#aaa;">
            <td style="border-bottom:solid 1px #B0E0E6;">버블</td>
            <td style="padding:0% 5%;border-bottom-right-radius:10px;border-bottom:solid 1px #B0E0E6;text-align:left;">19:00 💛💛💛</td>
        </tr>
    </tbody>
</table>
</center>

 

 

 

3) 세번째 표 (둥근 사각형으로 크게크게 배색 적용)

 

DATE CATEGORY CONTENTS
1 음악방송 17:00 뮤직뱅크
twitter 18:00 💌
버블 19:00 💛💛💛
2 음악방송 15:30 MBC 쇼!음악중심
twitter 18:00 💌
3 음악방송 17:00 뮤직뱅크
twitter 18:00 💌
버블 19:00 💛💛💛
31 음악방송 15:30 MBC 쇼!음악중심
twitter 18:00 💌

 

 

여긴 배색적용으로 실제 모서리 모양이 보이기떄문에 이미지 생략

 

<center>
<table cellpadding="0" cellspacing="0" style="border-collapse:separate;margin:0px;padding:0px;border-spacing:0px;width:100%;line-height:40px;text-align:center;font-size:12px;color:#aaa;">
    <tbody>
        <tr style="background-color:#A1E55C;color:#FFF;font-weight:bold;">
            <td style="border-radius:15px 0px 0px 15px;border-bottom:solid 1px #A1E55C;width:15%;">DATE</td>
            <td style="border-bottom:solid 1px #A1E55C;width:20%;">CATEGORY</td>
            <td style="border-radius:0px 15px 15px 0px;border-bottom:solid 1px #A1E55C;width:65%;">CONTENTS</td>
        </tr>
        <tr style="background-color:#fafafa;">
            <td rowspan="3" style="border-radius:15px 0px 0px 15px;border-bottom:solid 1px #fafafa;">1</td>
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="border-top-right-radius:15px;border-bottom:#ccc dashed 1px;text-align:left;">17:00 뮤직뱅크</td>
        </tr>
        <tr style="background-color:#fafafa;">
            <td style="border-bottom:#ccc dashed 1px;">twitter</td>
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">18:00 💌</td>
        </tr>
        <tr style="background-color:#fafafa;">
            <td style="border-bottom:solid 1px #fafafa;">버블</td>
            <td style="border-bottom-right-radius:15px;border-bottom:solid 1px #fafafa;text-align:left;">19:00 💛💛💛</td>
        </tr>
        <tr>
            <td rowspan="2" style="border-radius:15px 0px 0px 15px;border-bottom:solid 1px #fafafa;">2</td>
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="border-top-right-radius:15px;border-bottom:#ccc dashed 1px;text-align:left;">15:30 MBC 쇼!음악중심</td>
        </tr>
        <tr>
            <td style="border-bottom:solid 1px #fafafa;">twitter</td>
            <td style="border-bottom-right-radius:15px;border-bottom:solid 1px #fafafa;text-align:left;">18:00 💌</td>
        </tr>
        <tr style="background-color:#fafafa;">
            <td rowspan="3" style="border-radius:15px 0px 0px 15px;border-bottom:solid 1px #fafafa;">3</td>
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="border-top-right-radius:15px;border-bottom:#ccc dashed 1px;text-align:left;">17:00 뮤직뱅크</td>
        </tr>
        <tr style="background-color:#fafafa;">
            <td style="border-bottom:#ccc dashed 1px;">twitter</td>
            <td style="border-bottom:#ccc dashed 1px;text-align:left;">18:00 💌</td>
        </tr>
        <tr style="background-color:#fafafa;">
            <td style="border-bottom:solid 1px #fafafa;">버블</td>
            <td style="border-bottom-right-radius:15px;border-bottom:solid 1px #fafafa;text-align:left;">19:00 💛💛💛</td>
        </tr>
        <tr>
            <td rowspan="2" style="border-radius:15px 0px 0px 15px;border-bottom:solid 1px #A1E55C;">31</td>
            <td style="border-bottom:#ccc dashed 1px;">음악방송</td>
            <td style="border-top-right-radius:15px;border-bottom:#ccc dashed 1px;text-align:left;">15:30 MBC 쇼!음악중심</td>
        </tr>
        <tr>
            <td style="border-bottom:solid 1px #A1E55C;">twitter</td>
            <td style="border-bottom-right-radius:15px;border-bottom:solid 1px #A1E55C;text-align:left;">18:00 💌</td>
        </tr>
    </tbody>
</table>
</center>

 

 

디자인이 많이 조잡해지고 실제로 스케줄표에서 간단하게 적용하려면 1번말고는 은근 헷갈리고 난잡해지는 디자인이 2번 3번인지라 비추하지만 가이드에선 디자인폭이 넓어져 활용도가 있을까봐 예시를 공유해봤어

 

2탄은 2018년 이전 더쿠에서는 되었지만 어느순간부터 사라진 배경이미지 적용으로 돌아오겠습니다

 

 

-수정 내용-

에디터가 바뀌어서 높이 지정이 잘 안되서 height:값을 수동으로 따로 지정해줬는데 table style="border-collapse:" 값을 넣고 line-height로 넣어주면 되었지 뭐야.. 코드 싹 다 더 간편하게 뜯어고쳤습니다

 


 

좌측 border-collapse:collapse; 테두리 여백 합치기

우측 border-collapse:separate; 테두리 여백 분리

 

collapse하면 테두리가 1px지만 미세하게 튀어나오고 separate하면 곡률로 적용되지만 다크모드로보면 좀 조잡하고.. 취향차에 따라 조정해가며 쓰세요

 

목록 스크랩 (29)
댓글 25
댓글 더 보기
새 댓글 확인하기

번호 카테고리 제목 날짜 조회
이벤트 공지 [💜셀인샷 X 더쿠💜] 에스테틱급 피부 관리를 홈케어로 느껴보세요! 셀인샷 #직진세럼 체험 이벤트! 209 06.13 35,597
공지 공지접기 기능 개선안내 [📢4월 1일 부로 공지 접힘 기능의 공지 읽음 여부 저장방식이 변경되어서 새로 읽어줘야 접힙니다.📢] 23.11.01 4,323,478
공지 비밀번호 초기화 관련 안내 23.06.25 5,088,635
공지 ◤더쿠 이용 규칙◢ 20.04.29 21,543,994
공지 성별관련 공지 (언급금지단어 필수!! 확인) 16.05.21 22,780,032
모든 공지 확인하기()
28959 그외 예전 자료 고화질 구하기 힘들다 2 12:18 42
28958 그외 ffmpeg 추출 질문있어! 2 05:14 79
28957 그외 보정계 한 몇 년 안쓰다가 오랜만에 올렸는데 유령계 된 거 같다.. ㅋㅋㅋ 1 06.15 134
28956 그외 한동안 움짤 안쪘다가 오랜만에 포토샵 돌리는데 06.15 91
28955 그외 차애 짤계하는데 3 06.15 214
28954 그외 어도비 환불 원래 좀 걸리나? 1 06.15 132
28953 그외 예전 짤 보면 로고 왜케 크게 했는지ㅋㅋㅋㅋㅋㅋㅋ 3 06.14 271
28952 그외 혹시 이 사진 로고 지우는 방법 알수있을까? 3 06.14 406
28951 그외 이런 분위기는 어떻게 내는 걸까? 15 06.14 558
28950 그외 보정 연습 분명히 다른 방법으로 해봤는데 결과물이 똑같음 4 06.14 295
28949 그외 ㅁㅊ내 옛날 보정 진짜 왜저렇게 했냐 눈찌르고 싶다...... 3 06.14 265
28948 그외 포토샵 드래그 선 색깔? 형태? 어떻게 바꾸는지 아는 사람ㅠㅠㅠ 1 06.13 254
28947 그외 디방에서 본건데 피부색 이렇게 어케해? 7 06.13 640
28946 그외 이 폰트 알려주라 3 06.13 316
28945 그외 짤 찌고 싶은 영상이 있는데 ㅠㅠ 1 06.12 356
28944 그외 주황색에 무슨색 섞어야 빨간색이 되지?? 2 06.12 377
28943 그외 더워지니까 귀신같이 짤찌기 귀찮음 4 06.12 238
28942 그외 이거 폰트 알려주라 1 06.12 243
28941 그외 어도비 잘알들아 로그인물어볼거있는데 1 06.12 213
28940 그외 이폰트아는덬있어??? 2 06.11 251