디시인사이드 갤러리

마이너 갤러리 이슈박스, 최근방문 갤러리

갤러리 본문 영역

[유저 정보] 디씨 글압축 가이드

Elliemion갤로그로 이동합니다. 2019.11.24 01:06:10
조회 3058 추천 23 댓글 27
							

개요

공략글 쓰면서 65535 글자 제한으로 글을 분리하는 경우가 많던데 이는 MySql의 텍스트 저장 방식인 TEXT의 사이즈 제한 문제로, 윾식이가 HTML 코드를 좀만 잘 썼거나 4GB까지 저장 가능한 LONGTEXT 등의 저장 방식을 사용했다면 이런 글이 나올 일도 없었을 것이다.

이제는 짱깨인지 한궈인지 모르겠는 윾식이가 디씨를 고칠 일이 있을 거라고 기대할 수는 없으니 공략글 작성자들을 위해서 가이드를 작성함.


내용에 등장하는 정규식은 예시가 아니어도 적용되는 것들이며 문제가 발생하면 리포트 바람.


웹 전공자라면 이 애미없는 코드와 좆같은 압축방식을 보자마자 구웨엑소리가 자동으로 발사되므로 주의할 것. 애초에 니들은 이거 안봐도 되잖아요


모든 설명 텍스트는 이미지 위에 넣는게 기본임. 꼴리면 아래에 넣을수도있고


모양으로 생긴 건 태그다

에서 style=" ~~~ "은 스타일이다


p 태그는 문단 형식 태그이며 지 앞뒤에 있는 텍스트는 용납하지 못해서 줄바꿈을 해버린다.

span 태그는 특정 용도로 텍스트를 묶기 위해서 쓰는 태그이며 줄바꿈은 할 줄 모른다.

글자에 색을 넣을 때 주로 사용한다


서론

내 주변에서는 좆병신 툴이라고 까이는 녀석이지만 개발용으로 좆병신인거지 텍스트 에디팅으로는 꽤 훌륭한 성능을 발휘하기에 이 녀석을 사용하겠다.

뭣보다 개인용은 공짜임

들어가서 저 빨간 원으로 표시한 부분 누르면 바로 셋업 파일이 다운됨

다운로드


실행하면 이런 화면이 보인다. 아이콘이 검은배경에 빨간색으로 돼있지만 디씨가 병신이라 그렇지 원래는 사이트에 나온대로 주황색이다.

우리는 HTML을 수정할 것이므로 우하단 화살표 부분을 눌러서 언어를 HTML로 설정해준다.


(대충 여기 있다는 뜻)


내가 글 작성자가 아니고 다른 사람이 올린 글을 압축해주는 건 HTML/CSS에 대한 이해가 필요하므로 건너뛰고 설명하겠다.

어차피 개요부터가 공략글 작성자를 위한 가이드임


저 체크박스를 누르면 코드로 보여주는데, 이걸 Ctrl+A, Ctrl+C, Ctrl+V 해서 툴로 붙여넣는다.


모르모트는 지금 작성중인 글 일부.


압축 방법

1.

먼저 스타일의 공통 요소를 추출해야한다.

말이 어렵지 스타일에서 제일 많이 겹치는거 골라내면됨.

컴퓨터보고 시키면 시발 어케하는건데요 하겠지만 우린 사람이니까 대충 보고 많다 싶으면 고르자.

예시에서는 font-size:10pt가 되겠음

공통 요소가 여러개일 경우엔 ;로 구분해주자

당연히 이거 말고 다른게 공통 요소인 경우엔 아래의 방법에서 전부 해당 요소로 치환해서 적용해야 한다.


2.

추출한 공통분모를 상위개체로 올려서 하위개체에 공통적으로 적용되게 한다.

당연히 하위개체에서 중복되는 값은 제거해야 함.

Ctrl+H를 누르고 왼쪽에 .*를 체크해준다.

이렇게 입력

앞에 공백 한칸까지 포함해야 함.

중간에 글씨가 퍼렇게 된 부분이 있을텐데 저건 글씨가 있을 수도 있고 없을 수도 있습니다 라는 뜻임.

각각 공백과 ;를 넣었는데 저거랑 마찬가지로 후술할 생략 가능한 부분은 L -> (L|)로 바꿔주자.

|는 한글 ㅣ나 영어 I 기타등등이 아니라 Shift+백슬래시를 누르면 나오는 절대값 기호다.


그리고 Replace All로 전부 없애주자.


이제 상위개체를 추가해서 방금 지운 부분을 달아주는 작업을 해야 한다.

Ctrl+Home을 눌러서 코드의 맨 처음으로 커서를 옮긴 뒤 엔터를 한번 눌러주자.

