코딩일기

caption-side : 표 제목의 위치 지정

caption-side: top | bottom

표 제목은 <caption> 태그를 이용해서 캡션으로 표시하는데, 캡션은 기본적으로 위쪽 중앙에 표시되지만 caption-side 속성을 이용해서 표 아래쪽으로 옮길 수 있다.

• top : 캡션을 표 윗부분에 표시한다. (기본값)
• bottom : 캡션을 표 아랫부분에 표시한다.

<style>
  table {
    caption-side: bottom;
  }
</style>

border : 표 테두리 지정

표 바깥 테두리와 셀 테두리를 각각 지정한다.

<style>
  table {
    border: 1px solid black;
  }
</style>

border-spacing : 셀 사이의 여백 지정

border-spacing: 수평거리 수직거리

표와 셀에 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생기는데, border-spacing 속성을 사용해서 여백을 조절할 수 있다.

수평거리와 수직거리의 값이 같다면 1개만 지정해도 된다.

border-collapse : 표와 셀 테두리 합치기

표와 셀에 테두리를 지정했을 때 여백이 생기면서 두 줄로 표시되는데, 이때 두 줄로 둘 것인지아니면 합쳐서 하나로 표시할 것인지를 결정한다.

• collapse : 표와 셀의 테두리를  합쳐서 하나로 표시
• separate : 표와 셀의 테두리를 따로 표시 (기본값)

