더쿠 - 🔖 제 목표는 케톡 핫게입니다 - 독방 가이드를 위한 야매 HTML 정리

관심 가져달라고 제목 저렇게 씀 ㅎㅅㅎ

※목적※ 독방 가이드/ 정리글 만들고 싶은데 HTML이 발목 잡는 덬들을 위해 씀

※주의※ 나도 html 배운적 없고 검색해서 더쿠 에디터에서 먹히는 것만 야매로 한 거라 비효율적인 방식이거나 부정확한 내용일 수 있음. 원리 설명 없고 결과 나열임.

0. PC에서 모바일 화면 보기

크롬에서 F12 - Ctrl + Shift + M

(도구 더보기 - 개발자 도구 - 상단 Toggle device toolbar)

모바일에서 어떻게 보이는지 바로 확인

※기본※

* 한 줄 시작과 끝은 <p></p>

* 줄바꿈 <br/>

* style ="font-size:12px;line-height:2;" 에서 :콜론은 이 값을 대입한다는 의미, 세미콜론은 일종의 마침표라고 보면 됨.

* #000000 <- 부분에 색상 코드 여섯 자리 넣기

* width/height는 px값 또는 %로 지정할 수 있음. 둘 중에 편한 걸로.

1. 글씨 크기 맞추기

크기 지정했는데 모바일에서 크기가 들쭉날쭉하면 HTML에서 직접 크기 입력하면 됨

※참고※ 줄간격도 직접 입력 가능 (예: 줄간격 200%는 <p style = "line-height:2;"></p>

2. 하이퍼링크

기본: 더쿠 URL 기능 이용

주소 다음 부분에 target ="_blank"를 넣으면 새 창에서 열림

이미지 직접 올리면 이미지 주소 바로 생기고, 아니면 링크 따서 ~~ 부분에 주소 넣으면 됨

3. 표 - 가운데 정렬

적당한 크기의 표를 넣고 HTML 코드를 보면,

이렇게 되어 있음. 두 가지 방법 중에 편한 걸로.

1) <center><table style="~~"> ~~~~ </table></center>

table 시작과 끝에 각각 <center> </center> 입력

2) <table style ="~~; margin:auto;">

table style에 margin:auto; 를 추가

4. 표 - 내용 가운데 정렬

기본: 에디터 창에서 가운데 정렬 누르기

코드는 이렇게 됨

5. 표 - 셀 크기 정하기

<tr> 행

<td> 칸

처음에 표 만들면 <tr style="background:#FFFFFF"> 이렇게 코드가 생김

<tr style="background:#FFFFFF" height ="100"> height 속성으로 높이 지정

마찬가지로 <td> 부분에 <td width ="200"> width 입력하면 너비 지정 가능

더 자세한 건 ▶표 크기 정하기 (클릭)

6. 표 만들기

간단한 표는 더쿠 에디터로도 가능함.

예를 들어 첫 번째 행은 3칸. 두 번째 행은 2칸인 표가 필요하다 >> 나는 2행 6열 표를 만들어서 병합하는 방식으로 만듦.

(열 분할, 행 분할 기능도 있는데 손이 잘 안가더라고..)

1	2	3	4	5	6
7	8	9	10	11	12

↓↓ 병합 결과 ↓↓

1, 2		3, 4		5, 6
7, 8, 9			10, 11, 12

예쁘게 만들고 싶으면 금손 케톸러 글을 참고하자

📅 내가 독방스케줄 야매로 만드는 법 📅 https://theqoo.net/1644351006

독방스케줄 야매로 꾸며보기 https://theqoo.net/1646899753

7. 표 - 배경 색상

특정 행에 배경 지정하고 싶으면 <tr style="background:#FFFFFF">

특정 칸에만 배경 지정하고 싶으면 <td style="background:#FFFFFF">

#FFFFFF 부분에 색상 코드 넣기

※주의※ 다크모드에서는 배경 사라짐

8. 표 - 선 스타일 변경하기

일단 table style에 border-collapse:collapse; 추가하기

