TIL 210225

1. 깃허브 블로그를 이것저것 만져보았다가 갑자기 블로그 화면이 이상해져서 진땀 빼며 원상복귀 시켰다 … 😹

시간 가는줄 모르고 html, css 와 씨름하였다. 시간 참 잘간다… 내시간 🙀

2. css 박스 모델 중 아래 개념 추가.

  • 박스크기 측정 기준
<div id="container">
  <div id="inner">
    안쪽 box
  </div>
</div>

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}
  • content-box 기준으로 #container 너비는 324 px
* {
  box-sizing: border-box;
}
  • border-box 기준으로 #container 너비는 300 px

3. css 중급 개념

  • 보다 다양한 css 셀렉터 알아보지
  • 레이아웃을 위한 html 만들기
  • flexbox 를 이용해 레이아웃을 만들 수 있다
    • 방향 : flex-direction
    • 얼마나 늘릴 것인가? : flex-grow
    • 얼마만큼의 크기를 갖는가? : flex-basis
    • 수평 정렬: justify-content
    • 수직 정렬 : align-items
  • 후손셀렉터 `header h1 {}1
  • 자식셀렉터 header > p { }
  • 🔥자식과 자손의 차이는?
    • 후손 : 부모 안에 있는 모든 자식에게 영향을 미침
    • 자식 : 부모 안에 있는 자식 요소에만 영향을 미침
  • 인접 형제 셀렉터 section + p { }
  • 형제 셀렉터 section ~ p { }

4. 레이아웃 : 화면을 나누는 방법

  • 기본적으로 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로 흐른다. 먼저 수직으로 분할하고 수직으로 분할된 div 에서 height 속성을 이용해 수평 분할 해보기
  • HTML 이 가지고있는 기본 스타일이 레이아웃 잡는데 방해가 될 수 있다. 이경우 몇 줄의 코드를 적용시킨다면 레이아웃 잡는데 도움이 된다.
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

  • flex : 부모 박스에 display:flex를 적용해줌으로, 부모박스의 자식박스는 왼쪽츠로 차례대로 붙게 된다. 범위를 알고싶을때는 border : 1px dotted red 등으로 범위를 빨리 확인 할 수 있다.

  • 방향(flex-direction) 기본적으로 수직으로 분할되지만, 수평으로도 분할 할 수 있다. 속성은 부모박스에 적용한다. row(기본값), column(수직)

  • ⭐️grow, shrink, basis( 팽창지수, 수축지수, 기본크기)⭐️ 자식 박스에 어떠한 속성도 주지 않으면, 그저 오른쪽으로 컨텐츠 크기만큼 배치된다. 이때 자식박스의 flex 속성 기본 값은 다음과 같다.

flex : 0 1 auto;
  • 각각을 따로 지정할 수도 있음.
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

🧐grow, shirink 는 단위가 없으며, 비례하는 값이다. 박스를 여러개로 나누었을 때 각 자식 박스가 갖는 grow 값의 총 합이 n일때 이 떄의 1은 1/n의 크기를 의미한다.

Updated: