Position
position프로터티를 사용하면,html코드와 상관없이 위치하고 싶은곳에 요소를 위치할 수 있다.
position:static
일단 모든 태그들은 처음에 position: static 상태다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다. (기본적으로 static이라 따로 써주지 않아도 됨.)
postion:relative
top, right, bottom, left 속성을 사용해 위치 조절이 가능하다.
각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동한다.
css
.relative {
position: relative;
top: 20px;
left: 30px;
}top:20px이면 위에서 20px 떨어져있고 left:30px은 왼쪽에서 30px 떨어져 있는것을 의미한다.
마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라가게 된다.
right: 0; 의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻이라 추가하게되면 부모의 우측에 딱 붙어서 나온다.
postion:absolute
부모 중에 포지션이 relative, absolute, fixed인 태그면 그 부모태그 기준으로 움직인다.
만약에 부모 중에 relative, absolute, fixed 태그가 없으면 body로 기준이 된다.
p {
position: absolute;
right: 0;
bottom: 0;
}right: 0; 의 의미는 오른쪽으로부터 0만큼 떨어졌다는 뜻이라 부모의 우측에 딱 붙어서 나온다.
position:fixed
스크롤을 내려도 그 자리에서 고정되어 있는 태그
display
display:block
태그가 출력되는 블록 박스의 크기를 변경할 수 있으며, 한 줄을 독점적으로 차지하여 양 옆에 다른 요소가 배치되지 않는다. <p> 태그 등이 블록 형태로 위치한다.
display:inline
새 라인에사 시작하지 못하고 라인 안(inline)에서 배치된다. width, height로 크기조절이 불가능하며 margin값도 조절 불가하다.
dispaly:inline-block
새 라인에사 시작하지 못하고 라인 안(inline)에서 배치된다. 인라인 속성과 다르게 크기와 margin값이 조절 가능하다.<span> 태그 등이 인라인형태로 위치한다.
display:none
박스가 생성되지않고 공간또한 차지하지 않는다.
float
float는 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다.
◼️ none - 띄우지 않음(기본값)
◼️ left - 왼쪽에 띄움
◼️ right - 오른쪽에 띄움
◼️ inherit - 부모 요소로부터 상속함
이미지처럼 aside를 오른쪽으로 위치시키고 싶으면 float:right;를 사용하여 적용하면 된다.
aside{
float: right;
}