23.04.13 Box

23.04.13

• box 모델
  h1{
  border-width : 5px;
  border-color : pink;
  border-style : solid;
  display : inline; / h1 태그가 블록이 아닌 인라인으로 content 크기만큼만 차지하게 해줌 /

        }   /* h1 태그는 화면 전체를 차지 = "block level element" */
        a{
            border-width : 5px;
            border-color : pink;
            border-style : solid;
            display: block;  /* a 태그가 블록으로 content 크기만큼만 차지하게 해줌 */
            
        }   /* a 태그는 자신의 content 크기만큼만 차지 = "inline element" */

h1, a{ /,를 통해 여러 태그에 한번에 적용 가능/
border-width : 5px;
border-color : pink;
border-style : solid;

            border : 5px pink solid; 
            /*위, 아래 동일 코드임. 중복 코드 방지를 위해 한번에 작성 가능(단 콤마(,) 사용을 하지 않아야함*/
        }

• div 태그

• 어떠한 의미도 가지지 않음. 디자인의 목적을 위한 무색무취의 태그임.
• block level의 태그이므로 기본적으로 줄바꿈이 적용됨.

• span 태그

• div와 동일한 용도의 태그
• inline level의 태그이므로 줄바꿈이 적용되지 않음.

#grid ol {

            ~~~~
          }

=> id가 grid인 요소에 포함된 ol에만 적용