학습 내용
박스모델
- 웹사이트를 만들 때 레이아웃의 공백, 구조를 빠르게 파악할 수 있도록 도와줌, 좌표를 배치하며 내용의 위치를 옮길 수 있다.
1. 마진 margin
설정한 공백을 넣어준다.
margin-left: 100px; - 왼쪽 바깥쪽에 100px만큼 공백을 넣어준다.
right, top ,bottom 모두 가능
margin: 100px 120px 200px 400px; :
- 'top 100px' 'right 120px' 'bottom 200px' 'left 400px'
이렇게 한번에 설정 가능
2. 패딩 padding
padding-left: 100px; - 내부 왼쪽부터 100px의 공백을 넣어준다.
right, top ,bottom 모두 가능
padding: 100px 120px 200px 400px; :
-
'top 100px' 'right 120px' 'bottom 200px' 'left 400px'
이렇게 한번에 설정 가능 -
box-sizing: border-box; 를 사용하면 크기 변화없이 설정한 크기 내에서 패딩이 적용된다.
margin/padding: 0; 의 의미는 위아래좌우 모두 값을 0으로 준다는 뜻
3. 보더 border
4. 콘텐츠
마진 병합
- 형제지간에 발생하는 마진병합 현상
- 부모지간에 발생하는 마진병합 현상
- 포지션을 통해 수정 가능
1. 형제지간에 발생
형제 사이에서 위쪽 태그의 아래쪽에 마진을 넣고 아래 태그의 위쪽에 마진을 넣으면 둘의 마진이 겹치게 된다.
html
<div class="margin-one"></div>
<div class="margin-two"></div>
css :
.margin-one { width: 100%; height: 100px; background-color: yellow; margin: 0 0 100px 0;}
.margin-two { width: 100%; height: 100px; background-color: blue; margin: 50px 0 0 0;}
일때 margin-one의 아래쪽과 margin-two의 위쪽이 겹치게 된다.
2. 부모지간에 발생
자식 태그에 마진을 넣으면 부모 태그도 자식을 따라 딸려가게 된다.
html
<div class="margin-parent">
<div class="margin-child">css
.margin-parent {width: 300px; height: 300px; background-color: yellow;}
.margin-child {width: 150px; height: 150px; background-color: blue; margin-top: 100px;}
위 상황에서 child에게 100px의 마진 탑을 줬지만 parent도 딸려가게 된다.
Dislay
태그를 통해 만든 글자나 사진, 도형을 내가 원하는대로 배치하는 것
1. inline
1.크기값을 지정할 수 없음
2.한 줄에 여러 개 배치
3.상하 마진 가질수 없음
4. 기본 너비값은 컨텐츠의 너비값
- span, a, small, em, b, br, audio, video, s, u, mark, q, strong, sup, sub, i, big, del, label
2. block
1.크기값을 지정할 수 있음
2. 한 줄에 한 개만 배치
3. 상하좌우 마진 모두 가질수 있음
4. 기본 너비값은 100%
- div, ul, ol, li, h, hr, form, dl, dt, dd, p, table, header, article, footer, section, nav, details, summury, center
3. inlineblock
- 크기값을 지정할 수 있음
- 한 줄에 여러 개 배치
- 상하좌우 마진 모두 가질수 있음
- 기본 너비값은 컨덴츠의 너비값
- img, input, button, fontawesome icon
display를 사용하여 inline -> block/block->inline으로 바꿀 수 있다.
ex) display: inline; - 가로로 배치
dispaly: block; - 세로로 배치
display: inline-block; - 인라인과 블록의 두가지 성질을 가짐
<span></span> - inline의 성질을 가져 가로로 배치되고 세로로 늘어지 않는다
<h1></h1> - block의 성질로 세로로 배치되고 가로,세로 둘다 늘어난다Vertical - align
태그들을 정렬하는 것 (가장 크기가 큰 값을 기준)
- Inline 요소에서만 사용가능
- top ,bottom, middle 등 사용
- 가장 크기가 큰 값을 기준으로 정렬
- img태그는 inline-block의 성질
vertical-align: [명령];
Position
-
margin-top 사용시 부모자식간에 발생하는 마진 병합 현상이 일어나는 지
-
top, right, bottom, left 속성을 사용할 수 있는 지
-
자식의 높이값이 부모에게 영향을 주는 지 - 부모의 높이 값이 없어도 자식의 높이 값에 따라 적용되는 지 유무
fixed를 빼고 3 X 3 X 3 = 27가지 경우의 수 숙지
static 1. static 마진병합, top속성, 높이값 영향
2. absolute 마진병합, top속성, 높이값 영향
3. relative 마진병합, top속성, 높이값 영향
absolute 1. static 마진병합, top속성, 높이값 영향
2. absolute 마진병합, top속성, 높이값 영향
3. relative 마진병합, top속성, 높이값 영향
relative 1. static 마진병합, top속성, 높이값 영향
2. absolute 마진병합, top속성, 높이값 영향
3. relative 마진병합, top속성, 높이값 영향
static (position: static;) - 모든 html태그는 static이 디폴트
- 2차원의 성질
- margin-top 사용시 부모자식간에 발생하는 마진 병합 현상이 일어난다.
- top, right, bottom, left 속성을 사용할 수 없다.
- 자식의 높이값이 부모에게 영향을 준다.
fixed (position: fixded;) - static과 반대
- 스크롤을 내려도 화면에 고정되어 나타난다.
- margin-top 사용시 부모자식간에 발생하는 마진 병합 현상이 일어나 지 않는다.
- top, right, bottom, left 속성을 사용할 수 있다.(브라우저 왼쪽 상단을 기준)
- 자식의 높이값이 부모에게 영향을 주지 않는다.
- 3차원의 성질
- 무조건 브라우저의 상단과 왼쪽을 기준으로 적용
relative (position: relative;)
- margin-top 사용시 부모자식간에 발생하는 마진 병합 현상이 일어난다.
- top, right, bottom, left 속성을 사용할 수 있다. (최초 파란색 박스의 위치 기준)
- 자식의 높이값이 부모에게 영향을 주지 않는다.
- 2차원의 특징과 3차원 특징 둘 다 가지고 있다.
- 자신의 초반 위치를 기준으로 적용된다.
absolute
- margin-top 사용시 부모자식간에 발생하는 마진 병합 현상이 일어나지 않는다.
- top, right, bottom, left 속성을 사용할 수 있다.(브라우저 왼쪽 상단을 기준)
- 자식의 높이값이 부모에게 영향을 주지 않는다.
- 3차원의 특징을 가지고 있다.
- 자신의 부모들 중 static이 아닌 부모의 위치를 참조하여 top, right, bottom, left의 값을 결정
* 부모는 기준으로 자식의 위치가 결정된다. 부모는 기본적으로 static이지만 부모의 성질이 바뀌면 자식도 바뀐다. ex) 부모가 3차원이면 부모를 기준으로 좌표 기준점이 형성, relative도 부모를 기준
학습 중 어려웠던 점
position의 개념이 아직 친숙하지 않아 어렵게 다가왔다.
코드를 넣으니 velog 조작이 어려워졌다.
해결방안
계속 찾아보고 암기하기학습 소감
점점 복잡해지는 게 나오지만 이것을 알아야만 내가 원하는 결과물을 만들어낼 수 있을 것 같다.