CSS 리스트, 테이블
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 독서법 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