김훈체 무료로 받기 


안녕하세요.
고코더 입니다.


요즘 웹툰의 꿈을 안고 포토샵을 연습해보니
폰트가 중요하다는걸 알고
요즘 무료폰트 찾고 있습니다.

지난번에 박경리작가님의 "박경리체"를
공유 드렸는데요

 1. 이번에는 칼의노래를 만드신
김훈작가님의 폰트를 소개 합니다.

 2. 아래 공유마당에서 다운로드 받아주셔도 되고 제 첨부파일을 보셔도 됩니다.


 3. 설치방법은 이전과 똑같습니다.
미리보기 후에


 4. 설치를 누르시면 됩니다.


 5. 김훈체는 조금 더 세련되고
소설 글씨 같은 기분이 드네요



마무리


좋은 작가님들의 무료폰트 매력적입니다.!


댓글을 달아 주세요


박경리 작가님의 손글씨체 무료배포


안녕하세요.
고코더 입니다.


대하소설 토지를 집필하신 박경리 작가님의
손글씨를 글씨체로 만든 폰트를 무료로 배포하고 있습니다.

제가 읽어본 소설중에 가장 길었던 책이었는데요.
작가님의 손글씨를 이렇게 폰트로 만나보다니 새로울 따름입니다.

 1. 나라에서 운영하는 공유마당에서 해당 서체를 배포하고 있습니다.


 2. 다운로드 후에
폰트를 미리보기 하신 후에 


 3. 설치하시면 됩니다. 


 4. 처음 느낌은 독특하지만
강하면서도 부드러운 느낌이 있네요



마무리


무료 폰트 모으는 재미










댓글을 달아 주세요


미생 폰트 설치하기


안녕하세요.
고코더 입니다.


드라마, 만화 미생 보셨나요?
저는 아주 감명 있게 여러 번 봤습니다.
카툰에서 보면 미생만에 글씨가 눈에 띄었는데
이 폰트가 무료로 배포되고 있더군요.

 1. 아래 URL에서 해당 폰트를 무료로 배포합니다.
윤태호 작가님 감사합니다.


 2. 다운 받은 폰트에 마우스 오른쪽 버튼을 눌러서
"미리보기"를 해보세요


3. 매력적인 폰트가 나타나네요
여기서 설치를 하시면 미생폰트가 완료 됩니다. 


 4. 설치버튼이 안눌리면 설치가 완료 입니다.!


 5. 저는 제 고툰에서
해당 폰트를 사용했습니다. 
웹툰 그리기 너무 좋은 폰트네요


혹시 필요한분은 다운받으세요.
자유 라이센스 입니다.!!


마무리


고툰도 사랑해주세요.!






댓글을 달아 주세요


li 디자인 속성 변경


안녕하세요.
고코더 입니다.


1. li 특별한 CSS 속성 없이
태그를 작성하면 점 이 기본으로 앞에 붙습니다. 


 2. 이 li에 기본 모양은 변경이 가능 합니다.
list-style-type : li 앞에 모양을 변경 가능
list-style-image : li 앞에 모양을 이미지로 변경 

 3. 그리고 속성 옵션은 아래와 같습니다.
disc : 검은 원
circle : 공백 원
square 사각형
decimal : 십진수
lower-alpha  : 알파벳 소문자
lower-roman : 로마자 소문자
upper-alpha : 알파벳 대문자
upper-roman :  로마자 대문자
none : 표시 안함
initial  : 기본값
cjk-ideographic : 한자식 수 (一, 二, 三)
hebrew  히브리 수
hiragana 히라가나 수
hiragana-iroha : 히라가나 이로하 수
katakana : 카타카나
katakana-iroha  (I, RO, HA, NI, HO, HE, TO, )
armenian 아르메니아 수
georgian 지오지안 수
decimal-leading-zero  두 자릿수 숫자 0이 앞에 옴
lower-greek 그리스 소문자
lower-latin  라틴 소문자
upper-latin 라틴 대문자
inherit 부모로부터 상속


 3. 실질적으로 많이 쓰는
속성을 기준으로 예제 HTML을 만들어보았습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html >
<head>
    <style type="text/css">
        ul {
        list-style-type :none;
        /* list-style-image : url(../Images/이미지주소); */
        }
    </style>
</head>
  <body>
    <p>고코더</p>
    <ul style="list-style-type: disc;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: circle;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: square;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: decimal;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: decimal-leading-zero;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-roman;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: upper-roman;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-greek;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-latin;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: upper-latin;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: armenian;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: georgian;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: lower-alpha;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>    
    <p>고코더</p>
    <ul style="list-style-type: upper-alpha;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-type: none;">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
    <p>고코더</p>
    <ul style="list-style-image : url(이미지 주소);">
      <li>홈페이지 : http://gocoder.net</li>
      <li>블로그 : http://gocoder.tistory.com</li>
    </ul>
  </body>
</html>
cs
 4. 웹에서의 확인한 페이지는 이렇습니다.
원하는걸 확인해보세요.



마무리


li가 왜 필요한지 알겠네요



Tag CSS, li, Style, ul, 디자인

댓글을 달아 주세요


왼쪽에 색상 있는 제목 형식


안녕하세요.
고코더 입니다. 


가끔 블로그나 홈페이지를 보다보면
책의 소제목처럼 왼쪽에 네모 박스에 
색이 입혀진 디자인을 볼 수 있습니다.

1. 오늘은 이 모양과 같은 CSS를 만들어 보겠습니다. 



 2. 아래 코드를 HTML로 실행해보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
    
    .div_gocoder_point_1 p {
        padding: 0px 5px 0px;
        border-bottom: 0px solid #000;
        border-left: 10px solid #000;
        color: #000;
    }
    .div_gocoder_point_2 p {
        padding: 0px 5px 0px;
        border-bottom: 1px solid #000;
        border-left: 10px solid #000;
        color: #000;
    }
 
</style>
</head>
<body>
    <div class="div_gocoder_point_1">
        <p>
            안녕하세요. 고코더 입니다.
        </p>
    </div>
 
    <div class="div_gocoder_point_2">
        <p>
            안녕하세요. 고코더 입니다.
        </p>
    </div>
</body>
</html>
 
cs
 3. 결과물은 이렇습니다. 
많이 보는 방식의 제목 스타일입니다.



마무리


CSS 엄청 재밌네


댓글을 달아 주세요