CSS 위치 레이아웃

(2017-09-04)
1. CSS 속성 값  [ 페이지 레이아웃 (위치 지정) ]

  ㅇ 위치 지정 기준 (Position)         : { position : 값; }
     - position : static, relative, absolute, fixed
        . static   : 기본 위치 (디폴트 무 설정과 같음)
        . relative : 기본 위치로부터 위치 지정 타입
        . absolute : 부모 요소 또는 문서 내 절대 위치
           .. 위치지정 타입(relative)이 설정된 부모 요소로부터 위치 지정
           .. 부모 박스(relative) 내 포함된 자식 박스의 위치 지정(absolute)에 유용함
           .. 주변 요소의 사라짐/보임 등의 효과를 주는 경우에도, 
              그 위치 그대로 고정되어 존속
           .. 다른 요소들의 위에 고정되어 보임
        . fixed    : 웹브라우저 창 기준으로 위치 지정 (스크롤 때도 위치 고정)

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


2. CSS 속성 값  [ 페이지 레이아웃 (효과) ]

  ㅇ 요소 상자에 다양한 표현 효과를 줌 : { display : 값; }
     - display : inline, block, inline-bloc, none, list-item, ...
        . block   : 요소를 박스화시켜, 위아래에 줄바꿈이 일어나도록 함
        . inline  : 요소들을 같은 줄에 표시
        . none    : 요소가 페이지에서 완전히 사라지도록 함

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

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


3. CSS 속성 값  [ 페이지 레이아웃 (정렬) ]

  ㅇ 수직 정렬 : vertical-align 
     - 속성 값 : (baseline, sub, super, text-top, text-bottom, middle, top, bottom)
     - 인라인 요소 및 인라인 블록 요소에 만 적용 
     - 요소 자체에 만 적용하고, 그 내용은 아님 (단, 테이블 셀은 제외)
     - 다른 인라인 요소들에 대해 적절히 상대적으로 정렬함


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

 
        최근수정     모바일웹     참고문헌