$$config title: day1,web2 keywords: - inline-grid 클래스 - vh단위 - calc( ); $$ # 메모 - 인접형제 선택자 `+` ```css a:hover + div { display: block; } ``` - 공백도 글자 => section 안의 글자는 공백 포함 5글자 ```html

``` ```css div { display: inline-block; } ``` # inline-grid 클래스 - inline-block을 이용해서 만든 그리드 클래스 (공백도 글자 수에 포함되기 때문에 html 코드를 한 줄에 하나씩 쓰면 공백이 하나씩 생김, 그 공백을 없애는 방법이 `inline-grid`) - font-size: 0; => display: inline-block; 으로 인해 문자화 되었음. 모든 문자 사이즈를 0으로 해서 공백 없앰 - vertical-align: top; => 정렬 맞춤 - width: calc(100% / 7); => 부모 태그 안에 자식 태그가 한 줄에 몇 개씩 들어갈 지 쉽게 계산해줌 ```css .inline-grid { font-size: 0; } .inline-grid > * { display: inline-block; vertical-align: top; font-size: 1rem; } ``` - codepen 예제 1. [inline-grid1](https://codepen.io/midm/pen/VwMVWzR?editors=1100) 2. [inline-grid2](https://codepen.io/midm/pen/qBPQjvw?editors=1100) # vh(viewport height) - [중첩퍼센트를 이용한 높이 조절](https://codepen.io/midm/pen/xxXQLVo?editors=1100) - height의 값을 %로 지정하면 부모 사이즈를 기준으로 높이가 맞춰진다. display: block; 속성은 height 값을 지정하지 않을 시에 최소로 줄어들기 때문에, 자식이 %로 heigth를 지정하면 높이가 잡히지 않는다(부모의 높이가 없기 때문). 1. 부모의 높이 값 지정해주기(html은 특수하게 height: 100%; 적용이 가능) 2. `vh(viewport height) 단위를 쓰면 화면 사이즈를 기준으로 높이를 맞출 수 있다.` vw(viewport width) 단위도 있음 ```html section>div>nav>article ``` ```css article { height: 50vh; background-color: #333; } ``` - [codepen3](https://codepen.io/midm/pen/ZEXmJZd?editors=1100) # calc( ); - 속성값으로, 수학식을 계산하여 값을 반환 - 사칙연산 `+` `-` `*` `/` (`%`는 몫을 나누고 난 나머지 ex. 7 % 2 = 1) ```css height: calc(100% / 2); /*2분의 1*/ width: calc(100% / 5 * 4); /*5분의 4*/ ```