Css 기본문법

1.CSS
- 내부스타일
    > head요소안에 작성
- 외부스타일
    > CSS파일로 작성하기 ex> 디자인.css

2.스타일작성법

    ex>
    h1 { color:#ff0000; }

    h1 : 선택자 ( selector ) : HTML element를 지정하는 방법
    color : 속성 ( property )
    #ff0000 : 값 ( value )

    선택자
    1) 기본선택자
        - 요소선택자 (가끔사용하나 권장하지 않음)
        - 아이디선택자 (거의사용하지않음)
        - 클래스선택자 (중요)
    2) 조합선택자
    3) 가상요소
    4) 가상클래스




    HTML과 CSS주석 ( comment )

    <!-- html주석 -->
    /* css주석, 자바스크립트 주석 */


    id, class 네이밍 규칙
    1) 영문소문자로 작성하기
    2) 숫자는 사용가능하나 첫글자로 올수 없음
    3) 특수문자는 $ _ -(underscore)만 사용가능
    4) 한글도 가능하나 권장X
    5) aa bb cc dd ee xx 의미없는 이름 X
    6) 태그명은 사용가능하나 권장X

    <h1 id="aa">tit</h1>
    요소명#아이디이름  (요소명은 생략가능)
    h1#aa
    #aa

    <h2 class="bb">tit</h2>
    요소명.클래스이름 (요소명은 생략가능)
    h2.bb
    .bb



    ***** Box Model *****

    width , height : 컨텐츠의 크기
    padding : 테두리와 컨텐츠사이의 여백
    border : 박스의 테두리
    margin : 요소와 요소사이의 여백, 테두리 바깥쪽여백
    background : 배경색, 배경이미지적용 ( padding영역까지 적용 )
            width,height  + padding

    박스의 크기
    가로크기 width + padding + border
    세로크기 height + padding + border


    // element -> block, inline

    h1 : block
    strong : inline

    block : width, height
        기본값
        width:부모의 가로크기(width)를 전부사용
        height : 컨텐츠의 높이만큼만 적용

        사용자가 w, h를 변경가능

    inline : width, height;
        기본값
        width: 컨텐츠의 가로크기만큼만 적용
        height : 컨텐츠의 높이만큼만 적용

        w, h적용불가