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 엄청 재밌네


댓글을 달아 주세요


제이쿼리 이미지 드래그 드랍, 사이즈 조절


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


jQuery UI를 쓸때 가장 많이 활용하게 되는
기능이 두가지가 있습니다.
바로 이미지 드래그와 리사이징 입니다. 

레이어 팝업을 만들거나
사용자에게 크기를 조절하게 
편의를 제공 하는 기능은 많이 씁니다.

그래서 이번 시간에
제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다.

1. 아래 소스를 웹사이트에서 실행해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderImg1').resizable();        
            $('#GoCoderImg2').draggable();        
        });
    </script>
</head>
<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg1">
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg2">
</body>
</html>
cs

gocoder_resizable_draggable.html


 2. 하나는 사이즈 조절이 가능하고
다른 하나는 드래그 드랍으로 이동이 가능 합니다. 



마무리


jQuery 덕분에 많은게 가능해졌네요


댓글을 달아 주세요


Font Awesome 아이콘 리스트 웹사이트 확인


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


웹 아이콘으로 가장 많이 사용 되는
Font Awesome 제 블로그에도 홈페이지에서도 사용중입니다.
반응형 웹부터 일반 홈페이지까지
필요한 아이콘을 바로 가져다 쓰는게 가능합니다.

오늘은 이 편리한 아이콘 버전별로
어떤 icon들이 있는지 확인하는 방법을 알아보려고 합니다.

1. 제 블로그의 Font Awesome 버전은 4.7.0 입니다. 


블로그를 꾸미다 보니 해당 버전의 어떤 아이콘들이 존재하는지
확인하는 방법을 찾다가 첫번째는

 2. 소스를 열어보면 이렇게 준비된 아이콘들의 이름을 볼 수 있습니다.
하지만 개발자는 효율적으로 일해야겠죠 


 3. 해당 4.7.0버전의 아이콘 리스트는 아래에서 확인 가능합니다. 


 4. 해당 주소에서 버전만 기입하면 아이콘을 확인 가능합니다.

자주 사용하는 3버전과 5버전에 주소를 보면
확실히 이해가 가능합니다. 

해당 사이트에서 미리 아이콘을 확인하고 적용해보세요.


마무리


이거 없었으면 아이콘 어떻게 했을려나



댓글을 달아 주세요



Flatinum 소스코드 정렬 CSS 수정하기


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

봄이 왔나보네요. 졸려 죽겠습니다. 그래도 졸면 안되겠죠?
새 스킨을 갈아타고 페이지를 확인하니 난감한 상황이 펼쳐졌습니다.



컬러스크립터 소스가 가운데 정렬이 되어 버렸습니다.

▼이런 소스코드를 배우러 오는 블로그인데 이렇게 되니 가독성이 떨어지네요


▼CSS 코드 문제가 확실해서 관리자에서 CSS를 우선 열어봅시다.
http://[블로그].tistory.com/manage/design/skin/edit#/source/css


▼한 750줄 정도 내려오면 아래와 같은 css 코드가 보입니다.
문제는 여기 table>tbody>tr>td 가 정렬이 가운데로 되어 있습니다.


▼css를 수정하자니 또 다른 폭탄이 터질거 같아서
아래 코드를 삽입하여 해결 해보겠습니다. 
colorscripter 코드만 왼쪽으로 정렬하겠다는 코드 입니다.
.colorscripter-code-table>tbody>tr>td {
    text-align: left;
}

▼위에 코드를 해당 CSS 밑에 입력합니다.  이러면 컬럼스크립트 css만 왼쪽 정렬이 됩니다.
그림 처럼 입력해주시면 됩니다.


▼그리고 다시 확인한 결과 왼쪽으로 정렬이 잘되어 있네요 !!




마무리

스킨의 css 수정이 가능해서 다행입니다.


댓글을 달아 주세요



코드펜 사이트 사용법


코드펜은 흥미로운 사이트입니다. 
프론트엔드 디자이너들이 만들어놓은 수많은 오픈 소스가 존재합니다.
업무의 있어서도 상당히 도움이 되는 좋은 곳입니다.

누구나 와서 가입 후에 
HTML , CSS ,  JS 를 코딩해서 
결과물을 놓고 자랑하는 사이트입니다.

프론트 개발자라면 학습으로도 좋습니다.

▼우선 사이트 주소는 이렇습니다.
사이트 디자인도 CI도 이쁘고 정갈하네요 




