키보드와 하루

1. 개념 인접 형제 선택자(+) - 제일 가까운 요소에 스타일 적용 하나의 부모 요소 아래에 같은 레벨을 형성하는 태그가 있을 경우에는 형제 관계가 성립이 됨 처음에 나오는 요소는 형 , 나중에 나오는 요소는 동생의 관계를 맺게 되는데 + 기호를 사용해서 동생 요소 중 맨 처음으로 오는 요소에만 스타일을 적용할 수 있음 2. 태그 인접 형제 선택자(+) html5 코드 1234567891011121314151617181920212223 키보드와 하루 1 h1 + div { color : blue ; font-weight : bold ; } 키보드와 하루 첫번째 div 속성 두번째 div 속성 세번째 div 속성 결과 화면 코드 설명 1 h1 + div test1이라는 id를 가진 section 아래에 ..

1. 개념 하위 선택자와 자식 선택자 하위 선택자는 스타일을 적용하고자 할 때 부모에게 포함된 모든 요소에 스타일을 적용하는 것이고 자식 선택자는 부모에게 포함된 모든 요소에게 적용되는 것이 아니라 자식요소에만 스타일이 적용됨 2. 태그 하위 선택자와 자식 선택자 html5 코드 123456789101112131415161718192021222324252627282930313233 키보드와 하루 1 #test1 div { border : 1px solid #000 ; } 2 #test2 > div { border : 1px solid #000 ; } 키보드와 하루 div 태그에 있는 키보드와 하루 키보드와 하루 div 태그에 있는 키보드와 하루 결과 화면 코드 설명 1 #test1 div 두개의 div를..

1. 개념 vertical-align - 셀 안에서 수직 정렬 vertical-align 표에서 내용을 입력했을 때 width가 지정된 상태에서 콘텐츠 내용이 길어질 때 셀 안에 있는 내용에 따라 너비를 변하게 할지 , 고정시킬 것인지를 정해주는 속성 속성 설명 baseline 셀의 기준선에 내용에 해당하는 기준선을 맞춤 top 셀의 위쪽 가장자리에 내용 윗부분을 맞춤 middle 셀의 중앙에 내용을 맞춤 bottom 셀의 아래쪽 가장자리에 내용 아랫부분을 맞춤 2. 태그 vertical-align html5 코드 12345678910111213141516171819202122232425262728293031323334353637 키보드와 하루 td { border : 1px solid #000 ; wi..

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