TIL. CSS position property

한상웅·2021년 7월 7일
0

HTML/CSS

목록 보기
6/6
post-thumbnail

position 속성 - relative, absolute, fixed

css에서 position property를 사용하면 html코드와 상관없이 어느 위치에나 요소를
그릴수 있다.

1)relative
position:relative; 자체만으로는 특별한 의미가 없습니다. 특정 위치로 이동하지도 않
는다. 위치를 이동시켜주는 top,right,bottom left property가 있어야 이동가능.
부모중에 position이 realative, fixed,absolute하나라도 있으면 그 부모에 대해
절대적으로 움직이게 된다.

2)avbsolute
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다.
특정 부모에 대해 절대적으로 움직이게 된다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.

inline, inline-block, block 에 대해서

대부분의 HTML element는 block 요소이다.

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 있다.

block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수
없다는 뜻입니다. block 요소와 성질이 반대인 inline 요소에는

<span>, <a>, <img> 태그 등이 있다.

inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수
있다는 뜻이다.
block 요소들은 이런식으로 항상 새 줄에서 시작하며 좌우로 최대한 늘어납니다.
html작업을 할때 이렇게 inline, block에 의해 태그가 결정되더라도 css를 통해서 성질을 바꾸는건 가능하다.
예를 들면 < p >태그도 css사용해서 inline스타일로 바꾸면 < span >과 똑같은
디자인이 된다.
inline 성질을 갖도록 하는 css property는 display와 float가 있다.

 inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

위처럼 해당 property에 위과 같이 값을 부여하면
요소 옆에 요소가 위치하는 inline성질로 변하게 된다. 반대의 경우도 가능.

.block-span {
  display: block;
}

위의 css로 < span >은 < p >태그와 똑같은 성질을 갖게 된다.
추가적으로 none값을 적용할경우 해당 요소가 화면에서 보이지 않는다.
어차피 안 보일 요소지만 작성하는 이유는 interactive한 웹을 구현할 수 있기
때문이다.

float

float는 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 property이다.
전체적인 페이지의 레이아웃을 잡을때도 정말 중요한 도구이다.

profile
Let's get it!

0개의 댓글