21.07.02

유진·2021년 7월 2일

금요일 화이팅 화이팅!!

박스 모델
모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.
웹사이트를 만들때 레이아웃 공백이나 구조를 빠르게 파악할수있게해주는 옵션
마진 패딩 골더 컨텐츠로 구성되었음

콘텐츠 : 태그와 태그안에 차지하고있는 문장이 콘텐즈가 됨
패딩 : 내용과 테두리 사이의 간격 (없을수도있음(0))
테두리(border) : 내용과패딩을 감싸는 테두리
마진 : 테두리와 이웃하는 요소 사이의 간격

형제지간 사이에 마진 병합 현상
margin-one의 바텀 마진값이 100이고 margin-two의 마진탑 값이 30이면 이론상 마진 원투사이의 마진값은 150이 되어야함 하지만 큰값이 작은값을 먹어버림(병합) 150이 되는게 아니라 100이됨

서로같은 100px이면 100ㅔㅌ을 서로 공유함(200아님)

부모자식간의 마진병합현상
자식한테만 마진탑을 적용 하지만 부모와 자식 둘다한테 적용되는걸 볼수있음

※이와같은 현상을 없애는것에는 position이 있음 밑에서 따로 적겠음

디스플레이

블럭요소는 공간을 만들수있지만 인라인은 만들수없음 또한 인라인은 마진과 패징 사용 X 하지만 스팬태그를 블럭으로 사용하고싶다 h1태그를 인라인 요소로 바꾸고 싶다 할대 사용하는것이 "디스플레이"

css 안에 dispaly: inline또는 block 적으니 둘의 현태가 바뀐것을 알수있음

그리고 블럭과 블럭사이에 생기는 공간은 h1이 태생적으로 가지고잇는 마진과 패딩값때문이다 css에 h1
안에 margin 0, padding 0설정해주면 빈공간 사라짐

포지션

1차원은 선 2차원 평면도형 3차원 우리가사는세상
2차원에 도형두개가 붙으면 같이 움직임
3차원 도형은 겹쳐짐이 가능 왜냐? z축이등장하기때문

웹사이트는 2차원과 3차원이 섞여 제작됨

포지션을 공부할떄 3가지 숙지
1. margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지
2. top, righr, bottom, left 속성을 사용할 수 있는지

position에는 static, relative, absolute, fixed 4가지 속성이 있음

position:static
초기값으로 위치를 지정하지 않을 때와 같음
앞에 설정된 포지션을 무시할 때 사용되기도 함
top, bottom, left, right속성값이 적용되지 않음
position:fixed
상위 요소를 설정햇음에고 영향을 받지 않고 위치를 결정할수있음
웹페이지에서 계속 따라다니는 돵고나 공지가 바로 이 fixed를 설정한 객체
위치를 좌표로 결정 또한 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 된다
position:relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right,bottom, lefe가 적용됨
position:absolute

positon을 잘 모르겠음
뭐랄까 뭐가 어려운건지도 모르겟고 내가 왜 모르는지도 모르겠는 요상한 상태임 까먹을거같음 제출하고 포지션 부분 다시 복습하고 정리하고 숙지하기