박스 모델 (box model)

• width, height, border, margin, padding등의 속성
• 블록 박스와 인라인 박스가 화면에 표시되는 영역
• 다른 박스와의 배치
• 박스의 크기가 결정된다
• 실제 화면 가로영역 크기 : width + padding + border + margin
• 실제 화면 세로영역 크기 : height + padding + border + margin

width, height

• width : 가로길이, height : 세로길이

  div{
  	width:100%;
  	height:100%;
  }

• % : 화면기준 비율
• px : 픽셀
• auto : 자동으로 계산된 값
• inherit : 상위 속성을 물려 받음 (IE7 이상)

border

• border-left : 왼쪽, border-right : 오른쪽, border-top : 위쪽, border-bottom : 아래쪽

  div{border:solid 1px #000000}

*# border-style : 선 모양, border-width : 선 굵기, border-color : 선 색상

  div{
  	border-style:solid; 
  	border-width:1px; 
  	border-color:#000000;
  }

• none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

margin

• margin-left : 왼쪽, margin-right : 오른쪽. margin-top : 위쪽. margin-bottom : 아래쪽

  div{margin:10px;}

• % : 화면기준 비율
• px : 픽셀
• auto : 자동으로 계산된 값
• inherit : 상위 속성을 물려 받음 (IE7 이상)

padding

• padding-left : 왼쪽, padding-right : 오른쪽, padding-top : 위쪽, padding-bottom : 아래쪽

  div{padding:10px;}

• % : 화면기준 비율
• px : 픽셀
• auto : 자동으로 계산된 값
• inherit : 상위 속성을 물려 받음 (IE7 이상)

위치(position)

• 박스에 대한 배치를 변경 (기본 static)
• position : static
  • 기본값(default)
  • 주변의 요소들에 의하여 위치가 결정됨
  • 문서 형태의 배치 방법
• position : relative
  • 상대 배치 방식
  • 본래 있었던 자신의 위치를 기준으로 지정한 오프셋 속성의 값만큼 떨어져서 배치됨
  • 다른 요소들의 배치 위치에 영향을 주지 않으면서 이동하여 배치
  • absolute 적용된 부모인 경우 기준 블록이 됨
• position : absolute
  • 절대 배치 방식
  • 요소가 포함된 컨테이닝 블록을 기준으로 지정한 오프셋 속성값 만큼 떨어져서 배치
  • 본문 요소 위에 떠있는 형태, 레이어(layer), 본문 요소와 겹쳐짐
  • 상위 요소가 모두 static이면 body를 기준으로
  • 가장 가까운 부모가 static이 아니면 해당 요소가 기준 블록이 됨
• position : fixed
  • 고정 방식
  • 스크린 기준으로 배치
  • 스크롤 바가 나타나서 스크롤이 되더라도 항상 같은 위치에 배치됨
  • IE7 이상에서 사용가능

    div{position:absolute;}

위치 이동하기

• position이 relative, absolute, fixed일때 사용가능 (static일때는 작용안함)
• top : 위에서부터의 거리
• bottom : 아래에서부터의 거리
• left : 왼쪽에서부터의 거리
• right : 오른쪽에서부터의 거리

  div{
  	top : 100px;
  	bottom : 100px;
  	left : 100px;
  	right : 100px;
  }

타이포그라피(typography)

font-family

• [[ 튜토리얼 : 서체이름 알아내기 ]]

  div{font-family:"돋움", Dotum, "굴림", Gulim, sans-serif;}

    <ul>
      <li><span style="font-family:serif;">serif : 삐침(장식)이 있는 글꼴 : ABCDabcd</span></li>
      <li><span style="font-family:sans-serif;">sans-serif : 삐침(장식)이 없는 글꼴 : ABCDabcd</span></li>
      <li><span style="font-family:cursive;">cursive : 필기체 : ABCDabcd</span></li>
      <li><span style="font-family:fantasy;">fantasy : 판타지체 : ABCDabcd</span></li>
      <li><span style="font-family:monospace;">monospace : 글자 폭과 간격이 일정 : ABCDabcd</span></li>
    </ul>

font-size

  div{font-size:15px;}

• small : 작은폰트
• medium : 중간폰트(약 16px)
• large : 큰폰트
• % : 화면기준 비율
• px : 픽셀
• 이외의 모든 수치관련 단위
• inherit : 상위 속성을 물려 받음 (IE7 이상)

font-weight

  div{font-weight:bold;}

• normal : 일반
• bold : 굵은 글씨
• bolder : 더 굵은 글씨
• lighter : 가는 글씨
• 100 ~ 900 (normal:400, bold:700)
• inherit : 상위 속성을 물려 받음 (IE7 이상)

font-style

  div{font-style:italic;}

• normal : 일반
• italic : 이탤릭
• oblique : 비스듬한

font-variant

  div{font-variant:small-caps;}

• normal : 일반
• small-caps : 크기가 작은 대문자
• initial : 기본값으로 설정

• inherit : 상위 속성을 물려 받음 (IE7 이상)

• 작은 대문자 글꼴에서는 모두 소문자가 대문자로 변환됩니다. 그러나 변환 된 대문자는 텍스트의 원래 대문자보다 작은 글꼴 크기로 나타납니다.
• font-variant 속성은 텍스트를 작은 대문자 글꼴로 표시할지 여부를 지정합니다.

폰트(font)

• 6가지 속성을 선언 순서에 맞추어 표현함
• ’'’font-family와 font-size는 반드시 포함’'’되어야함
• weight style variant size /line-height family div{font:bold italic small-caps 12px /1.6 “돋움”, sans-serif;}
• ※상단의 각각의 속성 참고. 폰트 6가지 속성을 순서에 맞추어 단축 표현

텍스트 정렬, 글 꾸밈

text-align

  div{text-align:left;}

• left : 왼쪽 정렬
• center : 가운데 정렬
• right : 오른쪽 정렬
• justify : 혼합 정렬

vertical-align

  div{vertical-align:top;}

• sub : 아래첨자
• super : 위첨자
• baseline : 기준선에 정렬
• top : 위쪽정렬
• text-top : 위쪽정렬
• middle : 중앙정렬
• bottom : 하단정렬
• text-bottom : 하단정렬
• % : 비율
• px : 픽셀

    <style>
        /*
            baseline : 기준선에 정렬
            top : 위쪽정렬
            text-top : 위쪽정렬
            middle : 중앙정렬
            bottom : 하단정렬
            text-bottom : 하단정렬
        */
        #table_target td{
            width:150px;
            height:150px;
            border:solid 1px black;
        }
        #vartical_baseline{ vertical-align: baseline; }
        #vartical_top{ vertical-align: top; }
        #vartical_text_top{ vertical-align: text-top; }
        #vartical_middle{ vertical-align: middle; }
        #vertical_bottom{ vertical-align: bottom; }
        #vertical_text_bottom{ vertical-align: text-bottom; }
    </style>
    <table id="table_target">
        <tr>
            <td id="vartical_baseline">top</td>
            <td id="vartical_top">top</td>
            <td id="vartical_text_top">text_top</td>
            <td id="vartical_middle">middle</td>
            <td id="vertical_bottom">bottom</td>
            <td id="vertical_text_bottom">text_bottom</td>
        </tr>
    </table>