아래 코드처럼 바꾸면 선 안 보임.

1-1) 아래 가로선만 넣기

tr style에 border-bottom 추가 <tr style="background:#FFFFFF; border-bottom: 3px solid #000000;">

border-bottom: 두께숫자px 선스타일 색상;

이렇게 코드 넣어주면 아래에만 줄이 생김

특정 행 바깥을 둘러싸고 싶으면 border<tr style= "border:3px solid #000000;">

특정 칸의 왼쪽에만 border-left/ 오른쪽에만 border-right/ 위에만 border-top

1-2) 표에 가로선만 넣고 싶을 때

- 가장 윗 줄에 선 추가

- 행 아래마다 선 추가

2) 특정 칸만 둘러싸고 싶을 때

3) 선 스타일

solid/ dotted/ dashed/ double 등 - 자세한 건 검색

9. 표 - 이미지 간격

1) PC에서는 적당한 간격 or 정렬 잘 맞는거 같은데 모바일에서는 아닐때 HTML 확인해보기

<td><p><img src ="~~"> <br/><br/> </p></td> 이런 식으로

줄바꿈(<br/>)이 여러 번되어 있는지, 띄어쓰기 되어있는지 확인

- 일반 입력창이 아니라 HTML에서 직접 <br/>이랑 띄어쓰기 (&_nbsp ) 지우기

2) 표에서 이미지 사이 여백 없애고 싶을 때 (선도 없음)

표 삽입하면 첫 줄에 아래와 같은 코드가 생기는데,

코드를 이렇게 바꿔주면 됨.

3) 2번 방법으로 완전히 붙을 때도 있고, 아닐 때도 있었음.

그럴 때 line-height 속성을 추가하거나, 표의 <td> <tr> 부분에도 하나하나

style="margin:0; padding:0;line-height:0;" cellspacing="0"

붙여넣기하고 이것저것 해봄.

이런 식으로 보기에 제일 적당할 때까지 야매로 바꿔보기

4) 모바일에서는 붙는데 PC에서 간격 있을 때 (추가)

이미지 소스 코드 안에 style="vertical-align:bottom;" 추가하기

10. 이미지 병렬 삽입

1) div

https://theqoo.net/1346499692

2) 표

1행 n열 표 삽입하고, 선 색깔 없애주기

11. 글 꾸미기용 html 소스

https://theqoo.net/1241842266

12. 기타 - 아주 소소한..

1) 이미지 위치 옮기고 싶어서 드래그하면 자꾸 지워질 때

일반 입력창 말고 HTML에서 이미지 주소 <img ~~ > 이걸 잘라내서 원래 넣으려던 위치에 붙여넣기

2) 새 떡밥이 떠서 표 한 줄 추가할 때

<tr style ="">~~ </tr> 이렇게 한 세트 복사해서

</td></tr> </tbody></table>

</tbody> 앞에 붙여넣기 하면 됨

3) 유튜브 영상 주소 없이 가져오기 (추가)

해당영상 하단 "공유" 클릭 > 퍼가기 > 코드 전체 복사해서 html 창에 붙여넣기 하면됨. (<iframe> ~ </iframe> )

▶ 따옴표/ 시작과 끝을 잘 했는지/ 세미콜론, 콜론 잘 넣었는지 확인하기

▶ 모바일에서 수정하면 HTML 다 날라가니까 주의. 테스트방/메모장 등에 백업해놓기

처음에 HTML 보면 가독성도 없고 이게 뭔가 싶을 수 있는데 차근차근 시간 들이면 할 수 있을거야

모두 화이팅

21.02.14 수정

