[CSS] 목록과 표 장식하기
Web/Web Programming

[CSS] 목록과 표 장식하기

728x90

목록의 스타일 설정

목록의 글머리 기호 설정 ▶ list-style-type 속성

- 순서 없는 목록(unordered list)

: disc (●), circle(○), square(■)

 

- 순서 있는 목록(ordered list)

: decimal(10진수; 1, 2, 3, ...)

  lower-roman( i, ii, ...)

  upper-roman( Ⅰ, Ⅱ, ...)

  lower-alpha(a, b, c, ...)

  upper-alpha(A, B, C,...)

 

목록의 글머리 기호에 이미지 사용 ▶list-style-image:url("이미지 파일주소")

 

글머리 기호 위치 지정 ▶list-style-position [inside / outside(기본값)]

 

*목록 스타일 설정 예시

<html>
<head>
  <style type="text/css">
    ol li{list-style-type:upper-alpha}
    li.usa{list-style-type:disc}
    li.kor{list-style-type:circle}
    li.renew{list-style-type:square}
  </style>
</head>
<body>
  <h3>과목별 추천도서 목록</h3>
  <ol>
    <li>IT기술의 이해</li>
    <ul>
      <li class="kor">최윤철, 임순범, 한탁돈 공저, 컴퓨터와 IT 기술의 이해</li>
      <li class="usa">D. Morley, C. Parker, Understanding Computers 15th Ed.</li>
      <li class="usa">G. Shelly, M. Vermaat, Discovering Computers</li>
    </ul>
    <li>웹프로그래밍</li>
    <ul>
      <li class="kor">임순범, 박희민 공저, HTML5 웹프로그래밍입문</li>
      <li class="kor">최윤철, 임순범 공저, 소셜미디어 시대의 인터넷활용</li>
      <li class="renew">B. McLaughlin, What Is HTML5? (신규) </li>
    </ul>
  </ol>
</body>
</html>

*목록 글머리 위치 지정 예시

<html>
<head>
  <style type="text/css">
    ul.outside-list{list-style-position:outside}
    ul.inside-list{list-style-position:inside}
    li.usa{list-style-image:url("strawberry-cut.jpg")}
    li.kor{list-style-image:url("strawberry-cut.jpg")}
    p{font-weight:bold}
  </style>
</head>
<body>
  <h3>과목별 추천도서 목록</h3>
  <ul class="outside-list">
    <p>IT기술의 이해</p>
    <li class="kor">최윤철, 임순범, 한탁돈 공저, 컴퓨터와 IT 기술의 이해</li>
    <li class="usa">D. Morley, C. Parker, Understanding Computers 15th Ed.</li>
    <li class="usa">G. Shelly, M. Vermaat, Discovering Computers</li>
  </ul>
  <ul class="inside-list">
    <p>웹프로그래밍</p>
      <li class="kor">임순범, 박희민 공저, HTML5 웹프로그래밍입문</li>
      <li class="kor">최윤철, 임순범 공저, 소셜미디어 시대의 인터넷활용</li>
      <li class="renew">B. McLaughlin, What Is HTML5? (신규) </li>
  </ul>
</body>
</html>

표의 스타일 설정

표/셀의 폭 지정

  • width = 표나 각 셀의 가로 길이(폭)

  • table-layout = fixed로 지정할 경우, 칸의 크기가 고정[auto / fixed] 

  • word-break = 줄바꿈 여부 [break-all(줄바꿈 발생)]

셀의 테두리(border) 모양 지정

  • border-spacing = 테두리 간격 [1 / 2/ 길이값]

  • border-collapse = 셀의 테두리 분리 [collapse / seperate(기본값)]

  • empty-cells = 빈 셀의 테두리 [show(기본값) / hide]

캡션의 위치 지정

  • caption-side [top(기본값) / bottom]

 

*talbe-layout:auto;

<html>
<head>
  <style type="text/css">
    #books{table-layout:auto;width:90%}
    #books caption {font-size:14pt;font-weight:bold;margin:0.5em}
  </style>
</head>
<body>
  <table border="1" id="books">
    <caption>추천 도서 테이블</caption>
    <thead>
      <tr>
        <th>작가</th><th>책제목</th><th>출판사</th>
      </tr>
    </thread>
    <tbody>
      <tr>
        <td>윌터아이작슨</td><td>스티브잡스</td><td>민음사</td>
      </tr>
      <tr>
        <td>최윤철, 임순범</td><td>멀티미디어 배움터</td><td>생능출판사</td>
      </tr>
      <tr>
        <td>임순범 외</td><td>HTML5 웹 프로그래밍 입문</td><td>생능출판사</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

 

*table-layout:fixed;

*border-collapse: collapse;

*border-spacing:8px;

*empty-cells:hide; caption-side:bottom; margin:1em

 

 

 

 

SMALL

'Web > Web Programming' 카테고리의 다른 글

[생활코딩/JavaScript] HTML과 JavaScript (기초)  (0) 2022.01.24
[CSS] 문자와 색상 지정  (0) 2020.08.03
[CSS] CSS 속성 설정 / 스타일시트 선언 방법  (0) 2020.08.02
[CSS] WEB2.1 - WEB2.9  (0) 2020.07.29
WEB 02.1.1 유튜브 영상 공유  (0) 2020.07.22

    티스토리툴바