학습한 내용
박스모델 : 웹사이트를 만들때 각 레이아웃의 공백이나 구조를 빠르게 파악할 수 있도록 도와주는 옵션
구성요소
margin과 padding은 빈 공백을 생성해서 좌표 배치작업을 할 때 사용합니다.
padding을 사용하게 되면 선택된 영역의 크기가 달라질 수 있습니다.
box-sizing: border-box; : padding을 사용하더라도 공간에 대한 크기는 유지하고 싶을 때 사용하는 코드입니다.
margin과 padding 입력을 최소화 하기 위해 margin/padding top right bottom left 순으로 값을 입력해 주면 적용됩니다.
예) margin: 100px 0 0 100px;
padding: 100px 0 0 100px;
명령어 양을 줄이면 웹페이지 로딩 시간을 단축시킬 수 있습니다.
html/body/h1/span 태그에도 margin과 padding이 들어가 있습니다.
margin 병합현상
형제지간에 발생하는 margin 병합현상 : 공백을 공유하고 있는 상황에서는 숫자가 큰 값의 우선순위가 높습니다.
부모자식지간에 발생하는 margin 병합현상 : 공간을 공유하고 있는 상황에서 내부에 공백 값을 입력하면 외부도 같이 적용됩니다.
display
display : h1태그는 block요소, span태그는 inline요소이지만, h1태그를 inline요소, span태그를 block요소로 활용하고 싶을때 사용하는 방법입니다.
inline요소와 block요소 양쪽의 성격이 모두 들어가게 하기 위해서는 diaplay: inline-block;을 입력하면 됩니다.
vertical-align
vertical-align : 형제 관계에 있는 inline요소들 중에서 가장 크기가 큰 값을 기준으로 배치가 됩니다. inline요소에만 사용이 가능합니다.
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
position: static
2차원에 포함되는 속성값
-
margin-top 사용시 부모 자식 지간에 발생하는 margin 병합현상이 일어납니다.
-
top, right, bottom, left 속성을 사용할 수 없습니다.
-
부모가 높이 값을 가지고 있지 않았을 때 자식의 높이 값이 부모에게 영향을 줍니다.
모든 html 태그는 기본적으로 position: static 상태이고, 2차원에서 시작됩니다.
position: fixed
3차원에 포함되는 속성값
-
margin-top 사용시 부모 자식 지간에 발생하는 margin 병합현상이 일어나지 않습니다.
-
top, right, bottom, left 속성을 사용할 수 있습니다. 하지만 이때 좌표 기준점이 브라우저를 기준으로 바뀝니다.
-
부모가 높이 값을 가지고 있지 않았을 때 자식의 높이 값이 부모에게 영향을 주지 않습니다.
position: relative
2차원, 3차원의 특징을 모두 가지고 있습니다.
-
margin-top 사용시 부모 자식 지간에 발생하는 margin 병합현상이 일어납니다.
-
top, right, bottom, left 속성을 사용할 수 있습니다. 하지만 이때 좌표 기준점이 최초 있었던 위치를 기준으로 움직입니다.
-
부모가 높이 값을 가지고 있지 않았을 때 자식의 높이 값이 부모에게 영향을 줍니다.
top, right, bottom, left는 자기 자신이 주체가 되어서 움직이는 속성입니다.
margin/padding은 공백을 넣음으로써 밀려서 이동이 되는 속성입니다.
position: absolute
3차원적인 특징을 가지고 있습니다.
1. margin-top 사용시 부모 자식 지간에 발생하는 margin 병합현상이 일어나지 않습니다.
-
top, right, bottom, left 속성을 사용할 수 있습니다. 하지만 이때 좌표 기준점이 브라우저를 기준으로 바뀝니다.
-
부모가 높이 값을 가지고 있지 않았을 때 자식의 높이 값이 부모에게 영향을 주지 않습니다.
-
부모가 어떤 position 상태인지에 따라서 좌표 기준점이 달라집니다.
★☆
학습한 내용 중 어려웠던 점 또는 해결못한 것들
position의 경우의 수의 설명을 들으면 이해는 하는데 잠깐 있으면 바로 잊어버리고, 기존에 이해했던 부분과 새로 이해를 하기 시작한 부분도 잠시 시간이 지나면 헷갈리는 것이 어려웠습니다.
해결방법 작성
오늘 개발일지를 보면서 반복적으로 학습하는 방법이 최고라고 생각합니다.
먼저 2차원, 3차원을 원으로 그려서 서로의 특성들로 나눠놓은 그림을 큰 틀을 기억해 두고 비슷한 것들은 각각의 차이점을 위주로 반복학습을 해야합니다.
학습 소감
position을 바로 실습에 사용하기 위해서는 4가지 속성값의 경우의 수를 모두 완벽히 이해하고 반복적으로 만들어 봐야 하는 점이 마치 기술 자격증을 공부할 때 처럼 필기와 실기 모두 양립해서 공부해야 한다고 느꼈습니다.
그리고 fixed를 이용한 홈페이지들을 봤을때 어떤 식으로 만드는지 몰라서 궁금했었는데 오늘 그 궁금증이 풀려서 재미있었습니다.
