Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

css positon: fixed

아래 css코드는 해당 클래스의 객체를 화면 아래쪽에 고정시킨다. 스크롤을 해도 여전히 그 위치에 있다. 즉, 떠다니는 애들처럼 되는 것이다.

.클래스이름 {
	position: fixed;
	bottom: 0;
	left: 0;
}

fixed 속성의 특징은 다음과 같다. 일단 오늘 내가 다루면서 알게 된, 알아놓으면 좋을 점에 대해 쓴 거다.

  1. top / left / right / bottom 등으로 위치를 지정해 줘야 한다.
  2. 위치를 지정해 주지 않으면 객체의 코드상 위치가 고정될 위치가 된다.(지정하지 않고 해봐라.)
  3. 위치를 지정해주면 상위 객체를 무시한 채로 위치를 잡는다. (left:0 으로 놓으면 화면 가장자리에 위치한다.)
  4. 너비가 inline처럼 된다. block처럼 만들고 싶다면 width를 지정해 줘야 한다. 그냥 전체 너비로 하고 싶다면 고민할 것 없이 100%로 하라. 그러면 화면 가로사이즈가 된다.(상위 객체의 가로사이즈를 상속받는 게 아니라는 점이 중요하다.)

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다