[CSS] Chapter 07. text, list, table의 속성

1. text의 정렬: text-align: 

text는 style에서 id, class, tag 로 정렬에 대한 모양지정이 가능하다.

해당 기능을 사용하면 웹 페이지를 기준으로 글자의 위치를 조정할 수 있으며, 창의 크기에 상관없이 지정한 위치로 글자 정렬이 진행된다. 

 

기본 형태: {text-align: center} (or center 이외에 좌, 우 등 지정 가능) 

 

2. 줄간격 조정: line-height: 

<br>을 이용하여 줄을 변경하면, 줄 사이의 간격이 좁고 일정하다.

해당  style은 지정한 tag, id, class의 줄바꿈 모양을 지정할 수 있다.

단위는 px, %, 0.0 등 다양하게 지정할 수 있다. 단위가 지정되지 않으면 * 배수로 처리된다.

해당 간격의 % 및 배수는 font의 크기에 비례하여 결정된다. 

 

기본 형태: {line-height:200%} (or %, px, 0.0 등 가능. .0 단위는 *(배수)로 적용

 

#normal{}
#pixel{line-height:12px;}
#percent{line-height:200%;}
#float{line-height:3.0;}

line-height를 해당 콘텐츠의 height와 동일하게 설정하면 중앙으로 자동 정렬된다. 

다만 이는 1줄일때 해당되면 2줄이 넘어가면 padding으로 조정해야 한다.

 

3. 글자의 그림자 효과: text-shadow:

text-shadow는 style에서 id, class, tag 로 그림자 모양에 대한 지정이 가능하다.

가로 및 세로 거리의 지정은 +~- 로 지정이 가능하며 글자를 기준으로 +값은 오른쪽, -값은 왼쪽으로 적용된다.

3개의 속성 ~ 4개의 속성으로 지정이 가능하며, 4개의 속성은 번짐 효과가 추가된 형태이다. 

 

기본 형태: {text-shadow: 1px 1px 1px black } (가로거리, 세로거리, 번짐 정도, 그림자 색상)

 

#shadow1{color:#ff0000;
                text-shadow: 2px 2px black}

#shadow2{color:hsl(220,50%,50%);
                text-shadow:5px 5px 3px hsl(120,30%,70%);}

 

4. list의 모양 변경  

html에서 목록 형성과 스타일 적용은 매우 중요하다.

대부분의 웹 사이트는 목록 태그를 사용하여 UI 디자인과 편의성을 형성하는데, 이는 해당 태그가 하위 태그에 동일 모양으로 영향을 미치기 때문이다. 

 

4.1. list-style-type

이름	설명	모양
none	지워 버림
disc	원	●
circle	속이 빈 원	○
square	사각형	■
decimal	1부터 시작하는 숫자	1, 2, 3
decimal-leading-zero	01부터 시작하는 숫자	01, 02, 03
lower-roman	로마자(소문자)	i, v, x
upper-roman	로마자(대문자)	I, V, X
lower-alpha	알파벳(소문자)	a, b, c
upper-alpha	알파벳(대문자)	A, B, C

 

4.2. list-style-image: url()

목록의 불렛 (목록의 기초 모양)에 지정한 이미지를 삽입하는 명령어이다.

url 이하로 이미지 파일을 지정하면 아이콘이 해당 이미지로 변경된다. 

 

4.3. list-style-position:

목록의 정렬 방식을 조정할 수 있다.

inside는 들여쓰기, outside는 기본 형태 모양을 취한다.

inherit는 상위 항목의 특성을 상속 받는 형태이다.

해당 포지션 지정으로 리스트의 위치와 모양을 조정할 수 있다. 

none;

list-style-position: inside;

 

4.4. list-style:

위의 다양한 스타일은 list-style로 한번에 지정할 수 있다.

모양 및 위치, 아이콘 이미지를 지정할 수 있으며 한번에 작성이 가능하여 편의성을 제공한다. 

 

5. table의 모양 변경 

table에서 설명을 달거나 혹은 줄의 모양을 지정할 때, style을 통해 지정할 수 있다.

<caption></caption>으로 제목 지정이 가능하다.

해당 제목은 caption-side: 를 통해 상단 혹은 하단에 위치 시킬 수 있으며, border 속성을 통해 세부적인 속성 설정이 가능하다.