당연히 마우스로 클릭해도 상관없음


이러면 맨 첫줄이 비게 된다.

를 입력해준다.

div 태그는 p와 비슷하게 앞뒤에 텍스트가 있으면 엔터를 먹이고 들어간다.

여기서 팁은 스타일 내부에는 생략 가능한 기호가 있다는 거.

공략글이 존나 길어서 아슬아슬하다면 써보자.


설명을 위해 텍스트 색상 스타일도 추가하겠다.

font-size: 10pt; color: #947788;

이라는 스타일이 있으면


1. 띄어쓰기는 필요없음

웹개발에 쓰는 스타일 속성 중에는 띄어쓰기가 필수인 것도 있긴 하다. 근데 디씨에서 쓰는 수준에서는 없음.

2. asdfasdf: ~~~;의 패턴이 반복되는데, 이 중 마지막은 끝에 ;이 필요없음

따로 설명할 것 없이 떼주면 된다.


결과는 [font-size:10pt;color:#947788]

무려 3글자 줄었음. 겨우 3글자로 뭔 팁이냐 싶겠지만 아슬아슬하게 글자 제한이 넘는 경우엔 내용을 줄일 수도 없고 은근 도움이 된다.


다시 본론으로 돌아와서 맨 첫줄에 div 태그의 대가리를 추가했으니 꼬리도 있어야 한다.

개요에서 태그는라고 했다. 여기서 뒷대가리가 없는 셈.

Ctrl+End로 맨 끝으로 가서 엔터한번 쳐주고,

를 추가하자.


그래도 나름 개발 툴이기 때문에 s만 쳐도 style=""로, </만 쳐도 로 자동완성정도는 해준다.


이렇게 했으면 상위 개체로 공통요소 분리하기는 성공이다.

보기 편하게 정리하려면 Ctrl+Shift+P를 누르고 indent - 엔터 순으로 입력하면 알아서 들여쓰기를 해준다.


3.

쓸데없는 p와 span 태그를 지워버리자.

앞에서 공통 style을 지운 것처럼 Ctrl+H를 눌러 replace 창을 연다.


p, /p, span, /span 이 4개를 일일이 지우긴 좆같으니까 정규식이라는 녀석을 사용해서 효율적으로 지울 것이다.


한 줄에 p나 span이 여러개 있다면 엔터를 쳐서 각각을 한 줄로 분리해야 한다.

기억했다가 나중에 합쳐주자.


스타일 중 font-size(글자크기), color(글자색), background-color(배경색) 이 3가지는 필요하니까 남겨준다.

앞으로 Find랑 Replace가 같이 나오면 전부 Ctrl+H로 Replace All하는거임

디씨가 병신이라 글 내용으로 입력하면 제대로 띄우질 못하더라. 그냥 따라치셈


참고로 정규식은 문자열의 규칙을 표현하는 식 정도로 이해하면 된다.

$2는 괄호로 감싼 걸 그룹이라고 하는데, 두번째 그룹의 규칙에 해당하는 텍스트를 의미한다.


Replace All을 실행하면 값만 쌍따옴표로 싸여서 남고 태그와 style=부분은 지워진다.

여기서 남은 값에 font-size, color, background-color, font-family(글씨체) 외의 값이 있다면 수동으로 지워줘야 한다.


이제 잡 스타일을 포함하는 p, span 태그를 지울 것이다.


마지막으로 스타일만 남아있는 의미없는 부분을 지울 것이다.

(순서 꼬여서 이미지까지 털고 난 상태임)

아무것도 없는 줄은 지워주자. 코드에 있는 엔터는 글로 올라가면 공백 한 칸으로 보일 뿐이다.


이렇게 하면 텍스트 부분은 남길 것만 남겼다고 봐도 된다.

이제 이미지들을 털어보자.

설명을 위해 맨 아래에 디씨콘 하나를 추가했다.

img 태그는 이미지를 불러오는 태그로, src는 source의 축약이다.

이미지 불러오는데 어디서 가져올지 주소만 있으면 되지 다른건 필요없다.

이번에도 정규식으로 일반 이미지와 디씨콘을 통합해서 털자.

실수로 " 하나 앞에 백슬래시 안붙이긴 했는데 상관없음


(순서 꼬여서 스타일만 남은 텍스트가 살아있음)


4.

이제 이렇게 탈탈 턴 텍스트를 원하는 대로 보이게 만들기만 하면 된다.

또 정규식을 활용해서 스타일만 남긴 걸 글자에 적용되도록 다시 바꿔준다.

아니 이럴거면 왜 그짓거리를 한거냐 싶을 수도 있는데 잡 스타일을 포함하는 태그를 지우기 위해선 필요한 스타일은 먼저 처리해서 남길 필요가 있었다.


스타일만 남아있던 애들이 span 태그로 붙는다.

여기서 아까 나눴던 줄을 붙일 것.


여기까지 완료했으면

이 둘을 순차적으로 실행해준다.


맨 끝에 바로 위에 있는 은 지워주자.

은 줄바꿈 태그인데 끝에는 있어봐야 쓸데없다.

중간중간 빈 줄은 로 치환되었다.

div 태그 안에 개수를 조절하면 더 많이 비울 수 있다.


이 방식으로 압축하면 이 글 정도로 화려한(스타일 사용) 글은 문제없이 압축할 수 있을 것이다.

아님말고


마치며

코딩이 원래 그렇듯 압축 작업도 원래는 버그가 터지지 않는지 체크하면서 해야 한다.

다만 코딩은 모르는데 글압축은 해야 하는 사람들을 위해 가이드랍시고 써놓은 거임

내가 보기에도 존나 불안하니까 오류나면 리포트 해줘.

질문도 받고 싶긴 한데 디스코드같은거 올리면 좆목일거같아서 못올리겠다

내 대가리로는 좆목질은 아니면서 질문을 받을 수 있는 방법이 생각나질 않네

방법 있으면 추천좀 해줘


당연하지만 이 글갖고 뭔짓거리를 해도 상관없음. 딴갤가서 써먹어도 되고 다른 무언가를 해도 되고


글 내용에선 정규식으로 했는데, 오류없이 하려면 하나하나 지우고 바꾸는게 제일 좋다.

근데 65535자가 넘어서 짤린거면 못해도 총 7만자는 넘는다는건데 이걸 하나하나 하는게 말이 안되는거라 정규식으로 한거지


솔직히 말하면 그냥 글 넘겨주면 내가 해갖고 다시 주는게 편한데 내가 하루종일 컴 붙잡고 있는게 아니라 아쉽네


참고로 난 이 툴 안쓰고 PhpStorm 씀


자동등록방지

추천 비추천

23

고정닉 19

0

댓글 영역

전체 리플 0
등록순정렬 기준선택
자동등록방지

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 리스트
번호 말머리 제목 글쓴이 작성일 조회 추천
1392857 일반 이번 조각은 파이로 스킨이 맞는듯 [37] 에무1918갤로그로 이동합니다. 01.14 5184 41
1392846 공식 한섭 보상 소개 [27] Hanjunt갤로그로 이동합니다. 01.14 3782 16
1392814 일반 파이로 애비 입찰하네 [22] DITSEN갤로그로 이동합니다. 01.14 3524 11
1392803 공식 일섭 특이점 보급상자, 발리스타 소개 [12] DITSEN갤로그로 이동합니다. 01.14 1795 7
1392802 공식 한섭 조각 공지 [7] Hanjunt갤로그로 이동합니다. 01.14 2184 7
1392786 공식 스킨 조각 3 [47] DITSEN갤로그로 이동합니다. 01.14 3274 14
1392758 일반 waifu2X 돌려본 신규 아이콘 [14] 설탕건빵갤로그로 이동합니다. 01.14 462 6
1392651 공식 이벤트 보상 정보 [34] DITSEN갤로그로 이동합니다. 01.14 3322 13
1392611 공식 일섭 공식 4컷 만화 3-2화 [6] DITSEN갤로그로 이동합니다. 01.14 1090 7
1392561 일반 가운데 로고 없는 일러봤냐 [16] 여나라나라갤로그로 이동합니다. 01.14 2870 15
1392462 공식 매드코어님의 114, 115, 116, 117번째 4컷만화! [20] DITSEN갤로그로 이동합니다. 01.14 2169 24
1392371 공식 한섭 이벤트 관련 공지(수정) [30] DITSEN갤로그로 이동합니다. 01.14 2793 16
1392370 공식 글섭 특이점 관련 통계들 [23] DITSEN갤로그로 이동합니다. 01.14 1410 9
1392265 유저 야간전 친구제대 사용시 프리징 걸리는 원인 [42] 미친존재감갤로그로 이동합니다. 01.14 2276 17
1392243 일반 신캐 일러레 왈 [13] DITSEN갤로그로 이동합니다. 01.14 3333 11
1392204 공지 ☆☆☆☆☆부매니저 모집 공고☆☆☆☆☆ [70] Makarov4갤로그로 이동합니다. 01.14 2541 26
1391955 일반 AC130 센세 새짤 [11] 한여울지미갤로그로 이동합니다. 01.14 2377 13
1391929 일반 12-4E 개조우지 사고 안 나는 조건 정리 [26] ㅇㅇ갤로그로 이동합니다. 01.14 2631 11
1391882 일반 이게 저번 미카 행사 과자들인가보네 [18] DITSEN갤로그로 이동합니다. 01.13 2924 7
1391749 일반 칩셋조합기 6.6.0 [9] 바니스파갤로그로 이동합니다. 01.13 1225 12
1391720 일반 RMB93 일러레 짤 [13] DITSEN갤로그로 이동합니다. 01.13 2373 11
1391709 일반 쇼티 vs 삿팔 12-4E 기대 수복비 계산 [6] ㅇㅇ갤로그로 이동합니다. 01.13 2033 10
1391621 공식 글섭 점검 공지 DITSEN갤로그로 이동합니다. 01.13 811 5
1391620 일반 TEC9 일러레 짤 하나 더 [13] DITSEN갤로그로 이동합니다. 01.13 2104 8
1391592 일반 빠요엔 장식 테스트 SD [9] lazy갤로그로 이동합니다. 01.13 2211 6
1391588 공식 한섭 신규 인형 소개 [13] DITSEN갤로그로 이동합니다. 01.13 3020 8
1391580 공식 신규 인형 중상 일러 [24] DITSEN갤로그로 이동합니다. 01.13 3182 12
1391530 일반 신규 일러레 픽시브 [6] 고갈비갤로그로 이동합니다. 01.13 2778 11
1391520 공식 신규인형 [45] DITSEN갤로그로 이동합니다. 01.13 3994 13
1391497 공식 한섭 조각 공지 [5] Hanjunt갤로그로 이동합니다. 01.13 2063 7
1391467 공식 스킨조각공지 [31] 고갈비갤로그로 이동합니다. 01.13 2809 15
1391456 공식 한섭 복각 공지 [8] Hanjunt갤로그로 이동합니다. 01.13 1826 5
1391425 유저 1242 샷건탱 단순 기대체력 비교값 [12] QΒU-88갤로그로 이동합니다. 01.13 1843 8
1391417 일반 짤공장 센세 짤 [3] DITSEN갤로그로 이동합니다. 01.13 1810 10
1391407 공식 스킨 복각 [15] DITSEN갤로그로 이동합니다. 01.13 1813 9
1391366 공식 일섭 특이점 드랍 목록 [9] DITSEN갤로그로 이동합니다. 01.13 1123 5
1391234 공식 일섭 MP7 썬더 [16] DITSEN갤로그로 이동합니다. 01.13 1570 7
1391198 일반 12-4E 거지런 탱커 자원 소모 비교 (그냥 쇼티 써) [46] ㅇㅇ갤로그로 이동합니다. 01.13 3369 19
1391083 공식 글섭 구호작전 공지 [18] DITSEN갤로그로 이동합니다. 01.13 1461 9
1390963 일반 TEC9 일러레 짤 [9] DITSEN갤로그로 이동합니다. 01.13 2249 11
1390929 일반 이번주 탐색 우세 ~1/20 03:59 [26] WDFaith갤로그로 이동합니다. 01.13 2075 10
1390870 일반 아바타장식을 전술인형에 써먹기 테스트 SD [9] lazy갤로그로 이동합니다. 01.13 1856 11
1390630 일반 Fatke센세 그림 [13] 냉__면갤로그로 이동합니다. 01.12 2580 15
1390418 일반 이거 예고르 맞네 [53] 前·무직핫산갤로그로 이동합니다. 01.12 5586 18
1390405 일반 철혈 포획 관련에 뭔가 재밌는 포인트가 있네 [24] 前·무직핫산갤로그로 이동합니다. 01.12 4417 18
1390372 일반 이게 자막버전이 나오네 [10] quartz갤로그로 이동합니다. 01.12 3292 16
1390225 일반 MG36 일러레 짤 [13] DITSEN갤로그로 이동합니다. 01.12 2882 9
1389967 유저 nga)초급 자료추출 0.2초 배치 [40] 에무1918갤로그로 이동합니다. 01.12 3677 14
1389812 일반 칩셋조합기 6.5.6 (%계산 버그수정) [9] 바니스파갤로그로 이동합니다. 01.12 1008 9
1389782 일반 기타 spine 파일들 [10] quartz갤로그로 이동합니다. 01.11 1949 8
갤러리 내부 검색
전체게시물 정렬 옵션

오른쪽 컨텐츠 영역

개념글 []

/

    이슈줌NEW

    1/6

    뉴스NEW

    1/3

    힛(HIT)NEW

    그때 그 힛

    1/3

    초개념