키보드와 하루

1. 개념 border-style - 테두리 스타일 지정 border-style는 실선이나 점선,이중선 등으로 테두리의 스타일을 지정 속성 설명 none 테두리가 나타지 않음(기본값) dashed 짧은 선으로 표시 dotted 점선으로 표시 double 이중선(겹선)으로 표시 두 선 사이 간격 조절은 border-width로 groove 홈이 파인 듯 입체적으로 표시 inset 전체 박스 테두리가 창에 박힌 것처럼 표시 outset 전체 박스 테두리가 창에서 튀어나온 것처럼 표시 ridge 테두리를 창에서 튀어나온 것처럼 표시 solid 테두리를 실선으로 표시 2. 태그 border-style html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21..

1. 개념 display - 화면 배치 방법 결정 display는 블록 요소와 인라인 요소의 서로 속성으로 변경할 수 있음 블록 요소 : 해당하는 태그를 사용했을 때 혼자 한 줄을 차지하는 요소 너비,마진,패딩을 이용해서 크기나 위치를 지정하려면 이 요소를 사용해야 함 ,,,,,,,,, 인라인 요소 : 해당 태그를 사용할 때 줄을 차지않고 나머지 공간에 다른 태그가 올 수 있는 요소 ,, ,,,,,,, ※ 자주 사용되는 속성 속성 설명 block img,span 등과 같은 인라인 요소를 블록 요소로 지정 inline p,hr 등과 같은 블록 요소를 인라인 요소로 지정 inline-block inline으로만 너비,마진,패딩 등이 제대로 적용되지 않아 inline이면서도 블록 요소를 사용하는 것을 지정 n..

1. 개념 width,height - 박스 모델의 너비와 높이 width,height는 박스 모델에서의 너비와 높이를 지정하는 속성 속성 설명 크기 픽셀(px)이나 센티미터(cm) 같은 단위와 함께 숫자로 지정(고정너비) 백분율 박스 모델을 포함하는 부모 요소를 기준으로 지정(가변 너비) auto 너비와 높이가 콘텐츠 양에 따라 자동 결정(기본값) 2. 태그 width,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 DOCTYPE html> 1 2 결과 화면 코드 설명 1 width : 200px ; 첫번째 박스 모델에서의 너비는 200px를 주었습니다. 이는 고정 값으로 부모 요소의 너비에..

1. 개념 radial-gradient - 원형 그라데이션 radial-gradient는 원형 그라데이션을 주는 것으로 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상을 바꿔 나가는 것(최신 버전의 브라우저 적용) 속성 설명 모양 circle → 원형 , ellipse → 타원형 지정 없으면 ellipse로 인식 위치 그라데이션 시작 위치 (키워드 → left,right,center,bottom) , (백분율) 크기 closest-side , closest-coner farthest-side , farthest-corner 2. 태그 radial-gradient 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. 개념 linear-gradient - 선형 그라데이션 linear-gradient는 선형 그라데이션을 주는 것으로 수직이나 수평 또는 대각선으로 일정하게 변하는 것(최신 버전의 브라우저 적용) 속성 설명 to top 아래 → 위로 그라데이션 만듬 to left 오른쪽 → 왼쪽으로 그라데이션 만듬 to right 왼쪽 → 오른쪽으로 그라데이션 만듬 to bottom 위 → 아래로 그라데이션 만듬 위 속성 말고도 deg를 써서 각도로 방향을 지정해 줄 수도 있음 12시를 0도를 기준으로 시계방향으로 90 , 180 , 270 도로 설정해서 사용할 수 있음 2. 태그 linear-gradient html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2..

1. 개념 background - 하나의 속성으로 배경 이미지 설정 background는 배경 이미지에 관련된 여러 속성들을 하나로 줄여서 사용할 수 있는 속성 2. 태그 background 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 DOCTYPE html> 1 2 결과 화면 코드 설명 1 background : url(monitor.png) no-repeat left center padding-box ; background 배경 이미지에 사용되는 속성명이 없어도 해당하는 설정값을 알고 있으면 background로 사용이 가능합니다. 2 background : url(monitor.png) repeat-x r..

1. 개념 background-origin - 배경 이미지 배치 기준 조절 background-origin는 배경 이미지를 배치할 때 기준을 지정해 주는 속성 속성 설명 padding-box 박스 모델에서 테두리를 뺀 패딩이 기준(기본값) border-box 박스 모델의 가장 외곽인 테두리가 기준 content-box 박스 모델에서 내용 부분이 기준 2. 태그 background-origin 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 결과 화면 코드 설명 1 background-origin : padding-box ; div 테두리를 5px로 설정하고 테스트..

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