▼ 공개된 소스중 하나를 선택하여 살펴보겠습니다 
크리스마스 볼이라는 작품인데요 
아래 URL로 접근해보세요

▼그럼 HTML, CSS, JS 가 있습니다. 해당 작품의 코딩 결과입니다.
이것들을 복사해가서 실행하면 그대로 실행이 될 것입니다.
물런 다운로드 기능도 제공합니다.


▼다운 방법은 오른쪽 아래 Export 라는 버튼을 누르면 압축파일이 보입니다. 
클릭하여 다운로드 합니다.


▼압축을 해제하면 index.html이 보이게 됩니다.
클릭하여 실행해보시면


▼아래와 같이 환상적인 HTML을 확인 가능합니다. 
이름대로 크리스마스 볼처럼 보이네요




마무리


이처럼 디자인 요소가 필요하면
코드펜에서 소스를 얻어가시기 바랍니다.
그리고 스터디 하기에 정말 좋은 사이트니
본인의 작품도 만들어 보시길 바랍니다.


댓글을 달아 주세요


개발코드 정렬 하기 


얼마전 소스 리뷰를 보는데 MIN으로 압축된 JS 파일을 유지보수 하는
분을 보았습니다. 한줄로 된 그 코드를 분석하는 개발력에 놀라웠지만 
생산적인 면에서는 소스를  정렬하고 유지보수 하는게 좋아 보이더군요

소스를 정렬 하는 방법은 상당히 많습니다.



첫번째로 해당 기능을 제공하는 사이트에서 정렬 하는 방법이 있고
두번째로 IDE 기능을 통해 하는게 사실 가장 좋고
세번째는 손으로 직접 정렬 하는 방법이 있을 것입니다.

그래서 오늘은 
첫번째 방법을 알아보겠습니다. 
바로 http://jsbeautifier.org/ 사이트를 활용 하는 방법 입니다. 


▼ 접속하면 아래와 같이 바로 기능 페이지가 나옵니다. 기능에 충실하네요


▼이번에는 정렬해볼 소스를 구해봅시다.
http://code.jquery.com/jquery.min.js 을 크롬으로 열어보면
아래처럼 압축 암호와 된 script가 보입니다. 이걸 클립보드에 복사 해보시고~


▼ 아래 처럼 기능을 실행시켜보면 정렬 된 min jquery를 보실 수 있습니다. 






마무리


개발 후에 특정 정렬 프로그램을 이용해 마무리 하는걸 약속하면 
일괄된 소스를 볼 수 있습니다^^


댓글을 달아 주세요



1. 부트스트랩으로 이미지를 다루어 보자 


     - 초보 개발자들에게는 어렵게 CSS와 HTML 조합으로 홈페이지 디자인을 만들어도 이미지 다루기 어려웠던 기억이 있을 것입니다.
     - 부트스트랩은 이 이미지 마저 쉽게 다룰수 있도록 각종 방법을 만들어 놓았습니다.
     - 이번 시간에는 가볍게 이미지를 다뤄 보겠습니다.



2. 우선 이미지를 노출 시켜보자

     1. 이미지를 아래처럼 추가시켜 보자
          - 위치는 게시판에 맨위다.
          - div 안에 img 태그로 이미지를 첨부해보자.

          - 이미지는 이걸 다운 (무료이미지) tree.zip


          ▼ 위치는 게시판에 맨위다.
<div class="container"<!--container-fluid-->

    <div>
        <img src="./images/tree.jpg" alt="숲" >
    </div>

    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <td>이름</td>
            <td>나이</td>
            <td>주소</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>지브이</td>
            <td>26</td>
            <td>상수동</td>
        </tr>
        <tr class="text-success bg-danger">
            <Td>하이리</td>
            <Td class="text-warning">26</td>
            <Td class="text-info">태릉입구</td>
        </tr>
        <tr class="text-left bg-info">
            <td>래부기</td>
            <Td class="text-center">26</td>
            <Td class="text-right">망원동</td>
        </tr>
        </tbody>
    </table>

    <button class="btn btn-primary pull-right">글쓰기</button>
    <div class="text-center">
        <ul class="pagination pagination-lg">
            <li><href="#">1</a></li>
            <li><href="#">2</a></li>
            <li><href="#">3</a></li>
        </ul>
    </div>
</div>

