CSS 정렬

(2019-01-31)

CSS vertical-align

1. CSS 정렬 속성CSS 박스 모델 내부의 텍스트 정렬
     - 박스 내부 좌우 정렬 : { text-align : 값; }
        . text-align : left, right, center, justify
     - 박스 내부 상하 정렬 : 해당 속성 없으나,
        . 박스 높이(height)와 라인 높이(line-height)를 같게 지정하면 됨
        . 例) 박스 {height:80px;}, 박스내 라인 {line-height:80px;} 

  ㅇ CSS 박스 모델 내부의 중앙 정렬
     - 해당 박스에 폭(width)를 주고, 마진(margin)을 0 auto로 주면 됨
        . 例) 박스 {width:100px; margin:0 auto;}

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

  ㅇ 이미지 정렬
     - 인라인 내 이미지 기준 정렬
        . 이미지 기본 위치     : 기본적으로 텍스트 하단 기준선에 맞춰 정렬됨
        . 텍스트 기준 상하정렬 
           .. 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. block,inline 요소 유형 5. CSS 속성 값 6. CSS 배경 7. CSS 색상 8. CSS 위치 레이아웃 9. CSS 정렬 10. CSS 텍스트
  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. block,inline 요소 유형
                    5. CSS 속성 값
                    6. CSS 배경
                    7. CSS 색상
                    8. CSS 위치 레이아웃
                    9. CSS 정렬
                    10. CSS 텍스트
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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