서명 꾸미기 목차
▲ 작성자 : 유우나기(yuri150)
-----------------------------------
안녕~
모두가 쓸 수 있는 기본 html 에 대해서 말해 볼까해
너도 나도 충분히 할수있지용~☆
우선 글씨 정렬 부터 해볼까?
한글이라던가 엑셀등 우리가 흔히 쓰는 문서를 보면 오른 쪽 상단에 줄쳐지고 누르면 그모양대로 정렬이 됬지? 하지만 서명엔 그런게 없단 말이지..
그래서 html의 명령어 중 <center> 를 쓰고 글을 입력하면 가운대로
모이게 된다~ 어때? 쉽지? 만약 왼쪽이라면<div align=reft>, <div align=right>하면 오른 쪽으로 정렬됭 ㅎㅎ 그냥 <right>하면 적용이 안돼라구..
그리고 글씨쓴다음 </div>쓰면 다음 글부턴 적용이 안돼
앞에 있는 명령어를 이때 그만 두 겠다는 명령어 같아
다음 명령어는<p> 이건대 그냥 엔터라고 생각하믄됭 다음줄로 이동한다는 명령어야
자 여기까지 기본!
2탄부터는 실제로 우리가 하고 싶었던 글씨크기 두께 색깔이란 말씀!!!
3탄은 모든 폰트명령어를 응용하며 마음대로 다룰 수 가 있지
※참고: 처음부터 정렬 명령어를 쓰면 전체 글에 적용이 됩니당~
다만 불러온 이미지안에 글씨를 넣었을 경우 정렬이 안돼! 다시 써야될것!!!
※수정: 몇가지 더 추가 할려고 해 <span>이 명령어는 아무것도 등록되지 않은 명령어야 하지만 여기서 스타일을 붙여주면
<span style>이렇게 하면 이제부터 바꾸고 싶은 글씨에 맞춰서 변경하겠다는 명령어란 말씀!!!
또... 내가 말하지 않은 게 뭐가 있을려나
글씨 폰트에선 <div>를 안쓰징 왜냐하면 이 명령어는 페이지를 구분할 때 쓰는 명령어 거든... 실제 말하면. 종이 위에 종이를 덮는다!! 는 느낌으로 말이야.. 무슨말인지 모르겠으면 a4용지를 지금 한번 겹쳐봐 인터넷에선 그걸 올린다는 명령어니까..
----------------------
ㅇㅇ 저번에 뭘하지 설명했으니 바로 시작하겠슘 너무 복잡하게 생각하지마시구 천천히해여~
그럼 뭐부터 할까... 글 색상먼저 바꾸는 법 알려드리것슘
명령어는 font color="색상" 입력하면 글자에 색상을 입히겠다는 명령어야
근대 색상에다 뭐라 적어야되냐.. 3가지 방법이 있어 첫번째 색상을 스펠링으로 적는 것, 두번째 색상에는 16진법으로 코드가 짜여졌거든? 그 코드를 입력하는 방법 이건 구글에서 폰트 색상 을 치면 되 잠시만...
http://html-color-codes.info/Korean/ 이주소로 가서 스크룰 좀내리면 색상코드를 뽑아 낼 수 있어 뭐 이런방법이 있고,
마지막은 빛의 3원색이였던가(RYG? 이게 빛인가 햇갈리네) RGB의 비율을 스스로 조정입력하는 방법이있어....
각각 하는 방법을 예시로 해볼깨 이걸 한번 복사해서 자기서명해다가 해봐.. 그럼 바뀔거야
1. <span style="color:blue"> or <sapn style="color:#07CB86"> or <span style="color:rgb(180,180,192)">
2. 원하는 말 복사~!
3. </span>
↑ 위에 순서대로 한번 적어보고 정보에서 바꾸기하면~~ 샤랄라 바끰 ㅎ 그리고 (닫기 명령어인 슬래쉬 스판을 쳐줘야지 왠만한 오류는 잘 안남 조심하심됨) 내가 생각하기엔 졸라 쉬운거 같아~ 첫번째는 그냥 표준색상이고 두번째는 부터 색을 뽑아서 쓰는거고 세번째는 임의로 색상을 조절하는 거 잊지말아줘~
그럼 색상도 바꼈겠다 글씨 조절좀해볼까나?
먼저 크기부터 해보자 명령어는 font-size:"수치"pt
이것도 수치상 여러가지 방법이 있긴해 pt , em , px 정도? 수치 뒤에만 붙이면 크기가 변경된다구~
아까랑 마찬가지로 예시로 방법을 알려줄게
1. <span style="font-size:5pt"> or <span style="font-size:16em"> or <span style="font-size:20px">
2. 하고싶은 말~!
3. </span>
첫번째는 작고 두번째는 크고 세번째는 적당할꺼야 수치대로라면 em이 제일 크고 다음은 px나 pt나 거기서 거기지...
수치말고도 하나더 있어 xx-large or x-large or large or medium or small or x-small or xx-small 등으로..
다음 크기도 바꿨겠다.. 다음은 두깨좀 줘 볼까?
명령어는 font-weight:"bold" 이게 제일 쉬운거 같아 normal , bold , bolder , lighter 이렇게 4가지 밖에 없어 음.. 지금 작은 상태에서 볼드랑 볼더랑 차이 없을지 몰라도 사이즈가 달라짐에 따라 아마 이 4가지도 차이가 날꺼야... (사실 수치도 잇는대 귀찮아서 수치로 하고싶으면 100~900까지이에요.. 단위는 저도 안해봐서..)
그럼순서대로 설정해보면
1. <span style="font-weight:bolder">
2. 우하하하
3. </span>
입니다.. 글좀 기내 자 다음은 마지막으로 폰트의 글꼴!!!!
하하.. 글꼴은 뭐 특별한건 없어
font-family"~체" 로 설정하면됩니당 쉽죠? 다시 실전으로~
1.<span style="font-family:궁서체">
2. 나지금 진지하다 시발새꺄
3.</span>
하면 바껴요.. 한글로 해야되는 것도 있고 영어로 해야되는 것도 있긴한대.. 이제부턴 스스로 노력해보도록하죠
음... 추가사항으로 하나 더!! , 위 아래 줄간격을 띄우거나 붙이는 명령어가 있어 그건 line-height:"수치"pt
음 이것도 글꼴 크기와 마찬가지로 em, px ,그리고 normal , initial , inherit 이러면 되용
1. <span style="line-height:50pt">
2. 정말<p>귀찮아...
3. </span>
수치가 50 정도 되야지 그나마 체감이 확실해지니 연습삼아 해보세요~
여기 까지 2탄을 마칩니다 와~~ 드디서 서명을 꾸밀 수 가 있어!!
그럼 바이~
※오늘의 해설... <span style=" "> <- 이쪽에 보면 "" 이거 있죠? 이것의 명령어는
'이 안에다 무엇을 실행 시킬꺼다' 라는 걸로 대충 아시면 되겠어요 그럼
<span style="font-size:17pt"> 의 명령어는 " 나는 글씨 폰트의 크기를 17pt만큼 바꾼다" 라고 볼 수 있어요
대충 이렇게 하면 더 알기가 쉽거나 외워지거든요~
그리고 다른 것도 추가한다면 한꺼번에 입력할수가 있는대
<span style="font-size:17pt;color:red"> 이렇게 하면되죵...
"나는 글씨 폰트의 크기를 17pt와 빨간색으로 바꾸겠다!"
눈치채셧나요? " " 포함하는 명령어 안에 명령어와 명령어를 같이 병행시켜주는 명령어는 ; 이거에요... 좀더 쉽게?
" " 이안에 font-size와 color:red를 같이 병행 시켜주는 명령어가 ; 라는 것입니다 영어로 말하면 and ?
뭐뭐와 뭐뭐를 포함시키다!
----------------------------------------------
드디어 여기까지 왔내여
그럼 첫문단은 이걸로 시작해볼까요?
<span style="background-color:blue">
이 명령어는 이부분의 글씨배경을 바꾸겠다 라는 명령어 입니다 어렵지 않죠
색상은 2탄의 글씨 색을 바꾸는 것처럼 총 3가지 있습니다 위의 명령어인 blue를 빼고 rgb(200,220,160) 이라던가 #004F13 색상을 지정하는 것이 어떨까요?
다음 글씨에 줄긋기 입니다.
일단 제일 간단한대... 예제로 한번 볼까요?
<u>야호 밑줄 그어졌당</u>
... 끝이냐고요? 예 끝입니다 이게 답니다 응용해서 한번 해보도록하죠
<span style="color:rgb(160,190,230)"><u>하늘이 푸르구나~</u></span>
이렇게 하면 하늘색 글씨와 밑줄이 쳐집니다(대충 조합했는대 하늘색이 나올줄이야... 서명글씨의 핑크도 한번에 찾고...)
밑줄은 다른색으로 바꾸는 건 있는지 없는지 저도 몰라요...
취소선은
<s>죽창한번 찍혀볼려?<s>
이거구요
보너스로 위첨자와 아래첨자가 있습니다만 그다지 쓰시는 분들이 없을 거 같아요 그래도 올려봅니다
너.. <sub>밥은 먹었냐?</sub>
이거구요
힝~ <sup>죄송해유</sup>
하면 글씨가 날라다닙니다...
응용해보도록하죠
<span style="color:rgb(170,200,170)>잘 <sub>지</sub>냈<sup>니</sup>?</span>
이렇게 하면 글자가 재치있게 춤춰대죠
뭐 활용은 알아서 들 하시유..
이제 기울기 인대... 엄청 쉬운방법이 있고 또 그냥 덜쉬운 방법이 있어요 근대 중요한 건 다쉬우니 걱정하지마세요
<i>우옷 졸려~</i><br>
사실 이게 이탈릭체인대 좀 기울었어요
다른명령어로는
<span style="font-style: italic">나 왜이러니?</span>
둘다 특징은 거기서 거기.. 다만 <br>의 명령어는 모르겠슘 ㅠㅠ]
자 여기까지 각 특성에 대해 알아봤어요 글씨꾸미는 건 자유 아니겠습니까?
예제를 한번 드릴태니 형식만 아시고 자신들의 서명을 꾸며주세요
<span style="font-weight:bolder;font-style:font-size:21pt;color:rgb(220,220,190);font-family:궁서체"><sub>으</sub><sup>앙</sup>ㅠ<s>,</s>ㅠ</span>
하면 노랑색...(내가 이색깔을 찾고 있었는대...)이 됩니다 눈 터지지 않게 수치는 알아서 조절해주세요 000,000,000에 가까울 수록 어두워지고 255,255,255에 가까울 수록 밣아집니다
여태 배운 여러가지 명령어를 섞어서 넣는다면 자신만의 서명글씨는 완성이 됩니다
헬븐러가 서명쓰는대 이정돈 해줘야 되는 것이 아닙니까?
여기가 끝이냐고요? 아뇨 아직 하나남았죠... 모든 글씨에는 뜻이 담겨있겠죠?
무슨 말이냐 하면 이제부터 자신이 만든 글씨를 링크할 껍니다...
우선 링크는 두가지 종류가 있죠 self 와 blank 셀프는 현재 페이지를 링크하는 것이고 블랭크는 새페이지로 링크하는 것이죠 그럼 다음과 같이
명령어를 사용해봅시다
<a href="https://hellven.net/"tatget="_self">https://hellven.net/</a>
이 명령어는 자세히 배워보질 않은 터라 보르겠슘다... '현재 페이지에서 https://hellven.net/으로 이동한다' 이라는 명령어로 칩시다..
1<a href="https://hellven.net/"target="_blank">2https://hellven.net/ 3</a>
새 페이지에서 https://hellven.net/으로 이동한다 라고 보시면 됩니다
이때 2https://hellven.net/ 이걸 2헬븐넷 이라고 수정하면 주소가아닌
'헬븐넷이라는 글자가 링크하여서 https://hellven.net/ 새 페이지로 이동한다'(물론 저위에 작은 숫자는 빼주셔야합니다 일부러 설명하기 쉽게 넣은거니..)
그리고 링크 불러 오고 싶은 곳이 있다면 1번에 "https://hellven.net/" 이부분을 수정하면 됩니다
여기까지가 3탄 응용편의 마지막입니다
근대 이걸 둿다 뭐하냐구요?
뭐하긴 자신의 자랑스러운 글을 자랑해야지요 서명이 그런거 아니겠슘니까?
자 마지막 예시 입니다 (자신의 서명에 복사붙여넣기 하여서 되는지 안돼는지 확인해봅시다)
<center><a href="https://hellven.net/bbs/board.php?bo_table=fr2&wr_id=2842925"target="_blank"><span style="font-weight:bolder;font-style:font-size:21pt;color:rgb(220,220,190);font-family:궁서체">글씨폰트바꾸기 <sup>2</sup>탄!</span></a>
단순히 따라하라는 것이 아닙니다.
저 방법에서 여러분이 수정하여야만 서명글씨꾸미기는 완성이 되는 겁니다
※center는 가운대 정렬 명령어 입니다 1탄에 참조하시고 지금 a명령어와 span명령어가 있는대
html의 충돌을 피하기 위해서는 a 명령어가 먼저 나오고 span으로 꾸며주시는 게 좋습니다
다시 span으로 닫아주시고 a 명령어 까지 닫아주시면 끝 입니다
저는 이 모든 걸 랩이 3이된 그저께 알았고 어제부터 명령어 하나하나 실험해보고 되는 것만 여러분께 알려드렸습니다
1탄, 2탄, 3탄 과 번외편으로 헬븐에 계시는 님들께서 올린 가짜경험치바,서명짤,음악 올리기 등 합쳐서 찾아보기 쉽도록 내일 목차를 만들 것 입니다.
다른 사이트와 달리 우리 헬븐러님들은 아름다운 서명을 가지고 계셨음을 자랑스럽게(?)생각하시며 이만 마무리를 짓도록 하겠습니다
※서명을 올리실 때 tip !
텍스트에 저장해 가시면서 작업하시는 걸 추천합니다. 아니면 나중에 어딜 만져야 될지 해메거나 수정을 할때 사전 오류를 방지하기 위함입니다.
Comments
- 1
- 2
