1. position 속성 - relative / absolute / fixed /static
position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다. 상하좌우 위치를 설정할 수 있다.
- static (기본값) :위치를 지정하지 않고 자동배치.
- relative : 위치를 계산할때 static(부모 요소)의 원래 위치기준으로 지정.
- absolute : 원래 위치와 상관없이 원하는 위치를 지정해서 배치.
- fixed : 화면이 바뀌어도 지정한 위치에 고정.
[ static ]
position 속성의 기본값. position 속성을 부여하지 않았을 때의 default값.
[ relative ]
static일때 현재 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성 값. top, right, bottom, left 등으로 새로운 위치를 지정.
[ absolute ]
위치가 지정된 부모 요소를 기준으로 상대적 위치를 지정할 수 있는 속성 값. 부모 요소는 position 속성이 relative 속성으로 지정 되어야함.
[fixed]
브라우저 창을 기준으로 (default 위치는 좌측 상단 모서리) 위치를 지정할 수 있는 속성 값. 스크롤의 영향을 받지 않으며 고정된 위치를 가짐.
2. inline, inline-block, block
display porperty
html의 태그들은 크게 block 요소와 inline 요소로 나뉜다.
<출처 : https://dev.to/lupitacode/la-propiedad-display-en-css-1b6a>
[inline]
주로 텍스트 입력시 이용, 줄바꿈 적용 X 한줄로 텍스트가 나란히 배치, 텍스트 크기와 같은 공간을 차지.
- width, height 속성 적용불가
- margin, padding 속성 top/bottom 간격이 적용되지 않음
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>
<code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>
<button>, <cite> 外[ block ]
block 속성은 한 영역을 차지하는 박스, 다음 태그는 inline과 달리 줄바꿈 적용.
- width, height 속성 적용가능
- margin, padding 속성
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>,
<dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>
<pre>, <ul>, <p>, <ol>, <video> 外 [ inline-block ]
inline 속성과 같이 줄바꿈 없이 한줄에 적용되며, block 속성과 같이 크기 등을 조절할 수 있다. 위의 두 속성을 동시에 가지고 있다.
- width, height 속성 적용가능
- margin, padding 속성 적용가능
<button> , <input>, <select> 外3. Float
float 속성이 적용된 태그를 좌우로 부유하게 만드는 레이아웃 기법.
태그를 적용한 객체가 붕 떠있기 때문에 레이아웃을 유연하게 배치할 수 있다. 텍스트로 그림을 둘러싸기 위해 사용된다.
- position 속성의 absolute 값과 동시에 사용할 수 없다.
- left, right 값으로 요소가 떠있는 방향을 지정할 수 있음.
- none 값으로 방향을 설정하지 않을 수 있음.
Clear
float 속성이 적용된 태그를 해제가 가능하다. clear 속성을 부여한 문단 부터는 다시 float 의 영향을 받지 않음. 해당 문단부터 그림을 비켜가지 않는다고 생각하면 편하다.
- left, right 값으로 좌,우측에 적용된 float 속성을 취소
- both 값으로 좌우측 동시에 취소
- none은 default 값. claer 속성을 설정하지 않은 기본 값.