▼이런 웹에서 확인해보니 엉망이다. 반응형 웹에서 이미지만 반응하지 않고 있습니다.멋진 이미지가 짤려버렸습니다.우린 이제 이 이미지를 반응형 웹으로 만들고 부트스트랩으로 꾸며 볼것입니다.





3. 이미지를 반응형으로 부트스트랩으로

     1. 반응형으로 만들어보자
          - 아래  코드를
img-responsive : 이미지를 반응형으로 만들어준다.

          ▼ img class 에 추가한다.
<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive">
</div>

          ▼ 웹에서 확인해보니. 와! 이미지가 반응형으로 돌아왔습니다.
  사이트의 크기를 따라 이미지도 축소 확대 됩니다.




     2. 이미지를 꾸며보자
          - 아래  코드를 이미지에 넣어보자 역시 직관적입니다.
img-circle : 이미지를 둥글게
img-rounded : 모서리를 둥글
img-thumbnail : 이미지를 액자처럼 테두리가 있게

          ▼ 코드에 합은 이렇습니다. 테스트를 위해 Div를 복사해서 붙혀놓은 것입니다.
<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-circle"<!--이미지를 둥글게-->
</div>

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-rounded"<!--모서리를 둥글게-->
</div>

<div>
    <img src="./images/tree.jpg" alt="숲" class="img-responsive img-thumbnail"<!--이미지를 액자처럼 테두리가 있게-->
</div>


          ▼ 이미지가 아주 깔끔하고 간결하게 수정이 되었습니다.. 각 속성에 맞는 이미지 모양이 속상 하나로 수정이 가능합니다.(사실 이쁘기 만들려면 이미지를 수정하는게 좋긴하죠)
          ▼ 저는 첫번째에 있는 동그란 이미지를 좋아합니다. 우리가 만드는 게시판에 맨위 디자인 요소만 남겨놓고 계속 진행해봅시다.



4. Caption을 달아보자.

     - 이전시간에 달았어야 하는 간단한 요소인데 까먹어서 지금 추가하겠습니다. 

caption : 테이블에 제목을 보여주는 태그

     ▼ 방법은 table 아래에 caption 태그를 입력 해보자
<table class="table table-striped table-bordered table-hover">
    <caption>부트스트랩으로 만들어 보는 게시판</caption>

     ▼ 테이블에 제목이 입력 되었다. 캡션에 장점은 한번 지정하면 변도에 디자인 필요없이 게시판 이름을 지정할 수 있다. 실무에서도 게시판 제목은 Caption으로 지정해 사용하자 (은근히 Caption 요소를 안쓰는 경우가 많더군요)






5. 마무리

     - 이미지까지 다루어보았다. 사실 크게 어려운 부분은 없다.
     - 부트스트랩 다양한 편의는 물런 신뢰할만 하다는걸 느끼게 됩니다.





댓글을 달아 주세요



엑셀 다운로드 출력시 셀서식 지정


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

HTML을 작성하고 이를 엑셀로 다운로드 받을 수 있습니.
프로그램 개발시 만들어야 하는 대표적 기본 기능 입니다.

자주 마주치는 문제는 셀서식에 "01" 데이터를 숫자로 넣으면 "1"로 표현하여 노출 됩니다.

▼엑셀에서도 설서식 설정 없이 "01"을 입력하면 "1"로 기록 됩니다.
그래서 그런지 HTML로 엑셀 다운로드 기능으로 언어에서 엑셀을 다운받으면
01를 1로 노출 됩니다.



이럴땐 HTML에 style에 서식을 설정하면 해결 가능합니다.

▼대표적으로 실무에서 많이 쓰는
형식만 우선 예제로 만들어 봤다.
<TD style='mso-number-format:"0_ ";' >숫자형식</td>
<
TD style = 'mso-number-format:"\@"' >문자형식</td>
<
TD style = 'mso-number-format:"0\.000"' >소수점 형식</td>
<TD style = 'mso-number-format:"mm\/dd\/yy"' >날짜형식</td>

아까처럼 "01"이 정상적으로 보일려면 문자형식으로 지정하면 해결 됩니다.

이외에 다양한 형식은
참조 해보세요


마무리


데이터 타입에 따라 셀 서식을 지정하여 주세요

댓글을 달아 주세요



