히치하이킹

CSS.. 좌 하단에 배너 위치시키기..

· 2018-05-24 (목) 00:51:13 · 7890 · 5

간혹 클라이언트들로 부터 요청을 받다보면..

좀 의아한 요청 또는 생각지도 못한 요청을 받게 됩니다.

 

이번 제가 진행한 요청사항은.. 좌 메뉴 하단에 연락처 배너를.. 

콘텐츠 길이와 관계없이 무조건 하단에 뜨게 해달라고 요청을 받았네요..

 

콘텐츠 최하단 무조건 고정이 아닌 좌 메뉴 안에서 하단이라니 ㅜ

 

한 40분 헤매서 저와 같이 고생하지 말자는 의미로 공유합니다.

저희는 시간이 돈이자나요.

 

#leftmenu {position: relative; width: 100px; height: 125px;}
#tel {position: absolute; right: 10px; bottom: 10px;}

<div id="leftmenu">
  <div id="tel">
    내용입니다
  <div>
<div>

 


바깥 div의 position 속성을 relative로 두면

자식 div인 #tel이 absolute속성을 가지게 되어도 부모 사이즈 안에서 움직이게 됩니다.

 

예시를 막 적다보니 좀 적당하지 않지만...

제 경우엔 콘텐츠를 둘러싸는 wrapper div안에 위치시켜 처리했네요..

 

사소하지만 저와같이 css에 약한 개발자분들께 도움이 되길..

|

댓글 5개

잘 보고 갑니다.^^
제가 가장 취약한 부분이 CSS입니다.
CSS 학습하기 좋은 사이트 소개 좀 부탁드립니다.
굿팁 고맙습니다.
2018-05-24 (목) 16:00:36
저도 공부를 하다보면 CSS는 어렵더라구요 그래서 늘 구글에서 검색해서 이리저리 맞춰보곤 합니다 ㅜ 따로 공부하려 찾아보고 그러진 않아요 일하다보면서 필요에 따라서 보다보니까요..
뭐 개발이 그렇겠지만 니즈가 거의 정해져있다시피 해서 여러 조건에 맞춰 개발하다 이전에 했던걸 응용하곤 합니다
좋아요..잘쓰겠습니다.감사합니다.
2018-06-27 (수) 13:20:36
좋은 팁이네요
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
18-07-05 조회 6,722
18-07-04 조회 7,126
18-07-03 조회 7,553
18-07-01 조회 7,167
18-07-01 조회 9,032
18-06-29 조회 7,000
18-06-28 조회 6,997
18-06-27 조회 7,361
18-06-25 조회 1.6만
18-06-14 조회 1.1만
18-06-13 조회 8,700
18-06-12 조회 8,496
18-06-11 조회 1.1만
18-06-07 조회 6,023
18-06-07 조회 1만
18-06-06 조회 8,758
18-06-05 조회 6,652
18-06-04 조회 7,773
18-05-30 조회 6,635
18-05-30 조회 6,528
18-05-29 조회 6,700
18-05-28 조회 5,547
18-05-24 조회 6,324
18-05-24 조회 8,334
18-05-24 조회 7,891
18-05-23 조회 6,770
18-05-20 조회 6,242
18-05-18 조회 9,372
18-05-17 조회 6,228
18-05-17 조회 1.3만