PC버전에서 보는걸 추천함. 그냥 글을 읽는 것 보다는 직접 글쓰는 창에 들어가서 따라해보는게 더 알기쉬울거임. 나도 전문가는 아니고 얼기설기 줏어들은거 위주로 배운데다가 프로그래머 친구 조언 많이 받아서 쓰는거라 부족할 수 있음....


교체만 간단하게 하고싶다면 제일 아래로 쭉 내리셈! ! !


ctrl+F를 사용하면 바로 원하는 부분만 쏙쏙 뽑아갈 수 있음.



pc버전 아카 글 수정을하면 상단에 바가 있고 오른쪽 끝부분에 <> 모양 버튼이 있음




우왓;버튼에서 글자가; 파딱은아닙니다만글을수정하려는데 이상한문자가와바박나왓네요...;;



이 버튼을 눌러보면 사진은 어디가고 괴상한 영어들만 쫘라락 나옴. 대충 저게 컴퓨터한테 명령하는 글자라고 보면됨. 사진으로 하면 못알아듣고 저렇게 우리가 명령으로 떠먹여줘야 이해함...


굉장히 보기 불편하게 되어있는데 찬찬히 하나씩 뜯어보면 그렇게 어렵지않다. 저 글은 줄바꿈같은게 구별하기 어려워서 뭉탱이로밖에 안보임 그래서 설명을 위해 다른 프로그램으로 열었음(vscode고 안깔아도됨 그냥 보여주는 용도)


중요) 모든 명령은 < > 이걸로 감싸줘야함. 


주문을 할때 여보쇼 예아 거기 짜장하나 괜찮겠습니까? 할려는데 전화를 걸어야 주문을 할수있음. < >은 전화걸고 끊는거임. 아무리 우리가 마파두부덮밥 달라고 해봐도 전화 안걸고 하면 봇치의 혼잣말밖에 되지않음 ㅠㅠ


만약 까먹고 '<' 여는건 했는데 '>' 안닫으면 찐빠가 나니까 항상 조심해야해....




1번째줄임. 보기쉽게 해석하면

<구역 스타일=' <div style='


박스 사이즈:border-박스는; 최대 폭은 100%; box-sizing:border-box;max-width:100%;