text-decoration

 div{text-decoration:underline;}

• none : 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 통과선(취소선)
• inherit : 상위 속성을 물려 받음 (IE7 이상)

행간, 자간, 들여쓰기

letter-spacing

• 문자의 간격 (각 글자 사이의 간격)

 div{letter-spacing:20px;}

• normal : 일반
• % : 화면기준 비율
• px : 픽셀
• 이외의 모든 수치관련 단위
• inherit : 상위 속성을 물려 받음 (IE7 이상)

  line-height

• 줄사이의 간격

 div{line-height:20px;}

• normal : 일반
• % : 화면기준 비율
• px : 픽셀
• 이외의 모든 수치관련 단위
• inherit : 상위 속성을 물려 받음 (IE7 이상)

text-indent

• 첫번째줄 들여쓰기, 음수(-)지정하여 내어쓰기도 가능

  div{text-indent:20px;}

• % : 화면기준 비율
• px : 픽셀
• 이외의 모든 수치관련 단위
• inherit : 상위 속성을 물려 받음 (IE7 이상)

text-transform

• 각종 글형태 바꾸기

  div{text-transform:uppercase;}

• none : 일반
• UPPERCASE : 대문자로
• lowercase : 소문자로
• Capitalize : 단어의 첫글자 대문자
• inherit : 상위 속성을 물려 받음 (IE7 이상)

white-space

• 공백문자를 처리하는 방식

  div{white-space:nowrap;}

• normal : 일반
• nowrap : 자동 줄바꿈 금지
• pre : 입력된 형태 그대로 출력
• inherit : 상위 속성을 물려 받음 (IE7 이상)

목록 모양

• list-style-type : circle / none / disc / square / decimal / lower-alpha / upper-alpha / lower-roman / upper-roman
• list-style-image : url(‘주소’);
• list-style-position : inside / outside
• list-style : square url(‘주소’) inside;

테이블 모양

• border-spacing : 간격;
• border-collapse : separate / collapse;

이외의 추가 CSS들

• https://www.w3schools.com/cssref/default.asp