block 요소, inline 요소, 블록 요소, 인라인 요소

(2019-07-11)

inline-block 요소, 인라인 블록 요소, CSS display, disply 속성, visibility 속성

1. 보이기 유형( block,inline)의 구분

  ㅇ block 요소들      ☞ CSS 박스 모델 참조
     - 특징
        . 줄바꿈 있음
        . width,height 속성 적용 가능
        . margin,padding 상하 속성 적용 가능
     - html 태그 종류
        . h 요소, p 요소, header 요소, section 요소, main 요소, aside 요소, footer 요소,
          div 요소, pre 요소, ol 요소, ul 요소, form 요소, hr 요소, table 요소 등

  ㅇ inline 요소들
     - 특징
        . 줄바꿈 없음
        . width,height 속성 적용 불가능
        . margin,padding 상하 속성 적용 불가능
     - html 태그 종류
        . a 요소, abbr 요소, b 요소, bdi 요소, bdo 요소, br 요소, cite 요소, code 요소,
          data 요소, del 요소, dfn 요소, em 요소, i 요소, input 요소, span 요소, time 요소 등

  ㅇ 기타 inline-block 요소들
     - 특징 : 줄바꿈이 없는 것 외에는, block 요소와 유사
     - html 태그 종류 : img 요소, 멀티미디어 태그 요소 등


2. 보이기 유형의 재지정

  ㅇ { display : 값; } : 값에 따라 요소에 다양한 표현 유형 효과를 달리 지정 가능
     * (값 : display : inherit 기본값, inline, block, inline-block, none, list-item)
     - inherit : (기본값) 요소 부모로부터 상속 받은 display 속성
     - block   : 요소를 박스화시켜,
        . 위아래에 줄바꿈이 일어나도록 함
        . width,height 속성 및 margin,padding 상하 속성 적용 가능
     - inline  : 요소들을 같은 줄에 표시함으로써,
        . 폭,높이 및 상하 여백 조정 불가
     - inline-block : 요소들을 같은 줄에 표시하되,
        . 폭,높이 및 상하 여백 조정이 가능토록 함
     - none    : 요소가 페이지에서 완전히 사라지도록 함

ㅇ { visibility : 값; } : 값에 따라 화면 표시 여부 지정
   * (값 : visibility : visible 기본값, hidden, collapse)
   - visibility는 display:none과 달리, 
      . block 박스는 살아있고, 그 내용 만 보이기/숨김 임


[CSS] 1. CSS 2. CSS 선택자 3. CSS 박스 모델 4. block,inline 요소 유형 5. CSS 속성 6. CSS 색상 7. CSS 배경 8. CSS 위치 9. CSS 정렬 10. CSS 텍스트 11. CSS 리스트 12. 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 텍스트
                    11. CSS 리스트
                    12. CSS @ 규칙
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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