'CSS' 태그의 글 목록

1. caption-side 속성 - 표 제목 위치 정하기

caption-side: top | bottom

2. border 속성 - 표 테두리 스타일 정하기

CSS를 이용해 테두리를 표시할 때는 표의 바깥 테두리와 셀의 테두리를 따로 지정해야 합니다.

<style>
            body{
                font-family:"맑은 고딕", "고딕", "굴림";
            }
            .table1 {
                border:1px solid black;
            }
            .table1 td {
                border:1px dotted black;
                padding:10px;
                text-align:center;
            }
</style>

3. border-collapse 속성 - 테두리 통합, 분리하기

border-collapse: collapse | separate;

<table> 태그와 <td> 태그에서 border 속성을 사용하면 두 줄로 표시되는데 이때 border-collapse 속성을 사용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지를 결정할 수 있습니다.

4. border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기

border-spacing: <크기>;

border-collapse: separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정합니다.

5. empty-cells 속성 - 빈 셀의 표시 여부 지정하기

empty-cells: show | hide;

6. width, height 속성 - 표 너비와 높이 지정하기

width: <크기>;

height: <크기>;

7. table-layout 속성 - 콘텐츠에 맞게 셀 너비 지정하기

속성 값	설명
fixed	셀 너비를 고정한다. 셀 내용에 따라 셀의 너비가 달라지지 않는다.
auto	셀 내용에 따라 셀의 너비가 달라진다. 기본 값.

8. text-align 속성 - 셀 안에서 수평 정령하기

text-align: left | right | center;

9. vertical-align 속성 - 셀 안에서 수직 정렬하기

vertical-align: top | bottom | middle;

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

CSS3 선택자 (0)	2017.04.25
[CSS 입문] 다단 관련 속성 (0)	2017.04.19
[CSS 입문] CSS 포지셔닝의 주요 속성들 (0)	2017.04.17
[CSS 입문] 여백을 조절하는 속성 (0)	2017.04.17
[CSS 입문] 테두리 관련 속성 (2)	2017.04.13

1. column-width 속성 - 단의 너비를 고정하고 다단 구성하기

column-width: <크기> | auto;

화면이 커지면 단의 개수가 많아지고 화면이 좁아지면 단의 개수가 줄어듭니다.

2. column-count 속성 - 단의 개수를 고정하고 다단 구성하기

column-count: <숫자> | auto;

브라우저 창의 너비와 상관없이 단의 개수가 일정하며 창의 너비에 따라 단의 너비가 바뀝니다.

3. column-gap 속성 - 단과 단 사이 여백 지정하기

column-gap: <크기> | auto;

4. column-rule 속성 - 구분선의 색상, 스타일, 너비 지정하기

column-rule-color: <색상>

column-rule-width: <크기> | thin | medium | thick

column-rule: <너비> | <스타일> | <색상>

5. break-after 속성 - 다단 위치 지정하기

속성	단 나눌 위치	동작
		단 나눔	단 나누지 않음
break-before	특정 요소 앞	column	avoid-column
break-after	특정 요소 뒤
break-inside	특정 요소 안

6. column-span 속성 - 여러 단을 하나로 합치기

column-span: 1 | all;

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

CSS3 선택자 (0)	2017.04.25
[CSS 입문] 표 스타일 속성 (0)	2017.04.19
[CSS 입문] CSS 포지셔닝의 주요 속성들 (0)	2017.04.17
[CSS 입문] 여백을 조절하는 속성 (0)	2017.04.17
[CSS 입문] 테두리 관련 속성 (2)	2017.04.13

1. box-sizing - 박스 너비 기준

box-sizing 속성을 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할 지, 패딩이나 테두리까지 포함시켜 사용할 지 결정할 수 있습니다.

box-sizing: content-box | border-box

2. float 속성 - 왼쪽이나 오른쪽으로 배치

float: left | right | none

3. clear 속성 - float 속성 해제

clear: none | left | right | both

4. position 속성 - 배치 방법 지정

