CSS5 [html,css] table(표) 배경색 넣기 / 줄바꿈처리 / 가로스크롤 1. 테이블 줄바꿈 처리 html 타이틀 타이틀 타이틀 내용이 많아도 영역 밖으로 흘러 넘치지 않습니다.내용이 많아도 영역 밖으로 흘러 넘치지 않습니다. 내용 내용 내용 내용 내용 내용 내용 내용 css .table01 { width:500px; margin:0 auto; table-layout:fixed; text-align:center; } .table01 thead tr {background:#444;} .table01 thead tr th { padding:5px 0; color:#fff;} .table01 tbody tr td { padding:5px 0; line-height:1.5;} .table01 tbody tr {border-bottom:1px solid #ddd} .table01 tb.. 2020. 2. 26. [html,css] table-cell, table-layout 속성으로 너비고정 하기!! 부모 : display:table; table-layout:fixed; (display:table에 width:100%을 함께 써줘야함) 자식 : display:table-cell; 부모 요소에 table-layout 속성값을 fixed로 지정하면 셀안에 데이터 값의 길이가 길어져도 셀 너비는 고정되며, 넘치는 데이터값은 줄바꿈처리 됩니다. 자식 요소에 display:table-cell을 주면 li의 개수만큼 동일한 너비의 셀이 생성됩니다. 1, html 타이틀 입력 내용을 입력해주세요. 타이틀 입력 내용을 입력해주세요. 타이틀 입력 내용이 길어져도 셀 너비는 고정됩니다. 내용이 길어져도 셀 너비는 고정됩니다. 2. CSS .list_wrap {min-width:1000px; max-width:1400p.. 2020. 2. 26. [html,css] 가로 스크롤 생기게 하기 *작업환경* 500x100 외부박스 안에 100x100박스 7개가 들어갔을 때, X스크롤 처리 스타일시트 .wrap {width:500px; height:120px; overflow-x:auto; white-space:nowrap; margin:0 auto} /*white-space: nowrap; 선언해줘야 내부 박스가 아래로 떨어지지 않고 가로로 나열됨*/ .wrap > ul { font-size:0} .wrap > ul > li {display:inline-block; font-size:20px; width:100px; height:100px; background:skyblue} .wrap > ul > li:nth-child(even) {background:pink} 2019. 12. 3. [html,css] 이미지에 마우스 hover하면 타이틀 올라가고 버튼 생기게하기! 제이쿼리 없이 이미지에 마우스 오버하면 타이틀이 올라가면서 버튼등장 See the Pen dypbjNE by 허금영 (@gephqhwv) on CodePen. 2019. 9. 14. 이전 1 2 다음 반응형
