포지션

홍석현·2022년 10월 18일
0

개체를 감싸는 태그를 사용하면 그 개체에 css로 효과를 줄수있다.
ex) div,p,a,span
이 태그들은 각각의 성질이 다른데
inline과 block으로 나뉜다.
block은 화면에서 자기가 차지하는 줄만큼을 전부 영역으로 가진다.
ex)(div)

inline은 자신의 몸집만큼만 영역을 차지한다.
ex) (span)

만약 영역이 정해진 박스안에 들어가있는 경우라면 inline-block이 된다.

<div class=block>
	<div class=inline>안녕</div>
    </div>
    
<style>
	.block{
    	width:200px;
        height:200px;}
</style>

위 경우에는 block박스의 가로폭인 200px만큼만 영역을 차지하게된다.

다음으로 position 특성은 absolute,relative,fixed 이다.
absolute는 좌,상 기준 0,0인곳에 맞춰진다.
이때 지정된 구역안에 들어가있다면 구역기준 좌,상 0,0점에 정렬된다.

relative의 위치는 이전 개체의 위치에따라 조정된다.

fixed는 설정해놓은 위치에 고정시키는 특성이다.

상단바 혹은 스크롤을 내려도 우 하단에 항상 존재하는 홈버튼 등이 있다.

profile
Front-end to Full-stack

0개의 댓글