본문 바로가기
웹/CSS

CSS - 속성(3)

by DGDD(Developer) 2023. 6. 27.

CSS 리스트

CSS에서 사용할 수 있는 list-style 속성

 

1. list-style-type

2. list-style-image

3. list-style-position

list-style-type

리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 합니다.

list-style-type 속성을 이용하면 리스트에 다양한 마커를 적용할 수 있습니다.

 

<head>
	<style>
		.circle { list-style-type: circle; }
		.square { list-style-type: square; }
		.upperAlpha { list-style-type: upper-alpha; }
		.lowerRoman { list-style-type: lower-roman; }
	</style>
</head>

<body>
	<h1>list-style-type 속성을 이용한 마커의 변경</h1>
	<ul class="circle">
		<li>사과</li>
		<li>멜론</li>
		<li>바나나</li>
	</ul>
	<ul class="square">
		<li>수박</li>
		<li>참외</li>
		<li>옥수수</li>
	</ul>
	<ol class="upperAlpha">
		<li>감자</li>
		<li>상추</li>
		<li>고구마</li>
	</ol>
	<ol class="lowerRoman">
		<li>오이</li>
		<li>배추</li>
		<li>시금치</li>
	</ol>
</body>

list-Style-image

list-style-image 속성을 이용하면 마커로 자신만의 이미지를 사용할 수 있습니다.

<style>
    .imageMarker { list-style-image: url("파일경로/파일이름.png"); }
</style>

 

list-style-position

list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있습니다.

list-style-position 속성의 기본 속성값은 outside로 설정되어 있습니다.

- inside

이 리스트는 위치를 inside로 지정했습니다.

  • 수박
  • 참외
  • 옥수수

-outside

이 리스트는 위치를 outside로 지정했습니다.

  • 수박
  • 참외
  • 옥수수

※ 위에 설명한 모든 속성은 list-style : square inside url("이미지.png") 방식으로 한 번에 적용이 가능합니다.

CSS 테이블

테이블에 적용 가능한 CSS 스타일

1.border

2.border-collapse

3.border-spacing

4.caption-side

5.empty-cells

6.table-layout

 

border 속성

border 속성으로 테이블의 테두리(border)를 설정할 수 있습니다. 만약에 border 속성을 따로 명시하지 않으면 테이블은 기본 설정으로 빈 테두리를 가지게 됩니다.

<style>
		table { border: 2px solid orange; }
</style>

위에 스타일을 적용시킨 table을 만들어 보겠습니다.

 

물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

table에만 속성을 적용시키면 바깥쪽 테두리에만 적용되는것을 볼 수 있습니다. 안쪽 표에도 적용할려면 td 와 th에도 적용 시켜야 합니다.

 

물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

th와 th에도 border 속성을 적용 시키면 위와 같이 표 안에 중복으로 선이 그려지는 것을 볼 수 있습니다. 위와 같은 현상이 나타날 때 선을 한 줄로만 바꾸려면 border-collapse 속성을 사용합니다.

border-collapse 속성

border-collapse 속성은 표의 테두리와 셀의 테두리 사이의 간격을 어떻게 처리할 것인지를 정합니다.

 

border-collapse 속성은 separate | collapse | initial | inherit 값을 가질 수 있습니다.

  • separate : 표의 테두리와 셀 사이에 간격을 둡니다.
  • collapse : 표의 테두리와 셀의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

속성값이 separate일 때, 간격 크기는 border spacing 속성으로 정합니다.

 

spearate

물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

collapse

물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

initial

물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

inherit

물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

border-spacing 속성

border-spacing 속성은 테이블 요소(th, td)간의 여백을 설정해 줍니다.

table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }

 

물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

 

caption-side 속성

caption-side 속성은 테이블에 추가된 caption 태그를 top에 붙일지 bottom에 붙일지를 설정하는 속성입니다.

 

caption-side : top

생명
물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

caption-side : bottom

생명
물고기 동물 곤충
상어 호랑이 개미
고래 사자 개미

empty-cells 속성

empty-cells 속성은 표에서 빈 셀의 테두리를 표시할지 말지를 정하는 속성입니다.

 

empty-cells의 값에는 show | hide | initial | inherit 이 있습니다.

  • show : 빈 셀의 테두리를 보여줍니다.(기본 값)
  • hide : 빈 셀의 테두리를 숨깁니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

show

생명
물고기 동물 곤충
상어 호랑이 개미
고래 사자

hide

생명
물고기 동물 곤충
상어 호랑이 개미
고래 사자

예시를 비교할 수 있도록 border-collapse 속성은 separate로 설정했습니다.

table-layout 속성

table-layout 속성은 <table>의 셀, 행 및 열을 배치하는데 사용되는 알고리즘을 설정합니다.

 

table-layout 속성은 값으로 auto | fixed를 받습니다.

  • auto : 테이블과 해당 셀의 너비는 내용에 맞게 조정됩니다. ( 기본적으로 대부분의 브라우저는 auto 사용합니다.)
  • fixed : 테이블 및 열 너비는 테이블 및 열 요소의 너비 또는 셀의 첫 번째 행 너비로 설정됩니다. 후속 행의 셀은 열 너비에 영향을 주지 않습니다.

auto

생명
물고기 동물 곤충
아기 상어 뚜루루 호랑이 개미
고래 사자

fixed

생명
물고기 동물 곤충
아기 상어 뚜루루 호랑이 개미
고래 사자

 

※ 표안의 텍스트의 수직 방향 정렬 또는 수평 방향 정렬을 하기 위해서는 th, td 태그의 스타일을 변경해야 합니다.

text-align : 수평 방향 정렬

vertical-align : 수직 방향 정렬

[참고문헌]

TCPSchool : http://tcpschool.com/

MDN Blog : https://developer.mozilla.org/en-US/

저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

CSS 박스 모델 (Box Model) Margin, Padding, border  (0) 2023.06.29
CSS - 계단식 ( Cascade )  (0) 2023.06.28
CSS - 속성(2)  (0) 2023.06.26
CSS - 속성  (0) 2023.06.26
CSS  (0) 2023.06.26

관련글

티스토리툴바