키보드와 하루

1. 개념 column-width - 단 너비 고정 후 다단 생성 column-width 속성은 텍스트를 일반적인 형식으로 표시하는 것이 아니라 텍스트를 단으로 구성하여 여러개의 단을 생성하게 될 때 너비를 고정하여 단을 나누는 속성 2. 태그 column-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 키보드와 하루 1 첫번째 문장을 여러 번 반복합니다.첫번째 문장을 여러 번 반복합니다.첫번째 문장을 여러 번 반복합니다. 두번째 문장을 여러 번 반복합니다.두번째 문장을 여러 번 반복합니다.두번째 문장을 여러 번 반복합니다. 세번째 문장을 여러 번 반복합니다.세번째 문장을 여러 번 반복합니다...

1. 개념 z-index - 쌓는 순서 지정 z-index은 position으로 지정한 요소를 원하는 위치로 이동시키고 이동하였을 때 주변에 있는 다른 요소와 겹칠 경우에 원하는 요소를 위로 쌓거나 아래로 쌓기 위해 순번을 지정해는 속성 숫자가 높을수록 해당하는 요소를 위로 쌓고 작을수록 아래쪽으로 쌓음 2. 태그 z-index 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 3 결과 화면 코드 설명 1 z-index : 3 z-index를 적용한 예와 그렇지 않는 예를 비교하면서 보면 이해가 더 잘 될 것입니다. 만약에 z-index를 사용하지 않게 되면 모든 요소는 1로 기본값이..

1. 개념 visibility - 보이거나 숨기기 visibility은 지정한 요소를 보이거나 숨길 수 있도록 해주는 속성 속성 설명 visible 화면에 표시(기본값) hidden 화면에서 숨김(단 크기는 그대로 유지됨으로써 배치에 영향) collapse 표의 행,열,행그룹,열그룹에서 지정시 서로 겹치도록 조절 2. 태그 visibility 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. 개념 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로 지정..