display, position
Block-level, Inline-level에 따라 페이지에 콘텐츠가 배치됨
CSS를 통해 배치되는 콘텐츠의 레이아웃을 결정 가능
display
display는 콘텐츠의 표시 방법을 정하는 태그로
이 태그를 통해 Block-level, Inline-level, Flexbox로 변경 가능
(div를 Inline으로 span을 block으로)
position
position을 통해 콘텐츠의 위치를 바꿀수있음
position에 사용되는 일반적인 속성
position의 속성과 특징
static;
정적 위치, CSS에서 지정된 기본 위치로
HTML에 정의된 순서대로 보여짐(기본값)
relative;
상대적 위치, 원래 콘텐츠가 있던 자리에서
top, bottom, laft, right태그를 이용해
상하좌우 위치를 조정해줘야함
absolute;
절대적 위치, **relative속성을 가진부모를 기준으로 위치 조정**
(없으면 가장 바깥에 있는 부모(<body>)를 기준으로 위치 조정)
마찬가지로 top, bottom, laft, right태그를 이용해
상하좌우 위치를 조정해줘야함
가장 많이 하는 실수로
부모의 position을 relative로 만들지 않고
자식의 position을 absolute로 지정하는 경우가 많다.
fixed;
웹페이지를 기준으로 위치가 조정됨
(초기 위치는 처음 만들어진 자리)
페이지를 스크롤해도 지정한 위치에 남아있음
마찬가지로 top, bottom, laft, right태그를 이용해
상하좌우 위치를 조정해줘야함
(하나의 속성으로 자리를 조정할 경우 초기 위치를 무시함)
또한 위치를 조정하면 다른 요소위에 덮어씌워지게됨
(가장 위로 올라오는 레이어로 적용되었다고 볼수있음)
sticky;
원래 있던 콘텐츠 자리에 있으면서
스크롤을 내려도 사라지지 않고 화면에 붙어있는 태그
margin, padding, border
margin
margin은 Box의 Borde의 바깥에 있는 공간(가장 바깥공간)
margin의 작성법은 네가지가 있다.
- 모든 방향에 똑같이 적용하는 방법
body {
margin: 10px;
}- 상하, 좌우 다르게 적용하는 방법
(먼저 적는 값이 위,아래)
body {
margin: 10px 15px;
}- 모든 방향을 다르게 적용하는 방법
(시계방향으로 상 우 하 좌)
body {
margin: 10px 15px 20px 25px;
}- 특정 부분만 적용하는 방법
이 방법은margin-top,margin-bottom,margin-left,margin-right를 이용한다
body {
margin-top: 10px;
}margin 작성 시 주의 사항은 두 가지가 있다
- 2개의 Box요소의
border가 같을 경우
두 요소의 margin은 하나로 취급된다
이를 collapsing margins이라고 한다. - Inline요소의 경우
margin이 좌, 우만 적용된다.
padding
padding은 Box의 border안쪽에 있는 공간(제일 안쪽 공간)
padding의 작성법은 margin과 같다.
사용시 주의사항
기본적으로 컨텐츠의 크기를 차지하게 된다
다만 크기가 지정되어 있다면 지정된 크기를 유지하기위해
컨텐츠의 크기가 늘어나게 된다.
이를 방지하기 위해서 box-sizing: border-box;를 사용한다
border
border는 Box의 경계 (margin과 padding 사이)
border의 스타일은 많지만 대체로 solid만 사용한다.
작성 방법은 아래와 같다
(사이즈, 스타일, 색상)
div {
border: 1px solid #000000;
}border의 스타일은 MDN에서 확인할 수 있다.
또한, border의 경우 Inline 요소에도 적용된다
