1. text-align
|
종류
|
설명
|
|
start
|
현재 텍스트의 줄의 시작위치에 맞추어 문단을 정렬
|
|
end
|
현재 텍스트의 줄의 끝 위치에 맞추어 문단 정렬
|
|
left
|
왼쪽 정렬
|
|
right
|
오른쪽 정렬
|
|
center
|
중앙 정렬
|
|
justify
|
양쪽에 맞추어 문단정렬
|
|
match-parent
|
부모 요소에 맞추어 문단정렬
|
2. [css] text-shadow 등 설정...
text-shadow: <가로 거리> <세로 거리> <번짐 정도> <색상>
ex)
h1 {
text-shaodw: 1px 1px 3px #ffa500;
}
text-transform: 영문자를 표기할때 대소문자를 원하는대로 바꾸는 것(한글 x)
속성들!!!!
none = 줄을 표시
capitalize = 첫번째 글자만 대문자
uppercase = 모든 글자를 대문자로
lowercase = 모든 글자를 소문자로
full-width = 모든 문자를 전각문자로
-----------------------------------------------------
letter-spacing : 글자 간의 간격 조절
list-style-type : 불릿 모양이나 번호스타일 지정
의 속성값
|
disc
|
채운 원 모양
|
|
circle
|
빈 원 모양
|
|
square
|
채운 사각형 모양
|
|
decimal
|
1부터 시작하는 10진수
|
|
decimal-leading-zero
|
앞에 0이 붙는 10진수
|
|
lower-roman
|
로마 숫자 소문자
|
|
upper-roman
|
로마 숫자 대문자
|
|
lower-alpha
|
알파벳 소문자
|
|
upper-alpha
|
알파벳 대문자
|
|
none
|
불릿이나 숫자를 없앰
|
list-style-image: url(); 불릿대신 이미지를 사용
list-style-position : 목록 들여쓰기 설정
값 : inside = 들여쓰기 함,,,, outside = 기본값(들여쓰기안함)
------------------------------------------------------------------------------
여기서 list-style 속성을 사용하면 지금까지의 속성을 한번에 모아서 쓸수 있음.
ol {
list-style-type: lower-alpha;
list-style-position: inside;
}
이 코드를
ol{
list-style: lower-alpha inside;
}
이렇게 바꿀수 있다잉!!!!
3. [css] position 속성값 목록 등...
|
종류
|
설명
|
|
static
|
문서의 흐름에 맞춰 배치, 기본값임
|
|
relative
|
위칫값을 지정할 수 있다는 점을 제외하면 static과 같습니다. (left, right 속성을 이용해 위치값 지정 가능).
여기서는 만일 left: 100px 을 사용했다면 relative 속성값을 가진 객체가 원래 있어야 할 자리에서 왼쪽으로 100px 떨어진 곳에 위치하게 되는 것입니다. |
|
absolute
|
relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치합니다.
|
|
fixed
|
브라우저 창을 기준으로 위치를 배치
(여기서는 스크롤을 해도 계속 그자리에 남아있습니다) |
※ absolute 속성을 사용할 때 주의할 점
absolute 속성 값을 사용해 position을 정하였다면 부모요소 중에 relative 속성 값을 사용한 요소를 기준으로
위치를 결정하게 됩니다. 만약 부모 요소 중에 없으면 상위 요소를 찾아보고 , 그래도 없다면 더 위의 요소를 찾아보게 됩니다.