1. position 속성 - relative, absolute, fixed
*relative
static 과 같이 element가 일반적인 흐름에 따라 배치된다. 그러나 static 은 top, bottom,right,left와 같은 위치를 정할 수 없다.
top: 100px;을 속성에 줄시 적용된 요소만 위치가 변경된다.
!주의: relative 사용시 글자가 여려개가 보일 수 있음!
*absolute
일반적인 흐름을 따르지 않는다. 조상 element의 상대적 위치로 배치된다. 만약 조상 element가 없으면 top: 100px; 만큼 떨어지고, body를 기준으로 스크롤에 따라 움직인다.
*fixed
fixed역시 absolute와 마찬가지로 element가 문서의 일반적인 흐름에 제어된다. 그러나 viewport를 기준으로 해서 배치된다.
!주의: 스크롤 사용시 고정되어 움직이지 않는다.!
!**viewport : 웹페이지에서 사용자에게 보여지는 영역!
2. inline, inline-block, block 에 대해서
*display: inline
inline: 태그로는 span이 있다, text 크기만큼만 공간차지 하며 줄바꿈 x
1.width,height 사용 x
2.line-height 마음대로 조정 x
3.margin, top, bottom 사용 x
!line-height는 line-box 의 높이를 지정 하며 텍스트간의 줄 간격을 조절할 때 사용한다.!
ex> a, button, i, img, input, object, span, var....
*display: inline-block
inline-block: inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다.
줄바꿈 (x)
width, height, line-height, margin, top, bottom, text-align(o)
!inline-block 공백 생길시 부모 태그에 font-size: 0 !
*display: block
block : 태그로는 div가 있다. 태그 사이에 줄바꿈 (o)h1-h6
ex> header, h1-h6 , table, section, output..
*inline vs block(x)
인라인 요소는 height
인라인 요소는 width
블럭요소는 text-align
블럭요소는 vertical-align
3. float에 대해서
inherit: 부모 요소에서 상속
left: 왼쪽 블록박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐른다.
right: 오른쪽 블록박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐른다. 이후에 clear 속성이 있으면 페이지 흐름 달라진다. none 이 아니라면 display 속성은 무시된다.
none: 요소 x, left와 right 사용시 display는 무시된다 (none 은 예외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.
참고:
https://junistory.blogspot.com/2017/07/html5.html
https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1
