채널 공지글의 생명은 지속적인 수정에 있다고 생각한다. 몇 채널에서 정보글을 모아두는 글을 쓰고 싶었지만

현생 때문에, 내가 쓰고나서 유기해버리면 글을 쓰는 의미가 없지 않을까 싶어서 그만두기를 한두번이 아니었다.

그렇기에 이런 걸 기록해놔서 많은 사람들(보통 완장들) 이 방법을 알고 글 욕심이 있다면 

이런 형식의 글을 쓰고, 또다른 사람이 글 구조를 이해하고 유지할 수 있으면 좋겠으면 해서 쓴다.

물론 사진과 글의 깔끔한 배치만으로도 좋은 글을 쓸 수 있지만 이 글에서는 html 태그들을 이용하여 만드는 과정을 다룬다.

이 글을 굳이 롭챈에 올리는 이유는 내가 하는 채널 중에서 이런 기반이 아예 없는 채널이 여기라서

그리고 나도 웹 허접이라 설명이 허술하고 부실하다. 경력자들은 알아서 걸러들어주길...

참고한 내용은 원신채널 정보글. 페이지 소스코드 보면서 찾아봤음... 항상 잘보고 있음 감사...

또한 이미지는 같은 사이즈를 쓰려고 하다보니 내가 AI로 만들었던 걸 썼음

아카라이브 웹 에디터에서 코드보기를 눌러보면  html 코드를 확인할 수 있는데, 여기에 덧붙여서 써서 여러가지 효과를 줄것이다

기본적으로 거의 모든 기능들은 코드보기를 누른 뒤 아래 내용을 덧붙여 만든다.

지식이 없는 사람들을 위해 약간 설명하면

태그는 <태그 이름> 이런 형식으로 시작하는데 무조건 마지막에는 </태그 이름>의 형태로 닫아줘야한다.

또한 style = " "을 쓸 때 속성은 스타일태그:스타일태그 옵션 이런 형식으로 쓰고 구분은 세미콜론(;)으로 함

일단 보면 예시도 있으니 이해는 어렵지 않을거

1.내용 접기

<details><summary>접었을 때 보일 내용</summary> 접은 내용은 이 사이에 쓰기 </details>

접는 형태를 사용하는 방법. 간단하지만 페이지가 접혔다 벌어졌다 하는게 거슬릴 수도 있음

2. 표

표를 html으로 만들면 힘드니 웹에디터를 통해 틀을 만든다. 에디터를 통해 만들면 빠르고, 면적을 균일히 나눠줘서 좋음

아래처럼 이미지를 삽입하고, 배경색을 지정하는 정도는 웹에디터만 써서 충분히 할 수 있다.

아래는 표를 써서 만든거

이 부분은 헤더로 만들어도 되고, 그냥 행을 합쳐서 만들어도 된다 다만 표 헤더로 만들면 서식이 먹지 않는다
	링크 여러개 쓰기 링크 여러개 쓰기 링크 여러개 쓰기 링크 여러개 쓰기 링크 여러개 쓰기 링크 여러개 쓰기 링크 여러개 쓰기

이미지를 여러개 정렬시키는 방법으로도 쓸 수 있다.

표 안에 이미지를 삽입하면 표 크기에 맞게 리사이즈 되긴 하지만 그림 사이즈가 다른게 있다면 표가 큰 것 중심으로 맞춰진다.

여기에 table,tr,td 에 style="border:none;" 을 박아서 외곽선을 지울 수도 있다.

이미 생성된 표에서 해당 태그를 찾고 태그마다 아래처럼 입력해주면 된다. 이미 style이 있다면 따옴표 안에서 ;를 치고 이어서 쓴다.
 슬래시(/)가 있는 태그는 닫는 태그이므로 만지지 않는다.

<table style="border:none;">

<tr style="border:none;">

<td style="border:none;">

다른 스타일 속성이 이미 있을 경우 예시

<table style="width:100%;border:none;">

