IT & Tech

• display: block, 설정안하면 width는 부모로부터 받은 넓이를 다 사용, height는 자식꺼(height:100%일때)? 
  • full width available -> stretches out to the left & right as far as it can
  • starts on a new line -> vertical, 시작지점은 바로 앞 형제가 끝나고 바로 시작, 형제 안에 자식이 길거나 해도 무시함

    <div style="height:100px;">
    	<div style="height:500px;">
        </div>
    </div>
    <div>... -> 100px 끝나고 시작, 내부 자식이 500px짜리 있지만 무시함​​

     
  • example
    • <div>
    • <p> paragraph
    • <h1>~<h6> heading
    • <form>
    • <ol> ordered list
    • <ul> unordered list
    • <header><main><nav><footer>
    • <table>
• display: inline, width/height설정할수 없고 설정해도 효과없음, color/fontweight등은 설정가능
  • for text
  • horizontal
  • example
    • <span>
    • <a>
    • <img>
    • <button>
    • <input>
    • ...
• display: inline-block, inline이지만 width/height만 설정가능
• display: table
• display:flex

block level element와 inline level element의 차이에 대해 설명되어 있음

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-p-div-span-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

• visible
  • default, not clipped(안 자르고 다 보여줌)
• hidden
  • clipped - 넘치는 부분 잘라냄
  • 내부에 있는 애들이 빠져나가지 못하게 가둠(자기 자신이 더 커짐으로 해서라도)
• scroll
  • clipped
  • 넘치지 않아도 scroll이 기본으로 생김 (넘치치 않으면 위 아래로 이동은 안되고 자리만 차지하는 scroll생김)
• auto
  • clipped
  • scroll과 비슷하지만 넘치지 않으면 scroll없고 넘칠때만 생성
  • 만약 height가 고정이 아니라면 scroll생성안해도 되도록 height를 자동으로 늘이는듯(최대한 scroll없이 해결하고 정 안되면 scroll)

overflow-x, overflow-y로 방향지정 가능

포커스 안가지만 커서가져가면 (/)표시나오지는 않고 회색-점선라인이 되지 않음 - 딱보면 비활성회된지 모르고 커서가져가야 할수 있음

<input readOnly={true} 작동함(포커스불가)O

<input readOnly='true'  작동함(포커스불가)O

<input readOnly='false'  작동함(포커스불가)O

<input readOnly  작동안함X -> 다시해보니 작동하는듯, 그리고 readonly가 맞는듯

포커스 안가고 커서가져가면 (/)표시나오고 회색-점선라인이 됨 - 딱봐도 비활성화되보임

<input disabled 작동함(포커스불가, 비활성화)O

<input disabled='true' 작동함(포커스불가, 비활성화)O

<input disabled='false' 작동함(포커스불가, 비활성화)O

document.getElementById('control_EMAIL').readOnly = true;//(o) 대소문자 주의
document.getElementById('control_EMAIL').readonly = true;//(x) 대소문자 주의


document.getElementById('control_EMAIL').setAttribute('readonly') //소문자는 setAttribute로 하니까 됨

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;      // 테스트 안해봐서 모름    
}

.gnb > ul > li > a {
  position: relative;
  display: block;
  width: 100%;
  font-size: 22px;
  line-height: 80px;
  color: #ffffff;
  text-align: center;
  font-weight: 500;
}

.sub_menu ul li a {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 15px;
  line-height: 35px;
  color: #756161;
}

@media only screen and (min-width: 1200px) and (max-width: 1366px) {
  .gnb > ul > li > a {
    font-size: 16px;
  }

  .sub_menu ul li a {
    font-size: 12px;
  }
}

content<padding<border<margin<position

box-sizing

• content-box
• border-box

height, maxHeight, lineHeight

display

• block
• inline
• inline-block
• none

position

• static
• relative
• absolute
• fixed

z-index

!important - overriding 하더라도 이 속성이 적용되도록, 중요하니까

----------------------------------------
level3 menu 들여쓰기 적용 
#snb .MuiList-root > li > ul > li > a {
  padding-left: 25->50px;
----------------------------------------
gnb statistics 메뉴 6개로 늘어날시 잘리는 문제
#header.is_active:after {
  height: 200->235px;

.sub_menu {
  height: 200->235px;
----------------------------------------
level2 level3 menu 사이 간격좁히기
#snb .MuiList-root>li>ul { #snb .MuiList-root>li>ul {
  padding: 15px 0->5px 0 15px 0;
}
----------------------------------------
material table 위 add버튼 right으로 이동하기
.btn_set_wrap.tbl_top1, .btn_set_wrap.tbl_top2{
left:0px; -> right:0px;
다음 2줄 추가 
.tbl_wrap > .tbl_top1 + .MuiPaper-root > .MuiToolbar-root .MuiTextField-root + div{width:120px;}
.tbl_wrap > .tbl_top2 + .MuiPaper-root > .MuiToolbar-root .MuiTextField-root + div{width:230px;} 
----------------------------------------
materialTable row backgroundColor 흰색고정
#root .MuiTable-root tbody td,
.pop_wrap .MuiTable-root tbody td {
  background: #ffffff;
----------------------------------------
??? material Table 내외부 버튼길이 문제 
.MuiButton-root.btn_size_tbl {
  width: 95px; -> 테이블 row별 버튼 %로 고치면 block으로 보여짐...

.btn_set_wrap_tbl {
  width: 100%;
  display: flex;
}
----------------------------------------
<TextField label="Select File" -> <TextField placeholder="Select File"


STATISTICS > Summary 등 메뉴에서 테이블 버튼위치 틀어지는 부분은 수정했습니다. 버튼눌렀을때 나오는 부분은 확인결과 정상적으로 나와서 따로 작업하지 않았습니다.

테이블 컬럼 고정의 경우 제가 설명드렸던 부분을 다 이해하지 못하신거 같습니다.

고정시켜주는 부분의 width값은 처음 테이블 생성시에 정해지는데 필터에서 선택하여 값을 변경시켜줄때 처음생성됐던 width값이 변경되어지지 않고 있습니다. 예를 들어 처음 생성된 width값이 1400이고 고정시킬 width값이 200이라면 1400에서부터 200만큼 들어간 위치를 고정시키게 됩니다. 근데 처음생성된 width값이 1400인데 변경된 테이블 안에 생성된 내용의 width값이 1600이라면 1400부터 1600까지의 영역은 안보이게 됩니다. 그리고 고정된영역도 1600에서 200만큼의 영역이 아닌 1400에서 200만큼의 영역이 보여지게 됩니다. 이부분은 수정이 어려운것으로 보여지기때문에 테이블 전체를 다시 그려달라고 요청드렸습니다.

이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

CSS와 비교하여 Sass는 아래와 같은 장점이 있다.

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 기능을 활용하여 CSS 유지보수 편의성을 큰 폭으로 향상시킬 수 있다.
•  

https://poiemaweb.com/sass-basics

css selector: https://www.w3schools.com/cssref/css_selectors.asp

• div,p: all div & all p
• div p: div의 모든 p 자손 (자식, 손주, 증손주...모두 포함)
• div>p: div의 자기 자식 p만
• div+p: div 옆 바로 인접한 이웃 p만
• div~p: div 옆에 있는 같은 레벨의 모든 이웃 p (이웃의 자손은 같은 레벨이 아니므로 포함 안됨)

table: The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.

• thead
  • tr: table row
    • th: table header
    • th
    • th
• tbody
  • tr
    • td: table data
    • td
    • td
  • tr
    • td
    • td
    • td
• tfoot
  • tr
    • td
    • td
    • td