css float 프로퍼티로 박스 유동적으로 배치하기
네 안녕하세요, 이번 포스팅에서는 css를 이용하여
박스를 유동적으로 배치를 하는 방법에 대하여 알아보도록 하겠습니다.
이 방법은 이전 포스팅에서 보여드렸던 fixed와 얼추 비슷한데, 조금은 다른 점이 있습니다.
그래서 그 부분을 참고를 해주시면 좋을 것 같습니다.
그럼 지금부터 같이 보시죠.
해당 포스팅 관련 링크는 아래에 기재를 하겠습니다.
2023.04.24 - [html, css, 자바스크립트] - css position : fixed 프로퍼티로 박스 고정 배치 하기
css position : fixed 프로퍼티로 박스 고정 배치 하기
css position : fixed 프로퍼티로 박스 고정 배치 하기 네 안녕하세요, 이번 포스팅에서는 박스를 고정 배치 하는 방법에 대하여 알아보도록 하겠습니다. 박스를 고정 배치를 한다는 것은 사실 반응형
funnycoderl.tistory.com
1. 박스 유동 배치하기- float : right / left 사용
박스를 유동 배치를 할 때는 position 프로퍼티 대신에 float 프로퍼티를 씁니다.
그래서 제가 일부러 position 프로퍼티에 대하여 이야기를 할 때 분리를 시켰습니다.
그리고 float 프로퍼티가 왜 fixed 속성과 비슷하다 그랬느냐면,
fixed 속성은 브라우저 창에서 특정 위치를 고수하게 만든다고 했었죠?
float 프로퍼티 역시 fixed 속성과 같은 기능을 합니다.
브라우저 창이 줄더라도 항상 창 내에서 같은 위치를 고수하고 있습니다.
그리고 float 프로퍼티에 적용하는 속성은 right과 left입니다.
이렇게 두 가지만 쓰기 때문에 크게 외우실 부분도 없습니다.
그리고 fixed 속성과 다르게 창이 줄어들 때 이미지나 텍스트 속성을 가리는 일이 없고,
그 텍스트와 이미지를 밀어내고 공간을 만들어서 거기에 위치를 합니다.
이 부분은 제가 간단한 예제를 통하여 준비를 했으니, 함께 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 배치</title>
<style>
#float {
float : right; /* 뷰포트의 오른쪽에 붙여 */
border : 1px dotted black;
width : 7em; /* 7개의 글자 크기 */
padding : 0.25em;
margin : 1em;
}
</style>
</head>
<body>
<h3>학기말 공지</h3>
<hr>
<div>
<p id="float">
24일은 피아니스트 조성진의 크리스마스 특별
연주가 있습니다.
</p>
<p>
이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한
Java, C++ 프로그래밍 열심히 하기 바랍니다.
인턴을 준비하는 학생들은 프로젝트 개발에
더욱 힘쓰세요. 그럼 다음 학기에 만나요.
</p>
</div>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
여기에서는 right 속성을 이용하여 오른편에 배치를 하도록 설정을 했습니다.
그럼 결과 화면도 같이 보시죠.
 |
 |
이렇게 첫 화면에서도 오른쪽에 블록이 배치가 되었고,
화면이 줄어들었을 때도 화면의 오른쪽에 배치가 되었음을 볼 수가 있습니다.
그리고 그 위치를 고수하는 방식이 태그에 있는 콘텐츠를 밀어내고 공간을 만들어서
표시가 되는 것 역시 확인을 할 수가 있습니다.
이제 여러분들은 이전 포스팅과 지금 포스팅을 통하여
블록의 배치를 자유자재로 하실 수 있게 되셨습니다.
지금까지 css의 float 프로퍼티를 이용하여 동적으로 배치를 하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 그 외에 블록을 배치하는 기타 기능들에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다 ~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css visibility 프로퍼티로 태그 숨기거나 공개하기 (0) | 2023.04.24 |
|---|---|
| css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 (0) | 2023.04.24 |
| css position : fixed 프로퍼티로 박스 고정 배치 하기 (0) | 2023.04.24 |
| css position : absolute 프로퍼티로 박스 절대 배치 하기 (0) | 2023.04.24 |
| css position : relative 프로퍼티로 박스 상대 배치 하기 (0) | 2023.04.24 |
댓글