HTML9 [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. [html, css] 마우스 오버 시 이미지 확대 마우스 올리면 이미지 확대 되고 떼면 원래 이미지 상태로 돌아오는 효과 간단하게 하는 방법 알려드립니다. See the Pen gOwYVGX by 허금영 (@gephqhwv) on CodePen. 2019. 9. 10. 이전 1 2 3 다음 반응형
