관심 가져달라고 제목 저렇게 씀 ㅎㅅㅎ
※목적※ 독방 가이드/ 정리글 만들고 싶은데 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에서 직접 크기 입력하면 됨
<p>가나다</p>
<p style ="font-size:12px;">가나다</p>
※참고※ 줄간격도 직접 입력 가능 (예: 줄간격 200%는 <p style = "line-height:2;"></p>
2. 하이퍼링크
기본: 더쿠 URL 기능 이용
<p> <a href ="www.theqoo.net"> 더쿠 바로가기 </a> </p>
<p> <a href ="www.theqoo.net" target ="_blank"> 더쿠 새창에서 열기 </a> </p>
주소 다음 부분에 target ="_blank"를 넣으면 새 창에서 열림
<a href ="주소"> 여기에 글자/이미지 등을 넣을 수 있고, 클릭하면 이동함 </a>
<a href ="주소"> <img src ="~~"/> </a>
이미지 직접 올리면 이미지 주소 바로 생기고, 아니면 링크 따서 ~~ 부분에 주소 넣으면 됨
3. 표 - 가운데 정렬
적당한 크기의 표를 넣고 HTML 코드를 보면,
<table style ="~~"> ~~~</table>
이렇게 되어 있음. 두 가지 방법 중에 편한 걸로.
1) <center><table style="~~"> ~~~~ </table></center>
table 시작과 끝에 각각 <center> </center> 입력
2) <table style ="~~; margin:auto;">
table style에 margin:auto; 를 추가
4. 표 - 내용 가운데 정렬
기본: 에디터 창에서 가운데 정렬 누르기
코드는 이렇게 됨
<td><p style =text-align: center;"> </p></td>
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; 추가하기
아래 코드처럼 바꾸면 선 안 보임.
<table style="background:#FFFFFF;border-spacing:0px;border-collapse:collapse;" cellspacing="1">
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) 표에 가로선만 넣고 싶을 때
<table style="background:#FFFFFF;border-spacing:0px;border-collapse:collapse;border-top:3px solid #000000;" cellspacing="1">
- 가장 윗 줄에 선 추가
<tr style="background:#FFFFFF; border-bottom: 3px solid #000000;">
- 행 아래마다 선 추가
2) 특정 칸만 둘러싸고 싶을 때
<td style="border:3px solid #000000;">
3) 선 스타일
solid/ dotted/ dashed/ double 등 - 자세한 건 검색
9. 표 - 이미지 간격
1) PC에서는 적당한 간격 or 정렬 잘 맞는거 같은데 모바일에서는 아닐때 HTML 확인해보기
<td><p><img src ="~~"> <br/><br/> </p></td> 이런 식으로
줄바꿈(<br/>)이 여러 번되어 있는지, 띄어쓰기 되어있는지 확인
- 일반 입력창이 아니라 HTML에서 직접 <br/>이랑 띄어쓰기 (&_nbsp ) 지우기
<td><p><img scr ="~~"></p></td>
2) 표에서 이미지 사이 여백 없애고 싶을 때 (선도 없음)
표 삽입하면 첫 줄에 아래와 같은 코드가 생기는데,
<table style="background:#cccccc;border-spacing:1px;" cellspacing="1">
코드를 이렇게 바꿔주면 됨.
<table style="margin:0; padding:0;" cellspacing="0">
3) 2번 방법으로 완전히 붙을 때도 있고, 아닐 때도 있었음.
그럴 때 line-height 속성을 추가하거나, 표의 <td> <tr> 부분에도 하나하나
style="margin:0; padding:0;line-height:0;" cellspacing="0"
붙여넣기하고 이것저것 해봄.
<table style="margin:0; padding:0;line-height:0;" cellspacing="0">
<tr style="margin:0; padding:0;line-height:0;" cellspacing="0">
<td style="margin:0; padding:0;line-height:0;" cellspacing="0">
이런 식으로 보기에 제일 적당할 때까지 야매로 바꿔보기
4) 모바일에서는 붙는데 PC에서 간격 있을 때 (추가)
이미지 소스 코드 안에 style="vertical-align:bottom;" 추가하기
<img src="~" 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 수정
