CSS 위치 레이아웃

(2019-08-22)

position, CSS 위치, CSS float, CSS clear

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
통신/네트워킹 >   1. 통신 이란?
  2. 신뢰적 통신
[통신이론]
[선로/전송]
[통신망 일반]
[회선교환(PSTN)]
[무선/이동통신]
[광통신]
[인터넷/데이터통신]
인터넷/데이터통신 >   1. 데이터통신망
  2. 인터넷
  3. 데이터 네트워크 설계
[데이터 단위]
[프로토콜/계층]
[데이터 링크]
[TCP/IP]
[라우팅]
[인터넷 QoS]
[인터넷 관리]
[인터넷 응용]
[인터넷 기타]
[패킷교환(PSN)]
[인터넷 관련 기관]
인터넷 응용 > [NetBIOS]
[DNS]
[가상단말]
[FTP]
[전자메일]
[VoIP]
[웹기술]
[VPN]
[무선인터넷]
[전자상거래]
[개인 컨텐츠]
[인터넷 기타 응용]
웹기술 >   1. 웹 이란?
  2. 하이퍼텍스트
[웹 구성]
[HTTP]
[웹 페이지]
[웹 식별]
[웹 서비스]
[차세대 웹]
[웹기술 기타일반]
웹 페이지 > [마크업 언어]
[DOM,BOM]
[기능 요소]
[웹 디자인]
웹 디자인 >   1. 웹 디자인
  2. 스타일 시트
[CSS]
CSS   1. CSS
  2. CSS 선택자
  3. CSS 속성
  4. CSS 속성값
  5. CSS 박스 모델
  6. block,inline 요소 유형
  7. CSS 색상
  8. CSS 배경
  9. CSS 위치
  10. CSS 정렬
  11. CSS 텍스트
  12. CSS 리스트
  13. CSS @ 규칙
  14. CSS 그림자
  15. CSS 시간 변형
  16. CSS 2차원 변형

1. CSS에 의한, 태그 배치(positioning) 및 레이아웃(layout) 관련 속성

  ㅇ 박스 위치 제어 : position, left/right/top/bottom
  ㅇ 박스의 유형 제어 : display       ☞ display 참조
  ㅇ 박스의 유동 배치 : float
  ㅇ 박스의 수직 제어 : z-index
  ㅇ 박스의 보이기/숨김 제어 : visibility
  ㅇ 박스 밖 자를지 여부 : overflowCSS 박스 모델 참조


2. CSS 속성 값  [ 위치 지정 ]

  ㅇ 기준 위치 지정    { position : 값; }
     - position : static, relative, absolute, fixed
        . static   : 기본 위치 (디폴트 무 설정과 같음)
        . relative : 기본 위치로부터 위치 지정 타입 
           .. 부모 요소에 relative 지정하고, 자식 요소에 absolute 지정하는 경우 많음
        . absolute : 부모 요소 내 절대 위치
           .. relative로 설정된 부모 요소를 기준으로 절대 위치 (부모 기준으로 상대 위치 지정)
           .. 즉, 부모 박스(relative) 내 자식 박스의 위치 지정(absolute)에 사용됨
           .. 특히, 다른 요소들의 위에 고정되어 보임
           .. 즉, 주변 요소의 사라짐/나타남 등의 효과를 주는 경우에도, 
                  그 절대 위치 그대로 고정되어 존속시켜 보임
        . fixed    : 웹브라우저 창 기준으로 위치 지정
           .. 화면 크기 변경,스크롤 때도 위치 고정시킬 때 사용
           .. 例) #fixed { position:fixed; bottom:10px; right:10px }
                  화면 우측 하단 10px 만큼씩 항상 떨어져 보임

  ㅇ 끝단 위치 지정    { top/bottom/right/left : 값; }
     - top    : 상단으로부터 위치
     - bottom : 하단으로부터 위치
     - right  : 우단으로부터 위치
     - left   : 좌단으로부터 위치


3. CSS 속성 값  [ 부유화 유동 효과 ]

  ㅇ 요소 부유화    { float : 값; }
     - float : left, right, none
        . left   : 해당 요소를 왼쪽으로 띄워 이동시키기
        . right  : 해당 요소를 오른쪽으로 띄워 이동시키기 
        . none   : float된 요소의 해당 속성 삭제

  ㅇ 부유화된 요소의 좌우 비우기    { clear : 값; }
     - clear : left, right, both, none
        . left   : float된 요소의 왼쪽을 비우기
        . right  : float된 요소의 오른쪽을 비우기
        . both   : float된 요소의 양쪽 모두를 비우기

  ㅇ 요소 수직으로 쌓기    { z-index : 값; }
     - z 축을 따라 요소들을 수직으로 쌓는 순서 지정 (값이 글수록 위로 쌓임)
        . 만일, z-index 값이 미지정이면, 웹문서에 나나타는 순서대로 값이 자동 결정됨
     - position 속성이 relative,absolute 일 때 만 작동됨


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치 10. CSS 정렬 11. CSS 텍스트 12. CSS 리스트 13. CSS @ 규칙 14. CSS 그림자 15. CSS 시간 변형 16. CSS 2차원 변형

 
        최근수정     요약목록     참고문헌