CSS 기초 - 박스 모델 (Box model)

< CSS 기초 - 박스 모델 (Box model) >

[ 박스 모델 (Box model) ]

      h1{

        border:5px solid red; (컨텐트의 테두리, none == 테두리 없음)

        padding:5px; (컨텐트와 테두리 사이의 간격) == 5px 5px 5px 5px (시계방향 적용 : 상우하좌)

        margin:5px; (컨텐트 테두리 사이의 간격) == 5px 5px 5px 5px (시계방향 적용 : 상우하좌)

        margin:5px(상하) 10px(좌우); == 5px 10px 5px 10px (시계방향 적용 : 상우하좌)

        display:block; (or display:inline;)

        width:100px; (블럭의 가로 폭 설정)

      }

 - 인접한 2개의 block element 가 서로 다른 margin 값을 가질 때 : 큰 margin 값이 적용됨.

 - 인접한 2개의 inline element 가 서로 다른 margin 값을 가질 때 : 각 margin 값의 합이 적용됨.

 - border-width: 5px; border-style: solid; border-color: red; == border:5px solid red;

 - h1 tag는 가로 화면 전체를 사용함. (block level element)

   ; block level element 가로 화면 전체를 사용하므로 줄바꿈이 발생함.

   ; border 로 테두리를 그려보면 확인 가능.

 - a tag는 자기 자신 content 크기만큼의 부피를 사용함. (inline element)

 - display 속성을 block 또는 inline 으로 부여하면 h1, a tag 가 차지하는 부피 영역 변경이 가능함.

 - daplay: none; --> 해당 tag 내용물이 화면에서 사라짐. (실제로는 있지만 보여주지 않도록 처리)

   --> 조건에 따라 내용물을 보여주거나 안 보여지게 할 때 javascript 로 속성값을 바꿔서 처리 가능할 듯.

 - css 특히 box model 은 개발자 도구를 사용해서 설정, 조정하면 편리함

   (개발자 도구 실행 : F12 or 마우스 우클릭-검사)

 - 밑줄 구분선: border-bottom: 1px solid gray;

 - 오른쪽 구분선: border-right: 1px solid gray; width: 100px;

  (block level element 인 경우 width 값을 부여해서 오른쪽 구분선이 내용 바로 우측에 붙도록)

 - 하단의 내용물을 오른쪽 구분선의 우측으로 끌어올리기 : 그리드 모델 (Grid model) 사용

[프로그래밍(Programming)/CSS] - CSS 중급 - 그리드 모델 (Grid model)