반응형
css position : fixed 프로퍼티로 박스 고정 배치 하기
네 안녕하세요, 이번 포스팅에서는 박스를 고정 배치 하는 방법에 대하여 알아보도록 하겠습니다.
박스를 고정 배치를 한다는 것은 사실 반응형 웹을 만드는 것을 훨씬 선호하고 고수하는
우리들의 입장에서는 조금 이상하다 느낄 수가 있습니다.
하지만 가끔 고정적으로 배치를 해야만 하는 경우가 생기곤 합니다.
그래서 자주 쓰이는 방법은 아니지만, 쓰이기는 하기 때문에 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1 - 4. 고정 배치하기 - position : fixed 사용
고정 배치는 html 태그를 브라우저의 창이 유동적으로 크기가 바뀌어도
보이는 위치를 고정하는 기능입니다.
그래서 브라우저 창에 반응하여 계속 그 위치를 고수한다는 특징이 있습니다.
그럼 간단한 예제와 함께 보시죠.
반응형
<!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>고정 배치</title>
<style>
#fixed {
position : fixed;
bottom : 10px;
right : 10px;
width : 100px;
padding : 5px;
background : red;
color : white;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<img src="media/christmastree.png"
width="300" height="300"
alt="크리스마스 트리">
<div id="fixed">예수님이 탄생하셨습니다.
</div>
</body>
</html>이렇게 한 번 작성을 해봤습니다.
제가 fixed를 이용하여 '예수님이 탄생하셨습니다.'라는 말을 고정을 시켰습니다.
그러면 이제 어떻게 결과가 나오는지 한 번 보시죠.
 |
 |
이렇게 화면의 크기가 변하더라도 계속해서 창 내에서
같은 위치를 고수하고 있음을 알 수가 있습니다.
여기까지 박스 고정 배치를 하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 박스를 유동적으로 배치하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css z-index 프로퍼티 이용하여 html 태그 수직으로 쌓기 (0) | 2023.04.24 |
|---|---|
| css float 프로퍼티로 박스 유동적으로 배치하기 (0) | 2023.04.24 |
| css position : absolute 프로퍼티로 박스 절대 배치 하기 (0) | 2023.04.24 |
| css position : relative 프로퍼티로 박스 상대 배치 하기 (0) | 2023.04.24 |
| css position : static 프로퍼티로 박스 정적 배치 하기 (0) | 2023.04.24 |
댓글