CSS 리스트 (list)

CSS를 이용하면 리스트에 다양한 효과를 적용할 수 있다.

CSS에서 사용할 수 있는 list-style 속성은 다음과 같다.

- list-style-type
- list-style-image
- list-style-position

list-style-type 속성

리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 한다.
list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있다.

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

사용할 수 있는 마커(marker)에 대한 더 자세한 사항은 HTML 리스트 수업에서 확인할 수 있다.

list-style-image 속성

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

.imageMarker { list-style-image: url("/images/img_list_test.png"); }

list-style-position 속성

list-style-position 속성을 이용하면 리스트 요소의 위치를 설정할 수 있다.
list-style-position 속성의 기본 속성값은 outside로 설정되어 있다.

.outside { list-style-position: outside; }
.inside { list-style-position: inside; }

list-style 속성 한 번에 적용하기

위에서 언급한 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

ul { list-style: square inside url("/images/img_list_test.png"); }

리스트에 배경색 적용하기

CSS를 사용하면 리스트 전체뿐만 아니라 리스트 요소별로도 각각의 배경색을 설정할 수 있다.

ul { background: #D2691E; padding: 15px; }
ol { background: #6495ED; padding: 15px; }
ul li { background: #DEB887; margin: 5px; }
ol li { background: #00FFFF; margin-left: 15px; }

CSS list-style 속성

속성	설명
list-style	모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
list-style-type	리스트 요소의 마커(marker)를 설정함.
list-style-image	리스트 요소의 마커로 사용할 이미지를 설정함.
list-style-position	리스트 요소의 위치를 설정함.

CSS 테이블 (table)

CSS를 이용하면 다양한 형태의 테이블을 만들 수 있다.

테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있다.

- border

- border-collapse

- border-spacing

- caption-side

- empty-cells

- table-layout

border 속성

border 속성으로 테이블의 테두리(border)를 설정할 수 있다.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 된다.

table, th, td { border: 2px solid orange; }

위의 예제에서 테이블의 테두리(border)가 두 줄씩 나타나는 이유는 <th>태그와 <td>태그가 각각 자신만의 테두리를 가지고 있기 때문이다. 위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 한다.

border-collapse 속성

border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현된다. 이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현하게 된다.

table, th, td { border: 2px solid orange; }
table { border-collapse: collapse; }

border-spacing 속성

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

table, th, td { border: 1px solid black; }
table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }

text-align 속성

text-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬을 설정한다.
<th>태그 내부는 가운데 정렬이, <td>태그 내부는 왼쪽 정렬이 기본 설정이다.

table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }
td { text-align: center; }

vertical-align 속성

vertical-align 속성은 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬을 설정한다. <th>태그와 <td>태그 모두 가운데 정렬이 기본 설정이다.

table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { vertical-align: top; height: 50px; }
td { vertical-align: bottom; height: 50px; }

다양한 형태의 테이블 예제

CSS를 이용하면 HTML 기본 테이블을 훨씬 더 다양한 모습으로 설정할 수 있다.

예제1

<th>태그와 <td>태그에 border-bottom 속성을 사용하여 수평 나눔선만으로 만든 테이블이다.

table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }

예제2

예제는 :hover 선택자를 이용하여 <tr>태그에 마우스를 올리면 행 전체가 하이라이트 되도록 만든 테이블이다.

table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
tr:hover { background-color: #F5F5F5; }

예제3

background-color 속성과 :nth-child 선택자를 사용하여 얼룩무늬 효과를 설정한 테이블이다.

table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; }
tr:nth-child(odd) { background-color: #F3F3F3; }

예제4

데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기가 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			table {
				width: 100%;
			}
			td {
				padding: 20px;
				border: 1px solid #444444;
			}
		</style>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>Lorem</td>
					<td>Ipsum</td>
					<td>Dolor</td>
				</tr>
				<tr>
					<td>Lorem</td>
					<td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td>
					<td>Dolor</td>
				</tr>
			</table>
		</div>
	</body>
</html>

웹브라우저의 가로 크기가 클 때는 문제가 없으나, 가로 크기가 줄어들면 표 안의 내용이 여러 줄로 나오기 시작한다. 자료에 따라 이러한 줄 바꿈이 곤란한 경우가 있다.

그래서 표의 최소 가로 크기를 정하면 가로 스크롤이 생긴다.

table {
	width: 100%;
	min-width: 500px;
}

이를 해결하는 방법은 overflow-x 속성을 이용하는 것이다. 표의 부모 요소에 overflow-x: auto; 속성을 추가하면 표에서만 가로 스크롤이 생긴다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div {
				overflow-x: auto;
			}
			table {
				width: 100%;
				min-width: 500px;
			}
			td {
				padding: 20px;
				border: 1px solid #444444;
			}
		</style>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td>Lorem</td>
					<td>Ipsum</td>
					<td>Dolor</td>
				</tr>
				<tr>
					<td>Lorem</td>
					<td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td>
					<td>Dolor</td>
				</tr>
			</table>
		</div>
	</body>
</html>

다른 레이아웃은 건드리지 않고 표만 스크롤해서 내용을 볼 수 있다.

CSS table 속성

속성	설명
border	모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-collapse	테이블의 테두리를 한 줄로 나타낼지를 설정함.
border-spacing	테이블 요소(th, td)간의 여백을 설정함.
caption-side	테이블의 캡션(caption)을 설정함.
empty-cells	테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함.
table-layout	테이블에 사용되는 레이아웃 알고리즘을 설정함.

CSS 마우스 커서(cursor)

cursor 속성을 이용하면 마우스 커서의 형태를 지정할 수 있다. 글자위에 마우스를 올리면 모양이 변한다.

<p style="cursor:auto">Auto</p>
<p style="cursor:crosshair">Crosshair</p>
<p style="cursor:default">Default</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:move">Move</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>

[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제

크롬 확장 프로그램으로 마우스 우클릭 해제

크롬 확장 프로그램으로 마우스 우클릭 해제 크롬으로 웹서핑을 하다보면 글이나 이미지를 저장하여 필요한 곳에 사용해야 할 일들이 자주 있는데 복사한 내용을 그대로 업로드 하는 사람들이

smarti.tistory.com

[세상살이] - SQ3R 독서법 & KWL 독서법

SQ3R 독서법 & KWL 독서법

SQ3R 독서법 SQ3R 독서법이란, 책 내용을 자신의 경험과 관련지어 읽는 방법을 말한다. 책 전체 내용을 훑어보고, 자신의 경험을 바탕으로 책의 세부 내용을 주의 깊게 읽은 후, 그 결과를 자신의

smarti.tistory.com

[세상살이] - 색으로 대표되는 컬러푸드 - Red (레드푸드)

색으로 대표되는 컬러푸드 - Red (레드푸드)

레드푸드 - 암, 심혈관계 질환 예방 토마토, 사과, 딸기, 수박, 자두, 석류, 붉은 고추, 대추, 오미자 등에는 폴리페놀 성분이 들어있다. 이 성분은 발암물질을 수용성으로 만들어 몸 밖으로 내보

smarti.tistory.com

[코딩공부] - HTML 기본요소 1, meta tag(메타태그), color(색), background(배경)

HTML 기본요소 1, meta tag(메타태그), color(색), background(배경)

Meta Tag(메타태그) 정리 및 사용법 검색엔진 최적화(SEO)를 위해 중요한 요소인 Meta tag의 속성을 정리 해보자. 태그 요소는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들

smarti.tistory.com

[디자인공부] - 포토샵 3D 불투명 아크릴 효과 문자 만들기

포토샵 3D 불투명 아크릴 효과 문자 만들기

Adobe Photoshop 3D 도구를 이용한 불투명 아크릴 효과 만들기 포토샵의 3D 도구 및 설정과 조정 레이어를 활용하여 단순하고 평평하며 희미한 3D 텍스트 효과를 만들어 보자. 먼저 레이어 창을 보자

smarti.tistory.com

저작자표시

'코딩공부' 카테고리의 다른 글

CSS 위치속성 디스플레이, 포지션, 오버플로우 (0)	2020.10.21
CSS 박스모델, 패딩, 테두리 (0)	2020.10.16
CSS 박스모델, 마진, 아웃라인 (0)	2020.10.15
CSS 크기, 크기 단위 (0)	2020.10.14
CSS 배경, 그라데이션 (0)	2020.10.14
CSS 색, 링크 (0)	2020.10.13
CSS 텍스트 (0)	2020.10.13
CSS 폰트 (0)	2020.10.13

Smart-i

CSS 리스트, 테이블

CSS 리스트 (list)

list-style-type 속성

list-style-image 속성

list-style-position 속성

list-style 속성 한 번에 적용하기

리스트에 배경색 적용하기

CSS list-style 속성

CSS 테이블 (table)

border 속성

border-collapse 속성

border-spacing 속성

text-align 속성

vertical-align 속성

다양한 형태의 테이블 예제

CSS table 속성

CSS 마우스 커서(cursor)

'코딩공부' 카테고리의 다른 글

관련글

댓글

티스토리툴바