<style>
  table {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

list-style-type : 불릿 모양과 번호 스타일 지정

순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 지정할 수 있다.

• disc : 채운 원 모양 ( ● ) 
• circle : 빈 원 모양 ( ○ )
• square : 채운 사각형 모양 ( ■ )
• decimal : 1부터 시작하는 10진수 ( 1, 2, 3, ... )
• decimal-leading-zero : 앞에 0이붙는 10진수 ( 01, 02, 03, ... )
• lower-roman : 로마 숫자 소문자 ( i, ii, iii, ... )
• upper-roman : 로마 숫자 대문자 ( I, II, III, ... )
• lower-alpha 또는 lower-latin : 알파벳 소문자 ( a, b, c, ... )
• upper-alpha 또는 upper-latin : 알파벳 대문자 ( A, B, C, ... )
• none : 불릿이나 숫자 없애기

<style>
  .book1 {
    list-style-type: upper-alpha;
  }
</style>

list-style-image : 불릿 대신 이미지 사용

list-style-image: <url(이미지 파일 경로)> | none 

불릿을 원하는 이미지로 바꾸어 사용한다. 이 때 불릿에 들어갈 이미지는 불릿 크기만큼 작을수록 좋다.

속성값으로 none을 사용하면 이미지를 사용하지 않고 list-style-type 속성에서 지정한 형태로 표시한다.

<style>
  ul {
    list-style-image: url('images/dot.png');
  }
</style>

list-style-position : 목록 들여 쓰기

list-style-position: inside | outside

불릿이나 번호의 위치를 들여 쓰는 것으로

텍스트 문단 사이에 있는 목록을 더 쉽게 구분할 수 있다.

• inside : 불릿이나 번호를 기본 위치보다 안으로 들여 쓴다.
• outside : 기본값

<style>
  .inside {list-style-position: inside;}
</style>

list-style : 목록 속성을 한꺼번에 표시

list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있다.

<style>
  .book1 {
    list-style: upper-alpha;
  }
  ul {
    list-style: url('images/dot.png');
  }
  .inside {list-style: inside;}
</style>

텍스트 스타일 : 글자와 단어, 글자로 이루어진 문단에서 사용하는 스타일

color : 글자색 지정

color: <색상>

문단이나 제목 등의 텍스트에서 글자색을 바꿀 때 사용한다.
color를 사용할 수 있는 속성값은 16진수나 rgb(rgba), hsl(hsla) 또는 색상 이름이 있다.

• 16진수
  #기호 다음에 두 자리씩 묶어 #RRGGBB로 표시한다.
  RR은 빨간색(Red), GG는 초록색(Green), BB는 파란색(Blue)의 양을 뜻하며, 하나도 섞이지 않은 00부터 해당 색이 가장 섞였음을 표시하는 ff까지 사용할 수 있다.
  만약 색상값이 #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기할 수 있다.
  ※ 주로 색상값을 추출해 주는 컬러 피커(color picker)를 사용한다.
  
  

    <style>
      h1 { 
        color:#0000ff;
      } 
    </style>

  
  
  
• 영문명 표현
  red, yellow, black 등 잘 알려진 색상 이름으로 사용한다.
  
  

    <style>
      p {
        color: green;
      }
    </style>​

  
  
  
• rgb(rgba) 
  CSS에서 주로 표현하는 방법이다.
  rgb는 각각 빨간색(red), 초록색(green), 파란색(blue)의 양을 뜻하며, 하나도 섞이지 않은 0부터 해당 색이 가장 섞였음을 표시하는 255까지 표시한다.
  rgba의 a는 alpha를 뜻하며 rgb로 표현한 색상에 불투명도를 지정할 수 있다. 0~1의 값중에서 사용할 수 있으며 숫자가 작아질수록 투명해진다.
  
  

    <style>
      .color1 {
        color:rgb(255,255,255);
      }
      .color2 {
        color:rgba(255,255,255,0.5);
      }
    </style>​

  
  
  
• hsl(hsla)
  hsl은 색상(hue), 채도(saturation), 명도(lightness)를 뜻하며 hsla는 hsl에 불투명도(alpha)를 추가한 것을 의미한다.
  색상은 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시한다. 0º는 빨간색, 120º는 초록색, 240º는 파란색이며 그 사이사이에 나머지 색이 배치된다.
  

  

  
  채도는 퍼센트(%)로 표시하며 0%는 회색톤, 100%는 원래색으로 표시된다.
  명도도 퍼센트(%)로 표시하며 0%는 가장 어두운톤, 50%는 원래색, 100%는 흰색으로 표시된다.
  
  

    <style>
      .accent1 {
        color:hsl(0, 100%, 50%);
      }
      .accent2 {
        color:hsla(0, 100%, 50%, 0.5);
      }
    </style>​

text-align : 텍스트 정렬

text-align: start | end | left | right | center | justify | match-parent

문단의 텍스트 정렬 방법을 지정할 때 사용한다.

워드나 한글 문서 등에서 사용하는 왼쪽 정렬, 오른쪽 정렬 등을 웹 문서에서 지정할 수 있다.

• strat : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
• end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다.
• left : 왼쪽에 맞추어 문단을 정렬한다. (기본값)
• right : 오른쪽에 맞추어 문단을 정렬한다.
• center : 가운데에 맞추어 문단을 정렬한다.
• justify : 양쪽에 맞추어 문단을 정렬한다. (왼쪽 정렬과 달리 오른쪽에 여백이 생기지 않는다)
• match-parent : 부모 요소를 따라 문단을 정렬한다.

<style>
  .conter {
    text-align: center;
  }
</style>

line-height : 줄 간격 조절

줄 간격이 너무 좁거나 넓으면 가독성이 떨어지는데 이 때 line-height 속성을 통해 원하는 만큼 조절할 수 있다.
정확한 단위의 크깃값이나 문단의 글자 크기를 기준으로 한 백분율로 지정할 수 있다.

보통 줄간격은 글자 크기의 1.5~2배면 적당하다.

<style>
  p { font-size: 12px; line-height: 24px; }
  p { font-size: 12px; line-height: 2.0; }
  p { font-size: 12px; line-height: 200%; }
</style>

text-decoration : 텍스트의 줄을 표시하거나 없애기

텍스트에 밑줄을 긋거나 취소선을 표시할 수 있다.또 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 text-decoration 속성을 사용하면 없앨 수 있다.

• none : 텍스트에 줄을 표시하지 않음
• underline : 밑줄 표시
• overline : 윗줄 표시
• line-through : 취소선 표시

  <body>
    <p style="text-decoration:underline">underline</p>
  </body>

text-shadow : 텍스트에 그림자 효과 추가

text-show: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

사이트 제목처럼 텍스트를 좀 더 입체감 있게 강조하고 싶을 때 주로 사용한다.

• 가로 거리 : 텍스트부터 그림자까지의 가로 거리 (필수 속성)
  양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만든다.
• 세로 거리 : 텍스트부터 그림자까지의 세로 거리 (필수 속성)
  양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만든다.
• 번짐 정도 : 그림자가 버지는 정도 (기본값 : 0)
  양숫값을 사용하면 모든 방향으로 퍼져나가기 때문에 그림자가 크게 표시되고, 음숫값을 사용하면 그림자가 모든 방향으로 축소된다.
• 색상 : 그림자 색상 지정 (기본값 : 현재글자색)
  한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있다.

<style>
    .shadow1 {
      text-shadow:5px 5px 3px #ffa500;
    }
</style>

text-transform : 텍스트의 대소 문자 변환

영문자를 표기할 때 텍스트를 대소 문자 또는 전각 문자로 변환한다.한글에는 영향을 미치지 않고 영문자에만 적용된다.

• none : 줄을 표시하지 않는다.
• capitalize : 첫 번째 글자를 대문자로 변환한다.
• uppercase : 모든 글자를 대문자로 변환한다.
• lowercase : 모든 글자를 소문자로 변환한다.
• full-width : 가능한 ㅎ나 모든 문자를 전각 문자로 변환한다.

  <style>    
    .trans1 {
      text-transform: capitalize;
    }
  </style>

letter-spacing, word-spacing : 글자 간격 조절

letter-sapcing 속성은 글자와 글자 사이의 간격 (자간)을 조절하고, word-spacing 속성은 단어와 단어 사이의 간격을 조절한다.

CSS에서는 주로 letter-spacing 속성을 사용한다.

px, em 혹은 퍼센트(%)로 크깃값을 조절한다.

  <style>
    .spacing1 {
      letter-spacing:0.2em;
    }
  </style>

웹 폰트란 웹페이지를 보는 사람의 컴퓨터에 글꼴이 설치 되어 있지 않아도 임시로 글꼴을 받아 웹페이지에서 볼 수 있도록 하는 폰트를 말한다.

웹 문서의 텍스트는 사용자 시스템에 설치된 글꼴을 사용해야 되기 때문에 사용자 시스템에 원하는 글꼴이 없다면 다른 글꼴로 대체해야 하지만, 웹 폰트를 사용하여 원하는 글꼴을 그대로 보여줄 수 있다.웹 폰트를 사용하기 위해서는 웹 문서를 서버에 올릴 때에 웹 폰트 파일도 함께 업로드해야 한다.

컴퓨터에서 사용하는 글꼴인 트루타입(TrueType)은 파일 크기가 커서 웹에서 사용하기엔 적절하지 않기 때문에 주로 EOT(embedded open type), WOFF(web open font format), WOFF2 파일을 사용한다.

웹 폰트 업로드 및 사용방법

@font-face {

  font-family: <글꼴 이름>;

  src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ...];

}

    <style>
      @font-face {
        font-family: 'Ostrich'; 
        src: local('Ostrich Sans'), 
              url('fonts/ostrich-sans-bold.woff') format('woff'), 
              url('fonts/ostrich-sans-bold.ttf') format('truetype'), 
              url('fonts/ostrich-sans-bold.svg') format('svg');
      }
      .wfont {
        font-family:'Ostrich', sans-serif; 
      }
    </style>

