키보드와 하루

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 ; 색상 이름으로도 글자 색을 지정할 수 있습..

1. 개념 font - 글꼴 속성을 한꺼번에 표현 font는 font-style,font-wiehgt,font-size/line-height,font-family 와 같은 속성들을 한꺼번에 간단하게표현할 수 있는 속성 또 특정 키워드를 이용해 그것과 어울리는 글꼴 스타일을 표시 속성 설명 caption 캡션에 어울리는 글꼴 스타일 icon 아이콘에 어울리는 글꼴 스타일 menu 드롭다운 메뉴에 어울리는 글꼴 스타일 message-box 대화상자에 어울리는 글꼴 스타일 small-caption 작은 캡션에 어울리는 글꼴 스타일 status-bar 상태 표시줄에 어울리는 글꼴 스타일 2. 태그 font html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20..

1. 개념 font-style - 글자 스타일 지정 font-style는 글자 스타일 지정하는 속성 속성 설명 normal 일반적인 형태 italic 이탤릭체로 표시(기울어진 글꼴이 처음부터 디자인) oblique 이탤릭체로 표시(원래 글꼴을 기울어지게 표시) 2. 태그 font-style 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 normal 스타일 2 italic 스타일 3 oblique 스타일 결과 화면 코드 설명 1 font-style : normal ; 기울임이 없는 일반적인 형태입니다. 보통 일반적인 글꼴에는 font-style 선언을 하지 않겠죠. 만약에 전체 기..

1. 개념 font-weight - 글자 굵기 지정 font-weight는 글자 굵기를 지정하는 속성 속성 설명 normal 일반적인 형태(기본값) lighter 일반 형태의 굵기보다 더 가늘게 bold 일반 형태보다 굵게 bolder 일반 형태보다 더 굵게 100~900 숫자 값을 통해 더 세밀하게 굵게 조절(400=normal , 700=bold) 2. 태그 font-weight 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 lighter 굵기의 텍스트 2 normal 굵기의 텍스트 3 bold 굵기의 텍스트 4 bolder 굵기의 ..