키보드와 하루

1. 개념 table-layout - 콘텐츠 내용에 따라 셀 너비 지정여부 table-layout는 표에서 내용을 입력했을 때 width가 지정된 상태에서 콘텐츠 내용이 길어질 때 셀 안에 있는 내용에 따라 너비를 변하게 할지 , 고정시킬 것인지를 정해주는 속성 속성 설명 fixed 셀 너비를 고정(셀 내용에 따라 너비 달라지지 않음) auto 셀 내용에 따라 너비 달라짐(기본값) 2. 태그 table-layout html5 코드 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 5152535455565758 키보드와 하루 td { border : 1px solid #000 ; width :..

1. 개념 empty-cells - 빈 셀의 표시 여부 empty-cells는 테이블 내에서 값이 없는 셀들을 표시할지 안할지를 지정해주는 속성 속성 설명 show 빈 셀에 테두리를 그려 표시(기본값) hide 빈 셀에 테두리를 그리지 않고 비움 2. 태그 empty-cells html5 코드 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 5152535455565758596061626364656667 키보드와 하루 td { border : 1px solid #000 ; } 2 #table2 td { empty-cells : hide ; } 1 이름 값1 값2 값3 테스트 이름1 첫번째 값..

1. 개념 border-collapse - 테두리 통합 , 분리 border-collapse 속성은 표에서 바깥쪽 테두리와 안쪽 테두리를 그렸을 때 이 두 개의 테두리를 합쳐서 표시할지 분리해서 표시할지를 정해주는 속성 속성 설명 separate 테두리를 따로 표시(기본값) collapse 테두리를 하나로 합쳐서 표시 2. 태그 border-collapse 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 32 33 34 35 36 37 38 키보드와 하루 1 테스트 이름1 첫번째 값 두번째 값 테스트 이름2 세번째 값 네번째 값 2 테스트 이름1 첫번째 값 두번째 값 테스트 이름2 세번째..

1. 개념 border - 표에서 테두리 그리기 table 태그에서 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 30 31 32 33 34 35 36 37 38 39 40 키보드와 하루 1 테스트1 값1 값2 테스트2 값3 값4 2 테스트1 값1 값2 테스트2 값3 값4 3 테스트1 값1 값2 테스트2 값3 값4 결과 화면 코드 설명 1 border = "1" table에서 표를 생성할 때 테두리를 그리는 방법은 bo..

1. 개념 caption-side - 표에서 제목 위치 선정 table 속성으로 표를 만들고 제목을 정해 줄 때 제목의 위치를 정하고자 할 경우에 caption 태그 안에 caption-side 속성을 사용함 속성 설명 top 표의 윗부분에 표시(기본값) bottom 표의 아래부분에 표시 2. 태그 caption-side 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 키보드와 하루 1 제목(위 표시) 2 제목(아래 표시) 테스트1 값1 값2 테스트2 값3 값4 결과 화면 코드 설명 1 ........ caption에서 style을 지정하여 caption-side의 값을 bottom으로 설정하였습니다. 이렇게 지정..

1. 개념 column-rule - 구분선의 색상,스타일,너비 지정 column-rule 속성은 일반 텍스트를 단으로 구성하고자 할 경우에 단과 단 사이에 구분선을 지정해 주는 속성 column-rule : 2. 태그 column-rule html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 키보드와 하루 1 길게 작성하는 문서의 내용을 여러 번 반복해서 입력합니다. 길게 작성하는 문서의 내용을 여러 번 반복해서 입력합니다. 길게 작성하는 문서의 내용을 여러 번 반복해서 입력합니다. 길게 작성하는 문서의 내용을 여러 번 반복해서 입력합니다. 길게 작성하는 문서의 내용을 여러 번 반복해서 입력합니다. 길게 작성하는 문서의 내용을 여러 번 반복해서 입력합니다...

1. 개념 column-count - 단 개수 고정 column-count 속성은 텍스트를 단으로 구성하고자 할 경우에 단의 개수를 고정하는 것으로 단의 너비는 브라우저 창의 너비에 따라 달라짐 2. 태그 column-count html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 키보드와 하루 1 4개를 분리하는 다단 구성에서 문장입니다.길게 작성하여서 4개의 단으로 구성하고자 할 경우에 이렇게 사용합니다.4개를 분리하는 다단 구성에서 문장입니다.길게 작성하여서 4개의 단으로 구성하고자 할 경우에 이렇게 사용합니다.4개를 분리하는 다단 구성에서 문장입니다.길게 작성하여서 4개의 단으로 구성하고자 할 경우에 이렇게 사용합니다. 결과 화면 코드 설명 1 colum..

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