키보드와 하루

1. 개념 background-position - 배경 이미지 위치 조절 background-position는 수평 위치 값과 수직 위치 값을 표시해 이미지의 위치를 지정할 수 있음 하나의 이미지를 가지고 해야 하기에 background-repeat는 no-repeat으로 반복이 없게 함 속성 설명 수평 위치 left / center / right / 백분율 값 / 길이 값 수평 위치 top / center / bottom / 백분율 값/ 길이 값 2. 태그 background-position 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 2 3 4 결과 화면 코드 설..

1. 개념 background-size - 배경 이미지 크기 조절 background-size는 배경 이미지를 여러 크기로 조절 할 수 있음 속성 설명 auto 원래 배경 이미지 크기만큼 표시(기본 값) contain 지정한 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 cover 지정한 요소를 다 덮도록 배경이미지를 확대/축소 크기 값 너비 값과 높이 값을 지정 백분율 지정한 요소를 기준으로 백분율 값을 지정 2. 태그 background-size 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 4 5 결과 화면 코드 설명 1 backgroun..

1. 개념 background-repeat - 배경 이미지 반복 방법 background-repeat는 넣으려는 배경 이미지가 요소보다 작을 때 반복처리를 어떻게 해야 할지에 대해 지정 해주는 속성 속성 설명 repeat 채울 때 까지 가로,세로 반복(기본값) repeat-x 채울 때 까지 가로만 반복 repeat-y 채울 때 까지 세로만 반복 no-repeat 이미지를 한번만 표시하고 반복 없음 2. 태그 background-repeat 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 4 결과 화면 코드 설명 1 background-repeat : repeat ; back..

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