여기에 각 이미지를 클릭해서 링크들을 달면 정렬된 링크 글이 쉽게 완성된다. 

표로 만든 예시(클릭하면 링크로 이동함)

3. 별도의 영역, <div>

<div> </div> 태그를 써서 별도의 영역을 만들수도 있다.

div 안에 이미지나 표, 또 다른 div를 삽입 할 수 있다.

위 영역은 영역에 테두리를 줘서 만든건데

테두리는 "border: 굵기 선 형태 색깔;"의 형태로 적으면 된다. 

굵기는 숫자 px

선의 종류는 solid, dotted, dashed, double, groove, inset, outset, ridge  이 있는데, 검색해보거나 직접 써보길

색깔은 색상코드를 적어두면 rgb() 라는 형식으로 알아서 변환된다

style에 border-radius를 써서  둥근 테두리를 사용할 수도 있다.

배경 이미지를 삽입할 수도 있다, 테이블에서도 가능하긴 한데 지저분해서 추천은 안한다.

배경이미지를 삽입하기 위해서는 미리 아카에 업로드된 이미지 주소가 필요하다. 이미지 주소 역시 업로드한 글에서 코드보기를 통해 볼 수 있다.

<div style = "background-image:url(해당 이미지 주소)"> 를 사용하면 되고

background-repeat은 표가 이미지 크기를 벗어났을 때 이미지의 적용 여부이다.

이 속성을 쓰지 않으면 div 안의 내용이 이미지 크기를 벗어 났을 때 이미지가 다시 반복된다.

 background-repeat:no-repeat; 이라 써주면 반복하지 않고 바탕색이 적용된다.

background-size를 통해 배경화면을 어떻게 적용할지도 지정할 수 있다. 여기 글을 보면 자세히 이해할 수 있는데

난 이미지에 실정에 맞게 contain과 cover 중에 쓰는 게 낫다고 생각한다.

혹은 위에 말한 repeat을 설정하여 반복 패턴이 나타나게 하는 것도 좋다.

위 예시는

<div style="border:10px solid rgb(36, 196, 151);border-radius:15px;text-align:center;background-image:url(https://ac.namu.la/20221124sac2/67bfb3334ec5f6ccbf1ed33e885dc985db7d664ba0c417bab8f0fa5a40e9c48d.png);background-size:cover;background-repeat:no-repeat">; 내용물 </div>

을 사용하여 만들었다.

이상하게 에디터에서는 안보이는데 작성완료한 글에서는 > 뒤에 세미콜론이 붙는다. 이 세미콜론은 무시해주길

마지막 예시는

<div style="border:5px dashed rgb(43, 104, 167);text-align:center;background-image:url(//ac.namu.la/20221127sac/0b4f98b8617d4316d82ed0b58d9b3d2d13353714d749ea2a94c3160b6f15c3e7.png);background-repeat:no-repeat;background-size:contain">; 내용물 </div>

이고 내용물 부분에 표를 만들어서 이미지를 삽입했다.

마지막으로 글을 통째로 긁는 방법은 수정을 눌러 에디터로 들어가고 코드 보기 눌러서

html 코드들을 전체 복사 하는 것이다.

이걸로 완장은 이런 글들을 쉽게 통째로 복사할 수 있다

이런 방법을 통해서 유기된 글들을 지속적으로 이어가는게 중요하다고 생각함.

맺으며 내가 해본 바로는 <script>를 제외한 html 태그들을 이용해 글에 효과를 주며 만들 수 있다. 

물론 내가 소개한 내용은 고수들이 아는 내용의 아주 일부이겠지만, 원한다면 각자 웹 공부해서 더 나은 글을 쓰길 바라.

그리고 모바일하고 웹하고 보이는게 다를 수 있으니 체크해봐야 하는 것도 잊지말길

덧붙여, 롭챈에서 공지용 글을 쓸까말까 생각하다가 이런 글까지 쓰게 됐는데 

이런 글쓰면 완장 중에 한명이 각성해서 쓸거라 생각함