1105 6일차

금일 수업 한재현님

CSS
box-sizing 속성은 박스의 크기에 대한 기준을 정한다.
div를 여러개 작성했을 때 , 수직으로 나열되는 이유는
div가 block요소기 때문에 그렇다.
이를 수평 나열하기 위해선 , inline , inline-block을 사용하면 된다(float을 여기선 제외)

inline은 margin값이 left,right만 들어갈 수 있다.
<< 이를 보완하기 위해서 사용하는것이 inline-block
inline-block을 잘 사용하지 않는 이유: 자체적으로 공간을 차지하고 있기 때문에 잘 사용하지 않는다.
공백을 없애는 방법은 부모의 font사이즈를 0으로 바꾼다, 그리고 div태그의 font 사이즈를 지정해줘야 한다.<<< 불편

Position
relative의 속성은 normal flow의 흐름을 해치지 않는다
absolute는 normal flow흐름에서 벗어나서 단독으로 움직인다.

sticky: 가장 가까운 스크롤 된 요소에 달라붙는다.

float 값을 주게 되면 div 요소가 사라진다.

float 요소를 사용하면 , 자식 요소들이 박스를 인식하지 못하기 때문에 clear를 통해서 자식 요소들이 박스를 인식하게 만든다.

after -> content 필수

clear-fix

ul::after {
display: block;
content: '';
clear:both;
}
li {
float: left;
width: 300px;
height: 100px;
background: pink;
}

자식들의 float을 서로 인식하게 끔 하기 위해서 after를 통해,
맨 마지막에 가상의 요소를 만든 후, clear로 인식하게 한다.

자꾸 헷갈리는 점
block: 무조건 한 줄을 점유하고 있음 대표: div
inline : text 만큼의 크기만 점유한다. 줄바꿈 X
inline-block : inline과 block의 특성을 둘다 가지고 있음
width/height margin,padding : top,bottom 적용 가능
line-height 사용 가능

flex
flex란 컨텐츠를 정렬하거나 공간을 나눌수 있는 CSS 속성의 집합

display:flex는 전부 다 차지하고 (block처럼)
inline-flex는 자신이 차지한 공간만 차지

수직 정렬 : top:50% transform:translateY(-50%)
수평 정렬 : margin 0 auto;

부모 : flex-container 자식: flex-item
flex는 직계자식한테만 영향을 미침.

Flex 정렬은 Axis를 기준으로 정렬된다. 기본 방향은 왼쪽에서 오른쪽이다.
github
https://github.com/scato3/front_end_school_html/tree/main/2021.11.05

느낀점 : 네이버 로그인 창 만드는것이 ui만 봤을 땐 굉장히 쉬워보였지만 막상 해보니 정렬에 있어서 난이도가 있었고, flex 부분 실습은 바로 떠오르지 않았다.