CSS-코딩기초

자....오늘은 코딩알려주는 누나수업에서의 두번째 포트폴리오 웹사이트를 만들어봤다. 공부가 먼가 정신이 아득해지는느낌으로 후다닥?? 지나가는 느낌이었지만 열심히 보고 따라해보고 틀린건 혼자 머리를 쥐어짜내보고 해봣다!!

positioning 속성값들

• static: 웹사이트의 기본 속성값 top, right, left, bottom등 위치 속성을 무시됨
• relative: html 태그가 있는 위치에서 left, right top bottom 값을 통해 박스 위치가 움직인다
• absilute: 부모영역에서 left, right, top, bottom을 이용해 주어진 위치로 움직임

!! 단 여기서 부모란?? 부모태그가 relative, absolute fixed 속성중 하나여야함. 만약 부모태그가 해당속성을 가지고 있지 않다면 body 태그 기분으로 움직인다. 왜냐하면 body 태그는 relative를 기본속성으로 가지고 있기 때문이다

• fixed: absolute와 비슷하지만 스크롤로 내려도 그 위치에 고벙, 무조건 브라우저 창 기준이다/
• sticky: relative롸 비슷하지만 스크롤로 내리면 fixed처럼 그 위치에 고정.

Flexbox의 특징

• display:fixed는 모든요소를 가로로 둔다.
• display:flex는 부모한테 적용을해야된다 그리고 자손을 컨트롤한다.
• justify-content: 가로로 요소들을 움직인다 (flex-start:맨앞정렬, center: 가운데 정렬, space-between: 요소 중간중간에 공간을 줘서 퍼트린다. space-around: space-bertween 보다는 좁게 공강을 준다)
• align-items: 세로로 요소들을 정렬한다.
• fixed-direction: column 가로로 정렬된 요소들을 세로정렬로 기준을 바꿔준다. 이떄!! justify-content는 세로로, align-items는 가로방향으로 바뀐다.!!!