[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 07 텍스트를 표현하는 다양한 스타일(2)

DAY 10

🔖 오늘 읽은 범위 :

🔥01/16(금) 진도표 알림
👉🏻공부 내용: 07 텍스트를 표현하는 다양한 스타일(2)
👉🏻쪽수: 212~238쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

텍스트 관련 스타일

• 글꼴은 폰트와 관련된 것.
• 텍스트 스타일은 글자와 단어, 단락에서 사용하는 스타일에 대한 것.

글자 색 지정 : color 속성

color: <색상>

• 색상 표시

  • 16진수 : #RRGGBB

    R: Red, G: Green, B: Blue

    ex) #0000FF == #00F

  • hsl, hsla : hue(색상), saturation(채도), lightness(명도), alpha(불투명도)

    각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시.

    ex) hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)

  • 영문 이름

    잘 알려진 색상 이름을 사용.

    ex) red, green, white, black, yellow

  • rgb, rgba : red, green, blue, alpha

      /* RGB */
      h1 { color: rgb(0,0,255); }
      /* RGBA */
      h1 { color: rgb(0,0,255, 0.5); }

텍스트 정렬 : text-align

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

• start, end 는 최근에 추가 된 값. 언어의 방향성 때문. LTR or RTL 대응.
• 다국어를 위해서 start, end 사용하는 것이 좋음. left, right 는 지양함.

줄 높이 조절 : line-height

• 문단의 2줄 사이의 간격.
• 가독성에 영향을 줌.

/* 줄 높이를 24px 로 지정하는 3가지 방식 */
p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0; }
p { font-size: 12px; line-height: 200%; }

• 세로로 가운데 정렬 처리하려면? ⇒ height 와 동일하게 지정하자.

  <style>
    h1 {
      font-size:60px;  /* 글자 크기 */
      font-family:Verdana, Geneva, Tahoma, sans-serif;  /* 글꼴 */
    }
    .heading {
      width:100%;  /* 영역 너비 */
      height:100px;  /* 높이 */
      background:#222;  /* 배경 색 */
      color:rgb(255,255,255);  /* 글자 색 */
      text-align: center; /* 가로 정렬 - 가운데 */
      /* Do it! line-height 속성을 사용해 세로로 가운데 정렬하기 */
      line-height: 100px;
    }
  </style>

밑줄, 윗줄, 취소선 표시 : text-decoration

• 텍스트에 밑줄 긋기, 윗줄 긋기, 취소선 표시.

        <!-- Do it! 인라인 스타일을 사용해 text-decoration 속성 적용하기 -->
        <p style="text-decoration: none;">none</p>
        <p style="text-decoration: underline;">underline</p>
        <p style="text-decoration: overline;">overline</p>
        <p style="text-decoration: line-through;">line through</p>

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

• 텍스트에 그림자 효과를 준다.

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

  • 가로 거리 : 텍스트로부터 그림자까지의 가로 거리. 양수는 글자의 오른쪽, 음수는 글자의 왼쪽에 그림자 생성.
  • 세로 거리 : 텍스트와 그림자까지의 세로 거리. 양수는 글자 아래쪽, 음수는 글짜 위쪽에 그림자 생성.
  • 번짐 정도 : 그림자 번짐 정도. 양수는 모든 방향으로 퍼져 나가고, 음수는 모든 방향으로 축소됨. 기본값 0.
  • 색상 : 그림자 색상. 기본값은 현재 글자색. 공백으로 구분해서 여러 색상 지정 가능.

  <style>    
    h1 { 
      font-size:60px;
    } 
    /* Do it! text-shadow 속성으로 텍스트 그림자 추가하기 */
    .shadow1 {
      text-shadow: 1px 1px black;
    }
    .shadow2 {
      text-shadow: 5px 5px 3px #ffa500;
    }
    .shadow3 {
      text-shadow: 7px -7px 20px #000;
    }
    .shadow4 {
      text-shadow: 2px 2px 15px rgb(0, 255, 42) , -2px -2px 15px rgb(255, 0, 242);
    }
  </style>

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

• 텍스트에서 영문자를 표기할 때 대소 문자를 원하는 대로 변경.
• 대소 문자 또는 전각 문자

  <style>    
  /* Do it! 영문자의 대소문자 변환하기 */
  .capitalize {
    text-transform: capitalize; /* 각 단어의 첫 글자를 대문자로 변환 */
  }
  .uppercase {
    text-transform: uppercase; /* 모든 글자를 대문자로 변환 */
  }
  .lowercase {
    text-transform: lowercase; /* 모든 글자를 소문자로 변환 */
  }
  .full-width {
    text-transform: full-width; /* 영문자를 전각 문자로 변환 */
  }
  </style>

