CSS 정렬

(2019-09-11)

vertical-align

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 시간 변형
  17. CSS 2차원 변형

1. CSS 박스 모델 내부의 정렬

  ㅇ 내부 텍스트 정렬
     - 박스 내부 수평(좌우) 정렬 : { text-align : 값; }
        . text-align : left, right, center, justify
     - 박스 내부 상하 정렬 : (기존에는 명확하게 규정된 해당 속성이 없었음)
        . 비록, 기존에 해당 속성은 없으나,
        . 박스 높이(height)와 라인 높이(line-height)를 같게 지정하면 됨
        . 例) 박스 { height:80px; }, 박스내 라인 { line-height:80px; } 

  ㅇ 내부 요소들의 중앙 정렬 (여러 요소들을 보기좋게 중앙 배치시킴)
     - 부모 박스 요소에 폭(width)를 주고, 마진(margin)을 0 auto로 주면 됨
        . 例) 부모 박스 { width:100px; margin:0 auto; }

  ㅇ 내부 요소들의 수평 정렬 (좌측 정렬)
     - 부모 요소에게는, overflow : hidden 또는 overflow : auto 속성값을 줌
     - 자손 요소에게는, float : left 속성값을 줌

     * 자식 요소에게 float 줄 때, 주의할 점
        . float를 갖는 자식 요소가 있을 경우, 부모 요소는 자식 요소를 인식하지 못함
        . 따라서, 부모 요소에게 overflow:auto 또는 overflow:hidden을 주어야,
        . 부모 요소가 float를 갖는 자식 요소를 제대로 인식 가능 함

  ㅇ 내부 요소의 중앙 정렬 (상하좌우 중앙 정렬)
     - 부모 요소에 position : relative 를 줌
     - 해당 내부 요소의 중앙점 위치 지정
        . position : absolute 을, left,right 속성에 50%를 지정
     - 해당 내부 요소의 중앙점 위치로부터 폭,높이의 반 만큼 좌상으로 끌어당김
        . margin-left,margin-top 속성에, 음수로써, 폭,높이의 반 만큼 지정


2. 동일 라인 내 요소들의 수직 정렬(상하 정렬) : vertical-align

  ㅇ vertical-align 속성 값
     - baseline, sub, super, text-top, text-bottom, middle, top, bottom

  ㅇ 적용 대상 : 인라인 요소인라인 블록 요소에 만 적용 

  ㅇ 적용상의 특징
     - 해당 요소 자체에 만 적용하고, 그 내용(자식 요소)은 아님
        . (단, 테이블 셀은 제외)
     - 다른 인라인 요소들에 비교하여, 적절히 상대적으로 정렬됨
        . (즉, 동일 라인에 이미 알고있는/기준인 다른 요소 없으면, 원하는 정렬이 어려움)


3. 이미지 정렬인라인 요소이미지 기준 정렬
     - 이미지 기본 위치     : 기본적으로 텍스트 하단 기준선에 맞춰 정렬됨
     - 텍스트 기준 상하정렬 
        . img 태그 align 속성에 top,middle,bottom 속성값으로 상하 기준 정렬
        . CSS 속성 vertical-align: text-top/text-middle/text-bottom 로써 상하 기준 정렬

  ㅇ 부모 블록 요소이미지 중앙 정렬 
     - img 요소의 부모 요소에 text-align 속성을 추가
     - img 요소를 display: block 속성값에 의해 block 요소로 만들고,
     - margin: 0px auto 속성값에 의해 중앙 정렬


[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 시간 변형 17. CSS 2차원 변형
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    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.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
                  1. 웹 디자인
                  2. 스타일 시트
              1.   CSS
                1.   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 시간 변형
                    17. CSS 2차원 변형
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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