https://www.youtube.com/watch?v=C8t7eHIQ9fU&t=1s
text-align
inline block 요소만 적용된다
block level 요소
inline 요소
line height 는 한줄만 쓸 때 수직 정렬하기 좋다
(폰트에 따라 여백이 달라 수직정렬이 아닌것 처럼 보일 수도 있다)
유연하면서 레이아웃이 깨지지 않게!
container는 기본적으로 line height가 1이 들어가 있다
vertical-align
sub: 부모의 subscript baseline 을 기준으로 한다
text-top:부모의 subscript baseline 을 기준으로 한다
middle은 쓸모가..?
text-overflow
text-overflow :container에 overflow:hidden, white-space:nowrap 속성이 같이 사용되어야 합니다.
말줄임 코드는 언제쓰냐?
데이터가 없을 때
글자수가 많을 때
모바일에서 글씨가 잘릴 때
https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp
CSS Overflow Module Level 3
Abstract This module contains the features of CSS relating to scrollable overflow handling in visual media. This level is focused on completing a precise specification for the existing overflow features, including the overflow property and its longhands; l
www.w3.org
-webkit-line-clamp의 두번째 속성을 none으로 하면 ellipsis가 풀립니다
relative 내가 기준
position : absolute
부모요소에 position이 없으면 최상단의 부모요소를 찾아 부모를 기준으로 움직인다
position : fixed
position : sticky
가까운 부모요소에 달라붙기 때문에 조상에 scroll이 있어야 한다
z-index
부모는 자식 앞으로 나올 수 없고 자식은 부모 뒤로 가는 게 가능하다
Float
inline요소들은 float 된 요소들을 알아본다
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
Block formatting context - Developer guides | MDN
A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.
developer.mozilla.org
특강
typography
옛날 활자레서 줄사이의 간격을 띄울 때 사이에 납을 대고 활자를 찍었는데
납이 곧 Lead 그래서 leading area가 되었다
CSS에선 반을 나눠 위아래로 Half Lead가 된다
줄과 줄 사이가 만나 한줄이 된다
마진을 차지하는 공간이라고 생각해보자
마진을 마이너스로 주게되면 이미지는 그대로 보이지만
차지하고 있는 공간은 줄어 들어있다
https://www.youtube.com/watch?v=OVaKTdFe5Bk
{ margin: 0;
padding: 0;
}
초기화 꼭 먼저 하기
와 미쳤다 오늘 너무 피곤하다 일단 일찍잔다