키보드와 하루

1. 개념 background-image - 배경 이미지 삽입 background-image는 배경 이미지를 넣을 때 사용되는 속성으로 jpg , gif , png와 같이 웹에서 사용 가능한 파일어야 함 2. 태그 background-image html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 DOCTYPE html> 1 키보드와 하루 결과 화면 코드 설명 1 background-image : url(monitor.png) ; monitor라는 이미지를 배경 이미지로 사용하겠다고 했습니다. 현재 monitor.png의 사이즈는 100*89 사이즈로 div에서 지정한 200*200 보다는 작은 사이즈 입니다. 이러한 경우에는 특별한 ..

1. 개념 background-clip - 배경색 적용 범위 background-clip은 배경색을 적용 했을 때 박스 모델 관점에서 배경 적용 범위를 지정하는 속성 속성 설명 border-box 박스 모델의 가장 외곽인 테두리 까지 적용 padding-box 박스 모델에서 테두리를 뺀 패딩의 범위까지 적용 content-box 박스 모델에서 내용만 적용 2. 태그 background-clip 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 DOCTYPE html> 1 키보드와 하루 2 키보드와 하루 3 키보드와 하루 결과 화면 코드 설명 1 background-clip : border-..

1. 개념 background-color - 배경 색 지정 background-color는 요소에 배경색을 지정하는 속성 2. 태그 background-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 28 29 30 31 DOCTYPE html> 1 배경색1 2 배경색2 3 배경색3 4 배경색4 결과 화면 코드 설명 1 background-color : red ; 첫번째 예제는 색상 이름을 이용해 배경색을 표기하였습니다. red,yellow 처럼 알려진 색상 이름으로 표기가 가능합니다. 2 background-color : #FF0000 ; 두번째 예제는 16진수 표기법으로 배경색을 표기하였습니다...

1. 개념 list-style - 목록 속성 한꺼번에 지정 list-style는 list-style-type,list-style-position,list-style-image 속성을 한꺼번에 지정할 수 있는 속성 2. 태그 list-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 목록1 목록2 목록3 2 목록4 목록5 목록6 3 목록7 목록8 목록9 결과 화면 코드 설명 1 list-style : none ; list-style은 위에서 말한 3개의 속성의 값만을 입력해 주면 같은 효과를 나타냅니다. 1번에서처럼 none라고만 입력해주면 list-style-type에서 ..

1. 개념 list-style-position - 목록에서 들여쓰기 list-style-position는 목록 형태에서 블롯이나 번호를 좀 더 안쪽으로 들여 써지게 하는 속성 속성 설명 inside 블롯이나 숫자를 안쪽으로 들여씀 outside 블롯이나 숫자를 밖으로 내어씀 2. 태그 list-style-position html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 DOCTYPE html> 1 목록1 목록2 목록3 2 목록4 목록5 목록6 결과 화면 코드 설명 1 list-style-type : desc ; 처음 예제는 list-style-position 속성 값을 지정하지 않았습니다. 이렇게 아무런 값을 지정하게 않게 되면 기본 값으로 ..

1. 개념 list-style-image - 목록 스타일을 이미지로 넣기 list-style-image는 목록 형태에서 스타일을 불릿과 번호 대신 이미지로 지정할 수 있음 2. 태그 list-style-image html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 DOCTYPE html> 1 목록1 목록2 목록3 2 목록4 목록5 목록6 결과 화면 코드 설명 1 list-style-image : url(image1.png) ; 블롯이나 번호와 같은 스타일 대신 image를 사용하면 1번과 같이 나오게 됩니다. 2 list-style-type : url(image2.png) ; 두번째는 image2에 해당하는 이미를 가져다가 목록 앞에 놨습니다.

1. 개념 list-style-type - 목록 불릿과 번호 스타일 지정 list-style-type는 목록 형태에서 스타일을 지정할 수 있는 속성으로 불릿과 번호로 지정할 수 있음 속성 설명 disc 안이 채워진 원(●) circle 안이 비워진 원(○) square 안이 채워진 사각형(■) none 불릿 없애기 decimal 1로 시작하는 십진수(1,2,3....) decimal-leading-zero 앞에 0이 붙는 십진수(01,02,03....) lower-roman 소문자 로마 숫자(ⅰ,ⅱ,ⅲ....) upper-roman 대문자 로마 숫자(Ⅰ,Ⅱ,Ⅲ...) lower-alpha 소문자 알파벳(a,b,c....) upper-alpha 대문자 알파벳(A,B,C...) 2. 태그 list-style..

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..