키보드와 하루

1. 개념 text-overflow - 넘치는 텍스트 표기 text-overflow는 white-space를 이용해 줄 바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 것인지를 처리하는 속성 속성 설명 clip 넘치는 텍스트를 자름 ellipsis 말 줄임표로 잘린 텍스트가 있다고 표시 text-overflow 속성은 overflow 속성이 hidden,scroll,auto 이면서 white-space:nowrap 일 경우 일때만 적용됨 2. 태그 text-overflow html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 DOCTYPE html> 1 키보드와 하루 입니다.키보드와 하루 입니다.키..

1. 개념 line-height - 줄 간격 조절 line-height은 두 줄 이상일 경우에 생기는 줄 간격을 조절 하는 속성 속성 설명 크기 단위를 지정하여 줄 간격 크기를 지정 배수 글자 크기를 기준으로 배수만큼 곱해서 지정 2. 태그 line-height html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 DOCTYPE html> 1 키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다. 2 키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다. 3 키보드와 하루 입니다.키보드와 하루..

1. 개념 text-indent - 텍스트 들여쓰기 text-indent은 문단의 첫 글자를 들여쓰기 하는 것으로 얼마나 할지를 지정 속성 설명 크기 단위로 들여 쓸 크기를 지정(음수 사용 가능) 백분율 부모 요소의 너비를 기준으로 상대적 크기 지정 2. 태그 text-indent html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 DOCTYPE html> 1 키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다. 2 키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다.키보드와 하루 입니다. 결과 화면 코드 설명 1 text-indent..

1. 개념 text-align - 텍스트 정렬 text-align은 문단의 텍스트 정렬 방법을 지정 속성 설명 start 문단 텍스트 줄의 시작 위치에 맞춰 정렬 end 문단 텍스트 줄의 끝 위치에 맞춰 정렬 left 왼쪽에 맞춰 정렬 right 오른쪽에 맞춰 정렬 center 가운데에 맞춰 정렬 justify 양쪽에 맞춰 정렬 match-parent 부모 요소를 따라 정렬 2. 태그 text-align html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 DOCTYPE html> 1 키보드와 하루 입니다.키보드와 하루 입니다.키..

1. 개념 letter-spacing,word-spacing - 텍스트 간격 조절 letter-spacing은 글자 사이의 간격을 조절 word-spacing은 단어와 단어 사이의 간격을 조절 2. 태그 letter-spacing,word-spacing html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 DOCTYPE html> 1 키보드와 하루 입니다. 2 키보드와 하루 입니다. 3 키보드와 하루 입니다. 4 키보드와 하루 입니다. 5 키보드와 하루 입니다. 결과 화면 코드 설명 1 letter-spacing와 word-spacing 옵션이 들어간 경우를 비교하기 위해..

1. 개념 white-space - 공백 처리 white-space는 텍스트 안에 있는 공백을 어떻게 처리할 것인지에 대해 정해 주는 속성 속성 설명 normal 여러 개의 공백을 하나로 표시(기본값) nowrap 여러 개의 공백을 하나로 표시 영역 너비를 넘어가는 내용은 계속 한 줄로 표시 pre 여러 개의 공백을 그대로 표시 영역 너비를 넘어가는 내용은 계속 한 줄로 표시 pre-line 여러 개의 공백을 하나로 표시 영역이 넘어가는 내용은 줄 바꿔 표시 pre-wrap 여러 개의 공백을 그대로 표시 영역이 넘어가는 내용은 줄 바꿔 표시 2. 태그 white-space html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25..

1. 개념 text-shadow - 텍스트에 그림자 효과 text-shadow는 텍스트에 그림자 효과를 주는 속성 속성 설명 none 그림자 효과를 사용하지 않음 가로 거리 텍스트부터 그림자까지의 가로 거리 (양수 : 글자 오른쪽 , 음수 : 글자 왼쪽) 세로 거리 텍스트부터 그림자까지의 세로 거리 (양수 : 글자 아래쪽 , 음수 : 글자 위쪽) 번짐 정도 그림자가 번지는 정도 (양수 : 크게 표시 , 음수 : 축소되어 표시) 그림자 색상 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정(기본값:글자 색) 2. 태그 text-shadow html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ..

1. 개념 text-transform - 텍스트 대·소문자 변환 text-transform는 영문자를 표기할 때 텍스트의 대·소문자를 원하는대로 바꿔주는 속성 속성 설명 none 변환하지 않음 capitalize 시작하는 첫 글자를 대문자로 변환 uppercase 모든 글자를 대문자로 변환 lowercase 모든 글자를 소문자로 변환 full-width 가능한 모든 문자를 전각 문자로 변환 2. 태그 text-transform html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 DOCTYPE html> 1 keyboard 2 keyboard 3 KeyBoarD 결과 화면 코드 설명 1 text-transform ..

1. 개념 text-decoration - 텍스트에 줄 표시 text-decoration는 텍스트에 밑줄이나 취소선, 윗선을 그려주는 속성 속성 설명 none 줄을 표시하지 않음 underline 텍스트에 밑줄을 표시 overline 텍스트 위로 선을 표시 line-through 글씨 가운데로 선 표시 2. 태그 text-decoration html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 DOCTYPE html> 1 텍스트 아래로 선을 표시 2 텍스트 위로 선을 표시 3 글씨 가운데로 취소선을 의미하는 선 표시 결과 화면 코드 설명 1 text-decoration : underline ; underline 속..

1. 개념 color - 글자 색 지정 color는 글자 색을지정할 때 쓰는 속성 사용할 수 있는 속성은 16진수 , RGB , 색상 이름을 사용할 수 있음 2. 태그 color html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 DOCTYPE html> 1 rgb가 255,0,0인 color 2 red인 color 3 16진수가 #ff0000인 color 결과 화면 코드 설명 1 color : rgb(255,0,0) ; 똑같은 빨간색을 rgb로 표현해 보았습니다. 네이버에서 웹 색상표라고 검색을 하면 RGB , 16진수 등이 표시가 됩니다. 2 color : red ; 색상 이름으로도 글자 색을 지정할 수 있습..