속성 값	설명
static	요소를 문서의 흐름에 맞추어 배치한다.
relative	이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다. top, right, bottom, left 속성을 사용할 수 있으며 좌푯값을 사용해 위치를 지정할 수 있다.
absolute	top, right, bottom, left 속성 값을 사용해 요소를 원하는 위치에 배치한다. absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position을 relative로 지정해야 한다.
fixed	지정한 위치에 고정해 배치한다. 화면에서 요소가 잘릴 수도 있다. absolute 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 된다.

5. visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기

속성 값	설명
visible	화면에 요소를 표시한다.
hidden	화면에서 요소를 감춘다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미친다.
collapse	표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다. 그 외의 영역에서 사용하면 'hidden'처럼 처리한다.

6. z-index 속성 - 요소 쌓는 순서

z-index: <숫자>

z-index 값이 작을 수록 아래에 쌓이고 z-index 값이 클 수록 z-index 값이 작은 요소보다 위에 쌓입니다. z-index 값을 명시 하지 않을 경우, 웹 문서에 맨 먼저 삽입하는 요소가 z-index:1 값을 가지며 그 후 삽입하는 요소들은 z-index 값이 점점 커집니다.

<출처 - Do it! HTML5+CSS3 웹 표준의 정석>

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

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

[CSS 입문] 표 스타일 속성 (0)	2017.04.19
[CSS 입문] 다단 관련 속성 (0)	2017.04.19
[CSS 입문] 여백을 조절하는 속성 (0)	2017.04.17
[CSS 입문] 테두리 관련 속성 (2)	2017.04.13
[CSS 입문] CSS와 박스 모델 (0)	2017.04.12

1. margin 속성 - 요소 주변 여백 설정

margin-top: <크기> | <백분율> | auto

margin-right: <크기> | <백분율> | auto

margin-bottom: <크기> | <백분율> | auto

margin-left: <크기> | <백분율> | auto

margin: <크기> | <백분율> | auto

- margin 값이 4개면 그 순서는 top → right → bottom → left(시계 방향)이다.

- margin 값이 3개면 빠진 값은 마주보는 방향의 스타일 속성 값을 사용한다.

2. padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정

padding-top: <크기> | <백분율> | auto

padding-right: <크기> | <백분율> | auto

padding-bottom: <크기> | <백분율> | auto

padding-left: <크기> | <백분율> | auto

padding: <크기> | <백분율> | auto

<출처 - Do it! HTML5+CSS3 웹 표준의 정석>

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

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

[CSS 입문] 다단 관련 속성 (0)	2017.04.19
[CSS 입문] CSS 포지셔닝의 주요 속성들 (0)	2017.04.17
[CSS 입문] 테두리 관련 속성 (2)	2017.04.13
[CSS 입문] CSS와 박스 모델 (0)	2017.04.12
[CSS 입문] 그러데이션 효과 (0)	2017.04.11

1. border-style 속성 - 테두리 스타일 지정

속성 값	설명
none	테두리가 나타나지 않는다. 기본 값
hidden	테두리가 나타나지 않는다. border-collapse:collapse일 경우, 다른 테두리도 표시되지 않는다.
dashed	테두리를 짧은 선으로 표시한다.
dotted	테두리를 점선으로 표시한다.
double	테두리를 이중선으로 표시한다. 두 선 사이의 간격은 border-width 값으로 지정한다.
groove	테두리를 창에 조각한 것처럼 표시한다. 홈이 파인 듯 입체적으로 보인다.
inset	border-collapse:separate일 경우, 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고 border-collapse:collapse일 경우, groove와 똑같이 표시된다.
outset	border_collapse:separate일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고 border-collapse:collapse일 경우, ridge와 똑같이 표시된다.
ridge	테투리를 창에서 튀어나온 것처럼 표시한다.
solid	테두리를 실선으로 표시한다.

2. border-width 속성 - 테두리 두께 지정

border-top-width: <크기> | thin | medium | thick

border-right-width: <크기> | thin | medium | thick

border-bottom-width: <크기> | thin | medium | thick

border-left-width: <크기> | thin | medium | thick

border-width: <크기> | thin | medium | thick

3. border-color 속성 - 테두리 색상 지정

border-top-color: <색상>

border-right-color: <색상>

border-bottom-color: <색상>

border-left-color: <색상>

border-color: <색상>

4. border 속성 - 테두리 스타일 묶어 지정

