[ CSS ] 부모 dom 의 넓이에 따라 자동으로 넓이 조절하기 > html&css

본문 바로가기
사이트 내 전체검색

html&css

[ CSS ] 부모 dom 의 넓이에 따라 자동으로 넓이 조절하기

페이지 정보

작성자 웹지기 댓글 0건 조회 5,014회 작성일 18-09-28 18:02

본문


jy관리자스킨, 아이콘샵에 보면 좌측 메뉴바 또는 검색영역이 있습니다.

제사이트에만 쓰려면 사이즈를 고정하여 사용하면 상관이 없겠지만,

배포해야하는경우에 설치하는 사이트에 따라 사이즈가 틀리므로 B 영역의 사이즈가 가변적이어야 합니다.
[code]
.A {float:left; width:200px;}

.B {margin-left:220px;}
[/code]
A 에 position:absolute 를 주고

B 에 margin-left:220px; 을 줘도 똑같은 효과를 볼 수있습니다.

220 픽셀을 준것은 A,B 사이의 여백입니다.
 

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 42건 3 페이지
  • 12 [ CSS ] css 정의 순서
  • css의 우선 순위 규칙 어떻게 될까? 기본적으로 맨뒤에 나오는 css가 우선순위가 높음. !important > inline style attribute > id 다른 attribute > tag element 순으로 우선순위가 높다짐. 우선순위가 같으면 css가 많은 녀석의 우선순위가 높음. !important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많다. !important는 css 값 뒤에 붙여진 ...
  • 웹지기 10-04 5536 0 0 댓글 0
  • 11 [ css ] 최고의 반응형 CSS 프레임워크 18선
  • 1. Bootstrap가장 많은 사람들이 쓰고 가장 널리 알려진 부트스트랩입니다. LESS를 사용하였으며 12컬럼 반응형 그리드 시스템,수많은 위젯, 컴포넌트, 자바스크립트 플러그인을 지원하며 다운받을때 원하는 기능만 커스터마이즈 할수있습니다.2. Foundation013년 2월에 최초의 Mobile first 프레임워크라는 캐치로 릴리즈된 Foundation4. Sass와 Compass를 사용부트스트랩보다 더 오래된 프레임워크로 현재 부트스트랩 아성에 버티는 거의 유일한 프레임워크https://...
  • 웹지기 10-03 10900 0 0 댓글 0
  • 9 [html] 특수문자 / 키보드 자음 특수문자 찾기
  • ㅂ +[한자키]─│┌┐┘└├┬┤┴│━┃┏ ┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂┒┑┚┙┖┕┎┍┞┟┡┢ ┦┧┩┪┭┮┱┲┵┶┹┺┽┾╀╁╃╄╅╆╇╈╉╊ㅈ +[한자키]0123456789ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩㄷ + [한자키]+-<=>±×÷≠≤≥∞∴♂♀∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨¬→↔∀∃∮∑∏ㄱ + [한자키] !',./:;?^_`| ̄、、。·‥…¨〃­―∥\∼´~ˇ˘˝˚˙¸˛¡¿ːㅅ + [한자키]㉠㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻㈀㈁㈂㈃㈄㈅㈆㈇㈈㈉㈊㈋㈌㈍㈎㈏㈐㈑㈒㈓㈔㈕...
  • 웹지기 09-30 4357 0 0 댓글 0
  • 6 [ HTML ] DTD(Document Type Definition) 란?
  • DTD(Document Type Definition)는브라우저의 랜더링 모드를 지정해주고유효성 검증기(Validator)의 기준이 되므로(X)HTML 문서의 상단에 반드시 선언 해 주어야 합니다.만일 DTD를 생략하거나 형식이 잘못된 문서일 경우에는웹 브라우저마다 코드의 해석 방식이 다른 Quirks mode로 랜더링이 되기 때문에엉뚱한 결과물로 출력되는 문제에 직면하게 됩니다.DTD의 정확한 역할과 의미등을 알아보고 왜 표현하기 힘든 Strict타입이 권장되는지 알아봅니다.<!DO...
  • 웹지기 09-28 6056 0 0 댓글 0
  • 열람중 [ CSS ] 부모 dom 의 넓이에 따라 자동으로 넓이 조절하기
  • A : 좌측 메뉴(넓이고정)B : 본문 내용(부모dom 의 사이즈에 따라 가변적으로 변할경우)jy관리자스킨, 아이콘샵에 보면 좌측 메뉴바 또는 검색영역이 있습니다.제사이트에만 쓰려면 사이즈를 고정하여 사용하면 상관이 없겠지만,배포해야하는경우에 설치하는 사이트에 따라 사이즈가 틀리므로 B 영역의 사이즈가 가변적이어야 합니다. [code].A {float:left; width:200px;} .B {margin-left:220px;}A 의 사이즈는 고정이며B 의 사이즈는 부모 dom 의 사이즈에 따...
  • 웹지기 09-28 5015 0 0 댓글 0
  • 3 [ html / css ] html / css 효과 튜토리얼 모음
  • HTML / CSS[HTML/CSS] 001.CSS3를 이용한 탭 메뉴(tab menu) 만들기How to Create a CSS3 Tabbed Navigation[미리보기][HTML/CSS] 002.CSS3를 이용한 버티컬 네비게이션 메뉴 만들기Orman Clark’s Vertical Navigation Menu[미리보기][HTML/CSS] 003.CSS3를 이용한 오목한 버튼 이미지 코딩하기Tagtastic Tag Cloud with CSS Transformations[미리보기][HTML/CS...
  • 웹지기 09-28 13728 0 0 댓글 0
  • 2 [ CSS ] 텍스트 줄바꿈, 글자자르기
  • white-space공백 줄바꿈문자 처리방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등)white-space:normal;normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다.- 코드에서의 원래 텍스트여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파white-space:pre;띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다.white-space:nowr...
  • 웹지기 09-11 20393 0 0 댓글 0
  • 1 [ css ] less && sass 사용
  • less 클라이언트쪽 사용방법head 부분에 다음과 같은 파일을 등록<link rel="stylesheet/less" type="text/css" href="<?php echo G5_THEME_CSS_URL;?>/styles.less" />less파일을 먼저 올려야 함<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2...
  • 웹지기 09-11 4772 0 0 댓글 0
게시물 검색

회원로그인

접속자집계

오늘
8,931
어제
56,257
최대
61,067
전체
10,972,533

그누보드5
Copyright © funyphp.com. All rights reserved.