반응형
반응형
html, css
- word-break: normal, break-all, keep-all 2024.06.21
- css variable - color에 사용하면 좋음: var(--LG-Red) 2024.06.21
- 두번째 input부터만적용 input + input { margin-top: 10px; } 2024.06.20
- table <td rowspan="2"> 2row를, <td colspan="2"> 2column을 차지한다는 얘기 2024.06.18
- .popupModal [class="image"] exact css class match 2024.06.18
- style={{width: undefined}} 이면 css 반영안됨 2024.06.18
- .required:after { content:" *"; color: red; } 2024.06.04
- 정렬문제 간단히 display:flex, align-items:center로 해결 2024.05.30
- error message 노출가능한 input은 errorText는 고정시키고{visibility:error?'visible','hidden'}로 조정해야함, 그냥 text없이 <div/>가 되면 height=0되고, display:none이용하면 tag자체가 없어져 화면이 번쩍이게 됨 2024.05.07
- display:block에서 정렬이 들쑥날쑥해지는 이유 - text baseline을 기준으로 정렬되기 때문 - vertial-align: text-top으로 해결가능 2024.04.26
word-break: normal, break-all, keep-all
2024. 6. 21. 17:51 [html, css]
css variable - color에 사용하면 좋음: var(--LG-Red)
2024. 6. 21. 16:48 [html, css/css color]
반응형
var(--LG-Red)
https://www.w3schools.com/css/css3_variables.asp
variables.scss, $변수를 사용할 수도 있음
$primary-color-red: #bb0841;
$primary-color-red-hover: #82072e;
$primary-color-grey: #323232;
$secondary-color-gery: #fbfbfb;
$border-color-gery: #d5d5d5;
$border-color-deep: #cccccc;
$hover-color-pink: #faf1f4;
$board-color-grey: #f6f6f6;
$board-color-txt: #5f5f5f;
$backgorund-color-grey: #888888;
$line-color-grey: #d8d8d8;
$btn-color-pink: #ed5c7d;
$btn-color-grey: #828282;
$txt-color-edit: #2468c4;
$txt-color-content: #666666;
$chart-color-pink: #faf1f4;
$chart-color-grey: #d7d7d7;
$primary-color-grey: #f4f4f4;
$primary-color-black: #262626;
$primary-color-red: #a50034;
$primary-color-pink: #fff8fb;
$LG-Red: #a50034;
$Mid1-Red: #c5597b;
$Mid2-Red: #d2809a;
$Light1-Red: #ffedf3;
$Dark-Mid2-Red: #7c0328;
$White: #ffffff;
$Dark-Gray1: #333333;
$Dark-Gray2: #262626;
$Dark-Gray3: #1a1a1a;
$Mid-Gray1: #cbc8c2;
$Mid-Gray2: #7e7c77;
$Mid-Gray3: #4a4946;
$Light-Gray1: #f6f3eb;
$Light-Gray2: #f0ece4;
$Light-Gray3: #e6e1d6;
$Light-Gray-BG: #f4f4f4;
$Light-Pink-BG: #fff8fb;
$Light-Linen-BG: #ffece2;
$Light-Red-BG: #fde8e8;
$Light-Yellow-BG: #fff4d6;
$Light-Green-BG: #e9f2e5;
$Orange-Point: #ce3c0b;
$Brown-Point: #9c6800;
$Active-Red: #ea1917;
$Green: #287d00;
common.scss
:root {
--primary-color-red: #{$primary-color-red};
--primary-color-red-hover: #{$primary-color-red-hover};
--primary-color-grey: #{$primary-color-grey};
--secondary-color-gery: #{$secondary-color-gery};
--border-color-gery: #{$border-color-gery};
--border-color-deep: #{$border-color-deep};
--hover-color-pink: #{$hover-color-pink};
--board-color-grey: #{$board-color-grey};
--backgorund-color-grey: #{$backgorund-color-grey};
--line-color-grey: #{$line-color-grey};
--txt-color-edit: #{$txt-color-edit};
--txt-color-content: #{$txt-color-content};
--chart-color-pink: #{$chart-color-pink};
--chart-color-grey: #{$chart-color-grey};
--LG-Red: #{$LG-Red};
--Mid1-Red: #{$Mid1-Red};
--Mid2-Red: #{$Mid2-Red};
--Light1-Red: #{$Light1-Red};
--Dark-Mid2-Red: #{$Dark-Mid2-Red};
--White: #{$White};
--Dark-Gray1: #{$Dark-Gray1};
--Dark-Gray2: #{$Dark-Gray2};
--Dark-Gray3: #{$Dark-Gray3};
--Mid-Gray1: #{$Mid-Gray1};
--Mid-Gray2: #{$Mid-Gray2};
--Mid-Gray3: #{$Mid-Gray3};
--Light-Gray1: #{$Light-Gray1};
--Light-Gray2: #{$Light-Gray2};
--Light-Gray3: #{$Light-Gray3};
--Light-Gray-BG: #{$Light-Gray-BG};
--Light-Pink-BG: #{$Light-Pink-BG};
--Light-Linen-BG: #{$Light-Linen-BG};
--Light-Red-BG: #{$Light-Red-BG};
--Light-Yellow-BG: #{$Light-Yellow-BG};
--Light-Green-BG: #{$Light-Green-BG};
--Orange-Point: #{$Orange-Point};
--Brown-Point: #{$Brown-Point};
--Active-Red: #{$Active-Red};
--Green: #{$Green};
}
반응형
'html, css > css color' 카테고리의 다른 글
| color: #ffffff(white), #000000(black) (0) | 2024.04.25 |
|---|---|
| color keyword: black, gray=grey, lightgray=lightgrey, gainsboro(A light bluish grey colour, 옅은푸른빛회색) (0) | 2024.04.25 |
두번째 input부터만적용 input + input { margin-top: 10px; }
2024. 6. 20. 17:08 [html, css/css selector]
반응형
input + input {
margin-top: 10px;
}
반응형
'html, css > css selector' 카테고리의 다른 글
| .popupModal [class="image"] exact css class match (0) | 2024.06.18 |
|---|---|
| .table { td:nth-child(2n+2) {background-color: var(--Light-Gray-BG);}} 테이블 row 짝수마다 색깔 다르게 (0) | 2024.04.19 |
| css selector(#id,.class, 자손,>자식), table tag (0) | 2019.04.19 |
table <td rowspan="2"> 2row를, <td colspan="2"> 2column을 차지한다는 얘기
2024. 6. 18. 17:27 [html, css]
반응형
rowspan 사용예제
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td rowspan="2">January</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>11</td>
<td>22</td>
</tr>
<tr>
<td>33</td>
<td>44</td>
</tr>
</table>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan
반응형
'html, css' 카테고리의 다른 글
.popupModal [class="image"] exact css class match
2024. 6. 18. 16:56 [html, css/css selector]
반응형
.popupModal [class="image"] {
text-align: center;
}
반응형
'html, css > css selector' 카테고리의 다른 글
| 두번째 input부터만적용 input + input { margin-top: 10px; } (0) | 2024.06.20 |
|---|---|
| .table { td:nth-child(2n+2) {background-color: var(--Light-Gray-BG);}} 테이블 row 짝수마다 색깔 다르게 (0) | 2024.04.19 |
| css selector(#id,.class, 자손,>자식), table tag (0) | 2019.04.19 |
style={{width: undefined}} 이면 css 반영안됨
2024. 6. 18. 11:40 [html, css]
반응형
style={{width: n.position?.width||'100%'}} 로 구지 안해도 style={{width: n.position?.width}} 만 하면 됨, n.position이 null이면 n.position?.width는 undefined가 되므로
반응형
'html, css' 카테고리의 다른 글
.required:after { content:" *"; color: red; }
2024. 6. 4. 11:40 [html, css]
반응형
<label class="required">Name:</label>
<input type="text">
<style>
.required:after {
content:" *";
color: red;
}
</style>반응형
'html, css' 카테고리의 다른 글
정렬문제 간단히 display:flex, align-items:center로 해결
2024. 5. 30. 12:03 [html, css]
반응형
반응형
'html, css' 카테고리의 다른 글
error message 노출가능한 input은 errorText는 고정시키고{visibility:error?'visible','hidden'}로 조정해야함, 그냥 text없이 <div/>가 되면 height=0되고, display:none이용하면 tag자체가 없어져 화면이 번쩍이게 됨
2024. 5. 7. 17:44 [html, css]
반응형
{visibility:error?'visible','hidden'}
반응형
'html, css' 카테고리의 다른 글
| .required:after { content:" *"; color: red; } (0) | 2024.06.04 |
|---|---|
| 정렬문제 간단히 display:flex, align-items:center로 해결 (0) | 2024.05.30 |
| display:block에서 정렬이 들쑥날쑥해지는 이유 - text baseline을 기준으로 정렬되기 때문 - vertial-align: text-top으로 해결가능 (0) | 2024.04.26 |
| css position: sideBar overlap error (0) | 2024.04.25 |
| css position: static(default), relative, absolute, fixed (0) | 2024.04.25 |
display:block에서 정렬이 들쑥날쑥해지는 이유 - text baseline을 기준으로 정렬되기 때문 - vertial-align: text-top으로 해결가능
2024. 4. 26. 12:16 [html, css]
반응형
text baseline을 기준으로 세로 정렬
그래서 한줄일때만 쓰기 좋음 -> 고치려면? 일단은 display:flex로 고치는게 빠를듯
vertical-align을 text-top으로 고치니 uplodate template download버튼 2개는 맞춰졌음 그러나 모든 버튼을 일일이 다 고쳐줘하는 듯 하고 버튼이 아닌 것들은 어떻게 고쳐야 하는지...
vertical-align에 대해 자세히 나온 글, 아직 다 보진 못했음
[공유] Vertical-align 파헤치기! – 1부 | Hivelab Blog
[공유] Vertical-align 파헤치기! – 1부 들어가며 안녕하세요. 하이브랩 UI개발2팀 도재경, 우현주입니다. 각자 UI개발1팀과 SEP실에서 열심히 과제를 진행했지만 서로 같은 고충을 느꼈던 저희!!! 그
blog.hivelab.co.kr
반응형