04/06 TIL

04/05 과제 주요내용

강사님 처럼은 안나옴 ..document 명령어 4개 일단 알아두자

text 노드가 생기는이유 : 공백이 있기 때문

reset css

*자세하게 다시 배울거라 핵심 내용만 기록
*보통 파일을 common.css 나 util.css 로 모아서 만드는 경우가 많다

        input,select,textarea{
            /* 모바일 기본 제공 스타일 제거 */
            -webkit-appearance:none;
            -moz-appearance:none;
        }

        body{
            font-family:'회사에서 사용하는 기본 폰트', '맑은 고딕','Malgun Gothic', AppleGothic,sans-serif;
            font-size: 16px;
            font-weight: 400;
            /* 아이폰에 reset font가 설정이 안되는 경우기 있어 설정해주어야 함  */
            -webkit-text-size-adjust:none;
        }

밴더프리픽스(autoprefixer)
줄어드는 추세인데(IE도 종료되고) 크로스 브라우징을 위해 아직 레거시 브라우저들을 지원해야 할 경우가 있어서
이 부분을 자동화 해준다

"autoprefixer.options": {
    "browsers": [
        "last 4 versions", /* 가장 최신 버전에서 4단계 아래 버전까지 지원합니다. */
        "ie >= 9",         /* IE9 버전 이상만 지원합니다. */
        "> 5%"             /* 전 세계 브라우저 사용률 중 5% 를 초과하는 브라우저만 대응합니다. */
    ]
}

(VSC extendsion 예시)

p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

display : flex 를 입력하고 저장하면 위 사진처럼 옵션 세팅을 참고해서 자동으로 바꿔준다.

CSS Selector

1. 전체 선택자(Universal Selector)
2. 타입 선택자(Type Selector)
   그냥 쓰는건 위험한짓이고 보통 초기화 할 때 사용한다
3. 아이디 선택자
   같은 페이지 안에 id 값은 유일해야한다(중요)
   #으로 사용하고 css와 js 에서 활용하는 중요한 속성 중 하나(JS에서 긁어올 때 class보다 id가 많이 쓰임)
   협업 할 땐 최대한 직관적이고 간단명료하게 지어주자
4. 클래스 선택자
   작업할 때 id 와 고민하면 일단 class 로 작성하고 필요에 따라 id 로 바꾸던가 하자
   . 을 붙여서 사용하고 아이디와 마찬가지로 JS에도 사용할 수 있다.

CSS 선택자 우선순위

1. 후자 우선의 원칙
   동일한 헌택자가 연속으로 사용되었을 경우 후자를 우선함

개발자 도구로 보면 처음 적용된 css 에 밑줄이 그어져 있음

  2. 구체성의 원칙
      한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자를 우선한다

    <style>
        p.color-red {
            color: red;
            font-size: 20px;
        }

        p {
            color: green;
        }
    </style>

(더 자세한 p.color-red 가 적용됨)

 

 3. 가중치 원칙

https://specificity.keegan.st/ (가중치 점수 계산 사이트) 이렇게 점수로 나눠서 적용한다

참고로 자리올림이 되지 않는다. 예를 들어 태그로 13점의 점수를 얻어도, 클래스가 가지는 10점을 넘지 못함

 

4. 중요도 원칙
   !important 로 절대적인 우선순위를 적용해 갖중치를 무시하고 무조건적으로 우선순위를 가져간다.
   불가피한 상황이 아니라면 남발하지 않는게 기본이다 
   하지만 대규모 사이트 및 앱에서 어느 시점부턴 CSS 우선순위를 유지하는게 어려워 지고 
   다른 스타일을 섯불리 제거하거나 수정하기가 조심스러워 지기때문에 불가피하게 !important 를 사용한다
   !important 끼리 부딪히면 ? 절대적 우선순위라도 우선순위 점수에 따라 적용이 나뉜다

https://developer.mozilla.org/ko/docs/Web/CSS/Specificity (CSS 명시도 참고 문서)

 

CSS Box Model

https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties (margin , padding 포함 축약속성을 알아두자)

 

inline 요소 : 컨텐츠 박스만큼 크기를 가지기 때문에 width 와 height 속성을 사용해도 무시된다.
                 margin 과 padding 속성은 반영되는데 좌우 간격만 조절할 수 있다.
                block 요소는 다른 요소들을 밀어내고 inline 요소는 밀어내지 않는다.

inline 에 padding 100px 을 줬을 때 예시 , 주변요소들을 밀어내지 않음

 

요소의 길이 = 양옆 border + 양옆 padding

마진 곂침(병합) 현상 

1. 요소와 요소의 사이에 margin 탑 or 바텀의 공간이 있을 경우 더 높은 값을 적용

2. 부모 요소와 자식 요소가 존재할 때, 자식 요소의 margin 탑 or 바텀 값이 부모의 높이에 영향을 미치지 않는 현상

