1. 교재 예제
    1. ex4-01.html
    2. ex4-02.html
    3. ex4-03.html
    4. ex4-04.html
    5. ex4-05.html
    6. ex4-06.html
    7. ex4-07.html
    8. ex4-08.html
    9. ex4-09.html
    10. ex4-10.html
    11. ex4-11.html
    12. ex4-12.html
    13. ex4-13.html
    14. ex4-14.html
    15. ex4-15.html
    16. ex4-16.html
    17. ex4-17.html
    18. ex4-18.html
    19. ex4-19.html
    20. ex4-20.html
    21. ex4-21.html
    22. fig4-04.html
    23. fig4-05.html
    24. fig4-06.html
    25. fig4-07.html
    26. fig4-08.html
    27. fig4-09.html
    28. fig4-10.html
    29. fig4-13-a.html
    30. fig4-13-b.html
    31. fig4-15.html
    32. fig4-22.html
    33. fig4-24.html
    34. fig4-25.html
    35. p-border-shorthand.html
    36. p-border.html
    37. p-left-border.html
    38. universalSelectorSample.html
  2. 참조 : http://www.tcpschool.com/css/intro
  3. background : 배경
    1. background : 모든 background 속성을 이용한 스타일을 한 줄에 설정
    2. background-color : 배경색 설정
    3. background-image : 배경 이미지 설정
    4. background-repeat : 설정된 배경 이미지의 반복 유무 설정
    5. background-position : 반복되지 않는 배경 이미지의 상대 위치 설정
    6. background-attachment : 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정
  4. text : 텍스트
    1. color 텍스트의 색상을 설정함.
    2. direction 텍스트가 쓰이는 방향을 설정함.
    3. letter-spacing 텍스트 내에서 문자 사이의 간격을 설정함.
    4. word-spacing 텍스트 내에서 단어 사이의 간격을 설정함.
    5. text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정함.
    6. text-align 텍스트의 수평 방향 정렬을 설정함.
    7. text-decoration 텍스트에 여러 가지 효과를 설정하거나 제거함.
    8. text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정함.
    9. line-height 텍스트의 줄 간격을 설정함.
    10. text-shadow 텍스트에 그림자 효과를 설정함.
    11. unicode-bidi direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함.
    12. vertical-align HTML 요소 내의 수직 방향 정렬을 설정함.
    13. white-space HTML 요소 내의 여백을 설정함.
  5. font : 글꼴
    1. font 모든 font 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
    2. font-family 텍스트의 글꼴 집합(font family)을 설정함.
    3. font-style 주로 이탤릭체를 사용하기 위해 사용함.
    4. font-variant 텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경시킴.
    5. font-weight 텍스트를 얼마나 두껍게 표현할지를 설정함.
    6. font-size 텍스트의 크기를 설정함.
  6. link : 링크
    1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다.
    2. visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태입니다.
    3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다.
    4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태입니다.
    5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태입니다.
    6. 예제
  7. list : 리스트
    1. list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
    2. list-style-type 리스트 요소의 마커(marker)를 설정함.
    3. list-style-image 리스트 요소의 마커로 사용할 이미지를 설정함.
    4. list-style-position 리스트 요소의 위치를 설정함.
  8. table : 테이블
    1. border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
    2. border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함.
    3. border-spacing 테이블 요소(th, td)간의 여백을 설정함.
    4. caption-side 테이블의 캡션(caption)을 설정함.
    5. empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함.
    6. table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정함.
  9. 크기 단위 :  %, em, px, cm, mm, inch 등이 있음
    1. 백분율 단위(%) : 170%
    2. 배수 단위(em) : 1.7em
    3. 픽셀 단위(px)
  10. dimension : 크기
    1. height 해당 HTML 요소의 높이를 설정함.
    2. width 해당 HTML 요소의 너비를 설정함.
    3. max-width 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함.
    4. min-width 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함.
    5. max-height 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함.
    6. min-height 해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함.
  11. box model

    1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.
    2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.
    3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.
    4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.
  12. padding(margin은 padding과 똑같음)
    1. padding 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
    2. padding-top 윗쪽의 패딩(padding) 값을 설정함.
    3. padding-right 오른쪽의 패딩(padding) 값을 설정함.
    4. padding-bottom 아래쪽의 패딩(padding) 값을 설정함.
    5. padding-left 왼쪽의 패딩(padding) 값을 설정함.
  13. border
    1. border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
      1. border-style 테두리(border)를 다양한 모양으로 설정함.
        1. dotted : 테두리를 점선으로 설정함.
        2. dashed : 테두리를 약간 긴 점선으로 설정함.
        3. solid : 테두리를 실선으로 설정함.
        4. double : 테두리를 이중 실선으로 설정함.
        5. groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
        6. ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
        7. inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
        8. outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
        9. none : 테두리를 없앰.
        10. hidden : 테두리가 존재하기는 하지만 표현되지는 않음.
      2. border-width 테두리(border)의 너비를 설정함.
      3. border-color 테두리(border)의 색상을 설정함.
    2. border-top 테두리(border)의 top 부분 속성을 한 번에 설정함.
      1. border-top-style 테두리(border)의 top 부분의 스타일을 설정함.
      2. border-top-width 테두리(border)의 top 부분의 너비를 설정함.
      3. border-top-color 테두리(border)의 top 부분의 색상을 설정함.
    3. border-right 테두리(border)의 right 부분 속성을 한 번에 설정함.
      1. border-right-style 테두리(border)의 right 부분의 스타일을 설정함.
      2. border-right-width 테두리(border)의 right 부분의 너비를 설정함.
      3. border-right-color 테두리(border)의 right 부분의 색상을 설정함.
    4. border-bottom 테두리(border)의 bottom 부분 속성을 한 번에 설정함.
      1. border-bottom-style 테두리(border)의 bottom 부분의 스타일을 설정함.
      2. border-bottom-width 테두리(border)의 bottom 부분의 너비를 설정함.
      3. border-bottom-color 테두리(border)의 bottom 부분의 색상을 설정함.
    5. border-left 테두리(border)의 left 부분 속성을 한 번에 설정함.
      1. border-left-style 테두리(border)의 left 부분의 스타일을 설정함.
      2. border-left-width 테두리(border)의 left 부분의 너비를 설정함.
      3. border-left-color 테두리(border)의 left 부분의 색상을 설정함.
  14. outline
    1. outline 모든 outline 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
    2. outline-style 아웃라인(outline)를 다양한 모양으로 설정함.
      1. dotted : 아웃라인을 점선으로 설정함.
      2. dashed : 아웃라인을 약간 긴 점선으로 설정함.
      3. solid : 아웃라인을 실선으로 설정함.
      4. double : 아웃라인을 이중 실선으로 설정함.
      5. groove : 아웃라인을 3차원인 입체적인 선으로 설정하며, outline-color 속성값에 영향을 받음.
      6. ridge : 아웃라인을 3차원인 능선효과가 있는 선으로 설정하며, outline-color 속성값에 영향을 받음.
      7. inset : 3차원인 내지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
      8. outset : 3차원인 외지로 끼운 선으로 설정하며, outline-color 속성값에 영향을 받음.
      9. none : 아웃라인(outline)을 없앰.
      10. hidden : 아웃라인(outline)이 존재하기는 하지만 표현되지는 않음.
    3. outline-width 아웃라인(outline)의 너비를 설정함.
    4. outline-color 아웃라인(outline)의 색상을 설정함.
    5. outline-offset 테두리(border)와 아웃라인(outline) 사이의 여백을 설정함.
  15. 위치
  16. display : block, inline, inline-block
  17. visibility : visible, hidden,l collapse
  18. opacity : 0.0~1.0
  19. position
    1. position HTML 요소의 위치를 결정하는 방식을 설정함.
    2. top 위치가 설정된 조상 요소의 위로부터의 여백을 설정함.
    3. right 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정함.
    4. bottom 위치가 설정된 조상 요소의 아래로부터의 여백을 설정함.
    5. left 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정함.
    6. z-index 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정함.
    7. clip 절대 위치(absolute position) 지정 방식으로 위치한 요소를 자름.
    8. cursor 표시되는 마우스 커서의 모양을 설정함.
    9. overflow 내용(content)의 크기가 해당 요소의 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
    10. overflow-x 내용(content)의 크기가 해당 요소의 수평 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
    11. overflow-y 내용(content)의 크기가 해당 요소의 수직 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
error: Content is protected !!