키보드와 하루

1. 개념 border - 테두리 스타일 묶어 지정 border는 테두리에 대한 두께 , 색상 , 스타일을 한번에 지정할 수 있는 속성 두께 , 색상 , 스타일 순서는 상관이 없음 2. 태그 border 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 5 결과 화면 코드 설명 1 border-top-color : red ; border-top-color는 테두리 위에 있는 색상을 지정합니다.. 2 border-bottom-color : red ; border-bottom-color는 테두리 아래에 있는 색상을 지정합니다. 3 border-left-color :..

1. 개념 border-color - 테두리 색상 지정 border-color는 테두리 색상을 지정하는 속성 border-top-color, border-right-color, border-left-color,border-bottom-color 등과 같이 각각으로 색상을 지정할 수 있음 또한 border-color로 전체 테두리 색상을 한번에 지정할 수도 있음 2. 태그 border-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 DOCTYPE html> 1 2 3 4 5 결과 화면 코드 설명 1 border-top-color : red ; border-top-color는 테두리 위..

1. 개념 border-width - 테두리 두께 지정 border-width는 테두리 두께를 지정하는 속성 border-top-width, border-right-width, border-left-width,border-bottom-width 등과 같이 각각으로 두께를 지정할 수 있음 아니면 border-width로 시계방향으로 위 → 오른쪽 → 아래 → 왼쪽으로 두께를 지정할 수도 있음 2. 태그 border-width 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 border-top-width : 3px ; border..

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로 설정하고 테스트..