5일차 요약
- 마진 병합 현상
- position의 네 종류
- 박스모델 역시 검사를 통해 살펴보는 것이 유효
학습 보고
실습 내용 / 결과물 출력 첨부
레이아웃 - 박스모델
-
마진 - 볼더 - 패딩
마진과 패딩은 모두 컨텐츠 주변에 영역을 만든다. 이에 따라 컨텐츠의 위치가 영향을 받는데, 볼더(테두리)를 기준으로 생각하면 각각의 영역을 구분하는 것이 용이하다.특히 패딩의 경우 그림에서 보이듯 컨텐츠의 배경색을 공유하고 있다.
-
margin, padding의 작성예제
margin: 100px 0 0 100px; padding: 100px 0 0 100px;이와 같이 작성하면 위쪽부터 시계방향으로 속성값을 갖는다. 예시의 경우 위100px/우측,하단0px/좌측100px의 값을 갖게 되는것.
*코드를 간소화하면 웹페이지를 불러오는 속도가 빨라진다.
-
html문서 작성 팁
html, body { margin: 0; padding: 0;}html과 body태그 안에는 기본적으로 마진과 패딩이 있다. 문서 작성 시 혼동을 줄이기 위해 없애고 시작하는 것이 좋음.
또한 위와 같이 마진, 패딩의 속성값으로 숫자 하나를 입력하면 네 방향의 속성값을 그 숫자로 지정해주는 효과가 있다고 함.
-
box-sizing: border-box;
이 코드를 사용하게 되면 볼더를 포함한 컨텐츠 크기의 총 합이 width와 height로 지정해준 200x200 사이즈로 고정되는 것을 확인할 수 있다.
레이아웃 - 마진 병합 현상
형제지간의 마진병합
html
<body> <div class="margin-one"></div> <div class="margin-two"></div> </body>CSS
.margin-one { width: 100%; height: 100px; background-color: yellow; margin-bottom: 100px; } .margin-two { width: 100%; height: 100px; background-color: blue; margin-top: 50px; }결과출력
margin-one의 margin-bottom이 100px
margin-two의 margin-top이 50px이나
두 마진 영역의 합이 100px 인 모습이다.
부모-자식간 마진병합
html
<body> <div class="margin-parent"> <div class="margin-child"></div> </div> </body>CSS
.margin-parent { width: 300px; height: 300px; background-color: yellow; } .margin-child { width: 150px; height: 150px; background-color: blue; margin-top: 100px; }결과출력
margin-child에 적용한 margin-top값이 margin-parent의 영역 안에서 적용된 것이 아니라 margin-parent를 기준으로 적용되어 전체가 100px 만큼 아래로 이동되었다.
레이아웃 - 디스플레이
block요소와 inline요소
html
<h1>block</h1> <h1>block</h1> <h1>block</h1> <span>Inline</span> <span>Inline</span> <span>Inline</span>
아래와 같이 출력된다.
block
block
block
Inline Inline Inline
h1과 같은 블럭 속성의 요소들은 세로로 출력되고 영역값을 지정할 수 있다.
span과 같은 inline 속성의 요소들은 한 줄에 출력되고 영역값을 지정할 수 없다.
display:
- 디스플레이를 사용하면 요소의 성질을 바꿀 수 있다.
html
<h1>block</h1> <h1>block</h1> <h1>block</h1> <span>Inline</span> <span>Inline</span> <span>Inline</span>CSS
h1 { display: inline-block; width: 100px; height: 100px; background-color: yellow; margin-top: 100px; } span { display: block; width: 100px; height: 100px; background-color: pink; margin-top: 100px; }결과출력
display 명령어를 통해 블럭과 라인의 속성을 바꿀 수 있으며, 예시에서 볼 수 있듯 line-block와 같은 블록의 특성을 가지면서 한 줄에 작성되는 속성값도 줄 수 있다.
레이아웃 - vertical-align
- inline / inline-block 속성을 가진 요소들을 정렬하는데 사용.
- 가장 큰 요소를 기준으로 위, 아래, 가운데로 정렬 가능.
*img 태그는 inline-block 속성을 가지고 있다. 한 줄에 나열되며 영역값을 지정할 수 잇음.
레이아웃 - 포지션
차원?
웹사이트는 2차원으로만 이루어져있지 않다.
포지션 속성은 선택할 영역이 2차원일지 3차원일결정한다.
포지션 속성을 이해하기 위한 지표
- margin-top 사용시 부모자식간 마진병합이 발생하는가?
- top, right, bottom, left 속성을 사용할 수 있는가?
- 자식의 높이 값이 부모에게 영향을 주는가?
position의 종류
- static
- 모든 html태그의 디폴트값임
- 자식에게 margin top을 적용할 시 마진병합이 발생한다
- top, right... 를 사용할 수 없다.
- 부모의 높이값이 정해지지 않았을 때 자식의 높이값에 영향을 받는다
- 2차원이다(위의 항목들은 2차원적 특성)
- fixed
- 스태틱과 반대
- 마진병합 발생 안함
- top, right... 사용가능 (기준은 브라우저 왼쪽 상단, 즉 (0,0)을 기준으로 움직임
- 부모의 높이값에 영향을 주지 않음
- 3차원이다
- relative
- 마진병합 발생함
- top, right.. 사용 가능 (기준은 자신의 원래 위치)
- 부모의 높이값에 영향을 준다.
- 2차원과 3차원의 특징을 모두 갖고있다
- absolute
- 마진병합 발생 안함
- 기본적으로는 fixed와 마찬가지로 브라우저의 (0,0)을 기준으로 top, right.. 사용가능하다. 하지만 부모의 포지션 상태에 따라 좌표 기준점이 달라질 수 있음.
- 부모의 높이값에 영향을 주지 않음
- 3차원.
추가 학습
미해결 - 솔루션
x
질문거리
position들 간의 관계를 파악하기 위한 학습 과제로 무엇이 좋을까.
복습
x
학습 소감
슬슬 학습 내용이 쌓여간다. 하나의 지속적인 프로젝트를 진행하면 좋을텐데 방법을 잘 모르겠다.
