실습 리뷰
figma파일에서는 너비가 고정되어있었지만 일반적으로 다양한 디바이스를 지원해야되기 때문에 card의 너비가 달라졌을때 자식이 width: 100%가 되게한다
css에서 선택자에 > 안쓰는 이유는?
태그를 하나 더 감싸는등 여러 변화의 요구가 있을 수 있으므로 느슨하게 연결한다
typography
- vertical-align
- midle은 x-hight h의 n부분의 높이의 반이고 서체마다
제각각
(값을 픽셀로 음수를 주어 처리한다)
- midle은 x-hight h의 n부분의 높이의 반이고 서체마다
- 폰트가 결정되지 않고 개발을 하면 안되는 이유이다
inline
- 인라인과 인라인 사이에 개행, 공백이 있을 경우
parse시 엔터를 공백으로 인식 요소와 요소사이 여백이 생김
OS의 UI 컴포넌트
os에서 ui 컴포넌트를 브라우저가 받아 사용 정책상 바꾸기 어렵게 되어있음
- 버튼 같은 경우
- border: none 등으로 해서 스타일을 바꾸어 준다
배치하기
접근성을 고려해보면
박스의 순서는 매우 중요하다
- 시각 장애인의 예
- 그림을 설명하고
- 요금제를 설명하고
- 자세히 알아보기 버튼을 설명
순서가 html에서 바뀌는 경우 그림을 자세히 알아보는
버튼으로 인식될 수 있음
층
- 기본층
- float층
- position층
- float
- 그림 옆에 글이 흐르는걸 구현하고 싶어서 개발
- float 하면 해당 요소는 부모를 떠남
- 인라인은 float의 위치를 알고 피해서 흐름
- float 된 요소는 block이 된다
부모요소에 BFC 한번 더 도는 경우
- 어떤 방법도 단점이 있다
- overflow hidden
- 마진 오토는 못주지만 해결은 됨
1 2 3 4 5
display inline block display table-cell float: left display flex position:absolute
- clear => BFC가 일어나지 않음
- float이 적용된 요소의 막내 형제에 clear를 줌
- 클리어는 블록에게만 효과가 있다
- ::after로 줄때는 display:block 해줘야함
느낀점
- 안다고 생각했지만 모르는 부분이 많은 것 같다