텍스트를 표현하는 다양한 스타일 2

목록 스타일 

list-style-type : 불릿 모양과 번호 스타일을 지정하는 속성 

 - ul { list-style-type: none; }

 - type 이 아니라 image 를 작성하게 되는 경우, 이미지 파일을 넣을 수 있다. 

 

 

list-style-position : 목록을 들여쓰는 것 

 - list-style-position : inside | outside; 

 

 

list-style 만 작성 후에 순서 없이 작성해서도 쓸 수 있다. (속성의 값이 같을 수 없기 때문에 )

 

 

 

 

테두리 작성하는 방법 

 border : 굵기 || 테두리 스타일 || 색상 

 padding : 왼쪽 여백 || 오른쪽 여백;

 margin : 테두리 밖의 여백 

...
        li { 
            width: 40px;
            border : 1px solid #ff48ff;
            padding : 20px 40px;
            margin : 10px
        }
        ... 
        <ul>
        <li>한국</li>
        <li>중국</li>
        <li>일본</li>
  	 </ul>

 

 

 

 

 

 

표 스타일 

 

...
        #tb {
            width: 200px;
            table-layout: fixed; /* 테이블의 셀 넓이를 고정 (기본이 auto)*/
            word-break: break-all; /*공백 없어진 셀의 값도 고정을 떼어낼 수 있다.*/  
            border-collapse: collapse; /*표와 테두리를 합쳐서 표현, (기존에 이중 테두리가 기본인 separate) */ 
            border-spacing: 5px; /*separate 일 때, 테두리와 표 사이의 길이 */ 
            empty-cells: hide; /*비어있는 셀을 안 보이게 할 수 있다. (기본값이 show)*/ 
        }
        
        ...
        
        <table border="1" id = "tb">
            <tr>
                <td>안녕하세요 저는 홍길동입니다.</td>
                <td>hello_i_am_hong</td>
            </tr>
            <tr>
                <td></td>
                <td>hello_i_am_hong</td>
            </tr>
   	 </table>