학습한 내용
⭐️박스 모델 box-model⭐️
- margin
border 바깥쪽 부분
배경색의 영향은 받지 않지만, 크기에는 포함됨- padding
cotent와 border 사이의 간격
벌어진 공간 +원래 공간- border (테두리)
콘텐츠와 패딩을 감싸는 테두리- content
실질적인 내용 부분, 열린 태그와 닫힌 태그 사이의 내용들
새롭게 생긴 공백으로 인해 콘텐츠는 타의로 움직임
여기서 height와 width 설정
(패딩, 보더, 마진에는 영향 없음)
마진과 패딩을 한큐에 처리하는 방법
시계방향으로 차례차례 수치 입력
top-> right-> bottom-> left
Ex> margin : top right bottom left
Padding : top right bottom left
0일 때 단위 생략 가능!
Css의 분량이 많으면 브라우저의 로딩 속도가 느려짐
처음에는 풀어서 쓸 지라도 계속 연습해서 줄일 수 있도록 해야한다!
그래야 용량이 줄어들고 브라우저 로딩 속도를 빠르게 할 수 있다구!
태생적으로 html body h1에는 마진과 패딩 값을 가지고 있음
그렇기 때문에 마진과 패딩을 속성을 따로 넣어도 공백이 남게 되는데 없애기 위해선
Html, body , hi { margin: 0; padding: 0; } 디폴트로 생각해야됨
0 하나만 써주는 건 구역의 모든 값을 0으로 하겠다는 뜻!
📍패딩을 사용하더라도 공간에 대한 크기는 유지하고 싶다!
Box-sizing: border-box;
속성을 적용한 영역에 크기를 기준으로
크기 안쪽으로 보더와 패딩값이 세팅됨.
마진병합현상
형제지간 발생현상
숫자가 큰 값이 작은 값을 먹음
숫자가 동일할 경우도 크기를 같이 공유부모자식지간 발생현상
(가장 많이 일어나는 문제)
Div class margin-parent
Div class margin-child
한 곳에 마진값을 넣으면 같이 이동되는 현상
어떻게 해결할 수 있나? 포지션 파악!
Position : absolute
디스플레이
내가 선택한 태그의 진영을 바꿀 수 있음
*Block
줄바꿈 현상 일어남
공간을 만들 수 있음
상하배치작업 가능
*Inline
줄바꿈 없이 엑스축으로만 정렬됨
공간을 만들 수 없음
상하배치작업 불가#인라인과 블록 속성을 모두 가지고 싶다.
Display: inline-block;{}
- inline 요소 주의점!
미세하게 공백을 가지고 있음
버티컬 어라인
정렬을 깔끔하게 하고 싶을때!
<Span class>=“inline>Inline</span> <Span class>=“inline-block”>Inline-Block</span. <img src=“”>
- 가장 크기가 큰 속성을 기준으로 정렬
- 가운데정렬 = vertical-align : middle;
- 인라인 요소에서만 사용 가능!
(img 태그는 인라인 요소의 성격을 가지고 있어서 사용 가능)
포지션
매우 중요하고 매우 어려움
- 그 전에 차원의 개념을 알아야함
1차원 - 선
2차원 - 평면
3차원 - 세상… Z축
웹사이트는 2차원과 3차원의 세계 !적절히 섞어서 사용해야함!
2차원을 쓸 지 3차원이 쓸 지 포지션으로 정하기..?
- 경우의 수 고려하기!
1. 마진 탑 사용 시 부모 자식 지간에 발생하1는 마진병합현상이 일어나는가.
2. Top, right, bottom, left 속성을 사용할 수 있는지 (자신이 주체가 되어 움직이는 속성)
3. 자식의 높이 값이 부모에게 영향을 주는가
static ——> 2차원 속성값
1. 마진병합 있음 2. 속성 사용할 수 없음 3. 영향을 줌
- Html의 속성은 2차원에서부터 시작
Position static값과 같음fixed —————> 3차원 속성
1. 마진병합 없음 2. 속성 사용 가능 ( 좌표 기준점이 브라우저 기준 왼쪽 기준으로 움직임 ) 3. 영향을 주지 않음ex) 배너광고
relative ————> 2&3차원 속성 (혼합형)
1. 마진병합 있음 2. 속성 사용 가능 ( 원래 있었던 위치를 기준으로 움직임 ) 3. 영향을 줌absolute ———> 3차원 속성
1. 마진병합 없음 2. 속성 사용 가능 (좌표 기준점 브라우저 왼쪽) 3. 영향을 주지 않음
부모가 어떠한 지에 따라 좌표와 위치가 달라짐
부모가 3차원일 경우 ->원래 있었던 위치를 기준
부모가 2차원일 경우 -> 브라우저 기준
27가지 경우의 수를 하나하나 따져보기!
학습한 내용 중 어려웠던 점
오늘은 그냥 다 어렵습니다. 두뇌풀가동 해도 아직 다 이해못해부렀습니다.. 살려주세요...
