TIL 0420 position, float

position 속성 - relative, absolute, fixed

position 속성의 기본값은 static이다
position relative 는 기본 위치에서 별도의 위치를 설정해 주면 움직일 수 있다.(top, bottom, left, right 로 지정할 수 있다. 위치를 지정하기 전까지는 static 이랑 똑같다)
position absolute 는 절대적인 위치이다 가장 가까운 부모를 기준으로 위치가 지정되는데(부모의 position이 static이 아닌) 없다면 뷰포트를 기준으로 지정된다.
position fixed 는 뷰포트를 기준으로 위치가 지정되는데( 스크롤을 내려도 움직이지 않는다 ) top, bottom, left, right 로 위치를 지정할 수 있다 보통 navigation bar 같은 것에 쓰인다.

.content1 {
   position: relative;
   top: 20px;   //원래 있던 위치에서 위에서 20px 밑으로 내려서 위치한다
}
.content2 {
   position: absolute;
   left: 0;  //부모가 content1 일 때 부모의 영역 기준으로 맨 왼쪽에 붙는다
}
.content3 {
   position: fixed;
   top: 0;   //뷰포트 기준 맨 위에 붙는다
}

출처 https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/

inline, inline-block, block 에 대해서

block 은 한 줄을 다 쓰는 요소이다 block 태그로는 div, p, header, footer, section 등이 있다.
inline 은 해당 요소만큼만 공간을 가진다 inline 태그로는 span 태그, a태그, strong태그 등이 있다. inline 은 width 와 height 값과, margin 과 padding 의 상하 설정이 안된다.(좌,우 설정은 가능하다)
inline-block 은 inline 요소처럼 좌우로 배치가 가능하다. 하지만 inline에서는 할 수 없던 width 값과 height 값을 설정할 수 있다. 그리고 margin 과 padding 의 상하 설정도 가능하다.

section {
   display: inline-block;
   width: 300px;  // 변경 가능
   height: 100px;  // 변경 가능
}
span {
   width: 300px;  // 변경 X
}

출처 https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/

float에 대해서

float 는 요소를 띄울 수 있다 left 와 right 로 위치를 지정할 수 있다.
float 이 적용된 요소에 가려 안보이는 요소는 overflow: hidden; 으로 해결할 수 있다.
clear 이 선언된 다음부터는 float 의 영향을 받지 않는다.
자식에게 float 이 적용된 요소의 부모에 clear을(clear: left, right, both 를 쓴다) 하고싶으면 :after 속성을 이용하면 된다.

.content1 {
   float: left;    //content1 을 왼쪽으로 띄운다
}
.content2 {
   overflow: hidden;   //float 가 적용되지 않은 요소가 제대로 나올 수 있게 해준다
}
// float 를 포함하는 부모 요소에 clear 주기
section:after {
   content: "";  //:before or :after 속성은 문자 작성을 위한 것이므로 content가 없으면 작동이 안된다
   clear: both;
   display: block;  // clear:both 는 block 속성에만 작동한다 inline 은 작동 안함
}

출처 https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/

content-box, border-box에 대해서

box-sizing 을 content-box 로 설정하면 콘텐츠를 기준으로 크기가 계산된다.
box-sizing 을 border-box 로 설정하면 width 값 안에 콘텐츠 + 안쪽여백 + 테두리 까지 포함해서 크기가 계산된다.

.content1 {
   box-sizing: content-box;
   width: 300px;
   height: 100px;
   padding: 10px;
   margin: 5px;
   border: 5px solid black;
}
.content2 {
   box-sizing: border-box;
   width: 300px;
   height: 100px;
   padding: 10px;
   margin: 5px;
   border: 5px solid black;
}
// 둘의 크기가 같아 보이지만 content1 의 전체 너비는 340px 이고 content2 의 전체 너비는 310px 이다.