키보드와 하루

1. 개념 position - 배치 방법 지정 position 속성은 지정한 요소들을 원하는 위치에 배치할 수 있도록 해주는 속성 이 속성을 이용하게 되면 자신이 원하는 텍스트나 이미지 등을 원하는 위치에 배치하도록 함 속성 설명 static 문서의 흐름에 맞추어 배치(기본값) relative 다른 요소와 함께 자연스럽게 연결해 배치하지만 위치는 지정할 수 있음 absolute 부모 요소를 기준으로 원하는 위치에 요소를 배치 fixed 자신이 원하는 위치에 고정적으로 배치 2. 태그 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 DOCTYPE html> 1 2 3 4 결과 화면 코드 설..

1. 개념 float - 왼쪽,오른쪽 배치 float는 해당하는 요소를 왼쪽이나 오른쪽 구석에 배치하게 됨 이 속성을 사용하게 될 때 float을 사용한 요소가 왼쪽이나 오른쪽으로 오게 되면 주변 다른 요소가 감싸게 됨 속성 설명 left 요소를 왼쪽으로 배치 right 요소를 오른쪽으로 배치 none 어느 쪽으로도 배치하지 않음 2. 태그 float 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 div ..... /div float에 대한 설명을 위해 처음 div에는 float이 없는 것을..

1. 개념 box-sizing - 박스 너비 기준 css에서는 width 속성을 통해 너비를 나타내고 height를 통해 높이를 나타내고 있지만이는 콘텐츠의 너비와 높이를 나타냄 그래서 콘텐츠 영역만 너비와 높이로 지정할 것인지 패딩이나 테두리 크기 등 까지도 합쳐서 너비와 높이로 나타낼지에 대한 속성을 지정할 수 있음 속성 설명 content-box 콘텐츠 영역 너비 값으로 사용(기본값) border-box 콘텐츠 영역에 테두리까지 포함한 전체 박스 모델 너비 값을 포함 2. 태그 box-sizing 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 키보드와 하루 2 키보드와 하루 결과 화면 코드 설명..

1. 개념 padding - 내용과 테두리 사이의 여백 설정 padding는 요소 안에 있는 내용과 테두리 사이의 여백을 설정하는 것 즉 테두리 안쪽의 여백이라고 생각하면 됨 padding-top , padding-right , padding-left , padding-bottom 등이 있고 padding을 통해 한번에 설정도 가능 2. 태그 padding 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 DOCTYPE html> 1 2 3 4 결과 화면 코드 설명 1 padding-top: : 30px ; padding은 margrin과는 다르게 요소 안에 있는 내용과 테두시 사이의 간격을 조절하는 속성입니다. padding..

1. 개념 margin - 주변 여백 설정 margin는 설정한 요소 주변에 있는 요소 사이의 간격을 조절하고자 할 경우에 사용 margin-top , margin-bottom , margin-left , margin-right 등이 있음 2. 태그 margin 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 5 결과 화면 코드 설명 1 margin-top: : 30px ; margin-top은 위에서 간격 조절을 하는 속성입니다. 여기서 30px로 위에서의 간격을 주고 있습니다. 2

1. 개념 border-shadow - 그림자 효과 내기 border-shadow는 원하는 요소에 그림자 효과를 내고자 할 경우에 사용 속성 설명 수평 거리 양수 값은 오른쪽으로 , 음수 값은 왼쪽으로 그림자를 만듬(필수) 수직 거리 양수 값은 아래쪽으로 , 음수 값은 위쪽으로 그림자를 만듬(필수) 흐림 정도 값이 커질수록 부드러운 그림자를 표시(음수 값은 없음) 번짐 정도 양수 값은 그림자를 모든 방향으로 퍼지게 크게 표시 음수 값은 그림자를 모든 방향으로 축소되어 표시(기본값 0) 색상 그림자의 색상 지정(기본값 현재 글자 색 - 없을시 검정색) inset 안쪽으로 그림자를 그림(옵션 값) 2. 태그 border-shadow html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ..

1. 개념 border-radius - 모서리 둥글게 만드는 속성 border-radius는 박스 형태의 테두리 가상을 둥글게 만들 수 있는 속성 2. 태그 border-radius 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-left-radius : 20px ; border-top-left-radius는 테두리 위에 있는 왼쪽 모서리를 20px로 둥글게 해주는 속성입니다. 2 border-top-left-radius : 20px 50px ; border-top-left-radius를 20px 50px로 지정..

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