• 전각 문자? : 가로 세로 비율이 1:1 인 글자. 반각 문자는 가로, 세로 비율이 1:2 인 글자.

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

• letter-spacing : 글자와 글자 사이의 간격; 자간 조절.
• word-spacing : 단어와 단어 사이의 간격 조절.
• 주로 자간 조절을 함.
• px, em, % 단위

    <style>  
      p {
        font-size:80px;
      }
      /* Do it! 글자 간격 조절하기 */
     .spacing1 {
        letter-spacing: 0.2em; /* 글자 사이를 0.2em만큼 벌리기 */
      }
      .spacing2 {
        letter-spacing: 0.5em; /* 글자 사이를 0.5em만큼 벌리기 */
      }
    </style>

목록 스타일

• 메뉴 항목은 목록과 링크로 결합. 사이트 메뉴.

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

• 목록 항목 앞에 여러 모양이나 번호 스타일 지정.

종류	설명	예시
disc	속을 채운 원	●
circle	빈 원	○
square	안을 채운 사각형	■
decimal	1부터 시작하는 10진수	1,2,3,….
decima-leading-zero	두자리수로 표시되고 01로 시작하는 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	스타일 없음

이미지 스타일 : list-style-image

• 불릿을 이미지로 바꾼다.
• 들어갈 이미지가 불릿 크기 만큼 작아야 한다.
• 아이콘 폰트로 적용하는 방법을 많이 사용한다.

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

  <style>
    ul {
      list-style-image: url('images/dot.png'); /* 불릿 이미지 지정 */
    }
  </style>

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

• inside 를 지정하면 실제 내용이 시작되는 위치보다 좀 더 안으로 들여써진 효과가 나옴.
• 기본값은 outside.

<!-- 기본형 -->
list-style-position: inside | outside;

<!-- 목록 들여쓰기 -->
<style>
  .inside {
    list-style-position: inside
  }
</style>

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

• 지금까지 모든 속성을 한꺼번에 표시 처리.

/* lowser-alpha 와 inside 속성 적용 */
ol {
    list-style: lower-alpha inside;
}

표 스타일

• 표의 크기, 테두리, 셀 테두리, 여러 여백 등등 표 스타일 지정.

표 제목 위치 지정 : caption-side

• caption 태그로 표 제목 표시.
• 기본값은 top 이다. 표 위쪽에 표시한다.

/* 기본형 */
caption-side: top | bottom

표 테두리 : border

• 테두리 표시는 border 속성을 사용함.
• 표에서도 테두리 표시는 같음.
• 추후 박스 모델에서 좀 더 다뤄질 예정.

/* 표와 셀에 테두리 그리기 */
table {
    caption-side: bottom;  /* 표 캡션 위치 */
    border:1px solid black;  /* 표 테두리는 검은 색 실선으로 */
}
td, th {
    border:1px dotted black;  /* 셀 테두리는 검은 색 점선으로 */
    padding:10px;  /* 셀 테두리와 내용 사이의 여백 */
    text-align:center;  /* 셀 내용 가운데 정렬 */
}

셀 사이 여백 지정 : border-spacing

• 테두리를 따로 지정하면 셀 사이에 여백이 조금 생기는데, 이 여백을 조절함.

/* 기본형 */
border-spacing: <수평 거리> <수직 거리>

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

• table 태그와 td 태그에 border 속성을 설정하면 두 줄로 표시됨.
• 두 줄로 둘 것인지, 합쳐서 하나로 보일 것인지 결정하는 속성임.
• table 태그 속성으로 적용함. collapse 혹은 separate(기본값).

border-collapse: collapse;  /* 셀과 표의 테두리를 하나로 합침 */

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 텍스트 꾸미는 걸 잘 하면 재밌는 효과가 많을 듯 하다. 이런 것들을 잘 꾸며서 만든 라이브러리도 있겠지.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

---

🤟소감 3줄 요약

• 222 페이지 제목에 오탈자 있음. 최소선 → 취소선이 맞는 듯.
• 요즘 막연하게 느껴지던 CSS 가 눈에 보이기 시작함. ㅋㅋ