2021년 05월 18일

Note

• DOM

CSS Layout

• display: block
  • div
  • 박스라고 생각, 아무것도 설정하지 않으면 부모 element 에 가득 찬다.
  • 크기 조정 가능, 레이아웃 작업을 한다.
• display: inline
  • span
  • 텍스트 영역만큼만
  • 크기 조정 불가
• display: inline-block
  • inline과 block 속성을 동시에, 크기 조정이 가능하다.

flex, grid... 등

CSS BOX MODEL

• box-sizing: content-box 기본값
• box-sizing: border-box
  • padding, border까지 width에 포함된다.

CSS reset

• 기본 디자인이 들어가지 않은 상태로 만들어주는 코드

rem

• root em
• root element(html)이 default로 갖고 있는 폰트 사이즈 (대부분 16px) 기준
• em: 현재 element의 font-size 기준

float

• 자식 element가 float가 설정되어 있으면 부모 element 속에 속하지 않은 것처럼 인식한다. (높이가 0), 없는 자식처럼...
• 자식 element 마지막에 가상 element를 추가한다. 부모 element가 정상적으로 높이를 확보하도록
  부모 selector:after {
      content: '';
      clear: both;
      display: block; 
      
      /*아래 두개를 넣어주기도 한다.*/
      height: 0;
      visibility: hidden; 
  }

반응형 웹

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 이걸 넣지 않으면 모바일에서 열었을 때도 모바일 설정값이 아닌 데스크탑을 통한 설정값으로 보인다.

@media screen and (min-width: 700px) {
    700px 이상일 때 style 
}

• viewport 부분을 보니 Safari 의 데스크탑 웹사이트 요청이 생각났다. 아마 이것도 viewport를 통해 화면을 변경하지 않을까 하는 생각이 들었다.

• vw : 100vw 창의 가로 크기

• vh: 100vh 창의 세로 크기;

log

• 🎾 테니스 레슨이 우천취소 되었다. 이번주에 계속 비가 올듯한데 몸이 근질근질하다.