CSS-display, position

span, div를 함께 수식해줬는데도 span은 나타나지 않는다. 

(span은 내용을 입력해줘야 나타나기 때문!)

 

 

 

이렇게 html에서 내용을 추가해주면 결과창에 나온다.

span은 공간이 있으면 한줄에 내용들이 나온다.

하지만 이 형식을 바꿀 수 있는 방법이 있다.

 

 

 

 

<display>

display: block;을 입력해주면 div에서처럼 블럭형식으로 출력된다.

 

 

 

 

div에서 display: inline;을 해주면 아무것도 나오지 않는다.(div 태그에 아무 내용도 없기 때문!)

하지만 display: inline-block;을 해주면 빈 공간에 일렬로 블럭이 출력된다.

 

 

 

 

<position>

position을 쓰기 전에는 위치를 바꿔주는 코드들이 적용되지 않는다.

기본값이 static으로 정의되어 있기 때문이다.

그래서 이를 변경해주기 위해서는 position이 필요한 것.

여러 속성 값을 갖고있지만 relative는 원래 있던 위치에서 지정된 값만큼 떨어진 곳에 요소를 배치한다.

 

 

 

 

absolute : 자신이 담겨있는 가장 가까이에 있는 박스 안에서 위치 변경이 일어난다.

(이 코드 안에서는 제일 위에 있는 container를 기준으로 위치 이동)

 

 

 

fixed : 상자를 벗어나 웹페이지를 기준으로 위치 이동이 이루어진다.

 

 

 

sticky : 스크롤을 하면 제 자리에서 움직이지 않고 딱 붙어있다.