두께와 색상, 스타일 순서는 상관없습니다.

border-top: <두께> | <색상> | <스타일>

border-right: <두께> | <색상> | <스타일>

border-bottom: <두께> | <색상> | <스타일>

border-left: <두께> | <색상> | <스타일>

border: <두께> | <색상> | <스타일>

5. border-radius 속성 - 박스 모서리 둥글게 만들기

border-top-left-radius: <크기> | <백분율>

border-top-right-radius: <크기> | <백분율>

border-bottom-right-radius: <크기> | <백분율>

border-bottom-left-radius: <크기> | <백분율>

border-radius: <크기> | <백분율>

타원 형태로 둥글게 만들고 싶으면 가로 반지름 크기와 세로 반지름 크기를 함께 지정하면 됩니다.

.round1 { border-top-left-radius:100px 50px; }
.round2 { border-bottom-right-radius:50% 30%; }

6. box-shadow 속성 - 선택한 요소에 그림자 효과 내기

box-shadow : none | <그림자 값> [, <그림자 값>]*;

<그림자 값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

.box1{ box-shadow:2px -2px 5px 0px black;}
.box2{ box-shadow:5px 5px 15px 5px gray;}

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

[CSS 입문] CSS 포지셔닝의 주요 속성들 (0)	2017.04.17
[CSS 입문] 여백을 조절하는 속성 (0)	2017.04.17
[CSS 입문] CSS와 박스 모델 (0)	2017.04.12
[CSS 입문] 그러데이션 효과 (0)	2017.04.11
[CSS 입문] 배경 색과 배경 이미지 (0)	2017.04.10

1. 블록 레벨 요소와 인라인 레벨 요소

블록 레벨(block-level) 요소 - 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지하는 요소

인라인 레벨(inline-level) 요소 - 화면에 표시되는 콘텐츠만큼 영역을 차지하는 요소

종류	해당 태그
블록 레벨 태그	<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그	<img>, <object>, <br>, <suv>, <sup>, <span>, <input>, <textarea>, <label>, <button>

2. 박스 모델(box model)

박스모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(boder), 그리고 여러 박스 모델 사이의 여백인 마진(margin)등의 요소로 구성됩니다.

3. width, height 속성 - 콘텐츠 영역의 크기

width: <크기> | <백분율> | auto

height: <크기> | <백분율> | auto

- 모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 패딩 + 좌우 테두리

- 인터넷 익스플로러 6에서 박스 모델의 width 값 = 콘텐츠 너비 + 좌우 패딩 + 좌우 테두리

4. display 속성 - 화면 배치 방법 결정

display 속성을 사용하면 블록 레벨 요소를 인라인 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있습니다.

