* 방법 1 height: 30px; line-height: 30px; /* same as height! */ 이 방법은 로 나눠진 2열 텍스트의 겨우 1열과 2열 사이 간격이 30px 가 되버리는 문제 있음 * 방법 2 https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div display: flex; justify-content: center; align-content: center; flex-direction: column; 이건 2열의 문제도 해결됨
* 개요 게시물 박스가 브라우져 줄이면 알아서 개행. 박스는 좌측정렬하여 순서대로 배열 그 전체 모양은 가운데 정렬 상자모양 (게시물 목록) div 5개 배치 (div31,32,33,34,35 라고 부름) 그 위에 div2 를 씌움 그 위에 div1 을 한번 더 씌움 div1과 div2 는 height : 0 상태로 생성됨. * div31~35 는 좌측으로 1열로 늘어서지만 float:left; 를 주면 위처럼 1 2 3 4 5 모양으로 배열됨. * div2에 display:inline-block; 을 붙이면 내용에 맞게 height 가 증가하고, div1 도 함께 증가함. (div1는 block인데?) * div1 에 text-align:center 를 주면 div31~35 가 가운데 정렬함. div2..
*개요 td를 비율로 고정했음에도 안의 텍스트 길이에 따라 크기가 바뀌는 현상 .. .. .td1 { width : 5% } .td2 { width : 10% } ... * 해결 table 에 다음 속성 적용 table-layout:fixed; - 텍스트가 td의 바깥으로 넘어간다면? display : inline-block; white-space : nowrap; overflow : hidden; /*inline에는 안먹힘.*/ (또는 text-overflow : ellipsis) * 기타 td 안에 span - 그 안에 텍스트 넣는다면? (table-layout:fixed 없다면) 텍스트가 늘어날 수록 td 크기도 함께 늘어남. span 의 크기를 50% 로 줄이거나 td 의 크기를 100px 식으로..
* 개요 div1 안에 div 2(안에 table 가짐) 있음. div 1 의 height=0 이라 div 2 보다 작음. - 참고 : div 1 안에 table 있는 경우 div 는 테이블보다 작아지지 않았음 * 해결 overflow: auto; https://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children * 해결 2 float : left 설정되어 있다면 지울것
https://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div https://ko.learnlayout.com/position.html 1. 부모요소 position : relative; 2. 자식요소 position : absolute; bottom : 0; 자식이 부모의 바닥에 있으니까 자식에게 relative 주는거? 는 틀림 relative 는 부모가 아니라 '이전 요소' 의 다음 부터 상대적 위치를 지정.
https://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children ;; 성공한 것 부모 요소에 display: table; 자식 요소에 display: table-row; ;; 실패 1 clear : both; ;; 실패 2 height : max-content; ;; 실패 3 display : inline-block;
;; 안 1 https://stackoverflow.com/questions/14767459/why-td-width-is-not-working-or-not-followed td 에 display : inline-block 적용 하면 셀이 table 을 맞추지 못하고 오히려 작아져 버림 (inline 이니까 table 과 따로 놀겠지.. ;; 안 2 position : relative 전혀 반응 없음. ;; 안 3 - 해결 table-layout : fixed 로 해결됨. 표가 100%이상 크기 => 100% 로 고정 되면서 셀 안의 글자가 삐져나가는 문제가 발생하는데, 이건 text-overflow: ellipsis; white-space: nowrap; 로 해결 https://stackoverflow...
사진에서 부터 시작되는 div 임에도 불구하고그 위의 div 를 덮고 있음. * 해결 1 : 중간에 clear=both 인 div 삽입 ( 실패 ) 안 먹힘. div.clear 도 저 위에 가있음. * 해결 2 : 앞에 있는 div 에 float 적용 div#overview2_0 의 앞에 있는 div 가 float 값이 지정되지 않았기 때문에 위치가 정해지지 않은것. float:inherit; 주자 해결됨 http://www.kiss7.kr/db/board.php?bo_table=siteblog&wr_id=25
* 개요 .. 상황임. * span.a 에는 그림이 들어가 있거나 글자가 들어갈 때도 있는데글자가 들어갔을때만 크기가 더 커지면서 tr 의 간격을 늘렸음. - 기본 속성 font-size: smaller; line-height: 95%; max-width: 70px; 형광색이 span.A 부분 '살인사건' 과 '뉴스' 의 tr 이 달라짐. - 넘어가는 글자를 자르기 위한 부분 overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: inline-block; - text-overflow: ellipsis; 는 일부러 안넣음 (말줄임표 때문에 글자가 너무 많이 잘려서 ) * 문제 : tr 의 크기는 왜 달라지는가? * 해결안 ..