표(Table) 테스트
-
- 2024.06.26 - 09:42 2024.06.25 - 13:52 720 7
원래 표
| Factorial | ~69! | 70!~449! | 500!~1006! | 1007!~3248! | 3249!~ |
|---|---|---|---|---|---|
| EL-509W | O | X(Error 2) | X | X | X |
| fx-570ES, EX | O | X(Math Error) | X | X | X |
| fx-9860G | O | X(Ma Error) | X | X | X |
| TI-nspire, 89T | O | O | X(500!) | X | X |
| HP Prime | O | O | O | X(∞) | |
| 윈도우10 내장 | O | O | O | O | X(Overflow) |
chatgpt-4o 가 고쳐준 코드
| Factorial | ~69! | 70!~449! | 500!~1006! | 1007!~3248! | 3249!~ |
|---|---|---|---|---|---|
| EL-509W | O | X(Error 2) | X | X | X |
| fx-570ES, EX | O | X(Math Error) | X | X | X |
| fx-9860G | O | X(Ma Error) | X | X | X |
| TI-nspire, 89T | O | O | X(500!) | X | X |
| HP Prime | O | O | O | X(∞) | |
| 윈도우10 내장 | O | O | O | O | X(Overflow) |
-
25
댓글7
-
세상의모든계산기
현재 표기능에 문제가 있습니다. css 충돌? 호환? 문제인 듯 한데...
해결이 되겠죠?
원래 Table tag <table border="1" cellpadding="1" cellspacing="1" style="width: 600px;"> <thead> <tr> <th scope="row">Factorial</th> <th scope="col">~69!</th> <th scope="col">70!~449!</th> <th scope="col">500!~1006!</th> <th scope="col">1007!~3248!</th> <th scope="col">3249!~</th> </tr> </thead> <tbody> <tr> <th scope="row">EL-509W</th> <td style="text-align: center;">O</td> <td style="text-align: center;">X(Error 2)</td> <td style="text-align: center;">X</td> <td style="text-align: center;">X</td> <td style="text-align: center;">X</td> </tr> <tr> <th scope="row">fx-570ES, EX</th> <td style="text-align: center;">O</td> <td style="text-align: center;">X(Math Error)</td> <td style="text-align: center;">X</td> <td style="text-align: center;">X</td> <td style="text-align: center;">X</td> </tr> <tr> <th scope="row">fx-9860G</th> <td style="text-align: center;">O</td> <td style="text-align: center;">X(Ma Error)</td> <td style="text-align: center;">X</td> <td style="text-align: center;">X</td> <td style="text-align: center;">X</td> </tr> <tr> <th scope="row">TI-nspire, 89T</th> <td style="text-align: center;">O</td> <td style="text-align: center;">O</td> <td style="text-align: center;">X(500!)</td> <td style="text-align: center;">X</td> <td style="text-align: center;">X</td> </tr> <tr> <th scope="row">HP Prime</th> <td style="text-align: center;">O</td> <td style="text-align: center;">O</td> <td style="text-align: center;">O</td> <td style="text-align: center;">X(∞)</td> <td style="text-align: center;"> </td> </tr> <tr> <th scope="row">윈도우10 내장</th> <td style="text-align: center;">O</td> <td style="text-align: center;">O</td> <td style="text-align: center;">O</td> <td style="text-align: center;">O</td> <td style="text-align: center;">X(Overflow)</td> </tr> </tbody> </table> chatgpt-4o 가 고쳐준 Table Tag <table border="1" cellpadding="1" cellspacing="1" style="width: 600px;"> <thead> <tr> <th style="display: table-cell; width: 100px;">Factorial</th> <th style="display: table-cell; width: 100px;">~69!</th> <th style="display: table-cell; width: 100px;">70!~449!</th> <th style="display: table-cell; width: 100px;">500!~1006!</th> <th style="display: table-cell; width: 100px;">1007!~3248!</th> <th style="display: table-cell; width: 100px;">3249!~</th> </tr> </thead> <tbody> <tr> <th style="display: table-cell; width: 100px;">EL-509W</th> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">X(Error 2)</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> </tr> <tr> <th style="display: table-cell; width: 100px;">fx-570ES, EX</th> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">X(Math Error)</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> </tr> <tr> <th style="display: table-cell; width: 100px;">fx-9860G</th> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">X(Ma Error)</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> </tr> <tr> <th style="display: table-cell; width: 100px;">TI-nspire, 89T</th> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">X(500!)</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> <td style="display: table-cell; text-align: center; width: 100px;">X</td> </tr> <tr> <th style="display: table-cell; width: 100px;">HP Prime</th> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">X(∞)</td> <td style="display: table-cell; text-align: center; width: 100px;"> </td> </tr> <tr> <th style="display: table-cell; width: 100px;">윈도우10 내장</th> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">O</td> <td style="display: table-cell; text-align: center; width: 100px;">X(Overflow)</td> </tr> </tbody> </table> -
-
세상의모든계산기
이렇게 찾아가는 거군요.
앗! 저기 체크박스 해제하니까 바로 적용되네요. 굿.
저게 문제 원인이 맞았습니다.
게시판 사이즈에 맞게
테이블 폭을 자동 조절해 주는 기능? 같은데
일단 소스 수정해서 꺼 보겠습니다.
-
세상의모든계산기2024.06.25 - 14:14 #42604
해당 파일 950번 line 에 display: flex; 를 뭘로 바꿔야 하나?
만약 \<td> 셀에 적용된 "display: flex;"를 다른 방식으로 바꾸어야 한다면, 테이블 셀의 기본 레이아웃을 유지하면서 원하는 스타일링을 적용할 수 있는 방법이 필요합니다. \<td>는 기본적으로 테이블 셀을 나타내는 태그이며, 테이블의 행과 열 구조를 유지해야 합니다.
대안으로 다음과 같은 방법들이 있을 수 있습니다:
1. **inline-block 사용**: 테이블 셀에 "display: inline-block;" 속성을 적용하여 요소를 인라인 블록 요소로 설정할 수 있습니다. 이는 테이블 셀이 가로로 배치되도록 하면서, 다른 요소와도 좀 더 적절하게 조화를 이룰 수 있습니다.
```css
.od-bord table td {
display: inline-block;
align-items: center; /* 필요한 경우 */
line-height: 1.4; /* 필요한 경우 */
padding-top: 5px; /* 필요한 경우 */
padding-bottom: 5px; /* 필요한 경우 */
}
```2. **block 사용**: 테이블 셀을 "display: block;"으로 설정하여 블록 요소로 만들 수도 있습니다. 이 경우에는 테이블의 기본 구조를 유지하면서 셀 내부의 내용을 좀 더 자유롭게 배치할 수 있습니다.
```css
.od-bord table td {
display: block;
align-items: center; /* 필요한 경우 */
line-height: 1.4; /* 필요한 경우 */
padding-top: 5px; /* 필요한 경우 */
padding-bottom: 5px; /* 필요한 경우 */
}
```3. **float 사용**: "float: left;" 또는 "float: right;"를 사용하여 테이블 셀을 부유(floating) 상태로 만들어 가로 배치를 조정할 수도 있습니다. 이 방법은 일반적으로 레이아웃을 구성할 때 사용되는 방식입니다.
```css
.od-bord table td {
float: left; /* 또는 float: right; */
align-items: center; /* 필요한 경우 */
line-height: 1.4; /* 필요한 경우 */
padding-top: 5px; /* 필요한 경우 */
padding-bottom: 5px; /* 필요한 경우 */
}
```이러한 방법들 중에서 상황에 맞는 적절한 스타일을 선택하여 \<td> 셀에 적용하면, 테이블 셀이 기대하는 방식대로 배치될 수 있습니다. 선택한 스타일은 다른 요소들과의 조화를 유지하면서도 원하는 디자인을 구현할 수 있도록 도와줄 것입니다.
-
세상의모든계산기
table td
1. Inline-block 적용
2. block 적용
3. display: 적용 안함
display: float; 인줄 알고 적용했는데, float: left; 이런 식으로 쓰는거네요.
모바일쪽이 좀 깨지지만, 일단 이걸로...
-
세상의모든계산기
https://github.com/OrangeDayCom/rhymix-layout/issues/3#issuecomment-2190435618
임시로 수정하시려고 한다면
/modules/board/skins/OrangeDay_board/css/default.css 에서
라인 950
.od-bord table td { display: flex; align-items: center; line-height:1.4; padding-top:5px; padding-bottom:5px }
을
.od-bord .write_header table td { display: flex; align-items: center; line-height:1.4; padding-top:5px; padding-bottom:5px }
로 수정하면 됩니다. -
세상의모든계산기
CKeditor Table 만들기
1 2 3 4 5 6 7 8 9 10 11 12 <table border="1" cellpadding="1" cellspacing="1" style="width:500px;"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> </table>
세상의모든계산기 님의 최근 댓글
1. 왜 검은색이 아닌 다른 색으로 보일까? (제공된 LUT 필터) 제가 제공해 드린 magenta_lens.cube LUT 필터는 540~560nm(녹색-노란색) 파장대의 색상을 '완전히 제거(검은색으로 만듦)'하는 대신, '다른 색상으로 왜곡/변환'하도록 설계되었습니다. * 원리: LUT(Look-Up Table)는 특정 입력 색상(Input RGB)을 미리 정해진 다른 출력 색상(Output RGB)으로 매핑하는 테이블입니다. 이 LUT는 540~560nm에 해당하는 RGB 값들이 들어오면, 검은색(0, 0, 0)이 아닌, 매우 어둡거나 채도가 낮은 특정 색(예: 어두운 올리브색, 갈색 등)으로 변환하라고 지시합니다. * 의도: * 현실적인 물리 필터 시뮬레이션: 실제 고가의 색약 보정 안경도 특정 파장을 100% 완벽하게 차단하지는 못합니다. 빛의 일부를 흡수하고 일부는 통과시키거나 변환하는데, 이 LUT는 그러한 현실 세계의 필터 효과를 더 비슷하게 흉내 냈을 수 있습니다. * 시각적 정보 유지: 특정 색을 완전히 검게 만들면 그 부분의 형태나 질감 정보가 완전히 사라집니다. 하지만 다른 어두운 색으로 대체하면, 색상 정보는 왜곡되더라도 밝기나 형태 정보는 어느 정도 유지되어 전체적인 이미지가 덜 어색하게 보일 수 있습니다. 결론적으로, 스펙트럼 그림에서 해당 대역의 색이 갑자기 '다른 색으로 툭 바뀌는' 현상은, LUT 필터가 "이 파장대의 색은 앞으로 이 색으로 표시해!"라고 강제적으로 지시한 결과이며, 이것이 바로 이 필터가 작동하는 방식 그 자체입니다. 2. 왜 'Color Vision Helper' 앱은 검은색으로 보일까? 비교하신 'Color Vision Helper' 앱은 노치 필터의 원리를 더 이상적(Ideal)이고 교과서적으로 구현했을 가능성이 높습니다. * 원리: "L-콘과 M-콘의 신호가 겹치는 540~560nm 파장의 빛은 '완전히 차단'되어야 한다"는 개념에 매우 충실한 방식입니다. * 구현: 따라서 해당 파장에 해당하는 색상 정보가 들어오면, 어떠한 타협도 없이 그냥 '검은색(RGB 0, 0, 0)'으로 처리해 버립니다. 이는 "이 파장의 빛은 존재하지 않는 것으로 처리하겠다"는 가장 강력하고 직접적인 표현입니다. 2025 11.06 적용사례 4 - 파장 스펙트럼 https://news.samsungdisplay.com/26683 ㄴ (좌) 연속되는 그라데이션 ➡️ (우) 540 이하 | 구분되는 층(색) | 560 이상 - 겹치는 부분, 즉 540~560 nm 에서 색상이 차단? 변형? 된 것을 확인할 수 있음. 그럼 폰에서 Color Vision Helper 앱으로 보면? ㄴ 540~560 nm 대역이 검은 띠로 표시됨. 완전 차단됨을 의미 2025 11.05 빨간 셀로판지로도 이시하라 테스트 같은 숫자 구분에서는 유사한 효과를 낼 수 있다고 합니다. 색상이 다양하다면 빨강이나, 노랑, 주황 등도 테스트해보면 재밌겠네요. 2025 11.05 안드로이드 앱 - "Color Vision Helper" 다운받아 본문 내용을 카메라로 찍어 보니, 본문 프로그램에서는 애매하게 보이던 부분에서도 구분이 완전 확실하게 되네요. 숫자 구분 능력 & 편의성 면에서 압도적이라고 할 수 있겠습니다. 2025 11.05 적용 사례 3 - 색상표 https://namu.wiki/w/%ED%97%A5%EC%8A%A4%20%EC%BD%94%EB%93%9C 적녹 색약 기준에서 필터 후 색깔을 느낌으로 표현하면 녹색 계열이 좀 차분? 묵직? 해지는 느낌 적색 계열이 전반적으로 조화를 이루지 못하고 튀는? 느낌 노랑이가 사라지는 느낌. * 적색 계열에서 글씨가 살짝 안보이는 것은 계조 문제(프로그램 문제)일 수 있겠다는 생각 2025 11.04