CSS에서 목록 및 테이블 서식 지정 가이드- 속성 및 예

목록 및 표 형식 지정은 웹 사이트에 정보를 표시하는 데 필수적인 부분입니다. CSS는 원하는 대로 목록과 표를 만들고 사용자 지정할 수 있는 속성과 클래스를 제공합니다. 다음은 CSS에서 목록과 표의 형식을 지정하는 방법에 대한 자세한 안내입니다.

목록 서식 지정

정렬되지 않은 목록(ul)

주요 속성: 목록 스타일 유형.

값: none, disc, circle, square.

예:

ul {  
  list-style-type: disc;  
}

정렬된 목록(ol)

주요 속성: 목록 스타일 유형.

값: 없음(기본값), 10진수, 하위 알파, 상위 알파, 하위 로마자, 상위 로마자.

예:

ol {  
  list-style-type: decimal;  
}

정의 목록(dl)

기본 속성: 정의 목록의 형식을 지정하는 특정 CSS 속성이 없습니다. 그러나 클래스 또는 다음과 같은 기타 속성을 사용하여 목록 내의 요소 스타일을 지정할 수 있습니다. font-size, font-weight, margin, padding, etc.

예:

<dl>  
  <dt>HTML</dt>  
  <dd>A markup language for creating web pages</dd>  
  <dt>CSS</dt>  
  <dd>A styling language for web pages</dd>  
</dl>

dt {  
  font-weight: bold;  
}

표 서식 지정

테이블 구조 형식화

주요 속성: border-collapse.

값: separate(default), collaps e.

예:

table {  
  border-collapse: collapse;  
}

표 테두리 서식

주요 속성: border.

값: 테두리 값, 예: 1px solid black.

예:

table {  
  border: 1px solid black;  
}

셀 테두리 서식

주요 속성: border.

값: 테두리 값, 예: 1px solid black.

예:

td, th {  
  border: 1px solid black;  
}

테이블 셀의 정렬 및 간격

주요 속성: text-align, padding.

text-align: 정렬 값, 예: left, right, center.
패딩: 셀 내의 간격 값입니다(예: 10px).

예:

th {  
  text-align: center;  
  padding: 10px;  
}

테이블의 배경 및 텍스트 색상

주요 속성: background-color, color

background-color: 배경색 값, 예: lightgray.
color: 텍스트 색상 값, 예: white.

예:

table {  
  background-color: lightgray;  
  color: white;  
}

테이블의 열 및 행 크기

주요 속성: width, height.

width: 너비 값(예: "100px", "20%").
height: 높이 값(예: "50px", "10%").

예:

th {  
  width: 100px;  
  height: 50px;  
}

이것은 CSS에서 목록과 표의 형식을 지정하는 방법에 대한 포괄적인 안내서입니다. 값과 속성을 사용자 지정하여 웹 사이트의 디자인 요구 사항에 맞는 목록 및 표 스타일을 만들 수 있습니다.

이전 게시물