배경 이미지는:링크(https://(생략)); background-image:url(링크);

padding:20px로; padding:20px;

배경-반복은:하지말고; background-repeat:no-repeat;

배경-위치는:중간 0px; background-position:center 0px;

배경-크기는: 화면 다 덮도록 맞추셈; background-size:cover;

테두리는:4px 실선인데 색상은 rgb(16, 12, 11); border:4px solid rgb(16,12,11);

테두리-반경은:12px; border-radius:12px;

텍스트-정렬방식은:중간; text-align:center;


'>'>


이제 하나씩 잘라서 해보겠음. 명령 끝부분마다 ;가 붙어서 명령이 존나 띄꺼워보이는데 명령 사이에 넣는 마침표같은거라 생각하면됨. <'명령:이렇게; 명령:저렇게;'> 구조로 구성되어있음.


div style


div style

div - 얘는 division의 줄임말임. 영역 표시하는데 사용됨.

style - 스타일 정할때 사용함. 꾸미는데 쓰는 룩딸태그임. 우리는 글을 꾸밀거니까 자주보게될거임


영역을 지정해줬으니 본격적으로 =를 붙이고 '명령'을 내려야겠지..,,????? 


여기서 잠깐!



box 이친구는 박스모델이라고함. html 요소는 박스로 구성되는데 근첩미궁마냥 막 층층이 있는게 보일거임. 저 층을 박스라고 함.

margin -> border -> padding -> content 층으로 되어있음. 위의 명령어 쪼개놓은 부분을 보면 박스,패딩,테두리...가 있을거임.


margin

영어 뜻은 여백. 마진은 테두리랑 가까이 붙어있는 사이 간격임. 여백이라는 이름답게 글 들어가서 볼때는 안보임. 위의 문장에서는 생략되어있음. 그렇다고 의미가 없지는 않음. 글에서 띄워쓰기를 해준다고 생각하면 됨. 보기에는 비어있지만 일단 띄워져있잔아 한잔해~


border

영어 뜻은 경계. 패딩을 싸주는 테두리임. 말그대로 바깥쪽 경계임.


padding

영어 뜻은 속. 만두 속 할때 그 속임. 채워넣는 방석, 깔개 느낌이라 이해하면 됨. 물론 padding 이 새끼도 margin처럼 글에 들어가서 볼때는 보이지 않음.


content

영어 뜻은 내용물. 우리가 보게되는 글 내용물임. margin, border, padding은 꾸며주는거니 룩딸없이 글 쓸때는 없어도 그만이지만 이 친구는 글 내용이니 중요함. 개척자의 모자, 옷, 비이클 생김새는 알빠노지만 겜안분을 벗어나려면 일단 개척자 몸 자체는 있어야하는법임...



이제 다시 해석으로 가서 이어하기 go


box-sizing:border-box;max-width:100%;

박스 크기는 크기인데 border 부분의 박스는 폭 100%짜리로 괜찮겠습니까? 폭 100%는 이미지를 지금 보고있는 화면의 폭 기준으로 100% 크기로 볼 수 있게 해주는거임. 이해가 어렵다면 나중에 직접 100% 다른 숫자를 넣거나 해보자.


배경 이미지 넣기


background-image:url("링크");

border 부분의 배경을 정함. 이미지로 해도 괜찮고 단색으로 해도 괜찮음. 여기 명령에서는 이미지로 해달라고 함. 만약 글을 새로 쓸때나 수정할때 배경만 바꾸고 싶다면 이 부분의 링크만 바꿔치기 하면됨. 일단 알아보고 교체를 성공하면 님은 대강 이해한거임ㅊㅊ


배경을 단색으로 하고싶다...???? 그런 당신을 위해 응용법도 준비함


background-color:white

적으면 이미지 대신 하얀색으로 채워줌. 색상은 white 말고도 red, blue.... 혹은 직접 hex 값을 들고와서 넣어도 좋음.


예시로 미아의 머리색을 사용해보겠음. 위에있는 FFCC33이 hex코드임.


background-color: #FFCC33

적으면 이번엔 배경 색상이 미아의 머리색으로 채워짐. 농ㅋㅋ

http://www.n2n.pe.kr/lev-1/color.htm

이 곳에 색상표가 있음. 원하는 색상을 찾아보자!


background-color: transparent

trans 변한다, parent 부모. 헉ㄷㄷㄷㄷㄷㅈㅅ패드립은 아니고 transparent 영단어 자체는 투명하다는 뜻임. 배경이 없는 공허한 색상을 원한다면 이걸 사용하면 됨. 투명한 배경이라 하얀색이 아님에 주의! 만약 다크모드를 쓰면 배경이 검은색으로 나오게 됨.... 



배경 이미지 부분으로 계속해보자.


padding:20px;

패딩은 20px로. 배경이랑 내용물 사이 깔개 간격이 px임. px의 뜻은??? cm와 비슷하게 픽셀이라는 길이 단위임. 20px은 길이가 20 픽셀임. 만약 포토샵을 해봤다면 매우 익숙한 단위일거임.


배경 이미지 반복 여부


background-repeat:no-repeat;

배경-반복은 하지마라. 만약 배경을 단색으로 했다면 알빠노인 부분임. 왜냐하면 이미지가 배경이라 '만약 이미지 사이즈가 글 길이보다 작으면 배경을 어떻게 처리할지'라서 단색과는 관련이 없기 때문. 이 문장에서는 반복을 허용하지 않지만 만약 반복을 허용한다고 해보자.


반복을 허용한다면 다시 또 여러가지 명령이 있음.

repeat 가로, 세로로 반복함.

repeat-x 가로(x축 방향)으로 반복함.

repeat-y 세로(y축 방향)으로 반복함.


만약 이 이미지로 배경을 채운다고 가정해보겠음. 그렇다멶....?!?!?



환붕쿤 화내지말아 들으십시오 어째서 이렇게 많은 니터가 존재할수있습니까?


바둑판처럼 니터가 많아지는걸 방지하려면 이미지 사이즈를 조정하는게 좋음. 물론 우리가 직접 포토샵을 켜서 사진 크기를 조정하는 귀찮은 일을 할 필요가 없음. 이것도 명령어가 존재함. 밑에서 다룰 예정임.


background-position:center 0px;

배경-위치는 중간 0px로 해주십쇼. 배경을 위치를 중간으로 해주는거임. 마찬가지로 왼쪽, 오른쪽으로 놔두는 것도 가능함.

center 중간

left 왼쪽 / right 오른쪽

bottom 하단 / top 상단


당연히 응용도 가능함!

left top 왼쪽 상단 / right bottom 오른쪽 하단


뒤에있는 0px은 무엇인가 하니 뇌절용임. px 말고도 퍼센트로도 이동시킬 수 있음.

left 15px 왼쪽에서 15px 이동

bottom 20% 하단에서 20% 이동

같은 식으로 뇌절을 칠수있음.


배경 이미지 크기 조절


background-size:cover;

배경 크기는:화면 다 덮도록 맞춰주삼. 아까 위에서 사이즈 이야기가 나왔는데 여기서 설명할 시간임.

cover 사진이 배경을 다 덮도록 확대 or 축소해서 이미지를 맞춰줌

auto 원래 이미지 사이즈로 채움. 

contain 가로/세로 둘 중 하나라도 맞으면 그곳에 맞추고 남은 부분은 반복함

px / % 이미지 크기를 지정한후 반복시킴


가로가 더 긴 이미지로 저 단어들을 사용해보겠음



환붕쿤 화내지말아들으십시오 어째서 이렇게 대문짝만한 니터가 존재할수있습니까?


400px 400px은 가로세로를 400으로 지정하고 그만큼 반복하는 명령임. %도 비슷함. 배경 크기는 보기좋게 하고싶다면 cover을 쓰는걸 추천함. 이미지가 좀 찌그러져도 편한게 좋은거죠... 


테두리 색상과 선 종류


border:4px solid rgb(16,12,11);

테두리:4px 실선인데 색상은 rgb(16, 12, 11)로 부탁해. 



이곳의 테두리 선을 관리할 수 있음. 선의 굵기, 선 생긴거, 색깔을 고름. 색상은 배경단색 이야기할때 나왔었음. 여기서는 rgb라고 되어있는데 rgb 값으로도 색상을 지정해줄 수 있음. 자신이 편한 방식으로 해보도록 하자.


만약 실선을 원하지 않는다면 다른 명령어를 사용해 바꿀 수 있음.

solid 실선

double 실선2개

dotted 점선

dashed 길이가 약간 긴 점선

none 테두리 없음

inset / outset 입체적인 것처럼 보이게 하는 선

groove 입체적인 3d 선


inset은 움푹 파인 느낌, outset은 튀어나온 느낌임.


테두리 둥글게/각지게


border-radius:12px;

테두리-반경은 12px로. 분명 아까 크기는 정했는데 이 12px은 어디서 나온것인가? 바로 저 둥근 모서리를 말하는거임. 

사이즈를 각각 다르게 해본 결과임. 크면 클수록 점점 더 모서리가 긁혀서 둥글어지는게 보임. 아예 네모난 걸로 하고싶다면 크기를 줄이는 것이 좋음.


text-align:center;

글자-정렬은:중간으로. 글자가 오른쪽에서 시작할지 왼쪽에서 시작할지를 정함. 이 부분은 사실 html까지 갈 것도 없이 아카라이브 내의 단락 더보기 기능을 통해 설정이 가능함. 

그래도 혹시 모르니 덧붙이자면

center 중간 정렬

left/right 왼쪽/오른쪽


너무너무 쉽다


이제 명령이 끝났으니 '로 명령을 끝낸 후 >로 전화를 끊으면 끝이다. 

이게 씨발 1줄이라고요? 경악하지마라... 스타일 설명은 저기서 거의 다 했다. 걱정ㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴ




2, 3번째 명령들이다. 크아아악..?근데 이제 개짧음 걱정ㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴ


그런데 2번과 3번은 들여쓰기가 되어있다. 그건 2, 3번째 명령이 1번으로 만든 상자 안에 들어있는 상자속상자... 라서 그럼. 앞에서 div=style로 상자를 만들어놨는데 상자를 끝내려면 </div>를 사용해야함. 까먹지 말고 꼭 써야함...


2번째도 길어보이지만 뜯어보면 어렵지 않다.


2번째 초반

<div style="box-sizing:border-box;
max-width:100%;background-color:white;
background-repeat:no-repeat;
background-position:center 0px;
background-size:cover;border:5px solid white;
border-radius:10px;text-align:center;">

아는 내용들이다. 근데 배경 컬러가 흰색으로 해놨는데 no-repeat가 있다. 급하게 복붙한다고 낸 찐빠다. 크아아악 씨발 빼야겠음 ㅠㅠ


2번째 중간쯤

<span style="font-size:8px;">

처음보는 친구다. span?? 이 아줌마는 누구야?


span은 글자, 문장같은 텍스트를 범위를 지정해 포장해주는 말이다. span만 쓰면 당연하지만 아무런 의미가 없다. 감쌀때 어떻게 해줄지 <span style="이렇게해줘;">라고 지정하면 된다. style 들어가는거보면 알다시피 이것 또한 룩딸이지요..... div style과의 차이는 '개척자 의상'과 '무기 스킨'의 차이와도 같다. 개척자 옷으로 뭘 쓸지 고르는것과 무기 스킨은 따로인거랑 마찬가지임.



<br>

줄을 보면 <br>이라는 단어를 볼 수 있다. <br>은 텍스트를 끊는 부분이다. 줄을 바꿔준다. 줄 많이 바꾸고 싶다고 br을 와바박 쓰는건 추천하지 않는다. 같은걸 반복해서 와바박 쓰자니 좀 허접같잔음...


<span style="line-height:200%"><br></span>

여러번 쓰는 대신 그냥 span을 사용해서 br의 크기를 키우면 됨. <스판스타일="선높이200%크기로"><br></스판끝>


멀리서 보기엔 <br>을 여러개 쓴건지, 그냥 span 크기를 조정한건지 알 수가 없다. 하지만 눌러보면


사이 공간이 1개인데 존나큼. 깔끔해진레후~~~


저 뒤에 붙어있는 </span>은 </div>와 마찬가지로 마지막을 닫아주는 태그임.


이 글에도 쓸데없이 <br>이 존나 많다. 그건 우리가 글을 쓸때 자동으로 html도 같이 써지기때문. 근데 그냥 똥글싸는데 html이고 자시고 따져가며 쓸 리가 없잔음...??? 바로 Enter 치고 글쓰고 하니까 Enter 칠때마다 <br>이 같이생겨남.


자동으로 html이 써진다는 말에서 떡밥이 하나 있음.


글을 쓸때 위의 이 기능을 사용해도 자동으로 span이 사용된다. 정보글 쓸때 저 기능으로 글씨에 볼드체를 넣거나 해도 아무런 문제가 없음. 설명하기 슬슬 힘들어서 그런것도 있음 미안합니다....


일부러 꾸밀때를 제외하고는 아무렇게나 하면 됨. 꾸밀때만 span 써가며 하면 그만임.


정보글을 쓸때 박스를 꾸미는 부분에서 제일 애먹을 것 같다고 생각함. 그래서 저 div style 위주로 작성했음.



이제 템플릿에서 중요한 부분만 교체하는걸 알려줄거임. 온갖 글카스 템플릿이 그렇듯이 대상만 관련으로 바꾸는 것으로 양산이 가능함. html도 마찬가지로 대강 테마만 교체하면 양산이 가능함.


https://arca.live/b/tower/104865484

이 글에서 다음 이벤트로 갈때 배경 이미지, 캘린더, 일부 이미지만 바꾸는 식으로 템플릿을 유지한채 정보글을 쓰고싶다면


1. <>를 눌러서 html로 들어감


2. 줄 친 부분을 주목

노란색 줄이 div style과 연결되어있는걸 보면 배경 이미지임. 배경 이미지를 교체할때는 이걸 사용함!


초록색 줄은 배너 이미지임. 필요하다면 바꿔도 상관없지만 일관성이 있으면 좋겠다 하면 그냥 두면됨.


span이랑 붙어있는 파란색 줄부분이 이벤트 캘린더임. 캘린더를 바꾸고 싶다면 이벤트 캘린더 부분 링크를 교체하면 됨.


마찬가지로 이벤트의 상세 정보도 이미지를 교체하면 됨. 빠르게 찾고싶다면 <> 상태에서 ctrl+F로 검새창을 띄우고 거기에 ac.namu.la 를 복붙하면 이미지 링크 부분만 알짜배기로 찾아낼 수 있음.



3. 다시 <>에서 일반 글로 돌아오자.


축하한다! 당신은 배경 이미지와 캘린더를 바꿨다. gosu잔아....


텍스트는?? <> 누르지 말고 그냥 간단하게 일반 탭에서 정보글 쓰듯이 해주면 됨...


어짜피 우리는 html에 대해서 자세하게 알 필요가 없음. 모두에게 알아보기 쉬운, 보기에 편한 글을 쓰는게 목적이기 때문임. 다음은 이미지 편집에 대해서 쓸게...


 다 읽었으면 힘들게썼는데 칭찬 한마디라도 부탁드립니다... 너무 칭찬이 고파요......


질문은 언제든지 해주셈... 급하게써서 모자란부분 많음...