font-family 속성을 사용해서 글꼴 이름을 만들 때 되도록이면 글꼴 파일 이름과 같은 이름을 사용하는 것이 좋다.

src 속성에서  글꼴 파일의 경로를 지정하기 전에 local( ) 문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인한 후, 없다면 WOFF 포맷으로 된 글꼴을 내려받아야 한다.

TTF 포맷은 다른 파일 형식보다 용량이 크기 때문에 대부분의 모던 브라우저에서 지원하는 WOFF 포맷을 먼저 선언한 후에 선언한다.

무료 웹 폰트 사용방법

구글 폰트는 무료로 사용할 수 있는 다양한 언어의 글꼴을 제공하기 때문에, 웹 문서에 링크해서 쉽게 사용할 수 있다.

http://fonts.google.com

구글폰트 사이트에 접속 후, 좌측 상단의 언어목록에서 Korean을 선택해서 제공하는 한글 폰트만 모아보기

원하는 폰트 클릭

원하는 폰트의 페이지 우측 하단에 있는 + Select this style 클릭

우측 상단의 selected families 아이콘 클릭해서 해당 웹 폰트의 정보 보기

해당 웹 폰트의 정보에서 @import 클릭 후 나오는 <style>... 코드와 font-family... 코드 복사

사용하고자 하는 웹 문서의 <style> 태그 아래에 복사한 <style>... 코드 붙여넣기,

웹 폰트를 사용할 요소에 복사한 font-family... 코드 붙여넣기