[CSS] div를 inline 속성으로 바꾸고 싶어 / display , position, float 의 역할

 

 

 

 

🧐 원래 div 속성은 블록인데, div를 인라인으로 변경하려면 어떻게 해야 할까?

 

원래 div 는 블록 속성이라서( 한 라인 전체 독점 ) 벽돌쌓기하듯 층층히 쌓이는 식으로 나오게 되는데

이러한 div를 span처럼 인라인 속성으로 바꾸려면 (인라인 속성은 우측으로 흐른다)

 

display 를 이용하면 된다!!

 

적용 예시 )

div {

display : inline; }

 

---

인라인 속성 태그

span, a, strong

 

 

---

 

<CSS 레이아웃>

 

display 에는 block , inline, inline-block 이 있다.

position에는 static, absolute , relative , fixed 가 있다.

float에는 right, left가 있다.

 

 

 

🥸 position

 

• static : 순서대로 배치

 

• absolute : 기준점에 따라서 특별한 위치에 위치 (top, left,, right, bottom 또는 오른쪽 기준으로 top/ bottom
  
  --> 기준점은 상위 엘리먼트 중에 static이 아닌 relative인 애들이 기준점이다.
         즉, 엡솔루트를 쓰려면 상위 엘리먼트가 static이 아닌 relative여야 한다.
         absolute 의 경우 top , left 값을 꼭 주는 것이 좋다고 한다.

 

• relative : 원래 자신이 위치하여야 하는 것보다 상대적으로 위치 이동하는 것
  
  relative는 자신이 원래 위치하는 곳을 기준으로 이동
  top ,right, left, bottom으로 설정한다.

 

• fixed: fixed는 body를 기준으로 움직인다고 생각하면 된다.

 

• margin : margiin은 간격
  ex) margin-top , margin-left ..