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 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
대부분의 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는 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 property이다.
전체적인 페이지의 레이아웃을 잡을때도 정말 중요한 도구이다.