속성 값	설명
block	해당 요소를 블록 레벨로 지정한다.
inline	해당 요소를 인라인 레벨로 지정한다.
inline-block	해당 요소를 인라인 레벨로 지정하면서 블록 레벨 속성을 갖도록 한다.
none	해당 요소를 화면에 표시하지 않는다.
inherit	상위 요소의 display 속성을 상속받는다.
table	블록 레벨의 표로 만든다.
inline-table	인라인 레벨의 표로 만든다. (<table> 태그를 사용한 것처럼)
table-row	표의 행으로 만든다. (<tr> 태그를 사용한 것처럼>
table-row-group	표의 행 그룹으로 만든다. (<tbody> 태그를 사용한 것처럼)
table-header-group	표의 제목 영역(header) 그룹으로 만든다. (<thead> 태그를 사용한 것처럼)
table-footer-group	표의 요약 영역(footer) 그룹으로 만든다. (<tfoot> 태그를 사용한 것처럼)
table-column	표의 열로 만든다. (<col> 태그를 사용한 것처럼)
table-column-group	표의 열 그룹으로 만든다. (<colgroup> 태그를 사용한 것처럼)
table-cell	표에서 하나의 셀로 만든다. (<td>나 <th> 태그를 사용한 것처럼)
table-caption	표의 캡션을 만든다. (<caption> 태그를 사용한 것처럼)
list-item	목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만든다. (<li> 태그를 사용한 것처럼)

visibility: hidden;도 display:none;과 같은 비슷한 역할을 하는데 visibility 속성은 화면에서 감추기만 할 뿐 원래 요쇼가 있는 공간은 그대로 차지하지만 none 속성은 아예 공간조차 차지하지 않습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

[CSS 입문] 여백을 조절하는 속성 (0)	2017.04.17
[CSS 입문] 테두리 관련 속성 (2)	2017.04.13
[CSS 입문] 그러데이션 효과 (0)	2017.04.11
[CSS 입문] 배경 색과 배경 이미지 (0)	2017.04.10
[CSS 입문] 목록과 링크 스타일 (0)	2017.04.06

그러데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해 함께 입력해야합니다.

      background: #ff0000; /* CSS3 미지원 브라우저*/
      background: -webkit-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
      background: -moz-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
      background: -o-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
      background: linear-gradient(45deg, #ff0000, #ffffff); /* 최신 모던 브라우저 */

이때 선형 그러데이션 함수나 원형 그러데이션 함수를 이용해 만드는 배경은 크기가 없는 배경 이미지이므로 그러데이션 값을 background-image 속성 값이나 background의 속성 값으로 지정합니다.

1. 선형 그러데이션

liner-gradient( <각도> to <방향>, color-stop, [color-stop,..]);

위의 구문이 표준 구문이지만 '위치'와 '각도'를 표시하는 방법이 브라우저별, 버전별 사용법이 조금씩 다르기 때문에 구분해 사용해야 합니다.

접두사	브라우저 버전	'위치' 속성 값
-webkit-	사파리 5.1 ~ 6.0	그러데이션 시작 위치 기준
-moz-	파이어폭스 3.6 ~ 15	그러데이션 끝 위치 기준. 키워드 to 사용하지 않음
-o-	오페라 11.1 ~ 12.0	그러데이션 끝 위치 기준. 키워드 to 사용하지않음

선형 그러데이션을 만들기 위해서는 바뀌는 부분 색을 지정해 주어야 하는데 바뀌는 지점을 색상 중지점(color-stop)이라고 합니다. 색상 중지점을 지정할 대는 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있습니다.

      background: #06f; /* css3 미지원 브라우저 */
      background-image: -webkit-linear-gradient(top, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background-image: -moz-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background: -o-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 최신 모던 브라우저 */

2. 원형 그러데이션

원형 그러데이션에서 만들어지는 모양은 circle(원형)과 ellipse(타원형)입니다. 따로 지정하지 않으면 ellipse로 인식합니다.

radial-gradient( <최종 모양> <크기> at <위치>, color-stop, [color-stop,..]);

표준 구문에서는 '모양'과 '크기' 속성 다음에 at 키워드와 함께 위치 값을 지정하는데 브라우저 접두사를 붙이는 구문사에서는 at 키워드 없이 구문의 맨 앞부분에 위치를 표시합니다.

      background: blue;
      background: -webkit-radial-gradient(10% 10%, circle, white,blue);
      background: -moz-radial-gradient(10% 10%, circle,white,blue);
      background: -o-radial-gradient(10% 10%, circle, white,blue);
      background: radial-gradient(circle at 10% 10%,white,blue);

그러데이션을 지정할 때 원의 크기도 지정할 수 있는데 크기에서 사용할 수 있는 값은 다음과 같습니다.

속성 값	설명
closest-side	원의 경우, 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 모서리와 만날 때까지 그림 타원의 경우, 그러데이션 중심에서 가장 가가운 요소의 수평축이나 수직축과 만날 때까지 그림
closest-corner	그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 코너에 닿을 때까지 그림
farthest-side	그러데이션 가장자리가 그러데이션 중심에서 가장 먼 모서리와 만날 때까지 그림
farthest-coner	그러데이션 가장자리가 그러데이션 중심에서 가장 먼 코너에 닿을 때까지 그림. 기본 값

원형 그러데이션도 선형 그러데이션처럼 그러데이션 색상뿐만 아니라 색상이 바뀌는 위치도 함께 지정할 수 있습니다.

    background:skyblue;
    background:-webkit-radial-gradient(red, yellow 20%, skyblue);
    background:-moz-radial-gradient(red, yellow 20%, skyblue);
    background:-o-radial-gradient(red, yellow 20%, skyblue);
    background:radial-gradient(red, yellow 20%, skyblue);

3. 그러데이션 반복

선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하고 원형 그러데이션을 반복할 때는 repeating-radial-gradient를 사용합니다.

      background: red; /* css3 미지원 브라우저 */
      background: -webkit-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
      background: -moz-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
      background: -o-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
      background: repeating-linear-gradient(yellow, red 20px); /* 최신 모던 브라우저 */

반복되는 선형 그러데이션을 만들 때 다음과 같이 시작 색상과 끝 색상을 명확히 구분해 주면 색상이 중간에 섞이지 않고 두개 이상의 색상을 반복적으로 표시할 수 있습니다.

      background: red; /
      background: -webkit-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
      background: -moz-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
      background: -o-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); 
      background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

[CSS 입문] 테두리 관련 속성 (2)	2017.04.13
[CSS 입문] CSS와 박스 모델 (0)	2017.04.12
[CSS 입문] 배경 색과 배경 이미지 (0)	2017.04.10
[CSS 입문] 목록과 링크 스타일 (0)	2017.04.06
[CSS 입문] 문단 스타일 (0)	2017.04.05

1. background-color 속성 - 배경 색 지정

background-color:#0094ff;

2. bankgoround-clip 속성 - 배경 적용 범위 조절

속성 값	설명
boder-box	박스 모델의 가장 외곽인 테투리까지 적용한다.
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다.
content-box	박스 모델에서 내용 부분에만 적용한다.

3. background-image 속성 - 웹 요소에 배경 이미지 넣기

background-image: url('images/bg1.png');

4. background-repeat 속성 - 배경 이미지 반복 방법 지정

속성 값	설명
repeat	브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.
repaeat-x	브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복한다.
repeat-y	브라우저 창 높이와 같아질 때까지 배경 이미를 세로로 반복한다.
no-repeat	배경 이미지를 한 번만 표시하고 반복하지 않는다.

5. background-size 속성 - 배경 이미지 크기 조절

속성 값	설명
auto	원래 배경 이미지 크기만큼 표시한다.
contain	요소 안에 모든 배경 이미지가 표시되도록 확대하거나 축소한다.
cover	요소 전체를 모두 덮도록 배경 이미지를 확대하거나 축소한다.
<크기 값>	너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정한다.
<백분율>	원래 배경 이미지 크기를 기준으로 확대하거나 축소한다.

6. background-position 속성 - 배경 이미지 위치 조절

bankground-positon: <수평 위치> <수직 위치>;

수평 위치 : left | center | right | <백분율> | <길이 값>

수직 위치 : left | center | right | <백분율> | <길이 값>

7. background-origin 속성 - 배경 이미지 배치할 기준 조절

background-origin: border-box | padding-box | content-box

8. background-attachment 속성 - 배경 이미지 고정

background-attachment: scroll | fixed

9. background 속성

배경 이미지 관련 속성을 background 속성으로 줄여 사용할 수 있습니다. 속성 값이 다르므로 입력 순서는 상관없습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

[CSS 입문] CSS와 박스 모델 (0)	2017.04.12
[CSS 입문] 그러데이션 효과 (0)	2017.04.11
[CSS 입문] 목록과 링크 스타일 (0)	2017.04.06
[CSS 입문] 문단 스타일 (0)	2017.04.05
[CSS 입문] 텍스트 스타일 (0)	2017.04.04

1. list-style-type 속성 - 목록과 불릿과 번호 스타일 지정

속성 값	설명
disc	채운 원(●)
circle	빈 원(○)
square	채운 사각형(■)
none	불릿 없애기
decimal	1로 시작하는 십진수
decimal-leading-zero	앞에 0이 붙는 십진수
lower-roman	소문자 로마 숫자
upper-roman	대문자 로마 숫자
lower-alpha 또는 lower-latin	소문자 알파벳
upper-alpha 또는 upper-latin	대문자 알파벳
armenian	아르메니아 숫자
georgian	조지 왕조시대의 숫자

2. list-style-image 속성 - 불릿 대신 이미지 넣기

<style>
    ul {
      list-style-image:url('images/dot.png');  /* 불릿으로 사용할 이미지 */
    }
</style>

3. list-style-positon 속성 - 목록에 들여 쓰는 효과

list-style-position : inside | outside;

4. list-style 속성 - 목록 속성 한꺼번에 표시

list-style-type과 list-style-positon, list-style-image 속성을 한꺼번에 표시할 수 있습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

[CSS 입문] 그러데이션 효과 (0)	2017.04.11
[CSS 입문] 배경 색과 배경 이미지 (0)	2017.04.10
[CSS 입문] 문단 스타일 (0)	2017.04.05
[CSS 입문] 텍스트 스타일 (0)	2017.04.04
[CSS 입문] 글꼴 관련 스타일 (2)	2017.04.03

1. decoration 속성 - 글자 쓰기 방향 지정

decoration : ltr | rtl

2. text-align 속성 - 텍스트 정렬

속성 값	설명
start	현재 택스트 줄의 시작 위치에 맞추어 문단을 정렬한다. left-to-right 언어라면 왼쪽으로, right-to-left 언어라면 오른쪽으로 맞추어 정렬한다.
end	현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다. left-to-right 언어라면 왼쪽으로, right-to-left 언어라면 오른쪽으로 맞추어 정렬한다.
left	왼쪽에 맞추어 문단을 정렬한다.
right	오른쪽에 맞추어 문단을 정렬한다.
center	가운데에 맞추어 문단을 정렬한다.
justify	양쪽에 맞추어 문단을 정렬한다.
match-parent	부모 요소를 따라 문단을 정렬한다. 단, 부모 요소의 속성 값이 start나 end일 경우, 부모 요소가 left-to-right인지, right-to-left인지에 따라 left나 right값으로 계산해 적용한다.

3. text-justify 속성 - 정렬 시 공백 조절

속성 값	설명
auto	웹 브라우저에서 자동으로 지정한다.
none	정렬하지 않는다.
inter-word	단어 사이의 공백을 조절해 정렬한다.
distribute	인접한 글자 사이의 공백을 똑같이 맞추어 정렬한다.

4. text-indent 속성 - 텍스트 들여 쓰기

.indent1 {text-indent:15px;}  /* 15px만큼 들여쓰기 */
.indent2 {text-indent:5%;}  /* 5%만큼 들여쓰기 */

5. line-height 속성 - 줄 간격 조절

line-height : normal | <숫자> | <크기> | <백분율> | ingerit

보통 줄 간격은 글자 크기의 1.5~2배정도가 적당합니다.

6. text-overflow 속성 - 넘치는 텍스트 표시

속성 값	설명
clip	넘치는 텍스트를 자른다.
ellipsis	말 줄임표(…)로 잘린 텍스트가 있다고 표시한다.

text-overflow 속성은 해당 요소에서 overflow 속성 값이 hidden이거나 scroll, auto이면서 white-space : nowrap 속성을 함께 사용했을 경우에만 적용됩니다.

.content {
      border:1px solid #ccc;  /* 테두리 */
      width:300px;  /* 단락의 너비 */
      white-space:nowrap;  /* 줄바꿈 없음 */
      overflow:hidden;  /* 넘치는 부분 감춤 */
      text-overflow:ellipsis;  /* 말줄임표 */
    }

<출처> Do it! HTML5+CSS3 웹 표준의 정석

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

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

[CSS 입문] 배경 색과 배경 이미지 (0)	2017.04.10
[CSS 입문] 목록과 링크 스타일 (0)	2017.04.06
[CSS 입문] 텍스트 스타일 (0)	2017.04.04
[CSS 입문] 글꼴 관련 스타일 (2)	2017.04.03
[CSS 입문] 캐스캐이딩 스타일 시트(CSS) (0)	2017.03.31

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Dev Thread

CSS

[CSS 입문] 표 스타일 속성

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

[CSS 입문] 다단 관련 속성

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

[CSS 입문] CSS 포지셔닝의 주요 속성들

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

[CSS 입문] 여백을 조절하는 속성

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

[CSS 입문] 테두리 관련 속성

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

[CSS 입문] CSS와 박스 모델

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

[CSS 입문] 그러데이션 효과

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

[CSS 입문] 배경 색과 배경 이미지

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

[CSS 입문] 목록과 링크 스타일

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

[CSS 입문] 문단 스타일

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

+ Recent posts

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역