모바일은 html 적용이 안 되는 부분이 많습니다. PC로 보시는 걸 추천합니다.
카페 커뮤에서 대문이나 신청서 양식을 작성할 때 HTML 을 쓰는 경우가 있습니다. 대문에서 특정 버튼을 클릭하면 공지나 세계관으로 이동한다든지... 글 쓰는 구간이 정해진 신청서 양식이라든지... https://8148.tistory.com/entry/카페커뮤-열기-정말쉽다-코딩편 위 링크에서 정말 친절하게 설명을 해주셔서 이것만으로도 충분할 수 있겠지만 개발자 지망생으로서 좀 더 쉽고 간편하게 HTML을 짜는 법을 써보고자 합니다. 위 링크를 먼저 읽고 오시면 더 빠른 이해가 될 것이리라 믿습니다! 코드는 이 게시물이 더 간단하고 이해하기 쉽습니다. 아마도요. ~차례~ 0. 들어가기 전... 1. 레이아웃을 짜자! 2. 표를 만들자! 3. (옵션)멋지게 꾸미자!
네이버 카페는 2018년 5월 9일 기준으로 게시물 html 편집을 막았습니다. 카페 대문만 html 편집이 가능합니다. 네이버 블로그는 이전 버전 스마트 에디터 2.0의 경우 html을 사용할 수 있습니다. 이전 버전을 사용할려면 >여기< 를 클릭해 참고하시면 됩니다. (3.0 버전으로도 방법이 있지만 번거롭고 귀찮습니다.) 티스토리 블로그 또한 html 지원을 합니다. 따라서, html 을 쓰려면 카페 대문 / 네이버 블로그 스마트 에디터 2.0 / 티스토리 / html 편집 프로그램(sublime, edittext 등) 중 하나를 쓰면 됩니다. 이 글은 카페커뮤를 위해 글을 쓰는 만큼 카페 대문에서 html 을 사용해보려고 합니다. 카페 대문을 들어가면 위와 같은 편집창이 뜹니다. 여기서 빨간 네모칸의 체크박스를 클릭하면 html 편집을 할 수 있습니다.
먼저 대문 또는 신청서에 뭐가 들어갈지 구상합니다. 여기서 보일 예시는 제가 임의로 만든 것으로 디자인과 구성이 별로인 점 양해 부탁드립니다. (커뮤 스텝을 해본 경력이 없어 내놓을만한 샘플이 없습니다...) 참고로 대문과 게시물 모두 가로값 740px입니다. 폭과 높이는 중요하므로 기억해둡시다. 레이아웃을 짜고 나면 어느 부분에 이미지가 들어가고 어디에 텍스트가 들어가는지, 클릭시 링크를 타고 이동하는지 여부를 적어둡니다. 더불어 표로 나누어진다면 어떻게 나누어질지도 대강 선을 그어둡니다. 앞서 말했지만 저는 커뮤 스텝 경력이 없어 잘 모르지만 1) 백그라운드 이미지를 기본으로 투명화된 이미지들을 셀마다 삽입하는 방법 2) 백그라운드 이미지에 모든 걸 다 넣는 방법 중 하나를 쓰면 될 것 같습니다. (저는 1번을 추천합니다.)
뇌에 힘을 줘야하는 제일 중요한 파트입니다. 먼저 아까 만든 대문 이미지에서 부위를 나눈 선만 남겨 확인해보면 다음과 같습니다. 점선은 원래는 나누어지지 않는 영역이지만 셀 합치기를 하기 전 모습을 표현하고자 그려넣었습니다. 이 때 가로,세로의 최대 칸 수와 각 칸의 폭,높이를 정해야 합니다. 이 표의 경우 가로 5칸, 세로 4칸이며 가로 740px, 세로 500px 입니다. 길이는... 제가 임의로 수치를 적어 실제 길이와 차이가 있습니다. 양해 바랍니다. 각 셀의 가로 합과 세로 합이 각각 전체 표의 가로와 세로 길이와 같기만 하면 됩니다. 이 표를 html로 구현하는 것이 제일 중요합니다. 구현 전 html에서 이용하는 table 태그 에 대해 설명하겠습니다. <table> 내용 </table> 표 생성 태그. 폭을 정해야 합니다. <tr> 내용 </tr> 가로칸 생성 태그. 높이를 정해야 합니다. <td> 내용 </td> 세로칸 생성 태그. 폭을 정해야합니다. 아래 3X2 표를 예시로 html 작성을 하면 다음과 같습니다. 코드는 아래처럼 구분하기 편하게 들여쓰기를 하는 게 좋습니다. 이제 아래처럼 셀을 합쳐야 할 때의 코드를 봅시다. rowspan 은 세로 셀을 합치고 colspan 은 가로 셀을 합칩니다. 합쳐지는 칸의 개수만큼 따옴표 안에 적어주시고 합쳐진 만큼 가로 또는 세로 셀을 지워야 합니다. 셀 합치기 부분이 어려우실 겁니다... 그래서 준비했습니다! 자동 html table 생성기입니다. (아래 링크) https://www.tablesgenerator.com/html_tables# 기초적인 영어만 되신다면 사용하는데 무리가 없을 겁니다. 몇 번 건드려보면 대충 감이 잡힐 테니 표를 만들고 여기서 html 태그를 복사해가면 됩니다. (만약 잘 모르겠다면 댓글로 남겨주세요.) 다시 표로 돌아와 봅시다. 보기 쉽게 점선과 수치를 지워보겠습니다. 이 표를 html 로 표현하면 다음과 같습니다. 이제 폭과 높이를 지정해야 합니다. 수치는 위 표를 참고합니다. 단위를 적는게 정신건강에 좋습니다. 보통 px 을 기준으로 합니다. 1) table width(폭) 지정 2) tr(가로칸) height(높이) 지정 3) td(세로칸) width(폭) 지정 순서로 가는 것이 좋습니다. 구분하기 쉽게 색을 다르게 썼습니다. 이제 거의 다 왔습니다. 조금만 더 힘내봅시다. table 에 몇가지 필수 옵션을 추가해야합니다. 생략해봤자 득될 것 없고 자세한 건 몰라도 되니 그냥 추가합시다. border 는 테두리선으로 편집시 백그라운드 이미지와 위치 호환이 잘되는지 확인하기 위함으로 잘 맞는 경우 1이 아닌 0으로 설정해주세요. 선이 사라져도 표는 사라지는 게 아니니 안심하세요. <table width="740px" border="1" cellpadding="0" cellspacing="0" background="이미지주소"> ...(중략)... </table> 백그라운드 이미지는 표 크기와 동일하게 설정해주셔야 합니다. 저같은 경우 이미지 주소는 블로그에 비공개로 이미지를 원본사이즈로 올리고 오른쪽 버튼을 클릭해 [이미지 주소 복사] 를 이용하여 가져왔습니다. 이 경우 주소가 쓸데없이 길어지지만 네이버가 폭파하거나 게시물을 지우지 않는 한 안전합니다. 물론 다른 방법으로 이미지 주소를 쓰셔도 상관없습니다. 요즘은 주소 축약 서비스를 많이 제공합니다. 아무튼 이미지 주소를 설정했다면 90% 왔습니다. 현재 여러분의 상태는 이것과 비슷한 모습일 겁니다. 추후에 카페 대문 편집창의 html로 표 수정을 시도하면 들여쓰기와 줄 개행이 모두 사라지거나 쓰지 않은 것이 추가될 수 있으니 메모장 또는 문서에 원본을 남겨놓는 걸 추천합니다. 이제 html 체크박스를 끄면 짜잔! 이렇게 나오게 됩니다. 이미지는 무료 이미지 배포 사이트를 이용했습니다. 남은 건 백그라운드 이미지 또는 표를 보다 정밀하게 수정하는 일 뿐입니다. 수정하는 과정에서 이미지 주소가 계속 바뀔 수 있기에 여기서부턴 노가다 정신이 조금 필요합니다. 노가다를 덜 뛰기 위해선 처음부터 수치를 정확하게 재고 계산하는 게 좋습니다. 그리드와 자를 애용합시다. 신청서 양식으로 html 을 써야하는 경우 대문에서 html을 끈 편집창에서 드래그를 이용해 표를 복사해가시면 됩니다. 이제 슬슬 끝이 보입니다. 백그라운드를 제외한 이미지 삽입은 html 을 끄고 이미지를 삽입할 셀을 클릭한 후 대문의 사진 파일 첨부 기능을 이용해 사진간격 띄우기 체크박스를 해제하고 이미지를 올리면 이런 식으로 이미지가 표 안에 성공적으로 삽입되었음을 알 수 있습니다. 이미지는 셀 크기에 맞춰 만들면 매우 좋습니다. 이미지에 링크를 걸 때는 해당 이미지를 드래그하고 URL 버튼을 클릭해 이동하고픈 페이지 링크를 입력하시면 됩니다.
간혹 대문을 보시면 움직이는 텍스트를 볼 수 있습니다. 이는 마퀴 태그를 이용해 텍스트에 특수효과를 준 것입니다. 마퀴 태그의 종류는 >여기< 에서 확인할 수 있습니다. 예시로 제가 위에서 만든 표에서 제일 윗 행의 텍스트가 일정 구간을 좌우로 왔다갔다 효과를 줘 보겠습니다. 위와 같이 작성하면 아래처럼 텍스트가 나타나게 됩니다.
폰트에 효과를 주는 (>여기<를 참고하시면 됩니다) 것까지 적용하면
위와 같이 원하는 효과를 줄 수 있습니다. 이제 여러분이 원하는 커뮤 맞춤형 카페 대문과 신청서를 만들 수 있습니다! 즐거운 커뮤 되시길 바랍니다 :) 틀린 부분 또는 궁금한 점은 댓글로 문의 주세요 |
네이버 카페 대문 HTML - neibeo kape daemun HTML
관련 게시물
저작권 © 2024 ko.apacode Inc.