번호	카테고리	제목	날짜	조회
이벤트 공지		[VT 코스메틱 X 더쿠] 💪피부 운동💪으로 시작하는 물광루틴💧 리들샷 100 & PDRN 에센스 100체험 이벤트(100인) 198	00:05	2,838
공지		[공지] 언금 공지 해제	24.12.06	1,392,326
공지		📢📢【매우중요】 비밀번호❗❗❗❗ 변경❗❗❗ 권장 (현재 팝업 알림중)	24.04.09	5,974,044
공지		공지가 길다면 한번씩 눌러서 읽어주시면 됩니다.	23.11.01	9,303,615
공지		◤더쿠 이용 규칙◢ [스퀘어 정치글 금지관련 공지 상단 내용 확인]	20.04.29	28,253,682
공지	알림/결과	2025년 하반기 주요 공연장 일정 3	24.11.22	550,020
공지	알림/결과	✨아니 걍 다른건 다 모르겠고....케이돌토크 와서 돌덬들한테 지랄 좀 그만해✨ 144	24.08.31	1,017,999
공지	알림/결과	2025년 상반기 주요 공연장 일정 61	24.08.04	1,460,439
공지	잡담	핫게 글 주제에대한 이야기는 나눌수있어도 핫게 글이나 댓글에대한 뒷담을 여기서 하지말라고 10	23.09.01	3,093,250
공지	알림/결과	🔥🔥🔥[왕덬:공지정독바라 차단주의바람] 🔥🔥🔥왕덬이 슼방/핫게 중계하는것도 작작하랬는데 안지켜지더라🔥🔥🔥 95	18.08.28	5,726,600
모든 공지 확인하기()
28374467	잡담	넷플에 있는 캣츠아이 데뷔 다큐 재밌음	02:36	0
28374466	잡담	나 캣츠아이 잘 몰랐을 때 외국에서 그룹 만든다길래 좀 편견 있었거든	02:36	6
28374465	잡담	괴담에 아는 무당 나오면 팍 식었는데	02:36	8
28374464	잡담	갑자기 생각났다 ㅁㅎㅈ이 ㅂ도 이용한건가	02:36	30
28374463	잡담	무당플 갑자기 왜 뜸? 민이랑	02:36	13
28374462	잡담	얘들아 나 방청소하다 개충격적인거 발견함 1	02:36	51
28374461	잡담	솔직히 말하면 ㅇㅇㄹ관심없어서 잘몰랐는데	02:36	33
28374460	잡담	우리나라가 무당 점 사주 이런거에 진짜 둔감해서 1	02:35	54
28374459	잡담	내 알고리즘 무슨일이지 2	02:35	17
28374458	잡담	르 핫 카즈하버전이랑 사쿠라버전 리믹스 좋더라	02:35	21
28374457	잡담	캣츠아이는 피지컬이 너무핫해서 멋있음 3	02:35	64
28374456	잡담	왤케 여돌들을 6명 8명으로 내는거 너무 별로임 2	02:35	120
28374455	잡담	무당집 찾아봤는데 연락이 안됨 > 등기부떼보자 흐름이 이해안감 1	02:35	79
28374454	잡담	지금 다니는 회사 1년만 다니고 그만둘건데	02:35	21
28374453	잡담	팝콘튀기는 허수응원이냐 진짜응원이냐 분간 어려워졌다생각되긴해	02:35	14
28374452	잡담	근데 르 최근다큐 그거 이지 준비하면서 찍은거 아니야? 2	02:35	35
28374451	잡담	릿 팬덤이 극여초라고???????? 만날 뭔 투디씹덕남자들이 엄청 좋아한다, 극남초다 이런 글 엄청 봐서 극남초까진 아니더라도 남자 비율이 더 높은 줄 알았어 무명의 더쿠 https://theqoo.net/ktalk/3662230314 02:30 8. 무명의 더쿠 뭔소리여 투디씹덕남자는 투디를 좋아합니다 6	02:35	119
28374450	잡담	나 근데 탐라에 뉴덬 르릿덬 겹트친 많은데 평화롭게 잘 지내서 신기하긴함 5	02:35	130
28374449	잡담	뉴진스는 등터진 새우로 남아있을 기회 많았음	02:35	51
28374448	잡담	저렇게 무대에서 울면 팬들에게 부담감을 주는 거 아닌지? 1	02:34	36

케이돌토크 카테고리