1. 이번 시간에는

     - 게시판이 생겼으니 "글쓰기"와 같은 버튼이 필요하겠죠?
     - 그리고 좌우로 가득찬 게시판도 좋지만 보통은 좌우에 적당한 폭이 있어
     - 한눈에 보기 편한 모양으로 만들어 볼것입니다.
     - 역시나 이번에도 부트스트랩 매력에 푹 빠져봅시다.!



2. 버튼을 다뤄보자


     2.1 버튼을 만들어 보자
          ▼ 아래처럼 코딩해보겠습니다.
<!--부트스트랩 버튼 class="btn"-->
<button type="button" id="goButton"  class="btn">버튼</button>
<!--기본버튼-->
<button type="button">버튼</button>

          ▼ 화면에 띄워보니 기본 버튼, 부트스트랩 버튼이 보입니다. 딱 봐도 부트스트랩 버튼은 디자인 들어갈 준비가 되어 있네요.이제 디자인을 입혀 봅시다.

          ▼ 아래 코드를 입력하고 웹으로 봐볼까요?
<!--버튼의 디자인-->
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

<!--버튼의 크기-->
<button type="button" class="btn btn-default btn-lg">Large</button>
<button type="button" class="btn btn-default btn-md">Medium</button>
<button type="button" class="btn btn-default btn-sm">Small</button>
<button type="button" class="btn btn-default btn-xs">XSmall</button>

          ▼ 디자인을 보는 직관적인 부분이라 설명이 필요 없겠네요. 간단한 클래스명으로 다양한 디자인을 손쉽게 쓸수 있습니다.
          ▼ 크기도 조절 가능합니다. 

     2.2 게시판의 글쓰기 버튼을 만들어 보자
          - 이번엔 우리 게시판에 쓸 글쓰기 버튼을 만들어보겠습니다.
          ▼ 아래의 코딩을 
pull-right : 버튼이 위치함으로 인해 디자인하 한단계 내려가는 걸 방지하고 오른쪽 정렬 
pull-left :                 ''                                      왼쪽 정렬
         
          ▼ 코딩의 합은 아래와 같습니다. 저번 시간에 만든 페이징 디자인 위에 위치시키겠습니다.
          ▼ btn으로 버튼으로 지정해주고, btn-primary로 디자인을 설정하고, pull-right로 정렬 하였습니다.
<button class="btn btn-primary pull-right">글쓰기</button>
<div class="text-center">
    <ul class="pagination pagination-lg"<!--부트스트랩에서 제공하는 페이징 마법사(?)-->
        <li><href="#">1</a></li>
        <li><href="#">2</a></li>
        <li><href="#">3</a></li>
    </ul>
</div>
     
          ▼ 그림처럼 이쁜 글쓰기 버튼이 안정적인 위치 하네요.!!
          ▼ 이로써 우리 게시판에 글쓰기 버튼까지 완료하였습니다.




3. container로 폭을 조정하자

     - 지금까지 잘 따라 온 분들은 디자인이 좌우로 100% 웹에 찰싹 달라붙어 있는걸 볼수 있을것입니다. 저는 이 디자인을 아주 좋아합니다.
     - 그런데 보통 좌우에 적당한 공백을 만들어 게시판이 좀더 안정적으로 보이게 하는거 대다수죠. 그걸 해결해주는 놈이 바로
     - container 이놈입니다. 

     ▼ div 해당 속성을 입력하면 디자인에 폭을 조정할 수 있습니다.
container, container-fluidr : 폭에 공백을 준다. 둘의 공백 크기는 다르다.

     ▼ 해당 요소로 우리가 만든 게시판을 감싸 주세요
<div class="container">[게시판]</div<!--container-fluid-->

     ▼ container의 폭의 공백

     ▼ container-fluid의

     ▼ 속성을 주지 않았을 때의 폭의 공백 


3. 마무리


     - 간단한 방법으로 우리의 게시판에 양쪽 폭의 느낌을 정해줄수 있었습니다.
     - 저는 개인적으로는 속성을 주지 않는 좌우로 100프로 가득찬 디자인을 좋아합니다.
     - 이젠 정말 게시판 같은 게시판이 완성 되었습니다.
     - 아직까진 어렵고 복잡한 내용이 없습니다. 다음 강의는 이미지에 대해 나가겠습니다.
     - 이미지 이후에는 살짝 어려워 질 수 있으니 개인적으로 더 연습하고 준비하시길!


     ▼ 지금까지 소스 입니다.

index.html


댓글을 달아 주세요