아래 codepen 예제에 2가지 유형이 다 나와있다

1. .parents 에 margin 이 상하 0 으로 들어가 있지만 .children 의 상하 margin 50px 에 먹혀서 안나온다.
2. .children 의 div 사이에 생각대로면 50px + 50px = 100px 의 마진이 생겨야하는데 곂쳐서 50px 만 나온다
            

See the Pen Untitled by wonhyeonglee (@bigfile57) on CodePen.

 

 

 

해결방법

• display : flow-root  & overflow : hidden
  둘 다 BFC 라는 성질을 가지고 있기 때문에 아무거나 써도 똑같이 해결 가능한데 
  flow-root 는 IE 에서 작동하지 않기 때문에 호환성을 고려한다면 overflow 를 주는게 좋다
  block 간의 마진은 겹치도록 하고 상,하 마진 겹침을 해결해준다
• 부모요소에 공간을 차지하는 요소 (padding , border) 를 넣어서 마진겹침 현상을 일어나지 않게
  조건을 만들어준다. 단점으로 조금이라도 공간을 차지한다는 점이다
• display: inline-block; 1,2 의 마진겹침 현상을 다 해결해준다
                              (div 사이 마진겹침이 없어져 원하는 css 결과가 아닐 수 있음)
• 부모요소 css 에 가상선택자로 아래 코드와 같이 넣어주면 html 코드에 굳이 공간을 만들기위해
  요소를 넣지않고 css 에서 해결가능하다 

.parent::before,
.parent::after {
    content: ' ';
    display: table;
}

 

좌) 부모와 자식에 margin-top 을 줬는데마진곂침현상이 일어난 경우 / 우) overflow:hidden 으로 해결한 경우

  

box-sizing

border-box 와 content box (box-sizing의 기본값, 표준 박스 모델) 두 가지가 있다.

멋사 로그인 페이지 구현 실습 때 작성한건데 여기서 보면 input 안에 텍스트에 왼쪽 여백을 주기위해
padding-left 를 적용해준 상태이다. 기존 크기에 왼쪽 padding 이 더해지면서 border가 튀어나오는 것을 볼 수 있다
여기서 box-sizing : border-box 를 사용해주면 개발자가 설정한 width, height 값으로 적용되기 때문에 맞춰지는 것을
확인 할 수 있다.

 

CSS declarations

em : 금속활자 폰트 기준점을 M 으로 잡았는데 (전체글꼴의 높이 , 정사각형) em 의 어원이 됐다

       px 단위로 크기를 정하게 되면 유지보수 할 때 힘들다(폰트크기를 바꿀 때)
       em 을 사용하면 폰트 종류와 크기에 따라 유동적으로 조절할 수 있다

       기준이 되는 값으로 현재 스타일 지정 요소의 font-size 값을 의미한다

.box h2{
	font-size: 40px;
}
.box h2 span{
	font-size: 0.5em;
}

예를 들어 이런 코드에서 font-size 0.5em 의 크기는 <h2>에 적용된 40px * 0.5 = 20px 이 된다.

    <div class="container">
        <div class="content1">2rem</div>
        <div class="content2">2em</div>
    </div>
    
html{ font-size: 16px; }
body{ font-size: 2em; } 
div.container { font-size: 2em; }
div.content1 { font-size: 2rem; }
div.content2 { font-size: 2em; }

여기서 content2 는 html -> body -> container -> content2 순으로 16px * 2 * 2 * 2 = 128px 이된다
이런 특성을 기억해서 잘 사용하도록 하자  

 

rem : em 과는 다르게 기준이 되는 값이 최상위요소(보통 html)의 font-size 값 이다.
       위 em 예제를 참고해서 보면 content1 의 font-size는 16px * 2 = 32px 이다. 

 

vw : viewport width , 화면비 백분율 단위
vh : viewport height , 화면비 백분율 단위

 

예시로 위 사진에 클릭한 박스는 width : 50vw 를 주었는데
전체 창크기 width 가 1200px 이니 1vw는 12px 이되고 50vw 는 600px 이 된다.

 

기타메모 

• background-color 는 border 내부의 색만 변함
• tab 하고 space 4번은 다르다(vi , vim 사용자들은 민감함)
        

참고영상, 링크

• https://youtu.be/VT_qa7h51pg (빔캠프 em , rem 시리즈)
• https://youtu.be/O-n1EjDEuIc (빔캠프 overflow 에 대해서)
• https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context (BFC성질)
• https://developer.mozilla.org/ko/docs/Web/CSS/display(display 문서)

TIL 개선점

• 가독성 늘리기 (이미지크기 조정, 글 흐름에 맞는 폰트 크기)
• 내용분할 : 요번 게시물로 예를 들면 마진겹침같은 건 내용이 많고 중요해서 따로 분리하는게 나았던것 같다
                중요도 , 실습과제에 따라서 TIL 과 따로 포스팅 할 주제를 나눠야 할 듯